31:T853,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const arrowId = DOM.uid("arrow"); const gradientIds = data.map(() => DOM.uid("gradient")); svg.append("defs") .append("marker") .attr("id", arrowId.id) .attr("markerHeight", 10) .attr("markerWidth", 10) .attr("refX", 5) .attr("refY", 2.5) .attr("orient", "auto") .append("path") .attr("fill", endColor) .attr("d", "M0,0v5l7,-2.5Z"); // arrow head svg.append("defs") .selectAll("linearGradient") .data(data) .join("linearGradient") .attr("id", (d, i) => gradientIds[i].id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => x(d.x1)) .attr("x2", d => x(d.x2)) .attr("y1", d => y(d.y1)) .attr("y2", d => y(d.y2)) .call(g => g.append("stop").attr("stop-color", startColor).attr("stop-opacity", 0.5)) .call(g => g.append("stop").attr("offset", "100%").attr("stop-color", endColor)); svg.append("g") .call(grid); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .attr("fill", "none") .selectAll("path") .data(data) .join("path") .attr("stroke", (d, i) => gradientIds[i]) .attr("marker-end", arrowId) .attr("d", d => arc(x(d.x1), y(d.y1), x(d.x2), y(d.y2))); svg.append("g") .attr("fill", "currentColor") .selectAll("circle") .data(data) .join("circle") .attr("r", 1.75) .attr("cx", d => x(d.x1)) .attr("cy", d => y(d.y1)); svg.append("g") .attr("fill", "currentColor") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("stroke-width", 4) .attr("paint-order", "stroke fill") .selectAll("text") //.data(data.filter(d => d.highlight)) .data(data.filter(d => true)) .join("text") .attr("dy", "0.1em") .attr("x", d => x(d.x1)) .attr("y", d => y(d.y1)) .text(d => d.cc); return svg.node(); }32:[{"id":"6f1641484290e0ee68c50ce095e85734687182595d36add2dc938c8121e29d8822b8f788e89909d8ee2e47359121a0a52d473bc4a2ba45dc9f44631591aa2dc7","href":"https://static.observableusercontent.com/files/6f1641484290e0ee68c50ce095e85734687182595d36add2dc938c8121e29d8822b8f788e89909d8ee2e47359121a0a52d473bc4a2ba45dc9f44631591aa2dc7","name":"ris-distance-compare@2.2023.09.01.2024.12.11.json","type":"application/json","lastModified":1734064564765.212,"size":26802},{"id":"39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","href":"https://static.observableusercontent.com/files/39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","name":"metros.csv","type":"text/csv","lastModified":1673864102884.39,"size":15389},{"id":"a1deee7e05037c5fa19a70aa8368fa2424ff8d2936ab0331e1bb1ad3674118b6e0127f6b8d3dc83efe418660950d973895682311bf7172b44aa1aba36ca94ebc","href":"https://static.observableusercontent.com/files/a1deee7e05037c5fa19a70aa8368fa2424ff8d2936ab0331e1bb1ad3674118b6e0127f6b8d3dc83efe418660950d973895682311bf7172b44aa1aba36ca94ebc","name":"ris-distance-compare@3.2022.2023.json","type":"application/json","lastModified":1673945731651.903,"size":29659},{"id":"afb6105683b96f5d8a824973d47f4b9bcc0d7ac2b8ed276851aeaaddfdaf8d694e80b1a13e34da3fa14b90f82959a4870f317522fcad17fea26788feba145644","href":"https://static.observableusercontent.com/files/afb6105683b96f5d8a824973d47f4b9bcc0d7ac2b8ed276851aeaaddfdaf8d694e80b1a13e34da3fa14b90f82959a4870f317522fcad17fea26788feba145644","name":"ris-distance-compare@1.2023-01.2023-07.json","type":"application/json","lastModified":1689082273146.906,"size":28945}] 2f:{"title":"RIS distance: 2023-09-01 vs. 2024-12-11","cells":[{"id":0,"value":"md`# RIS distance: ${d1} vs. ${d2}\nThis visualisation shows how the RIS system evolved in the first half of 2023 in terms of how well we are able to observe various parts of the Internet.\nEach arrow represents the prefixes for a country. Country codes are at the beginning of each arrow. The arrow shows how the country moved between 2023-01-01 and 2023-07-01. X axis is the number of prefixes in the routing system for the country, the Y axis shows the how far our observation system (RIS) is on average from the prefixes in the country.\nArrows pointing down show how RIS gets closer to prefixes in the country, indicating better observability of the Internet in that country.\n\nIf you want to look at data for a specific set of countries only, you can put the country codes for these countries in the box below and the viz will only show these countries.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"viewof cc_list = Inputs.text({label: \"Country Codes (comma separated, no spaces)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"legend = {\n const arrowId = DOM.uid(\"arrow\");\n const gradientId = DOM.uid(\"gradient\");\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"data = Object.assign( cc_list_data, {'x': \"prefix count\", 'y': \"Distance to RIS (AS Hops)\"} )","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"risDistanceCompare20222023 = FileAttachment(\"ris-distance-compare@3.2022.2023.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":792,"value":"risDistanceCompare1202301202307 = FileAttachment(\"ris-distance-compare@1.2023-01.2023-07.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":796,"value":"risDistanceCompare = FileAttachment(\"ris-distance-compare@2.2023.09.01.2024.12.11.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":815,"value":"d1 = risDistanceCompare['meta']['dates'][0].replaceAll('.','-')","pinned":true,"hidden":false,"mode":"ojs"},{"id":817,"value":"d2 = risDistanceCompare['meta']['dates'][1].replaceAll('.','-')","pinned":true,"hidden":false,"mode":"ojs"},{"id":771,"value":"cc_list_data = {\n const data_src = risDistanceCompare\n if ( cc_list == '' ) {\n return data_src.results\n }\n var countries = cc_list.split(',')\n var d = []\n const cc_set = new Set( countries )\n for (var cc_obj_idx in data_src.results ) {\n const cc_obj = data_src.results[ cc_obj_idx ]\n if ( cc_set.has( cc_obj['cc'] ) ) {\n d.push( cc_obj )\n }\n }\n return d\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"x = d3.scaleLog()\n .domain(padLog(d3.extent(data.flatMap(d => [d.x1, d.x2])), 0.1))\n .rangeRound([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"y = d3.scaleLinear()\n .domain(padLinear(d3.extent(data.flatMap(d => [d.y1, d.y2])), 0.1))\n .rangeRound([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"function padLinear([x0, x1], k) {\n const dx = (x1 - x0) * k / 2;\n return [x0 - dx, x1 + dx];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"function padLog(x, k) {\n return padLinear(x.map(Math.log), k).map(Math.exp);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"endColor = d3.schemeCategory10[3]","pinned":true,"hidden":false,"mode":"ojs"},{"id":598,"value":"startColor = d3.schemeCategory10[1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":686,"value":"function arc(x1, y1, x2, y2) {\n const r = Math.hypot(x1 - x2, y1 - y2) * 2;\n return `\n M${x1},${y1}\n A${r},${r} 0,0,1 ${x2},${y2}\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"grid = g => g\n .attr(\"stroke\", \"currentColor\")\n .attr(\"stroke-opacity\", 0.1)\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(x.ticks())\n .join(\"line\")\n .attr(\"x1\", d => 0.5 + x(d))\n .attr(\"x2\", d => 0.5 + x(d))\n .attr(\"y1\", margin.top)\n .attr(\"y2\", height - margin.bottom))\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(y.ticks())\n .join(\"line\")\n .attr(\"y1\", d => 0.5 + y(d))\n .attr(\"y2\", d => 0.5 + y(d))\n .attr(\"x1\", margin.left)\n .attr(\"x2\", width - margin.right));","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80, \".1s\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width)\n .attr(\"y\", margin.bottom - 4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(data.x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(data.y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"height = 640","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"margin = ({top: 24, right: 10, bottom: 34, left: 40})","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}