28:null 29:["$","title",null,{"children":"Flow map of Europe | linard-y | Observable"}] 2f:T1457,map = { var svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); var { nodes, links } = sankey(graph); var defs = svg.append("defs"); var arrowId = DOM.uid("arrow"); var gradientIds = links.map(() => DOM.uid("gradient")); defs .append("marker") .attr("id", arrowId.id) .attr("markerHeight", 8) .attr("markerWidth", 8) .attr("refX", 1) .attr("refY", 1.5) .attr("orient", "auto") .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" ) .attr("transform", "rotate(0)"); 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") .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") .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") .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") .selectAll("path") .data(countryBorders) .join("path") .attr("d", path) .attr("fill", "none") // #F8F8F8 .attr("stroke", "grey") // #CDCDCD .attr("stroke-width", 0.3); // flows svg .append("g") .selectAll("path") .data(links) .join("path") .each((d) => { if (!d.target.height) d.target.x0 = d.target.x0 - d.width; }) .attr("d", sankeyLinkHorizontal()) .attr("fill", "none") .attr("stroke", (d, i) => (!d.source.depth ? gradientIds[i] : "#72bb6f")) .attr("stroke-width", (d) => (d.width * self.innerWidth) / 500) // 2 .attr("marker-end", (d) => { if (showArrowTips) { return !d.target.height ? arrowId : undefined; } }); // fills in gaps left by elements: svg .append("g") .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) { svg .append("g") .selectAll("text") .data(mergeData) .join("text") .attr("x", (d) => path.centroid(d)[0] + labelOffsetX) .attr("y", (d) => path.centroid(d)[1]) .text((d) => (isNaN(d.value) ? "" : locale.format(",.0f")(d.value) + "")) .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); // % 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") .text(mapTitle) .attr("alignment-baseline", "hanging") .attr("x", 15) .attr("y", 15) .style("font-size", 19) .style("font-weight", "bold"); //title svg .append("text") .text(subtitle) .attr("alignment-baseline", "hanging") .attr("x", 15) .attr("y", 40) .style("font-size", 16); // source svg .append("text") .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(); }30: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 }; }31:[{"id":"f8580e5c8994c3dc9853cade00f5669d2b7343aff36558c729301c9b676593dd31036a044744304fdff784d674482f08d57de1f5ea0ae72a8be7ba29e75de58a","href":"https://static.observableusercontent.com/files/f8580e5c8994c3dc9853cade00f5669d2b7343aff36558c729301c9b676593dd31036a044744304fdff784d674482f08d57de1f5ea0ae72a8be7ba29e75de58a","name":"data_full@2.csv","type":"text/csv","lastModified":1708628105026.806,"size":492724}] 2c:{"id":"6e9af49066e84ec1","slug":null,"title":"Flow map of Europe","thumbnail":"e7279a2016f6d8ea05ee7dccf9c4301538685060ab3b8c48c7dae05fa7d5a253","access_level":"public","create_time":"$D2024-02-22T18:55:05.026Z","update_time":"$D2026-06-17T14:12:27.990Z","view_time":null,"first_public_time":"$D2024-02-22T18:55:05.026Z","fork":{"id":"022d80b256f27b85","slug":null,"title":"Flow map of Europe","owner":{"id":"e111159209956389","login":"scristian","name":"scristian"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":2632,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null}],"members":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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 [...new Set(geometries.map((f) => f.properties.id))],\n {\n label: \"Exporter\",\n value: \"RO\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"viewof imp = yamultiselect(\n [\n ...new Set(\n [...eurostatData]\n .filter((d) => exporter !== d.id && d.value)\n .map((d) => d.id)\n )\n ],\n {\n value: eurostatData\n // .filter((d) => EU_countries.includes(d.partner_country_ger)) // select only EU Countries\n .filter((d) => exporter !== d.id && d.value) // omit exporter and make sure importer has data\n .map((d) => d.id) // get partners\n .slice(0, 8), // filter top 10\n // value: [\n // \"Deutschland\",\n // \"Italien\",\n // \"Schweiz\",\n // \"Frankreich\",\n // \"Ungarn\",\n // \"Polen\",\n // \"Slowakei\",\n // \"Tschechien\",\n // \"Slowenien\",\n // \"Rumänien\"\n // ],\n label: \"Importer(s)\",\n width: self.innerWidth / 2\n }\n)","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":936,"value":"$2f","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 = \"International trade\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2528,"value":"subtitle = \"(In thousand euro, 2022)\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"md`---\n\n## Appendix`","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":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":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2258,"value":"### Helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":959,"value":"strokeWidth = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)])\n .range([0, 8])","pinned":false,"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":true,"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 == 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":true,"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":true,"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(\"+proj=laea +lon_0=13 +lat_0=47 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs\")\n .fitExtent([[40, 40], [width - 40, height - 40]], poi)","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 == d.id)\n .filter((d) => importer.has(d.id))\n .map((d) => ({\n source: exporter,\n target: d.id,\n value: d.value\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2226,"value":"https://ec.europa.eu/eurostat/web/query-builder/tool","pinned":false,"hidden":false,"mode":"md"},{"id":2480,"value":"Eurostat Statistics API call","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}&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}&lang=en&`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2221,"value":"eurostatData = indexStats(rawEurostatAPIData)","pinned":false,"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":1452,"value":"total = d3.sum(temp, (d) => d[\"export_value\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2315,"value":"temp = eurostatData\n .filter((d) => exporter == d.id)\n .filter((d) => importer.has(d.id))","pinned":false,"hidden":false,"mode":"ojs"},{"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":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"