2b:null 2c:["$","title",null,{"children":"Flow map of Europe | scristian | Observable"}] 31: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(); }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":1708351751093.213,"size":492724}] 2f:{"id":"022d80b256f27b85","slug":null,"title":"Flow map of Europe","thumbnail":"0160d8d00181412ad88182bc0998664381a604099ed5f8a30648d8d63d8738d4","access_level":"public","create_time":"$D2024-02-19T14:09:11.093Z","update_time":"$D2024-02-19T14:12:23.552Z","view_time":null,"first_public_time":"$D2024-02-19T14:10:43.165Z","has_unpublished_edits":null,"fork":{"id":"03aeb39c5258de94","slug":"flow-map-of-europe","title":"Flow map of Europe","owner":{"id":"25fee90bb47fd709","login":"joewdavies","name":"Joe Davies"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e111159209956389","login":"scristian","name":"scristian","avatar_url":"https://avatars-next.observableusercontent.com/017d5cca704bd810c6547ad9532b7b0c6b5b0954266b3ad8da04432adb5770d2","tier":"starter_2024"},"version":2626,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e8d24daf362f3bb6","login":"cristian-spoiala","name":"Cristian Spoiala","avatar_url":"https://avatars-next.observableusercontent.com/a1ae019f9fb8aa0dd923bd884e0a4dbff6f8ce4038911953785f3672ce237bb7","tier":null}],"members":[{"type":"individual","id":"e8d24daf362f3bb6","login":"cristian-spoiala","name":"Cristian Spoiala","avatar_url":"https://avatars-next.observableusercontent.com/a1ae019f9fb8aa0dd923bd884e0a4dbff6f8ce4038911953785f3672ce237bb7","tier":null,"role":"editor"},{"type":"team","id":"e111159209956389","login":"scristian","name":"scristian","avatar_url":"https://avatars-next.observableusercontent.com/017d5cca704bd810c6547ad9532b7b0c6b5b0954266b3ad8da04432adb5770d2","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Flow map of Europe","cells":[{"id":1026,"value":"\n # Flow map of Europe\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2348,"value":"viewof showLabels = Inputs.toggle({ label: \"Show labels\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2389,"value":"viewof showArrowTips = Inputs.toggle({ label: \"Show arrow tips\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2541,"value":"viewof nutsLevel = Inputs.radio([0], {\n label: \"Nuts level\",\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"height = width * 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2325,"value":"labelOffsetX = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2524,"value":"mapTitle = \"International trade\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2528,"value":"subtitle = \"(In thousand euro, 2022)\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"importer = new Set(imp)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1280,"value":"exporters = new Set(data.map(d => d.source))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2273,"value":"### Graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2450,"value":"Create the sankey nodes and links to be used with d3.sankey","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":951,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2258,"value":"### Helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"ascendingTargetY = (a, b) => a.target.y - b.target.y","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"ascendingSourceY = (a, b) => a.source.y - b.source.y","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2405,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2248,"value":"### Geometries & Projection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2571,"value":"Highlighted region geometries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2573,"value":"nuts2json","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2374,"value":"nuts0 = topojson.feature(nuts2Json, nuts2Json.objects.nutsrg0).features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2371,"value":"nuts1 = topojson.feature(nuts2Json, nuts2Json.objects.nutsrg1).features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2376,"value":"nuts2 = topojson.feature(nuts2Json, nuts2Json.objects.nutsrg2).features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2556,"value":"nuts3 = topojson.feature(nuts2Json, nuts2Json.objects.nutsrg3).features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2564,"value":"allNuts = [...nuts0, ...nuts1, ...nuts2, ...nuts3]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2582,"value":"countryBorders = topojson.feature(nuts2Json, nuts2Json.objects.cntbn).features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2580,"value":"D3 projection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2403,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2322,"value":"