44:["$","title",null,{"children":"IPv4 BGP Routing Table on a Hilbert Curve | Vasco Asturiano | Observable"}] 4c:T467,{ const message = html`

`; const input = Inputs.text({ label: html`Go to Prefix or IP:`, placeholder: "e.g. 8.8.8.0/24 or 1.1.1.1", submit: "Find", width: 400 }); input.addEventListener("input", () => { const text = input.value.trim(); message.replaceChildren(); if (!text) return; try { const prefix = new Ip.Prefix(text.includes("/") ? text : `${text}/32`); chart.focusOn(prefix.firstIp().toNum(), prefix.countIps(), 4000); } catch (e) { message.append(html`Invalid IPv4 prefix: ${text}`); } }); const goToMyIpButton = myIp && Inputs.button( html`Go to my IP Address (${myIp.toString()})`, { reduce: () => chart.focusOn(myIp.toNum(), 1, 6000) } ); if (goToMyIpButton) { goToMyIpButton.style.width = "auto"; const btn = goToMyIpButton.querySelector("button") ?? goToMyIpButton; btn.style.whiteSpace = "nowrap"; btn.style.width = "auto"; } display(html`

${myIp ? html`

${goToMyIpButton}

` : ''}${input}${message}

`); }4d:[] 48:{"id":"4873abe01da5f5aa","slug":"ipv4-bgp-routing-table","title":"IPv4 BGP Routing Table on a Hilbert Curve","thumbnail":"60da024afb64908f7dfc28cd1ac1316050d0fac082dfeec0b542bb365dedc114","access_level":"public","create_time":"$D2026-11-04T17:41:45.831Z","update_time":"$D2026-11-05T02:57:18.594Z","view_time":null,"first_public_time":"$D2026-11-04T20:29:56.314Z","has_unpublished_edits":null,"fork":false,"stars":2,"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","followed_by_you":false,"follows_you":false},"version":206,"publish_version":206,"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","followed_by_you":false,"follows_you":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":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"IPv4 BGP Routing Table on a Hilbert Curve","cells":[{"id":1,"value":"# IPv4 BGP Routing Table on a Hilbert Curve\n\nAn interactive map of the entire IPv4 routed address space, drawn along a [Hilbert curve](https://observablehq.com/@vasturiano/hilbert-curve) so that numerically adjacent addresses stay visually close together.\n\nData sourced live from [IANA](http://www.iana.org/assignments/ipv4-address-space/ipv4-address-space.xhtml) and [bgp.potaroo.net](https://bgp.potaroo.net) (Geoff Huston's BGP reports). AS names metadata from [ipverse's as-metadata](https://github.com/ipverse/as-metadata) dataset. **Note**: The BGP table data is quite large; loading and rendering may take a few seconds.\n\nUses [hilbert-chart](https://github.com/vasturiano/hilbert-chart) for rendering (in canvas mode) and [`ip.js`](https://github.com/vasturiano/ip.js) for IP address and prefix parsing.\n\nSee also the [IPv6 version](https://observablehq.com/@vasturiano/ipv6-bgp-routing-table).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$4c","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"const ipFormatter = (d) => new Ip.Addr(d).toString();\nconst prefixFormatter = (d) => {\n const range = new Ip.Range(d.start, d.start + d.length - 1);\n const prefixes = range.toPrefixes();\n return (prefixes.length === 1 ? prefixes[0] : range).toString();\n};\n\nconst container = display(html`

`);\nconst chart = new HilbertChart(container.firstElementChild, { useCanvas: true })\n .hilbertOrder(32 / 2)\n .rangePaddingAbsolute(1)\n .minCurveWidth(0.7)\n .valFormatter(ipFormatter)\n .showValTooltip(false)\n .rangeColor(d => d.source === 'iana' ? \"rgba(0,0,128,0.07)\" : \"rgba(255,50,0,0.45)\")\n .rangeLabelColor(d => d.source === 'iana' ? \"rgba(0,0,64,0.7)\" : \"rgba(165,42,42,0.55)\")\n .rangeTooltipContent(d => `${d.name || \"\"}: ${prefixFormatter(d)}`)\n .onRangeClick(d => chart.focusOn(d.start, d.length, 3000));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"chart.width(Math.min(1040, width - chart.margin() * 2));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"**Data**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"fetch(\"https://bgp.potaroo.net/as2.0/bgptable.txt\")\n .then(r => r.text())\n .then(bgpTableRaw => {\n const routeRegex = /^\\*>?\\s*(\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\/\\d{1,2})\\s.*\\s(\\d+)\\s[ie?]$/;\n const routes = [];\n const routeTable = []\n for (const line of bgpTableRaw.split(/\\r?\\n/)) {\n const m = line.match(routeRegex);\n if (!m) continue;\n const prefix = new Ip.Prefix(m[1]);\n routes.push({\n start: prefix.firstIp().toNum(),\n length: prefix.countIps(),\n name: `AS${m[2]}`,\n source: 'bgp'\n });\n routeTable.push({\n Prefix: prefix,\n ['Origin ASN']: `AS${m[2]}`\n });\n }\n routes.sort((a, b) => b.length - a.length);\n\n chart.data([...chart.data(), ...routes]);\n\n display(Inputs.table(routeTable));\n display(html`

Found ${routeTable.length} IPv4 Routes

`);\n });","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"const ianaData = await d3.csv(\"https://www.iana.org/assignments/ipv4-address-space/ipv4-address-space.csv\", {proxy: true});\n\ndisplay(Inputs.table(ianaData));\n\n(() => {\n const blocks = [];\n const getName = (n) => n.includes(\"Administered by\") ? \"Various Registries\" : n;\n for (const row of ianaData) {\n const pref = new Ip.Prefix(row.Prefix);\n const p = {\n start: pref.firstIp().toNum(),\n length: pref.countIps(),\n name: getName(row.Designation),\n infos: [row],\n source: 'iana'\n };\n const last = blocks[blocks.length - 1];\n if (last && last.name === p.name && last.start + last.length === p.start) {\n last.length += p.length;\n last.infos.push(row);\n } else blocks.push(p);\n }\n\n chart.data([...chart.data(), ...blocks]);\n})();","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"const asNames = (async () => {\n const raw = await fetch('https://raw.githubusercontent.com/ipverse/as-metadata/master/as.csv')\n .then(r => r.text())\n .then(d3.csvParse);\n\n display(display(Inputs.table(raw)));\n\n const byAsn = indexBy(raw, 'asn', false);\n\n chart.rangeTooltipContent(d => `

${d.source==='bgp' ? asnFormatter(d.name.replace('AS', '')) : d.name}:
${prefixFormatter(d)}

`);\n\n return byAsn;\n\n function asnFormatter(asn) {\n const info = byAsn[asn];\n return `AS${asn}${info ? ` (${info.description})` : ''}`\n }\n})();","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"const myIp = await(async() => {\n const myIp = new Ip.Addr((await d3.json('https://stat.ripe.net/data/whats-my-ip/data.json')).data.ip);\n return myIp?.isIPv4() && myIp;\n})();\n\nmyIp && display(md`My IP Address: **${myIp.toString()}**`);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"**Dependencies**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"import HilbertChart from \"npm:hilbert-chart\";\nimport * as Ip from \"npm:ip.js\";\nimport indexBy from 'npm:index-array-by';","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"2"}} 24:null