31:T7e8,embeddableCell = html`

RIPE Atlas and RIPE RIS Terms and Conditions apply.

Probe ID${viewof _probes} Date${viewof date} Address family${viewof af} Origin names${viewof showAsnNames}

${viewof buttons}

Showing ${controls}-${ controls + pageSize } / ${_domain.length}

${lineChart} `32:T458,lineChart = Plot.plot({ marginBottom: marginBottom, marginRight: marginRight, width: W, //w, height: h, x: { domain: __domain.map((d) => d[0]), tickRotate: +45, tickSize: 10, label: `← closer to probe ID ${probes[0]} ASN further away from probe ID ${probes[0]} →`, tickFormat: (origin) => generateLabel(origin) }, y: { // domain: [0, 10], label: "Latency [ms]", grid: true, zero: true }, marks: probes // one mark (Plot.line) per probe .map((p, i) => Plot.line(__domain, { x: ([origin, probesData]) => origin, y: ([origin, probesData]) => probesData[i].min_rtt, curve: "step", fill: "none", stroke: "rgb(19,32,72)", // ([origin, probesData]) => probesData[i].prb_id strokeWidth: 3 }) ) //plus one mark for the tooltip .concat( Plot.tooltip(__domain, { x: (d) => d[0], y: (d) => d3.max(d[1].map((d) => d.min_rtt)), content: ([origin, probesData]) => tooltipContent(origin, probesData), direction: "up" }) ) })33:[] 2f:{"title":"Atlas probe neighbourhood","cells":[{"id":0,"value":"md`\n\n# Atlas probe neighbourhood\n\n## RIPE Atlas min. RTT\n\n${banner}\n\n${what_is}\n\n## About this visualisation\n\nRIPE Atlas probes send traceroutes through many networks in the world, this chart shows the minimum RTT perceived between the selected probe and those networks, plotting the closest networks on the left side. For more information please read [this RIPE Labs article](https://labs.ripe.net/author/emileaben/latency-into-your-network-as-seen-from-ripe-atlas/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":996,"value":"viewof pageSize = Inputs.range([1, _domain.length], {\n step: 1,\n value: query.page_size || defaults.page_size.value || 40,\n label: \"Networks to show\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1745,"value":"md`You can embed the chart above with the following:\n\n \n \n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1757,"value":"md`\n\n## Legal Note\n\nThis notebook is governed by [RIPE Atlas](https://www-static.ripe.net/static/rnd-ui/atlas/media/legal/RIPEAtlasServiceTermsandConditionsV3.4.pdf) and [RIS](https://www.ripe.net/about-us/legal/terms-of-service) Terms & Conditions.\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1766,"value":"query = getQuery(defaults)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1658,"value":"defaults = {\n return {\n ..._defaults,\n // extend with some defaults for this notebook\n detail: \"medium\",\n hist: true,\n page_size: { parser: (s) => parseInt(s), value: 50 },\n page_start: { parser: (s) => parseInt(s), value: 0 },\n probe_id: { parser: (s) => parseInt(s), value: 1 }\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1290,"value":"marginBottom = maxLabel * 5.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":1323,"value":"marginRight = 10 //showAsnNames.value ? 150 : 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"viewof _probes = {\n let input = Inputs.text({\n // label: \" Probe ID\"\n placeholder: \"Probe ID\",\n submit: true,\n type: \"text\",\n value: query.probe_id || defaults.probe_id.value || 1\n });\n\n input.addEventListener(\"focusout\", (e) => {\n input.dispatchEvent(new CustomEvent(\"submit\"));\n });\n\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1699,"value":"viewof af = {\n let options = [\n { af: 4, label: \"IPv4\" },\n { af: 6, label: \"IPv6\" },\n { af: 0, label: \"Both\" }\n ];\n return Inputs.select(options, {\n format: (o) => o.label,\n // label: \"Address family\",\n value: options.filter((o) => o.af === query.af)[0]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"// viewof af = Inputs.select(['IPv4', 'IPv6', 'Both'], {\n// label: 'Address family:'\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"viewof date = Inputs.text({\n type: \"date\",\n // label: \"Date\",\n value: query.date || null\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"viewof showAsnNames = {\n let options = [\n { label: \"yes\", value: true },\n { label: \"no\", value: false }\n ];\n\n return Inputs.radio(options, {\n // label: \"ASN names\",\n value: options[0],\n format: (obj) => obj.label\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"viewof onlyAsns = {\n let options = [\n { label: \"only ASNs\", value: true },\n { label: \"IXPs as well\", value: false }\n ];\n\n return Inputs.radio(options, {\n label: \"Show:\",\n value: options[1],\n format: (obj) => obj.label\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":795,"value":"__domain = _domain.slice(controls, controls + pageSize)","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"viewof buttons = Inputs.button([\n [\"◀︎◀︎\", () => set(viewof controls, d3.max([controls - pageSize, 0]))],\n [\"◀︎\", () => set(viewof controls, d3.max([controls - 1, 0]))],\n [\n \"▶︎\",\n () =>\n set(viewof controls, d3.min([controls + 1, _domain.length - pageSize]))\n ],\n [\n \"▶︎▶︎\",\n () =>\n set(\n viewof controls,\n d3.min([controls + pageSize, _domain.length - pageSize])\n )\n ]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"viewof controls = {\n const form = html`\n `;\n form.value = query.page_start || defaults.page_start.value || 0;\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1417,"value":"viewof showLegend = {\n const form = html`\n `;\n form.value = 0;\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":652,"value":"maxAsnString = d3.max(_domain.map(([origin, probesData]) => origin.length))","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"generateLabel = (origin) => {\n let originToString = (_origin) => {\n // return \"AS \" or simply \"ix;;blah\"\n if (_origin.slice(0, 3) === \"ix;\") return `ix-${origin.split(\";\")[1]}`;\n if (_origin.slice(0, 1) === \"{\") return _origin;\n\n return _origin\n .split(\",\")\n .map((o) => (parseInt(o) ? `AS ${o}` : `${o}`))\n .join(\", \");\n };\n\n if (!showAsnNames.value) return originToString(origin);\n\n if (origin.slice(0, 1) === \"{\") return origin;\n\n if (origin.slice(0, 3) === \"ix;\") {\n // lookup is not needed for IXPs\n let parts = origin.split(\";\");\n\n return `ix-${parts.slice(1, 3).join(\" \")} ${parts[3]},${parts[4]}`;\n }\n\n let names = origin\n .split(\",\")\n .map((o) => asnNames[o])\n .join(\", \");\n return `${names} ${originToString(origin)}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"maxLabel = d3.max(\n __domain.map(([origin, probesData]) => generateLabel(origin).length)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"// fetching ASN names from RIPEstat\n// the /as-names endpoint is much faster than /as-overview (allows for parallel requests)\nasnNames = {\n let filtered = _domain\n .map((_d) => _d[0])\n .map((o) => o.replace(\"{\", \"\").replace(\"}\", \"\"))\n .map((o) => o.split(\",\"))\n .filter((o) => parseInt(o));\n let promises = [];\n for (let chunk of chunks(filtered, 10)) {\n promises.push(\n fetch(\n `https://stat.ripe.net/data/as-names/data.json?resource=${chunk.join(\n \",\"\n )}`\n )\n .then((r) => r.json())\n .then((r) => r.data.names)\n );\n }\n let resolvedPromises = await Promise.all(promises);\n return resolvedPromises.reduce((accumulator, currentValue) => {\n return { ...accumulator, ...currentValue };\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1048,"value":"H = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":1059,"value":"W = 1024","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"w = maxLabel * 4 + W","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"h = H + marginBottom //maxLabel * 4 + H","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"probes = _probes.replaceAll(' ', '').split(',')","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"_data = {\n let [yyyy, mm, dd] = date.split(\"-\");\n return Promise.all(\n probes.map((p) => {\n let urlLocator = date === \"\" ? \"latest\" : `${yyyy}/${mm}/${dd}`;\n return fetch(\n `https://rd-gcp-cdn.ripe.net/rd/min-rtt-by-prb_id/${urlLocator}/${p}.json`\n ).then((r) => (r.status === 200 ? r.json() : []));\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"__data = _data\n .flat()\n .filter((p) => (af.af === 4 ? p.af === 4 : af.af === 6 ? p.af === 6 : true))","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"_dataGrouped = d3.group(__data, d => d.origin)","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"_dataFiltered = [..._dataGrouped]\n .filter(([origin, probesInfo]) =>\n onlyAsns.value ? !origin.includes(\",\") && parseInt(origin) : true\n )\n .filter(([origin, probesArray]) => probesArray.length === probes.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"_domain = d3.sort(_dataFiltered, (d) => parseFloat(d[1][0].min_rtt))","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"tooltipContent = (origin, probesData) => {\n let ranking = d3.sort(probesData, (p) => p.min_rtt).reverse();\n\n let labelLength = d3.max(\n ranking.map((probeData) => `${probeData.prb_id}`.length)\n );\n let probeText = ranking\n .map(\n (probeData) =>\n `Probe ID ${probeData.prb_id\n .toString()\n .padEnd(labelLength, \" \")} \\nLatency: ${probeData.min_rtt} ms`\n )\n .join(\"\\n\");\n return `${generateLabel(origin)} \\n ${probeText}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"// the experimental tooltip feature\nPlot = require(\"@observablehq/plot\").then(addTooltip)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1784,"value":"embedding = {\n let [_, __, ___, username, notebook] = document.baseURI.split(\"/\");\n return [username, notebook.split(\"?\")[0]];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"import { addTooltip } from '@fil/experimental-plot-tooltip-01'","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"import { what_is } from \"@aguformoso/ripe-atlas-texts\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1445,"value":"import { banner } from \"@aguformoso/ripencc-texts\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1453,"value":"import { chunks, defaults as _defaults, getQuery } from \"@aguformoso/utils\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}