30:Tf54,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", "white") .attr("stroke-width", 1.75) .attr("fill", "#e6f3ff"); // countries svg.append("g") .selectAll("path") .data(countries) .join("path") .attr("d", path) .attr("fill", "white") // #F8F8F8 .attr("stroke", "black") // #CDCDCD .attr("stroke-width", 1); // 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.a3) ? "#c7e3c6" : "#bbd7ee") .attr("stroke", d => exporters.has(d.properties.a3) ? "#72bb6f" : "#559bd5"); // 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 => !d.target.height ? arrowId : undefined) 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") svg.append("g") .selectAll("text") .data(mergeData) .join("text") .attr("x", d => path.centroid(d)[0]) .attr("y", d => path.centroid(d)[1]) .text(d => isNaN(d.value) ? "" : locale.format(",.0f")(d.total) + " Mrd. € \n") .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); svg.append("g") .selectAll("text") .data(mergeData) .join("text") .attr("x", d => path.centroid(d)[0]) .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); return svg.node(); }31:T40d,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 } }32:[{"id":"f8580e5c8994c3dc9853cade00f5669d2b7343aff36558c729301c9b676593dd31036a044744304fdff784d674482f08d57de1f5ea0ae72a8be7ba29e75de58a","href":"https://static.observableusercontent.com/files/f8580e5c8994c3dc9853cade00f5669d2b7343aff36558c729301c9b676593dd31036a044744304fdff784d674482f08d57de1f5ea0ae72a8be7ba29e75de58a","name":"data_full@2.csv","type":"text/csv","lastModified":1684854102517.938,"size":492724},{"id":"a78c0497b49c6433787902625b27e0c2ccf346c528f0ab5663beff475f919988efe0b4249b0e81e61401b87fc03c983e9d4872d36e9bf61a07d9ff4503e9f186","href":"https://static.observableusercontent.com/files/a78c0497b49c6433787902625b27e0c2ccf346c528f0ab5663beff475f919988efe0b4249b0e81e61401b87fc03c983e9d4872d36e9bf61a07d9ff4503e9f186","name":"world.json","type":"application/json","lastModified":1683902581129.049,"size":738365},{"id":"d2e1347a4b9eb2949d685c2dcfb1caf5073e537d21c0a87ea895ba23f087ad6fe2a4f110c1468ae4ce530bd0f0a65d93f717cf612b21570e0920b575e0e60f47","href":"https://static.observableusercontent.com/files/d2e1347a4b9eb2949d685c2dcfb1caf5073e537d21c0a87ea895ba23f087ad6fe2a4f110c1468ae4ce530bd0f0a65d93f717cf612b21570e0920b575e0e60f47","name":"data_AUT.csv","type":"text/csv","lastModified":1684824201185.711,"size":3781}] 2e:{"title":"Spatial Sankey","cells":[{"id":1026,"value":"\n # Spatial Sankey\n ## TPEU-Webgrafik\n","pinned":false,"hidden":false,"mode":"md"},{"id":2121,"value":"\nAktuell: Je ausgewähltem Exporteur (EU-Staaten) werden die Top 8 Importeure innerhalb der EU ausgewählt. Unter Importeure können dann auch andere Länder ausgewählt werden (auch Staaten außerhalb der EU), allerdings nur jene deren Anteil an den Exporten des ausgewählten Exporters über 0,5% beträgt.\n","pinned":false,"hidden":false,"mode":"md"},{"id":2129,"value":"\nAndenken: Multi-Step Sankey zur Darstellung von Lieferketten.\n","pinned":false,"hidden":false,"mode":"md"},{"id":2237,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2205,"value":"title = htl.html`\n

Die wichtigsten Handelspartner von EU-Ländern

Handelsvolumen in Mrd. €

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2036,"value":"viewof expN = Inputs.select([... new Set(exporter_list)], {label: \"Exporteur\", value: \"Österreich\", width: self.innerWidth /2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"viewof imp = yamultiselect([... new Set(csv_imp_names.map(d => d.partner_country_ger))], {\n value: csv\n .filter(d => EU_countries.includes(d.partner_country_ger)) // select only EU Countries\n .filter(d => exp.includes(d.reporter_country_ger)) // select selected exporter\n .map(d => d.partner_country_ger) // 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: \"Importeur\",\n width: self.innerWidth /2,\n placeholder: \"Suche\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":936,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2215,"value":"source = htl.html`\n

Q: Comtrade. Je ausgewähltem Exporteur (EU-Länder) werden die Top-8-Importeure innerhalb der EU ausgewählt. Unter Importeure können dann auch andere Länder ausgewählt werden (auch Länder außerhalb der EU), allerdings nur jene deren Anteil an den Exporten des ausgewählten Exporteurs über 0,5% beträgt.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2076,"value":"EU_countries = [\n \"Belgien\",\n \"Bulgarien\",\n \"Dänemark\",\n \"Deutschland\",\n \"Estland\",\n \"Finnland\",\n \"Frankreich\",\n \"Griechenland\",\n \"Irland\",\n \"Italien\",\n \"Kroatien\",\n \"Lettland\",\n \"Litauen\",\n \"Luxemburg\",\n \"Malta\",\n \"Niederlande\",\n \"Österreich\",\n \"Polen\",\n \"Portugal\",\n \"Rumänien\",\n \"Schweden\",\n \"Slowakei\",\n \"Slowenien\",\n \"Spanien\",\n \"Tschechien\",\n \"Ungarn\",\n \"Zypern\"\n ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2070,"value":"exporter_list = csv\n .filter(\n d => EU_countries.includes(d.reporter_country_ger)\n )\n .map(d => d.reporter_country_ger)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2051,"value":"exp = [expN]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1516,"value":"mergeData = poi.features.map(d => {\n var data2 = data.find(e => e.target === d.properties.a3);\n return { ...d, ...data2 };\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":973,"value":"poi = ({ \n type: \"FeatureCollection\", \n features: countries.filter(d => exporters.has(d.properties.a3) || importers.has(d.properties.a3))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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":939,"value":"height = width * 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":1993,"value":"csv_imp_names = csvInput\n .filter(d => isNaN(d.partner_country_ger))\n .filter(d => exp.includes(d.reporter_country_ger))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1775,"value":"csv = csvInput\n .filter(d => isNaN(d.partner_country_ger))\n // .filter(d => d.reporter_country_ger == \"Österreich\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1723,"value":"csvInput = FileAttachment(\"data_full@2.csv\").csv({typed: true})","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":945,"value":"exporter = new Set(exp)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1280,"value":"exporters = new Set(data.map(d => d.source))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1452,"value":"total = d3.sum(temp, d => d[\"export_value\"]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1449,"value":"temp = csv\n .filter(d => exporter.has(d.reporter_country_ger))\n .filter(d => importer.has(d.partner_country_ger))","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"data = csv\n .filter(d => exporter.has(d.reporter_country_ger))\n .filter(d => importer.has(d.partner_country_ger))\n .map(d => ({ source: d.reporter_iso_3, target: d.partner_iso_3, value: d[\"export_value_percent\"], total: d[\"export_value\"] }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"id = d => d.id","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":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":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":1667,"value":"countries = {\n const world = await FileAttachment(\"world.json\").json();\n const countries = topojson.feature(world, world.objects.countries).features;\n \n var temp = geo.dissolve(\n countries.filter(d => dissolveList.includes(d.properties.a3))\n )\n .features\n .filter((_, index) => index === 0 || index === 12 || index === 14)\n // .map(d => ({...d, a3: d.properties.id }))\n\n \n temp = geo.union(temp, { id: \"a3\" })\n .features\n\n temp\n .forEach(d => {\n d.properties.a3 = d.properties.id\n })\n\n temp = temp.concat(countries.filter(d => !(dissolveList.includes(d.properties.a3))))\n\n return temp\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2011,"value":"dissolveList = [\"FRA\", \"NLD\"] // cjoose countries to dissolve overeseas areas","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"function centroid(iso) {\n const country = countries.find(f => f.properties.a3 === iso);\n return path.centroid(country);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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":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":1883,"value":"world = await FileAttachment(\"world.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1980,"value":"viewof expMulti = yamultiselect([... new Set(csv.map(d => d.reporter_country_ger))], {\n value: [\n \"Österreich\"\n ],\n label: \"Auswahl Exporter (beta)\",\n width: self.innerWidth/2,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1031,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}