43:null 44:["$","title",null,{"children":"Internet Interactive Map | Vasco Asturiano | Observable"}] 4a:T215a,const intermap = (() => { const w = width; const h = w * 0.68; const margin = 30; const maxR = Math.min(w, h) / 2 - margin; const dpr = window.devicePixelRatio || 1; const bg = "#001"; const labelRadius = maxR + margin * 0.65; const REFRESH_STYLE_PAUSE = 400; // ms const MIN_EDGE_WIDTH = 0.15; const MAX_EDGE_WIDTH = 0.25; const NODE_SIZE = 2; let styleK = 1; let styleTimer; const edgeWidth = () => Math.min(MIN_EDGE_WIDTH * styleK, MAX_EDGE_WIDTH) / styleK; const nodeSize = () => NODE_SIZE / styleK; const root = html`

`; const canvas = html`

`; const overlay = svg``; const panel = html`

`; root.append(canvas, overlay, panel); const ctx = canvas.getContext("2d"); // Static overlay: semi-transparent window + longitude ring const gs = d3.select(overlay).append("g").attr("transform", `translate(${w / 2},${h / 2})`); gs.append("circle").attr("r", maxR + 500).attr("fill", "none").attr("stroke", bg) .attr("stroke-width", 1000).attr("stroke-opacity", 0.7); gs.append("circle").attr("r", maxR + margin / 4).attr("fill", "none").attr("stroke", "#3182bd") .attr("stroke-width", margin / 2).attr("stroke-opacity", 0.6); const lonLayer = gs.append("g"); const cityLayer = gs.append("g"); const quadtree = d3.quadtree().x((d) => d.u * maxR).y((d) => d.v * maxR).addAll(polarNodes); // Viewport in polar coordinates (offset radius / angle of the view center) function viewport(t) { const k = t.k, px = t.x + k * w / 2, py = t.y + k * h / 2; const ox = -(px - w / 2) / k / maxR, oy = -(py - h / 2) / k / maxR; const oR = Math.hypot(ox, oy); let oA = oR ? -Math.acos(Math.max(-1, Math.min(1, ox / oR))) / Math.PI * 180 : 0; if (oy < 0) oA = 360 - oA; return {k, px, py, oR, oA}; } // Projects a longitude into the angle seen from the current view center (law of cosines) function projectedAngle(angle, vp) { if (!vp.oR) return -angle; let known = vp.oA - angle; while (known > 180) known -= 360; while (known < -180) known += 360; const neg = known < 0; known = Math.abs(known); if (known === 0 || known === 180) return angle; try { const res = solveTriangle(null, vp.oR, 1, known, null, null); return (180 - res[5]) * (neg ? -1 : 1) - vp.oA; } catch (e) { return -angle; } } const norm = (a) => { while (a >= 180) a -= 360; while (a < -180) a += 360; return a; }; function drawGraph(vp) { const {k, px, py} = vp; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.fillStyle = bg; ctx.fillRect(0, 0, w, h); ctx.setTransform(dpr * k, 0, 0, dpr * k, dpr * px, dpr * py); // Graticule const n = Math.max(2, Math.pow(2, Math.round(Math.log(6 * k)))) - 1; const nr = Math.max(4, Math.pow(2, Math.round(Math.log(6 * k)))); ctx.strokeStyle = "rgba(255,255,255,0.35)"; ctx.lineWidth = 1 / k; ctx.beginPath(); for (let i = 1; i <= n + 1; i++) { ctx.moveTo(maxR * i / (n + 1), 0); ctx.arc(0, 0, maxR * i / (n + 1), 0, 2 * Math.PI); } for (let i = 0; i < nr; i++) { const a = i * 2 * Math.PI / nr; ctx.moveTo(0, 0); ctx.lineTo(maxR * Math.cos(a), maxR * Math.sin(a)); } ctx.stroke(); // Edges: model-space width, refreshed for the current zoom only after a pause ctx.lineWidth = edgeWidth(); for (const g of edgeGroups) { ctx.strokeStyle = g.color; ctx.globalAlpha = g.opacity; ctx.beginPath(); for (const [s, t] of g.links) { ctx.moveTo(s.u * maxR, s.v * maxR); ctx.lineTo(t.u * maxR, t.v * maxR); } ctx.stroke(); } ctx.globalAlpha = 1; // Nodes: NODE_SIZE screen pixels once the style has settled const nr2 = nodeSize() / 2; ctx.fillStyle = "rgba(255,255,0,0.3)"; ctx.strokeStyle = "orange"; ctx.lineWidth = nr2 * 0.2; ctx.beginPath(); for (const d of polarNodes) { const x = d.u * maxR, y = d.v * maxR; ctx.moveTo(x + nr2, y); ctx.arc(x, y, nr2, 0, 2 * Math.PI); } ctx.fill(); ctx.stroke(); } function drawLabels(vp) { // Longitude markers const lons = [0, 45, 90, 135, 180, -45, -90, -135].map((l) => ({ text: l + "°", angle: projectedAngle(l, vp) * Math.PI / 180 })); const len = margin / 2; lonLayer.selectAll("text").data(lons).join("text") .each(function (d) { const x = (maxR + len / 2) * Math.cos(d.angle), y = (maxR + len / 2) * Math.sin(d.angle); let rot = norm(d.angle * 180 / Math.PI); rot += rot > 0 ? -90 : 90; d3.select(this).attr("x", x).attr("y", y).attr("font-size", len * 0.6) .attr("font-family", "sans-serif").attr("fill", "lightgrey").attr("text-anchor", "middle") .style("dominant-baseline", "central").attr("transform", `rotate(${rot} ${x},${y})`).text(d.text); }); // City labels, faded out where they crowd each other const textHeight = 0.025 * labelRadius; const textDeg = Math.atan(textHeight / labelRadius) * 180 / Math.PI; const seen = []; const labels = locations.map((c) => { const angle = norm(projectedAngle(c.angle, vp)); const closest = seen.reduce((m, a) => Math.min(m, Math.abs(angle - a)), Infinity); seen.push(angle); return {text: c.text, angle, opacity: Math.pow(Math.min(1, closest / textDeg), 6) * 0.8}; }); cityLayer.selectAll("text").data(labels).join("text") .each(function (d) { const a = d.angle * Math.PI / 180; const x = labelRadius * Math.cos(a), y = labelRadius * Math.sin(a); const rot = d.angle + (Math.abs(d.angle) < 90 ? 0 : 180); d3.select(this).attr("x", x).attr("y", y).attr("font-size", textHeight) .attr("font-family", "sans-serif").attr("fill", "lightgrey") .attr("text-anchor", Math.abs(d.angle) < 90 ? "start" : "end") .style("dominant-baseline", "central").attr("fill-opacity", d.opacity) .attr("transform", `rotate(${rot} ${x},${y})`).text(d.text); }); } function render(t) { const vp = viewport(t); drawGraph(vp); drawLabels(vp); } // Zoom & pan (1x – 100x) let lastK = 1; const zoom = d3.zoom().scaleExtent([1, 100]) .on("start", () => (canvas.style.cursor = "grabbing")) .on("zoom", (event) => { render(event.transform); if (event.transform.k !== lastK) { // Zoom changed: refresh edge/node sizes once the user pauses (debounced, like resetStyle) lastK = event.transform.k; clearTimeout(styleTimer); styleTimer = setTimeout(() => { styleK = d3.zoomTransform(canvas).k; render(d3.zoomTransform(canvas)); }, REFRESH_STYLE_PAUSE); } }) .on("end", () => (canvas.style.cursor = "grab")); d3.select(canvas).call(zoom); // Hover: nearest AS under the pointer canvas.addEventListener("pointermove", (event) => { const t = d3.zoomTransform(canvas), vp = viewport(t); const [mx, my] = d3.pointer(event, canvas); const d = quadtree.find((mx - vp.px) / vp.k, (my - vp.py) / vp.k, 8 / vp.k); panel.replaceChildren(d ? infoCard(d) : ""); }); canvas.addEventListener("pointerleave", () => panel.replaceChildren("")); function infoCard(d) { return html`

AS: ${d.asn}
(${d.orgName} - ${d.country})
Customer Cone: ${d.customerConeSize} AS${d.customerConeSize > 1 ? "es" : ""}
Rank: ${d.rank}

Degree:	${d.degreeProvider}	${d.degreePeer}	${d.degreeCustomer}
Degree:	provider	peer	customer

`; } render(d3.zoomIdentity); invalidation.then(() => { clearTimeout(styleTimer); d3.select(canvas).on(".zoom", null); }); return root; })(); display(intermap);4b:T435,const maxCone = d3.max(graphData.ases, (d) => d.customerConeSize); // Radial mapping, biggest customer cone at the center, cone size 1 at the rim const polarNodes = graphData.ases.map((d) => { const r = (Math.log(maxCone) - Math.log(d.customerConeSize)) / Math.log(maxCone) * 0.99 + 0.01; const a = -d.lon * Math.PI / 180; return {...d, u: r * Math.cos(a), v: r * Math.sin(a)}; }); const nodeByAsn = new Map(polarNodes.map((d) => [d.asn, d])); // Group edges by (color, opacity) so each group is drawn with a single path const edgeGroups = (() => { const groups = new Map(); for (const rel of graphData.relationships) { const s = nodeByAsn.get(rel.src), t = nodeByAsn.get(rel.dst); if (!s || !t) continue; const color = Colors.valueRgb(rel.customerConeSize, maxCone); const opacity = Math.round(Colors.valueOpacity(rel.customerConeSize, maxCone) * 20) / 20; const key = color + "|" + opacity; if (!groups.has(key)) groups.set(key, {color, opacity, links: []}); groups.get(key).links.push([s, t]); } return [...groups.values()]; })();4c:T1653,// Triangle Solver // Given some sides and angles (a, b, c opposite A, B, C; angles in degrees), // returns [a, b, c, A, B, C, area, status]. const solveTriangle = (() => { const degToRad = (x) => x / 180 * Math.PI; const radToDeg = (x) => x / Math.PI * 180; const lessEqual = (x, y) => y >= x; const and = (x, y) => (x ? y : false); // Returns side c using law of cosines. function solveSide(a, b, C) { C = degToRad(C); if (C > 0.001) return Math.sqrt(a * a + b * b - 2 * a * b * Math.cos(C)); // Numerically stable form: http://www.nayuki.io/page/numerically-stable-law-of-cosines return Math.sqrt((a - b) * (a - b) + a * b * C * C * (1 - C * C / 12)); } // Returns angle C using law of cosines. function solveAngle(a, b, c) { const temp = (a * a + b * b - c * c) / (2 * a * b); if (and(lessEqual(-1, temp), lessEqual(temp, 0.9999999))) return radToDeg(Math.acos(temp)); if (lessEqual(temp, 1)) return radToDeg(Math.sqrt((c * c - (a - b) * (a - b)) / (a * b))); throw "No solution"; } return function solveTriangle(a, b, c, A, B, C) { const sides = (a != null) + (b != null) + (c != null); const angles = (A != null) + (B != null) + (C != null); let area, status; if (sides + angles != 3) throw "Give exactly 3 pieces of information"; else if (sides == 0) throw "Give at least one side length"; else if (sides == 3) { status = "Side side side (SSS) case"; if (lessEqual(a + b, c) || lessEqual(b + c, a) || lessEqual(c + a, b)) throw status + " - No solution"; A = solveAngle(b, c, a); B = solveAngle(c, a, b); C = solveAngle(a, b, c); const s = (a + b + c) / 2; // Heron's formula area = Math.sqrt(s * (s - a) * (s - b) * (s - c)); } else if (angles == 2) { status = "Angle side angle (ASA) case"; if (A == null) A = 180 - B - C; if (B == null) B = 180 - C - A; if (C == null) C = 180 - A - B; if (lessEqual(A, 0) || lessEqual(B, 0) || lessEqual(C, 0)) throw status + " - No solution"; const sinA = Math.sin(degToRad(A)); const sinB = Math.sin(degToRad(B)); const sinC = Math.sin(degToRad(C)); let ratio; // side / sin(angle), law of sines if (a != null) { ratio = a / sinA; area = a * ratio * sinB * sinC / 2; } if (b != null) { ratio = b / sinB; area = b * ratio * sinC * sinA / 2; } if (c != null) { ratio = c / sinC; area = c * ratio * sinA * sinB / 2; } if (a == null) a = ratio * sinA; if (b == null) b = ratio * sinB; if (c == null) c = ratio * sinC; } else if (and(A != null, a == null) || and(B != null, b == null) || and(C != null, c == null)) { status = "Side angle side (SAS) case"; if (and(A != null, A >= 180) || and(B != null, B >= 180) || and(C != null, C >= 180)) throw status + " - No solution"; if (a == null) a = solveSide(b, c, A); if (b == null) b = solveSide(c, a, B); if (c == null) c = solveSide(a, b, C); if (A == null) A = solveAngle(b, c, a); if (B == null) B = solveAngle(c, a, b); if (C == null) C = solveAngle(a, b, c); if (A != null) area = b * c * Math.sin(degToRad(A)) / 2; if (B != null) area = c * a * Math.sin(degToRad(B)) / 2; if (C != null) area = a * b * Math.sin(degToRad(C)) / 2; } else { status = "Side side angle (SSA) case - "; let knownSide, knownAngle, partialSide; if (and(a != null, A != null)) { knownSide = a; knownAngle = A; } if (and(b != null, B != null)) { knownSide = b; knownAngle = B; } if (and(c != null, C != null)) { knownSide = c; knownAngle = C; } if (and(a != null, A == null)) partialSide = a; if (and(b != null, B == null)) partialSide = b; if (and(c != null, C == null)) partialSide = c; if (knownAngle >= 180) throw status + "No solution"; const ratio = knownSide / Math.sin(degToRad(knownAngle)); const temp = partialSide / ratio; // sin(partialAngle) let partialAngle, unknownSide, unknownAngle; if (temp > 1 || and(knownAngle >= 90, lessEqual(knownSide, partialSide))) throw status + "No solution"; else if (temp == 1 || knownSide >= partialSide) { status += "Unique solution"; partialAngle = radToDeg(Math.asin(temp)); unknownAngle = 180 - knownAngle - partialAngle; unknownSide = ratio * Math.sin(degToRad(unknownAngle)); area = knownSide * partialSide * Math.sin(degToRad(unknownAngle)) / 2; } else { status += "Two solutions"; const partialAngle0 = radToDeg(Math.asin(temp)); const partialAngle1 = 180 - partialAngle0; const unknownAngle0 = 180 - knownAngle - partialAngle0; const unknownAngle1 = 180 - knownAngle - partialAngle1; const unknownSide0 = ratio * Math.sin(degToRad(unknownAngle0)); const unknownSide1 = ratio * Math.sin(degToRad(unknownAngle1)); partialAngle = [partialAngle0, partialAngle1]; unknownAngle = [unknownAngle0, unknownAngle1]; unknownSide = [unknownSide0, unknownSide1]; area = [ knownSide * partialSide * Math.sin(degToRad(unknownAngle0)) / 2, knownSide * partialSide * Math.sin(degToRad(unknownAngle1)) / 2 ]; } if (and(a != null, A == null)) A = partialAngle; if (and(b != null, B == null)) B = partialAngle; if (and(c != null, C == null)) C = partialAngle; if (and(a == null, A == null)) { a = unknownSide; A = unknownAngle; } if (and(b == null, B == null)) { b = unknownSide; B = unknownAngle; } if (and(c == null, C == null)) { c = unknownSide; C = unknownAngle; } } return [a, b, c, A, B, C, area, status]; }; })();4d:[{"id":"83efc8377ac8f6ed77f35739dea4db793789ddebf3ccfc8fb2caf07e023a12ee7a8c7813aec964a79fbde0ad1bc9249e231fc5ae387347258868a9081ba8ef32","href":"https://static.observableusercontent.com/files/83efc8377ac8f6ed77f35739dea4db793789ddebf3ccfc8fb2caf07e023a12ee7a8c7813aec964a79fbde0ad1bc9249e231fc5ae387347258868a9081ba8ef32","name":"graph.json","type":"application/json","lastModified":1792250517333,"size":3839475},{"id":"313e81afd7b40d228a980ed5f288b780f2897fb97e8c0c49b2f0976ce8153b389dd3d95f2c813ebd86117fdb71474b1cb3576a21862cc889f1d3f7132231f80b","href":"https://static.observableusercontent.com/files/313e81afd7b40d228a980ed5f288b780f2897fb97e8c0c49b2f0976ce8153b389dd3d95f2c813ebd86117fdb71474b1cb3576a21862cc889f1d3f7132231f80b","name":"locations.100.json","type":"application/json","lastModified":1792250715220,"size":17889}] 48:{"id":"c48f6b4f127a9cdf","slug":"internet-map","title":"Internet Interactive Map","thumbnail":"c51d1bdbdfa5a7cdff4a3aee4368486459ff3e78f57bc90ce1dd430a4eb1dfdb","access_level":"public","create_time":"$D2026-10-16T12:22:24.555Z","update_time":"$D2026-10-20T16:24:43.163Z","view_time":null,"first_public_time":"$D2026-10-19T22:24:23.676Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"dc625de0fe5f3eae","login":"vasturiano","name":"Vasco Asturiano","avatar_url":"https://avatars-next.observableusercontent.com/a45856b753139d5de533417b120862fd466b9396ab5c379d25d7240dc5ee1985","tier":"starter_2024","bio":"Data sculptor","following":false},"version":136,"publish_version":136,"role":null,"authored":false,"authors":[{"type":"individual","id":"404426135bc21c47","login":"vasturiano","name":"Vasco Asturiano","avatar_url":"https://avatars-next.observableusercontent.com/a45856b753139d5de533417b120862fd466b9396ab5c379d25d7240dc5ee1985","tier":null,"bio":"Data sculptor | github.com/vasturiano","following":false}],"members":[{"type":"team","id":"dc625de0fe5f3eae","login":"vasturiano","name":"Vasco Asturiano","avatar_url":"https://avatars-next.observableusercontent.com/a45856b753139d5de533417b120862fd466b9396ab5c379d25d7240dc5ee1985","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Internet Interactive Map","cells":[{"id":1,"value":"# Internet Interactive Map\n\nRepresentation of [Autonomous Systems (AS)](https://en.wikipedia.org/wiki/Autonomous_system_(Internet)) relationship data from [CAIDA AS Rank](https://asrank.caida.org/).\n\n- **Radius**: AS customer cone size, with the largest ASes at the center.\n- **Angle**: AS geolocation longitude (Prime Meridian on right side).\n- **Edges**: provider/customer/peer relationships, colored by customer cone size.\n\nScroll to zoom up to 100×, drag to pan, and hover a node for details. The city and longitude labels re-project around the view center as you pan.\n\nDeveloped during the [CAIDA BGP hackathon 2016](https://www.caida.org/workshops/bgp-hackathon/1602/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$4a","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"const graphData = await FileAttachment(\"graph.json\").json();\nconst cityData = await FileAttachment(\"locations.100.json\").json();","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"// Label cities by longitude, ordered by population\nconst locations = cityData\n .map((loc) => ({text: `${loc.city} (${loc.country})`, angle: +loc.lon, weight: +loc.population}))\n .sort((a, b) => b.weight - a.weight);","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$4b","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$4c","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"const Colors = (() => {\n function hsvRgb(h, s, v) {\n const i = Math.floor(h * 6);\n const f = h * 6 - i;\n const p = v * (1 - s);\n const q = v * (1 - f * s);\n const t = v * (1 - (1 - f) * s);\n const [r, g, b] = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i % 6];\n return [r, g, b].map((x) => Math.round(x * 255));\n }\n\n // Customer cone size (log scale) -> line opacity\n const valueOpacity = (value, valueMax) => (Math.log(value) / Math.log(valueMax)) * 0.6 + 0.3;\n\n // Customer cone size (log scale) -> hex color\n const valueRgb = (value, valueMax) => {\n const hue = (Math.log(value) / Math.log(valueMax)) * 0.7 + 0.5;\n return \"#\" + hsvRgb(hue, 1, 1).map((c) => c.toString(16).padStart(2, \"0\")).join(\"\");\n };\n\n return {valueRgb, valueOpacity};\n})();","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"2"}} 49:"$48:body"