31:T1ef0,map = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const { nodes, links } = sankey(graph); const defs = svg.append("defs"); const arrowId = DOM.uid("arrow"); const arrowId2 = DOM.uid("arrow"); const gradientIds = links.map(() => DOM.uid("gradient")); //marker defs .append("marker") .attr("id", arrowId.id) .attr("markerHeight", 7) .attr("markerWidth", 7) .attr("refX", 1) .attr("refY", 1.5) .attr("orient", "auto") // Automatically orient the arrow in the direction of the line .append("path") .attr("fill", "#72bb6f") .attr( "d", "M0,0 q0,1,0.5,1.5 q-0.5,0.5,-0.5,1.5 q0.75,-0.75,2,-1.5 q-1.25,-0.75,-2,-1.5Z" ); //outline marker defs .append("marker") .attr("id", arrowId2.id) .attr("markerHeight", 7) .attr("markerWidth", 7) .attr("refX", 1) .attr("refY", 1.5) .attr("orient", "auto") // Automatically orient the arrow in the direction of the line .append("path") .attr("fill", "#ffffff") .attr( "d", "M0,0 q0,1,0.5,1.5 q-0.5,0.5,-0.5,1.5 q0.75,-0.75,2,-1.5 q-1.25,-0.75,-2,-1.5Z" ); //flow gradient defs .selectAll("linearGradient") .data(links) .join("linearGradient") .attr("id", (_, i) => gradientIds[i].id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", (d) => d.source.x1) .attr("x2", (d) => d.target.x0) .attr("y1", (d) => d.y0) .attr("y2", (d) => d.y1) .call((g) => g.append("stop").attr("offset", "5%").attr("stop-color", "#c7e3c6") ) .call((g) => g.append("stop").attr("offset", "50%").attr("stop-color", "#72bb6f") ); // graticule svg .append("g") .attr("class", "graticule") .datum(d3.geoGraticule().step([10, 10])) .append("path") .attr("d", path) .attr("stroke", "none") .attr("stroke-width", 0) .attr("fill", "#fcfdff"); // regions svg .append("g") .attr("class", "regions") .selectAll("path") .data(geometries) .join("path") .attr("d", path) .attr("fill", "#f4f4f4") // #F8F8F8 .attr("stroke", "none"); // #CDCDCD //.attr("stroke-width", 0.5); // overlay for exporters and importers svg .append("g") .attr("class", "importers-overlay") .selectAll("path") .data(poi.features) .join("path") .attr("d", path) .attr("fill", (d) => exporters.has(d.properties.id) ? "#c7e3c6" : "#bbd7ee" ) .attr( "stroke", (d) => "none" //exporters.has(d.properties.id) ? "#72bb6f" : "#559bd5" ); // national borders svg .append("g") .attr("class", "borders") .selectAll("path") .data(countryBorders) .join("path") .attr("d", path) .attr("fill", "none") // #F8F8F8 .attr("stroke", "grey") // #CDCDCD .attr("stroke-width", 0.3); // Pre-process links data by applying `.each()` modifications links.forEach((d) => { if (!d.target.height) d.target.x0 = d.target.x0 - d.width; }); // Group to contain each path pair (outline and main) const flowsGroup = svg.append("g").attr("class", "flows-group"); // Loop through each link and draw the outline and main path in sequence links.forEach((d, i) => { // Outline path if (showArrowOutlines) { flowsGroup .append("path") .attr("d", sankeyLinkHorizontal()(d)) .attr("fill", "none") .attr("stroke", "#ffffff") // Outline color .attr("stroke-width", (d.width * self.innerWidth) / 500 + 1.5) // Slightly larger for halo effect .attr("marker-end", () => { if (showArrowTips) { return !d.target.height ? arrowId2 : undefined; } }); } // Main path flowsGroup .append("path") .attr("d", sankeyLinkHorizontal()(d)) .attr("fill", "none") .attr("stroke", !d.source.depth ? gradientIds[i] : "#72bb6f") // Main color .attr("stroke-width", (d.width * self.innerWidth) / 500) // Original width .attr("marker-end", () => { if (showArrowTips) { return !d.target.height ? arrowId : undefined; } }); }); // fills in gaps left by elements: svg .append("g") .attr("class", "fill-in-gaps") .selectAll("rect") .data(nodes) .join("rect") .filter((d) => d.depth && d.height) .attr("x", (d) => d.x0 - 0.5) .attr("y", (d) => d.y0) .attr("width", 1) .attr("height", (d) => d.y1 - d.y0) .attr("fill", "#72bb6f"); // totals labels if (showLabels) { // Calculate the x-coordinate of the midpoint of the map for reference const mapMidpointX = svg.node().getBoundingClientRect().width / 2; svg .append("g") .attr("class", "labels") .selectAll("text") .data(mergeData) .join("text") .attr("x", (d) => { const [x, y] = path.centroid(d); // Get centroid coordinates const direction = x - mapMidpointX; // Calculate direction based on map midpoint // Adjust label position based on direction return direction > 0 ? x + labelOffsetX // If centroid is to the right of midpoint, offset to the right : x - labelOffsetX; // If centroid is to the left of midpoint, offset to the left }) .attr("y", (d) => path.centroid(d)[1]) .attr("text-anchor", (d) => { const [x, y] = path.centroid(d); const direction = x - mapMidpointX; return direction > 0 ? "start" : "end"; // "start" for right, "end" for left }) .text((d) => { if (isNaN(d.value)) return ""; let trueValue = d.value * 1000; let formattedValue; if (trueValue >= 1e9) { formattedValue = locale.format(",.0f")(trueValue / 1e9) + " billion"; } else if (trueValue >= 1e6) { formattedValue = locale.format(",.0f")(trueValue / 1e6) + " million"; } else { formattedValue = locale.format(",.0f")(trueValue / 1e3) + " thousand"; } return "€" + formattedValue; }) .attr("fill", "black") .attr("font-size", self.innerWidth / 80) .attr("stroke", "white") .attr("stroke-width", self.innerWidth / 500) .attr("paint-order", "stroke fill") .attr("opacity", width > 600 ? 1 : 0); // % labels // svg // .append("g") // .selectAll("text") // .data(mergeData) // .join("text") // .attr("x", (d) => path.centroid(d)[0] + labelOffsetX) // .attr("y", (d) => path.centroid(d)[1]) // .attr("dy", "1.3em") // .text((d) => // isNaN(d.value) // ? "" // : locale.format(",.1f")(Math.round(d.value * 1000) / 10) + "%" // ) // .attr("fill", "black") // // .attr("font-family", "sans-serif") // .attr("font-size", self.innerWidth / 80) // .attr("text-anchor", "start") // .attr("stroke", "white") // .attr("stroke-width", self.innerWidth / 500) // .attr("paint-order", "stroke fill") // .attr("opacity", width > 600 ? 1 : 0); } //title svg .append("text") .attr("class", "title") .text(mapTitle) .attr("alignment-baseline", "hanging") .attr("x", 15) .attr("y", 15) .style("font-size", 22) .style("font-weight", "bold"); //title svg .append("text") .attr("class", "subtitle") .text(subtitle) .attr("alignment-baseline", "hanging") .attr("x", 15) .attr("y", 40) .style("font-size", 18); // source svg .append("text") .attr("class", "source") .attr("x", width - 10) .attr("y", height - 10) .attr("text-anchor", "end") .style("font-size", 12) .html( "Source: Eurostat (dataset code: ext_tec10)" ); return svg.node(); }32:T44b,graph = { // filter to importers let paths = data .filter((d) => importers.has(d.target)) .map((d) => Object.assign({}, d)); // add stops paths.forEach((d) => (d.stops = [])); // paths.forEach(d => { if (centroid(d.target)[0] > width / 2) (d.stops = [...d.stops, "RUS"]) }) // define nodes const nodes = Array.from( new Set(paths.flatMap((d) => [d.source, ...d.stops, d.target])), (iso) => { const [x, y] = centroid(iso); return { id: iso, x, y }; } ); // define links let links = [], linkValues = new Map(); for (let path of paths) { const stops = [path.source, ...path.stops, path.target]; let pairs = d3 .pairs(stops) .map(([source, target]) => ({ source, target, value: path.value })); for (let pair of pairs) { const key = `${pair.source} - ${pair.target}`; const value = linkValues.get(key) || 0; if (!value) links.push(pair); linkValues.set(key, value + pair.value); } } links.forEach((d) => (d.value = linkValues.get(`${d.source} - ${d.target}`))); return { nodes, links }; }33:[{"id":"f8580e5c8994c3dc9853cade00f5669d2b7343aff36558c729301c9b676593dd31036a044744304fdff784d674482f08d57de1f5ea0ae72a8be7ba29e75de58a","href":"https://static.observableusercontent.com/files/f8580e5c8994c3dc9853cade00f5669d2b7343aff36558c729301c9b676593dd31036a044744304fdff784d674482f08d57de1f5ea0ae72a8be7ba29e75de58a","name":"data_full@2.csv","type":"text/csv","lastModified":1707231052520.007,"size":492724},{"id":"a78c0497b49c6433787902625b27e0c2ccf346c528f0ab5663beff475f919988efe0b4249b0e81e61401b87fc03c983e9d4872d36e9bf61a07d9ff4503e9f186","href":"https://static.observableusercontent.com/files/a78c0497b49c6433787902625b27e0c2ccf346c528f0ab5663beff475f919988efe0b4249b0e81e61401b87fc03c983e9d4872d36e9bf61a07d9ff4503e9f186","name":"world.json","type":"application/json","lastModified":1707231052520.007,"size":738365}] 2f:{"title":"Flow map of Europe","cells":[{"id":1026,"value":"\n # Flow map of Europe\n","pinned":false,"hidden":false,"mode":"md"},{"id":2036,"value":"viewof exporter = Inputs.select(\n geometries.map((f) => ({\n value: f.properties.id,\n label: f.properties.na\n })),\n {\n label: \"Exporter\",\n format: (option) => option.label, // Display `label` in the dropdown\n value: { value: \"AT\", label: \"Austria\" } // Set initial selection (adjust as needed)\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"viewof imp = yamultiselect(importersMultiSelectOptions, {\n valueof: (d) => d.id,\n keyof: (d) => d.name,\n value: eurostatData\n .filter((d) => exporter.value !== d.id && d.value) // omit exporter and make sure importer has data\n .map((d) => d.id) // get partners\n .slice(0, topImporters), // filter top X\n label: \"Importer(s)\",\n width: self.innerWidth / 2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2819,"value":"viewof topImporters = Inputs.range([0, 20], {\n label: html`Top importers`,\n step: 1,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":936,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2348,"value":"viewof showLabels = Inputs.toggle({ label: \"Show labels\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2389,"value":"viewof showArrowTips = Inputs.toggle({ label: \"Show arrow tips\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2693,"value":"viewof showArrowOutlines = Inputs.toggle({\n label: \"Show arrow outlines\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2541,"value":"viewof nutsLevel = Inputs.radio([0], {\n label: \"Nuts level\",\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"height = width * 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":2325,"value":"labelOffsetX = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":2524,"value":"mapTitle = `Exports from ${exporter.label}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2528,"value":"subtitle = `Top ${topImporters} European importers of goods from ${exporter.label} in 2022`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1194,"value":"importer = new Set(imp)","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"// identify top import destinations\nimporters = new Set(d3.rollups(data, v => d3.sum(v, d => d.value), d => d.target).filter(([,v]) => v > 0.001).map(([k,]) => k));","pinned":false,"hidden":false,"mode":"ojs"},{"id":1280,"value":"exporters = new Set(data.map(d => d.source))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2786,"value":"importersMultiSelectOptions = [\n ...new Set(\n [...eurostatData]\n .filter((d) => exporter.value !== d.id && d.value)\n .map((d) => {\n return { id: d.id, name: d.name };\n })\n )\n].slice(0, topImporters)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2273,"value":"## Graph","pinned":false,"hidden":false,"mode":"md"},{"id":2450,"value":"Create the sankey nodes and links to be used with d3.sankey","pinned":false,"hidden":false,"mode":"md"},{"id":951,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":2258,"value":"## Helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":959,"value":"strokeWidth = d3\n .scaleLinear()\n .domain([0, d3.max(data, (d) => d.value)])\n .range([2, 10])","pinned":true,"hidden":false,"mode":"ojs"},{"id":957,"value":"function computeNodeValues({nodes}) {\n for (const node of nodes) {\n node.value = Math.max(d3.sum(node.sourceLinks, d => d.value), d3.sum(node.targetLinks, d => d.value)) \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"function computeNodeBreadths({ nodes }) {\n for (const node of nodes) {\n const height = strokeWidth(node.value);\n node.x0 = node.x1 = node.x;\n node.y0 = node.y - height / 2;\n node.y1 = node.y0 + height;\n for (const link of node.sourceLinks) {\n link.width = strokeWidth(link.value);\n }\n }\n reorderLinks(nodes);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":965,"value":"function reorderLinks(nodes) {\n for (const {sourceLinks, targetLinks} of nodes) {\n sourceLinks.sort(ascendingTargetY);\n targetLinks.sort(ascendingSourceY);\n } \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"ascendingTargetY = (a, b) => a.target.y - b.target.y","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"ascendingSourceY = (a, b) => a.source.y - b.source.y","pinned":false,"hidden":false,"mode":"ojs"},{"id":2405,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":2248,"value":"## Geometries & Projection","pinned":false,"hidden":false,"mode":"md"},{"id":2552,"value":"geometries = {\n if (nutsLevel == 0) return nuts0;\n if (nutsLevel == 1) return nuts1;\n if (nutsLevel == 2) return nuts2;\n if (nutsLevel == 3) return nuts3;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1516,"value":"mergeData = poi.features.map((d) => {\n // merge poi with statistical data\n var data2 = data.find((e) => e.target === d.properties.id);\n return { ...d, ...data2 };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2571,"value":"Highlighted region geometries","pinned":false,"hidden":false,"mode":"md"},{"id":973,"value":"poi = ({\n // get highlighted importer regions\n type: \"FeatureCollection\",\n features: allNuts.filter(\n (d) => exporter.value == d.properties.id || importers.has(d.properties.id)\n )\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2573,"value":"### nuts2json","pinned":false,"hidden":false,"mode":"md"},{"id":2369,"value":"nuts2Json = d3.json(\n \"https://raw.githubusercontent.com/eurostat/Nuts2json/master/pub/v2/2021/4326/20M/all.json\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2374,"value":"nuts0 = topojson.feature(nuts2Json, nuts2Json.objects.nutsrg0).features","pinned":false,"hidden":false,"mode":"ojs"},{"id":2371,"value":"nuts1 = topojson.feature(nuts2Json, nuts2Json.objects.nutsrg1).features","pinned":false,"hidden":false,"mode":"ojs"},{"id":2376,"value":"nuts2 = topojson.feature(nuts2Json, nuts2Json.objects.nutsrg2).features","pinned":false,"hidden":false,"mode":"ojs"},{"id":2556,"value":"nuts3 = topojson.feature(nuts2Json, nuts2Json.objects.nutsrg3).features","pinned":false,"hidden":false,"mode":"ojs"},{"id":2564,"value":"allNuts = [...nuts0, ...nuts1, ...nuts2, ...nuts3]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2582,"value":"countryBorders = topojson.feature(nuts2Json, nuts2Json.objects.cntbn).features","pinned":false,"hidden":false,"mode":"ojs"},{"id":2580,"value":"### D3 projection","pinned":false,"hidden":false,"mode":"md"},{"id":975,"value":"//projection = proj4d3(\"+proj=lcc +lat_1=10 +lat_2=0 +lat_0=20 +lon_0=9 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs\")\n// .fitExtent([[300, -100], [width, height]], poi)\nprojection = proj4d3(\n \"+proj=laea +lon_0=13 +lat_0=47 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs\"\n).fitExtent(\n [\n [20, 20],\n [width - 20, height - 20]\n ],\n poi\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"function centroid(id) {\n const region = allNuts.find((f) => f.properties.id === id);\n return path.centroid(region);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2403,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":2219,"value":"## Statistical data","pinned":false,"hidden":false,"mode":"md"},{"id":947,"value":"// our parsed eurostat data, ready to be sankeyed\ndata = eurostatData\n // .filter((d) => exporter.value == d.id)\n .filter((d) => importer.has(d.id))\n .map((d) => ({\n source: exporter.value,\n target: d.id,\n value: d.value\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2480,"value":"Eurostat Statistics API call using https://ec.europa.eu/eurostat/web/query-builder/tool","pinned":false,"hidden":false,"mode":"md"},{"id":2607,"value":"rawEurostatAPIData = d3.json(\n // total trade\n `https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/ext_tec10?format=json&lang=en&unit=THS_EUR&sizeclas=TOTAL&stk_flow=EXP&partner=${exporter.value}&time=2021&geoLevel=country`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2231,"value":"rawEurostatAPIData2 = d3.json(\n // inland waterways\n `https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/iww_go_atygofl?format=JSON&time=2022&unit=THS_T&nst07=TOTAL&c_load=${exporter.value}&lang=en&`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2221,"value":"eurostatData = indexStats(rawEurostatAPIData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2224,"value":"indexStats = function (data) {\n const arr = Object.entries(data.dimension.geo.category.index)\n // define our object structure\n .map(([key, val]) => ({\n id: key,\n value: data.value[val] || null,\n name: data.dimension.geo.category.label[key]\n }));\n //sort the array in ascending order by 'value'\n return arr.sort((a, b) =>\n a.value > b.value ? -1 : b.value > a.value ? 1 : 0\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2474,"value":"euCodes = [\n \"AT\",\n \"BE\",\n \"BG\",\n \"CY\",\n \"CZ\",\n \"DE\",\n \"DK\",\n \"EE\",\n \"EL\",\n \"ES\",\n \"FI\",\n \"FR\",\n \"HR\",\n \"HU\",\n \"IE\",\n \"IT\",\n \"LT\",\n \"LU\",\n \"LV\",\n \"MT\",\n \"NL\",\n \"PL\",\n \"PT\",\n \"RO\",\n \"SE\",\n \"SI\",\n \"SK\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2286,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":1723,"value":"csv = {\n let data = await FileAttachment(\"data_full@2.csv\").csv({ typed: true });\n\n data.filter((d) => isNaN(d.partner_country_ger));\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2322,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":2313,"value":"Get total","pinned":false,"hidden":false,"mode":"md"},{"id":2216,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":1547,"value":"locale = d3.formatLocale({\n decimal: \".\",\n thousands: \" \",\n grouping: [3]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"//d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"import { proj4d3 } from \"@fil/proj4js-d3\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1139,"value":"import {yamultiselect} from '@saneef/yet-another-multi-select'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2514,"value":"id = (d) => d.id // used in sankey import","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"// import the inner workings of d3-sankey\nimport { sankey, sankeyLinkHorizontal } with { id, computeNodeValues, computeNodeBreadths } from \"@bayre/deconstructed-sankey-diagram\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1875,"value":"geo = require(\"geotoolbox@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1031,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}