25:["$","title",null,{"children":"DNS Chain | Vasco Asturiano | Observable"}] 4c:T3629,const chart = (() => { if (!result) return html`Enter a domain name.`; if (result.error) return html`

Couldn’t get the DNS chain for “${result.resource}”.
${result.error}
Check that the input is a valid domain name (e.g. example.com) or IP address.

`; const {forward_nodes: fwd = {}, reverse_nodes: rev = {}} = result; // Graph data const links = []; for (const [k, vs] of Object.entries(fwd)) for (const v of vs) links.push({source: k, target: v, type: "forward"}); for (const [k, vs] of Object.entries(rev)) for (const v of vs) links.push({source: k, target: v, type: "reverse"}); const ids = new Set([result.resource]); for (const l of links) { ids.add(l.source); ids.add(l.target); } // Direct neighbours of every node (including the node itself), for hover highlighting const neighbors = new Map([...ids].map(id => [id, new Set([id])])); for (const l of links) { neighbors.get(l.source).add(l.target); neighbors.get(l.target).add(l.source); } const isIP = n => n.includes(":") || /^\d+\.\d+\.\d+\.\d+$/.test(n); // A node is unresolved if its own lookup returned nothing: hostnames need a forward result, IPs need a reverse (PTR) result const isResolved = id => ((isIP(id) ? rev[id] : fwd[id]) ?? []).length > 0; const label = n => n.length > 40 ? n.slice(0, 39) + "…" : n; const isRoot = d => d.id === result.resource; const nodes = [...ids].map(id => { const root = id === result.resource; return {id, w: Math.max(root ? 100 : 70, label(id).length * (root ? 8 : 7) + 20), h: root ? 34 : 26}; }); // Links that exist in both directions between the same pair are drawn as two parallel lines const pairs = new Set(links.map(l => `${l.source}\u0000${l.target}`)); links.forEach(l => { l.bidirectional = pairs.has(`${l.target}\u0000${l.source}`); }); // Canvas grows with the number of nodes so there is room to spread out const width = 1000, height = Math.max(420, Math.min(900, 240 + nodes.length * 22)); const cx = width / 2, cy = height / 2; // Rectangular collision force: separate overlapping boxes along the axis of least overlap function forceRectCollide(pad = 8) { let ns; const force = alpha => { for (let i = 0; i < ns.length; i++) for (let j = i + 1; j < ns.length; j++) { const a = ns[i], b = ns[j]; const dx = b.x - a.x, dy = b.y - a.y; const ox = (a.w + b.w) / 2 + pad - Math.abs(dx); const oy = (a.h + b.h) / 2 + pad - Math.abs(dy); if (ox > 0 && oy > 0) { if (oy < ox) { const s = (dy < 0 ? -1 : 1) * oy / 2; a.y -= s; b.y += s; } else { const s = (dx < 0 ? -1 : 1) * ox / 2; a.x -= s; b.x += s; } } } }; force.initialize = _ => ns = _; return force; } // Exact point where a ray starting at (px, py) (inside rect `n`) with unit direction (ux, uy) crosses n's perimeter function perimeterPoint(n, px, py, ux, uy) { const hw = n.w / 2, hh = n.h / 2; const rx = px - n.x, ry = py - n.y; const tx = ux > 1e-9 ? (hw - rx) / ux : ux < -1e-9 ? (-hw - rx) / ux : Infinity; const ty = uy > 1e-9 ? (hh - ry) / uy : uy < -1e-9 ? (-hh - ry) / uy : Infinity; const t = Math.max(0, Math.min(tx, ty)); return {x: px + ux * t, y: py + uy * t}; } const uid = "arrow" + Math.random().toString(36).slice(2, 8); const color = {root: "#f28e2b"}; // Box fills: hostnames green, IP addresses blue const fill = {name: "#b9e3b3", ip: "#b8d6f2"}; const linkStyle = { forward: {color: "#2ca02c", dash: null}, reverse: {color: "#1f77b4", dash: "6,4"} }; const root = d3.create("svg") .attr("viewBox", [0, 0, width, height]).attr("width", width) .style("max-width", "100%").style("height", "auto").style("font", "12px sans-serif") .style("border", "1px solid #ddd").style("border-radius", "6px").style("background", "#fff"); root.append("defs").selectAll("marker").data(Object.entries(linkStyle)).join("marker") .attr("id", ([t]) => `${uid}-${t}`).attr("viewBox", "0 0 10 10") .attr("refX", 10).attr("refY", 5).attr("markerWidth", 9).attr("markerHeight", 9) .attr("markerUnits", "userSpaceOnUse").attr("orient", "auto") .append("path").attr("d", "M0,0L10,5L0,10z").attr("fill", ([, s]) => s.color); // Free-form layout: links attract, charge repels const sim = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(d => 120 + (d.source.w + d.target.w) / 3).strength(0.3)) .force("charge", d3.forceManyBody().strength(-700).distanceMax(500)) .force("x", d3.forceX(cx).strength(0.03)) .force("y", d3.forceY(cy).strength(0.05)) .force("collide", forceRectCollide(14)) .stop(); // ---- Crossing minimisation: run the layout from many random starts and keep the best one ---- const ccw = (a, b, c) => (c.y - a.y) * (b.x - a.x) > (b.y - a.y) * (c.x - a.x); const crosses = (l, m) => { const a = l.source, b = l.target, c = m.source, d = m.target; if (a === c || a === d || b === c || b === d) return false; return ccw(a, c, d) !== ccw(b, c, d) && ccw(a, b, c) !== ccw(a, b, d); }; // Does the straight segment of link l pass through the box of a third node? const hitsNode = (l, n) => { const a = l.source, b = l.target; if (n === a || n === b) return false; const dx = b.x - a.x, dy = b.y - a.y, len2 = dx * dx + dy * dy || 1; const hw = n.w / 2, hh = n.h / 2; // sample along the segment for (let t = 0.05; t < 1; t += 0.05) { const px = a.x + dx * t, py = a.y + dy * t; if (Math.abs(px - n.x) < hw && Math.abs(py - n.y) < hh) return true; } return false; }; const score = () => { let c = 0, len = 0; for (let i = 0; i < links.length; i++) { const l = links[i]; len += Math.hypot(l.source.x - l.target.x, l.source.y - l.target.y); for (let j = i + 1; j < links.length; j++) if (crosses(l, links[j])) c++; for (const n of nodes) if (hitsNode(l, n)) c += 2; } return c * 1e5 + len; }; const tries = nodes.length > 60 ? 6 : nodes.length > 30 ? 20 : 50; let best = null, bestScore = Infinity; for (let k = 0; k < tries; k++) { for (const d of nodes) { d.x = cx + (Math.random() - 0.5) * 300; d.y = cy + (Math.random() - 0.5) * 300; d.vx = 0; d.vy = 0; d.fx = null; d.fy = null; } sim.alpha(1).tick(300); for (const d of nodes) { d.x = Math.max(d.w / 2 + 4, Math.min(width - d.w / 2 - 4, d.x)); d.y = Math.max(d.h / 2 + 4, Math.min(height - d.h / 2 - 4, d.y)); } const s = score(); if (s < bestScore) { bestScore = s; best = nodes.map(d => [d.x, d.y]); } if (s < 1e5) break; // no crossings at all: good enough } nodes.forEach((d, i) => { [d.x, d.y] = best[i]; d.vx = 0; d.vy = 0; }); const link = root.append("g").attr("fill", "none").attr("stroke-width", 1.8) .selectAll("line").data(links).join("line") .attr("stroke", d => linkStyle[d.type].color) .attr("stroke-dasharray", d => linkStyle[d.type].dash) .attr("marker-end", d => `url(#${uid}-${d.type})`) .style("transition", "opacity 0.15s"); const node = root.append("g").selectAll("g").data(nodes).join("g") .style("cursor", "grab").style("transition", "opacity 0.15s"); node.append("rect").attr("x", d => -d.w / 2).attr("y", d => -d.h / 2) .attr("width", d => d.w).attr("height", d => d.h).attr("rx", d => isRoot(d) ? 8 : 5) .attr("fill", d => isRoot(d) ? color.root : isIP(d.id) ? fill.ip : fill.name) .attr("stroke-width", d => isRoot(d) ? 2.5 : 1.5) .attr("stroke", d => isRoot(d) ? "#c46a0a" : "#555") .attr("stroke-dasharray", d => isResolved(d.id) ? null : "4,3") .style("filter", d => isRoot(d) ? "drop-shadow(0 2px 4px rgba(196,106,10,0.45))" : null); node.append("text").attr("text-anchor", "middle").attr("dy", "0.35em") .attr("fill", d => isRoot(d) ? "#fff" : "#222") .attr("font-size", d => isRoot(d) ? 14 : null) .attr("font-weight", d => isRoot(d) ? "bold" : null).text(d => label(d.id)); node.append("title").text(d => d.id + (isResolved(d.id) ? "" : " (unresolved)")); // Dimming. Priority: dragging (no dimming) > hovered node (its neighbours stay lit) > hovered legend item (matching items stay lit). const DIM = 0.15; let hovered = null, dragging = false, legendFilter = null; const applyDim = () => { let nodeOn = null, linkOn = null; if (!dragging && hovered) { const near = neighbors.get(hovered.id); nodeOn = n => near.has(n.id); linkOn = l => l.source.id === hovered.id || l.target.id === hovered.id; } else if (!dragging && legendFilter) { ({node: nodeOn, link: linkOn} = legendFilter); } node.style("opacity", n => !nodeOn || nodeOn(n) ? 1 : DIM); link.style("opacity", l => !linkOn || linkOn(l) ? 1 : DIM); }; node .on("mouseenter", (event, d) => { hovered = d; applyDim(); }) .on("mouseleave", () => { hovered = null; applyDim(); }); const OFFSET = 3.5; // half the distance between the two lines of a bidirectional link function ticked() { for (const d of nodes) { d.x = Math.max(d.w / 2 + 4, Math.min(width - d.w / 2 - 4, d.x)); d.y = Math.max(d.h / 2 + 4, Math.min(height - d.h / 2 - 4, d.y)); } link.each(function (d) { const a = d.source, b = d.target; const len = Math.hypot(b.x - a.x, b.y - a.y) || 1; const ux = (b.x - a.x) / len, uy = (b.y - a.y) / len; // For two-way links, shift the whole line sideways (the opposite link runs b→a, so it shifts the other way) const o = d.bidirectional ? OFFSET : 0; const nx = -uy * o, ny = ux * o; // Clip the (shifted) line exactly at each rectangle's perimeter const p = perimeterPoint(a, a.x + nx, a.y + ny, ux, uy); const q = perimeterPoint(b, b.x + nx, b.y + ny, -ux, -uy); d3.select(this).attr("x1", p.x).attr("y1", p.y).attr("x2", q.x).attr("y2", q.y); }); node.attr("transform", d => `translate(${d.x},${d.y})`); } node.call(d3.drag() .on("start", (event, d) => { if (!event.active) sim.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; dragging = true; applyDim(); }) .on("drag", (event, d) => { d.fx = event.x; d.fy = event.y; }) .on("end", (event, d) => { if (!event.active) sim.alphaTarget(0); d.fx = null; d.fy = null; dragging = false; applyDim(); })); // Render the chosen layout; the simulation only runs again while dragging ticked(); sim.on("tick", ticked); invalidation.then(() => sim.stop()); const list = (title, items) => html`

${title} (${items.length})

${items.length ? html`

${i}

` : html`None`}

`; // Legend swatch built with d3 so the dash pattern and arrowhead match the graph exactly const swatch = (s) => { const sv = d3.create("svg").attr("width", 36).attr("height", 10).style("vertical-align", "middle"); sv.append("line").attr("x1", 0).attr("y1", 5).attr("x2", 30).attr("y2", 5) .attr("stroke", s.color).attr("stroke-width", 1.8).attr("stroke-dasharray", s.dash); sv.append("path").attr("d", "M27,0.5L36,5L27,9.5z").attr("fill", s.color); return sv.node(); }; const box = (bg, stroke, style = "solid") => html``; // Legend items: hovering one keeps only the matching nodes/links lit (node/link predicates) const legendItem = (icon, text, nodePred, linkPred) => { const el = html`${icon} ${text}`; el.addEventListener("mouseenter", () => { legendFilter = {node: nodePred, link: linkPred}; applyDim(); }); el.addEventListener("mouseleave", () => { legendFilter = null; applyDim(); }); return el; }; const none = () => false; // Lookup types: light up the links of that type plus the nodes at their ends const ofType = type => ({ link: l => l.type === type, node: n => links.some(l => l.type === type && (l.source.id === n.id || l.target.id === n.id)) }); const legend = [ legendItem(box(color.root, "#c46a0a"), "queried domain", isRoot, none), legendItem(box(fill.name, "#555"), "hostname", n => !isRoot(n) && !isIP(n.id), none), legendItem(box(fill.ip, "#555"), "IP address", n => isIP(n.id), none), legendItem(box("#fff", "#555", "dashed"), "unresolved", n => !isResolved(n.id), none), legendItem(swatch(linkStyle.forward), "forward lookup (A/AAAA/CNAME)", ofType("forward").node, ofType("forward").link), legendItem(swatch(linkStyle.reverse), "reverse lookup (PTR)", ofType("reverse").node, ofType("reverse").link) ]; return html`

DNS chain for ${result.resource}

Query time: ${result.query_time} · Source: RIPEstat dns-chain · Hover a box or a legend item to highlight · Drag boxes to rearrange

${root.node()}

${legend}

${list("Authoritative nameservers", result.authoritative_nameservers ?? [])} ${list("Nameservers (IPs)", result.nameservers ?? [])}

`; })(); display(chart);4d:T529,const result = await (async () => { // Lock the input (and Query button) and show the spinner while fetching. const controls = [...queryInput.querySelectorAll("input, button")]; const prior = new Map(controls.map(el => [el, el.disabled])); const setLoading = on => { for (const el of controls) el.disabled = on ? true : prior.get(el); queryInput.style.cursor = on ? "progress" : ""; queryInput.setAttribute("aria-busy", on); spinner.style.display = on ? "inline-flex" : "none"; }; const name = domain.trim(); if (!name) return null; setLoading(true); try { const r = await fetch(`https://stat.ripe.net/data/dns-chain/data.json?resource=${encodeURIComponent(name)}`, {proxy: true}); let j = null; try { j = await r.json(); } catch (e) { /* body not JSON */ } const apiMessage = j?.messages?.map(m => Array.isArray(m) ? m.slice(1).join(": ") : String(m)).filter(Boolean).join("; "); if (!r.ok || !j || j.status !== "ok" || !j.data) { return {error: apiMessage || (r.ok ? "The API returned an unexpected response." : `RIPEstat request failed (HTTP ${r.status}).`), resource: name}; } return j.data; } catch (e) { return {error: `Could not reach RIPEstat: ${e.message}`, resource: name}; } finally { setLoading(false); } })(); display(result);4e:[] 48:{"id":"449c4356d6249dbb","slug":"dns-chain","title":"DNS Chain","thumbnail":"d1beba7d9ef8abe966c3a01c70a06696236603bf73a9c1d58dfab30c36c30750","access_level":"public","create_time":"$D2026-10-27T18:40:01.591Z","update_time":"$D2026-10-31T18:33:26.397Z","view_time":null,"first_public_time":"$D2026-10-31T18:34:53.237Z","has_unpublished_edits":null,"fork":false,"stars":0,"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":77,"publish_version":77,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"DNS Chain","cells":[{"id":6,"value":"# DNS Chain\n\nThis notebook visualizes the **DNS chain** of a domain name: a set of recursive [DNS lookups](https://en.wikipedia.org/wiki/Domain_Name_System) showing which addresses a domain resolves to (forward [A/AAAA/CNAME](https://en.wikipedia.org/wiki/List_of_DNS_record_types) records), and which hostnames those addresses point back to (reverse [PTR](https://en.wikipedia.org/wiki/List_of_DNS_record_types) records). Enter a domain below and click **Query**.\n\n**Data source:** the [RIPEstat `dns-chain` API](https://stat.ripe.net/docs/02.data-api/dns-chain.html). Results are a snapshot at the query time shown above the graph.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"const queryInput = Inputs.text({\n label: \"Enter a domain name\",\n value: \"wikipedia.org\",\n placeholder: \"e.g. example.com\",\n submit: \"Query\",\n width: 500,\n autocomplete: \"off\",\n spellcheck: false\n});\n\n// Loading indicator, shown next to the input while a query is in flight (toggled by the `result` cell)\nconst spinner = html``;\nqueryInput.append(spinner);\n\nconst domain = view(queryInput);","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4c","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$4d","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"2"}} 24:null