2b:null 2c:["$","title",null,{"children":"Flow map improvements | Matthieu Viry | Observable"}] 31:T575,legend = { const svg = d3.create("svg") .attr("width", 300); const linksLen = topLinks.length; const data = [ { size: topLinks[0].fij }, { size: topLinks[Math.round(linksLen / 3)].fij }, { size: topLinks[linksLen - 1].fij }, ]; const draw = drawFuncs[arrowStyle]; const arrowWidth = d3.scaleLinear().domain([0, topLinks[0].fij]).range([minSizeFlows, maxSizeFlow]); const linkLayer = svg.append("g") .attr('transform', `translate(0, ${arrowWidth(data[0].size)})`) const spaceBetween = 40; linkLayer.selectAll('path') .data(data) .enter() .append('path') .attr('fill', 'black') .attr('stroke', 'black') .attr('stroke-width', 1) .attr('d', (d, i) => { const s = arrowWidth(d.size); const offset = d3.sum(data.slice(0, i).map((v) => arrowWidth(v.size))) + spaceBetween * i; const path = draw( 0, offset, 120, offset + 0.001, s, 0, 0, true ); return path; }); linkLayer.selectAll('text') .data(data) .enter() .append('text') .attr('font-family', 'sans-serif') .attr('fill', 'black') .attr('x', 125) .attr('y', (d, i) => { const offset = d3.sum(data.slice(0, i).map((v) => arrowWidth(v.size))) + spaceBetween * i; return offset + arrowWidth(d.size) / 2; }) .text(d => d.size); return svg.node(); }32:T1817,// This code is derived from https://github.com/geo-social/flowmapper/ (under MIT license) function drawCurve(x0, y0, x3, y3, flowSize, sourceRadius, targetRadius, isDrawingLegend) { let arrowlen = 2.42; let arrowwidthconstant = flowSize * 1.1; if (flowSize < 10 && flowSize >= 8) { arrowlen = 2.64; arrowwidthconstant = flowSize * 1.2; } else if (flowSize < 8 && flowSize >= 6) { arrowlen = 3.08; arrowwidthconstant = flowSize * 1.4; } else if (flowSize < 6 && flowSize >= 4) { arrowlen = 4.4; arrowwidthconstant = flowSize * 2; } else if (flowSize < 4 && flowSize >= 3) { arrowlen = 6.6; arrowwidthconstant = flowSize * 3; } else if (flowSize < 3 && flowSize >= 2) { arrowlen = 8.8; arrowwidthconstant = flowSize * 4; } else if (flowSize < 2) { arrowlen = 11; arrowwidthconstant = flowSize * 5; } const ndsize0 = sourceRadius; const ndsize3 = targetRadius; const dx = Math.abs(x3 - x0); const dy = Math.abs(y3 - y0); // No line is drawn if the circle to circle distance is too small const len = Math.sqrt(dx * dx + dy * dy); if (len < (ndsize0 + ndsize3) * 1.2) { return; } let noarrow = false; if (len < (ndsize0 + ndsize3) * 1.6 && (!isDrawingLegend || isDrawingLegend == false)) { noarrow = true; } let haselbow = true; // Shorten the length so that the line only touches the node circle if (haselbow) { x0 = x0 + (x3 - x0) * ndsize0 / len; y0 = y0 + (y3 - y0) * ndsize0 / len; x3 = x3 - (x3 - x0) * ndsize3 / (len - ndsize0); y3 = y3 - (y3 - y0) * ndsize3 / (len - ndsize0); } // Four corners of a flow line let xc1 = null, yc1 = null, xc2 = null, yc2 = null; // Four points to round the head let x3elbow1 = null, y3elbow1 = null; let sign = -1; let xdelta = null, ydelta = null, xarrowdelta = null, yarrowdelta = null, xgap = null, ygap = null; let gap = flowSize * 0.05; if (y0 == y3) { // horizontal xdelta = 0; ydelta = flowSize / 2; xarrowdelta = 0; yarrowdelta = arrowwidthconstant / 1.0; xgap = 0; ygap = gap; } else if (x0 == x3) { // vertical ydelta = 0; xdelta = flowSize / 2; yarrowdelta = 0; xarrowdelta = arrowwidthconstant / 1.0; xgap = gap; ygap = 0; } else { var v = (x3 - x0) / (y0 - y3); xdelta = flowSize / 2.0 / Math.sqrt(1 + v * v); ydelta = Math.abs(xdelta * v); xarrowdelta = arrowwidthconstant / Math.sqrt(1 + v * v); yarrowdelta = Math.abs(xarrowdelta * v); xgap = gap / Math.sqrt(1 + v * v); ygap = Math.abs(xgap * v); if (v < 0) sign = 1; } x0 = (y0 > y3) ? x0 + xgap : x0 - xgap; x3 = (y0 > y3) ? x3 + xgap : x3 - xgap; y0 = (x0 > x3) ? y0 - ygap : y0 + ygap; y3 = (x0 > x3) ? y3 - ygap : y3 + ygap; const righthandrule = true; if (righthandrule) { xc1 = (y0 > y3) ? x0 + xdelta / 2 : x0 - xdelta / 2; yc1 = (x0 > x3) ? y0 - ydelta / 2 : y0 + ydelta / 2; if (noarrow) { yc2 = (x0 > x3) ? y3 - ydelta : y3 + ydelta; xc2 = (y0 > y3) ? x3 + xdelta : x3 - xdelta; } else { yc2 = (x0 > x3) ? y3 - ydelta + arrowlen * xdelta * sign : y3 + ydelta - arrowlen * xdelta * sign; xc2 = (y0 > y3) ? x3 + xdelta + arrowlen * ydelta * sign : x3 - xdelta - arrowlen * ydelta * sign; } x3elbow1 = (y0 > y3) ? x3 + xarrowdelta + arrowlen * ydelta * sign : x3 - xarrowdelta - arrowlen * ydelta * sign; y3elbow1 = (x0 > x3) ? y3 - yarrowdelta + arrowlen * xdelta * sign : y3 + yarrowdelta - arrowlen * xdelta * sign; let arcxdelta = xdelta * len / 4 / flowSize; let arcydelta = ydelta * len / 4 / flowSize; var x13rd = (y0 > y3) ? x0 + arcxdelta : x0 - arcxdelta; var y13rd = (x0 > x3) ? y0 - arcydelta : y0 + arcydelta; var x23rd = (y0 > y3) ? x0 + (x3 - x0) / 3 + arcxdelta : x0 + (x3 - x0) / 3 - arcxdelta; var y23rd = (x0 > x3) ? y0 + (y3 - y0) / 3 - arcydelta : y0 + (y3 - y0) / 3 + arcydelta; arcxdelta = arcxdelta + xdelta; arcydelta = arcydelta + ydelta; var xc13rd = (y0 > y3) ? x0 + arcxdelta : x0 - arcxdelta; var yc13rd = (x0 > x3) ? y0 - arcydelta : y0 + arcydelta; var xc23rd = (y0 > y3) ? x0 + (x3 - x0) / 3 + arcxdelta : x0 + (x3 - x0) / 3 - arcxdelta; var yc23rd = (x0 > x3) ? y0 + (y3 - y0) / 3 - arcydelta : y0 + (y3 - y0) / 3 + arcydelta; } else { xc1 = (y0 < y3) ? x0 + xdelta / 2 : x0 - xdelta / 2; yc1 = (x0 < x3) ? y0 - ydelta / 2 : y0 + ydelta / 2; if (noarrow) { yc2 = (x0 < x3) ? y3 - ydelta : y3 + ydelta; xc2 = (y0 < y3) ? x3 + xdelta : x3 - xdelta; } else { yc2 = (x0 < x3) ? y3 - ydelta + 2.5 * xdelta * sign : y3 + ydelta - 2.5 * xdelta * sign; xc2 = (y0 < y3) ? x3 + xdelta + 2.5 * ydelta * sign : x3 - xdelta - 2.5 * ydelta * sign; } x3elbow1 = (y0 < y3) ? x3 + xarrowdelta + 2.5 * ydelta * sign : x3 - xarrowdelta - 2.5 * ydelta * sign; y3elbow1 = (x0 < x3) ? y3 - yarrowdelta + 2.5 * xdelta * sign : y3 + yarrowdelta - 2.5 * xdelta * sign; let arcxdelta = xdelta * len / 4 / flowSize; let arcydelta = ydelta * len / 4 / flowSize; var x13rd = (y0 < y3) ? x0 + arcxdelta : x0 - arcxdelta; var y13rd = (x0 < x3) ? y0 - arcydelta : y0 + arcydelta; var x23rd = (y0 < y3) ? x0 + (x3 - x0) / 3 + arcxdelta : x0 + (x3 - x0) / 3 - arcxdelta; var y23rd = (x0 < x3) ? y0 + (y3 - y0) / 3 - arcydelta : y0 + (y3 - y0) / 3 + arcydelta; arcxdelta = arcxdelta + xdelta; arcydelta = arcydelta + ydelta; var xc13rd = (y0 < y3) ? x0 + arcxdelta : x0 - arcxdelta; var yc13rd = (x0 < x3) ? y0 - arcydelta : y0 + arcydelta; var xc23rd = (y0 < y3) ? x0 + (x3 - x0) / 3 + arcxdelta : x0 + (x3 - x0) / 3 - arcxdelta; var yc23rd = (x0 < x3) ? y0 + (y3 - y0) / 3 - arcydelta : y0 + (y3 - y0) / 3 + arcydelta; } if (!noarrow) { return "M" + x0 + "," + y0 + " L" + xc1 + "," + yc1 + " C" + xc13rd + "," + yc13rd + " " + xc23rd + "," + yc23rd + " " + xc2 + "," + yc2 + " L" + x3elbow1 + "," + y3elbow1 + " L" + x3 + "," + y3 + " C" + x23rd + "," + y23rd + " " + x13rd + "," + y13rd + " " + x0 + "," + y0; } else { return "M" + x0 + "," + y0 + " L" + xc1 + "," + yc1 + " C" + xc13rd + "," + yc13rd + " " + xc23rd + "," + yc23rd + " " + xc2 + "," + yc2 + " L" + x3 + "," + y3 + " C" + x23rd + "," + y23rd + " " + x13rd + "," + y13rd + " " + x0 + "," + y0; } }33:T9ee,// This code is derived from https://github.com/geo-social/flowmapper/ (under MIT license) function drawStraight(x1, y1, x2, y2, flowSize, sourceSize, targetSize) { const ndsize0 = sourceSize; const ndsize3 = targetSize; const width = flowSize; const dx = Math.abs(x2 - x1); const dy = Math.abs(y2 - y1); const dist = Math.sqrt(dx * dx + dy * dy); if (dist < (ndsize0 + ndsize3) * 1.6) return; const haselbow = true; let arrowlen = 3.0; if (dist < (ndsize0 + ndsize3) * 2.5) { arrowlen = 1.0; } // Shorten the length so that the line only touches the node circle if (haselbow) { x1 = x1 + (x2 - x1) * ndsize0 / dist; y1 = y1 + (y2 - y1) * ndsize0 / dist; x2 = x2 - (x2 - x1) * ndsize3 / (dist - ndsize0); y2 = y2 - (y2 - y1) * ndsize3 / (dist - ndsize0); } // Four corners of a flow line let xc1 = null, yc1 = null, xc2 = null, yc2 = null; // Four points to round the head let x2elbow1 = null, y2elbow1 = null; let sign = 1; let xdelta = null, ydelta = null, xarrowdelta = null, yarrowdelta = null, xgap = null, ygap = null; let gap = width * 0.05; if (y1 == y2) { // horizontal xdelta = 0; ydelta = width / 2; xarrowdelta = 0; yarrowdelta = width / 1.0; xgap = 0; ygap = gap; } else if (x1 == x2) { // vertical ydelta = 0; xdelta = width / 2; yarrowdelta = 0; xarrowdelta = width / 1.0; xgap = gap; ygap = 0; } else { const v = (x2 - x1) / (y1 - y2); xdelta = width / 2.0 / Math.sqrt(1 + v * v); ydelta = Math.abs(xdelta * v); xarrowdelta = width / Math.sqrt(1 + v * v); yarrowdelta = Math.abs(xarrowdelta * v); xgap = gap / Math.sqrt(1 + v * v); ygap = Math.abs(xgap * v); if (v > 0) { sign = -1; } } x1 = (y1 >= y2) ? x1 + xgap : x1 - xgap; x2 = (y1 >= y2) ? x2 + xgap : x2 - xgap; y1 = (x1 >= x2) ? y1 - ygap : y1 + ygap; y2 = (x1 >= x2) ? y2 - ygap : y2 + ygap; xc1 = (y1 >= y2) ? x1 + xdelta : x1 - xdelta; yc1 = (x1 >= x2) ? y1 - ydelta : y1 + ydelta; xc2 = (y1 >= y2) ? x2 + xdelta + arrowlen * ydelta * sign : x2 - xdelta - arrowlen * ydelta * sign; yc2 = (x1 >= x2) ? y2 - ydelta + arrowlen * xdelta * sign : y2 + ydelta - arrowlen * xdelta * sign; x2elbow1 = (y1 >= y2) ? x2 + xarrowdelta + arrowlen * ydelta * sign : x2 - xarrowdelta - arrowlen * ydelta * sign; y2elbow1 = (x1 >= x2) ? y2 - yarrowdelta + arrowlen * xdelta * sign : y2 + yarrowdelta - arrowlen * xdelta * sign; return "M" + x1 + "," + y1 + "L" + xc1 + "," + yc1 + "L" + xc2 + "," + yc2 + "L" + x2elbow1 + "," + y2elbow1 + "L" + x2 + "," + y2 + "Z"; } 34:Td3c,function drawStraightBidir( x1, y1, x2, y2, flowSize, sourceSize, targetSize, arrowHead = true ) { const dx = x2 - x1, dy = y2 - y1; const dist = Math.hypot(dx, dy); if (dist <= sourceSize + targetSize + 1e-6) { // There is not enough distance to reach outside node radius return ""; } // Unit vector along the link and its left-hand normal const ux = dx / dist; const uy = dy / dist; const nx = -uy; const ny = ux; // Arrow tips positioned at 'sourceSize' and 'targetSize' from node centers const p1TipX = x1 + ux * sourceSize, p1TipY = y1 + uy * sourceSize; // tip taht points to target const p2TipX = x2 - ux * targetSize, p2TipY = y2 - uy * targetSize; // tip taht points to source // Available length between both tips const avail = Math.hypot(p2TipX - p1TipX, p2TipY - p1TipY); if (avail <= 1e-6) return ""; const halfW = flowSize / 2; // headLen is the length of triangular head measured along the link, // we want to ensure both heads fit in the available space const headLen = arrowHead ? Math.min(flowSize * 2.0, (avail - 1) / 2) : 0; // No arrowheads of if not enough space for two heads, // we draw a simple rectangle (shaft only) if (headLen < 0.5) { const Ax = p1TipX + nx * halfW, Ay = p1TipY + ny * halfW; const Bx = p2TipX + nx * halfW, By = p2TipY + ny * halfW; const Cx = p2TipX - nx * halfW, Cy = p2TipY - ny * halfW; const Dx_ = p1TipX - nx * halfW, Dy_ = p1TipY - ny * halfW; return "M" + Ax + "," + Ay + "L" + Bx + "," + By + "L" + Cx + "," + Cy + "L" + Dx_ + "," + Dy_ + "Z"; } // headWidth is the base width of the head // (should prolly be >= shaft width for OK look) const headWidth = Math.max(flowSize * 2.0, flowSize + 1); const halfHW = headWidth / 2; // Shaft start/end (where heads meet the shaft) const sX = p1TipX + ux * headLen, sY = p1TipY + uy * headLen; // after source head const eX = p2TipX - ux * headLen, eY = p2TipY - uy * headLen; // before target head // Upper edge of shaft // ... near source const A_x = sX + nx * halfW, A_y = sY + ny * halfW; // ... near target const B_x = eX + nx * halfW, B_y = eY + ny * halfW; // Target head (triangle) // ... upper base corner const EBtop_x = eX + nx * halfHW; const EBtop_y = eY + ny * halfHW; // ... tip const Tip2_x = p2TipX; const Tip2_y = p2TipY; // ... lower base corner const EBbot_x = eX - nx * halfHW; const EBbot_y = eY - ny * halfHW; // Lower edge of shaft // ... near target const D_x = eX - nx * halfW; const D_y = eY - ny * halfW; // ... near source const F_x = sX - nx * halfW; const F_y = sY - ny * halfW; // Source head (triangle) // -> lower base corner const SBbot_x = sX - nx * halfHW; const SBbot_y = sY - ny * halfHW; // -> tip const Tip1_x = p1TipX; const Tip1_y = p1TipY; // -> upper base corner const SBtop_x = sX + nx * halfHW; const SBtop_y = sY + ny * halfHW; return "M" + A_x + "," + A_y + "L" + B_x + "," + B_y + "L" + EBtop_x + "," + EBtop_y + "L" + Tip2_x + "," + Tip2_y + "L" + EBbot_x + "," + EBbot_y + "L" + D_x + "," + D_y + "L" + F_x + "," + F_y + "L" + SBbot_x + "," + SBbot_y + "L" + Tip1_x + "," + Tip1_y + "L" + SBtop_x + "," + SBtop_y + "Z"; }35:[{"id":"b8a5389a2b971253046c968598f4220b63d289f17114f2decc3c759c5e059e0193b2da4f59a4a582421f6304ec67bf22af9749f86f8588d5dcdaa6eec5713aef","href":"https://static.observableusercontent.com/files/b8a5389a2b971253046c968598f4220b63d289f17114f2decc3c759c5e059e0193b2da4f59a4a582421f6304ec67bf22af9749f86f8588d5dcdaa6eec5713aef","name":"links-n0.csv","type":"text/csv","lastModified":1755023838229.882,"size":8715},{"id":"92cc6e58b4b4b17c48503d279a8c14df6e08921459f3fb78a0e62dacc589b3aadeb0677e96a95478e6b459894dcfd82ace275ea6cc8550c5e4cc84cf39e336fe","href":"https://static.observableusercontent.com/files/92cc6e58b4b4b17c48503d279a8c14df6e08921459f3fb78a0e62dacc589b3aadeb0677e96a95478e6b459894dcfd82ace275ea6cc8550c5e4cc84cf39e336fe","name":"nuts0.geojson","type":"application/geo+json","lastModified":1755023839246.75,"size":202645}] 2f:{"id":"9c834c38c193c78a","slug":"flow-map-improvements","title":"Flow map improvements","thumbnail":"4ed3291484c501fb0abecabf79c61a8421e96d66e6ea5bbf9c2a14c82604f882","access_level":"public","create_time":"$D2025-08-12T12:13:44.226Z","update_time":"$D2025-09-02T11:47:28.037Z","view_time":null,"first_public_time":"$D2025-08-18T09:07:50.702Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"25213e2b9755731d","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":"starter_2024"},"version":265,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null}],"members":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null,"role":"editor"},{"type":"team","id":"25213e2b9755731d","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"cbbbea71a9b4864a","slug":"magrit","title":"Magrit","owner":{"id":"25213e2b9755731d","login":"mthh","name":"Matthieu Viry"}},"type":"notebook","body":{"title":"Flow map improvements","cells":[{"id":0,"value":"# Flow map improvements\n\nThis is a playground to see what improvements could be made to Magrit flow maps, in particular new types of lines/arrows and the possibility of these arrows to land on the edges of proportional symbols linked to the flow layer (related issue on GitHub: [#162](https://github.com/riatelab/magrit/issues/162)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"### Options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":21,"value":"viewof arrowStyle = Inputs.select(arrowStyles, {label: \"Arrow style\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"viewof maxSize = Inputs.range([0, 50], {label: \"Proportional symbols max size (px)\", step: 1, value: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"viewof minSizeFlows = Inputs.range([0.5, 4], {label: \"Flows min width (px)\", step: 0.5, value: 2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":120,"value":"viewof maxSizeFlow = Inputs.range([5, 40], {label: \"Flows max width (px)\", step: 1, value: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"viewof topFlows = Inputs.range([0, 350], {label: \"Show top flows\", step: 1, value: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":222,"value":"viewof distFlowSymbol = Inputs.range([0, 5], {label: \"Distance between flow and symbol (px - only for \\\"straight\\\" links)\", step: 1, value: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"### Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":34,"value":"map = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", 1000)\n .attr(\"height\", 800)\n .attr('shape-rendering', 'geometricPrecision');\n\n const baseLayer = svg.append(\"g\");\n const linkLayer = svg.append(\"g\");\n const nodeLayer = svg.append(\"g\");\n \n baseLayer.selectAll(\"path\")\n .data(nuts0.features)\n .enter()\n .append(\"path\")\n .attr(\"fill\", \"grey\")\n .attr(\"stroke\", \"#111111\")\n .attr(\"d\", path);\n\n linkLayer.selectAll('path')\n .data(topLinks)\n .enter()\n .append('path')\n .attr('fill', 'black')\n .attr('stroke', 'black')\n .attr('stroke-width', 1)\n .attr('d', pathLink);\n\n nodeLayer.selectAll('path')\n .data(centroidNuts0.features)\n .enter()\n .append('circle')\n .attr('fill', 'white')\n .attr('stroke', 'red')\n .attr('stroke-width', '1')\n .attr('r', d => radius(d.properties.sum))\n .attr('cx', d => path.centroid(d)[0])\n .attr('cy', d => path.centroid(d)[1]);\n\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"### Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":256,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":142,"value":"maxValue = d3.max(nuts0.features.map((d) => d.properties.sum))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"radius = d3.scaleSqrt().domain([0, maxValue]).range([0, maxSize]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"topLinks = {\n if (arrowStyle.startsWith(\"Straight bidirectional\")) {\n // A -> B and B -> A are merged in this case\n return mergeLinksForBidir(linksRaw.slice(0, topFlows));\n }\n // Otherwise display A -> B and B -> A separately\n return linksRaw.slice(0, topFlows);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"drawFuncs = ({\n \"Straight half-arrow\": drawStraight,\n \"Curve half-arrow\": drawCurve,\n \"Straight bidirectional (with arrow-head)\": drawStraightBidirArrow,\n \"Straight bidirectional (no arrow-head)\": drawStraightBidirNoArrow,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"pathLink = (link) => {\n const { i, j, fij } = link;\n const iNode = centroidNuts0.features.find((d) => d.properties.N0 === i);\n const jNode = centroidNuts0.features.find((d) => d.properties.N0 === j);\n if (!iNode || !jNode) return;\n const dist = arrowStyle.startsWith('Straight')\n ? 1 + distFlowSymbol\n : 1; // '1' is stroke-width of circle\n const iCoord = proj(iNode.geometry.coordinates);\n const jCoord = proj(jNode.geometry.coordinates);\n const iSize = radius(iNode.properties.sum) + dist;\n const jSize = radius(jNode.properties.sum) + dist;\n\n const draw = drawFuncs[arrowStyle];\n \n const arrowWidth = d3.scaleLinear().domain([0, topLinks[0].fij]).range([minSizeFlows, maxSizeFlow]);\n \n const path = draw(\n iCoord[0],\n iCoord[1],\n jCoord[0],\n jCoord[1],\n arrowWidth(fij),\n iSize,\n jSize,\n );\n return path;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":246,"value":"drawStraightBidirArrow = (x1, y1, x2, y2, flowSize, sourceSize, targetSize) => drawStraightBidir(x1, y1, x2, y2, flowSize, sourceSize, targetSize, true);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":245,"value":"drawStraightBidirNoArrow = (x1, y1, x2, y2, flowSize, sourceSize, targetSize) => drawStraightBidir(x1, y1, x2, y2, flowSize, sourceSize, targetSize, false);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"arrowStyles = [\n 'Straight half-arrow',\n 'Curve half-arrow',\n 'Straight bidirectional (with arrow-head)',\n 'Straight bidirectional (no arrow-head)'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"nuts0 = {\n const nuts0 = await FileAttachment(\"nuts0.geojson\").json();\n nuts0.features.forEach((ft) => {\n const id = ft.properties.N0;\n let sum = 0;\n linksRaw.forEach((l) => {\n if (l.i === id || l.j === id) {\n sum += l.fij;\n }\n });\n ft.properties.sum = sum;\n });\n return nuts0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"centroidNuts0 = ({\n type: 'FeatureCollection',\n features: nuts0.features.map((ft) => makeCentroid(ft)).sort((a, b) => b.properties.sum - a.properties.sum),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"linksRaw = {\n const d = await FileAttachment(\"links-n0.csv\").csv({typed: true});\n d.sort((a, b) => b.fij - a.fij)\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"mergeLinksForBidir = (links) => {\n const result = [];\n links.forEach((l) => {\n const found = result.find((d) => (d.i === l.i && d.j === l.j) || (d.i === l.j && d.j === l.i));\n if (found) {\n found.fij += l.fij;\n } else {\n result.push({...l});\n }\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"proj = d3.geoAzimuthalEqualArea().fitExtent([[0, 0], [1000, 800]], nuts0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"path = d3.geoPath(proj)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"makeCentroid = (ft) => {\n const newFt = ft.geometry.type.startsWith('Multi')\n ? turf.centroid(getLargestPolygon(ft.geometry))\n : turf.centroid(ft);\n\n Object.keys(ft.properties).forEach((n) => {\n newFt.properties[n] = ft.properties[n];\n });\n \n return newFt;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"getLargestPolygon = (geom) => {\n const areas = [];\n for (let j = 0; j < geom.coordinates.length; j++) {\n areas.push(turf.area({\n type: 'Feature',\n geometry: {\n type: 'Polygon',\n coordinates: geom.coordinates[j],\n },\n properties: {},\n }));\n }\n const ix = areas.indexOf(d3.max(areas));\n return {\n type: 'Polygon',\n coordinates: geom.coordinates[ix],\n properties: {},\n };\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"turf = require('@turf/turf')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"