31:Ta07,embeddableCell = html`

RIPE Atlas and RIPE RIS Terms and Conditions apply.

Origin (ASN or ix-ID)${viewof asn} Date${viewof date} Address Family${viewof af} Protocol${viewof proto} Aggregate function${viewof aggregateBy}

${controls}

⟵ closer to ${asn} further away from ${asn} ⟶ ${scale}

${hist} ${viewof minMax}

${map}

`32:T46d,md` Parameters avilable in this notebook: af address family. date date to fetch the data for, in YYYY-MM-DD format. origin origin, can be an ASN or an IX-ID (as in PeeringDB, for example "ix-26" for AMS-IX). network origin, can be an ASN or an IX-ID (as in PeeringDB, for example "ix-26" for AMS-IX). protocol Measurement protocol to filter for. Options are: icmp, tcp, udp. You can embed the map above with the following: `33:T13e1,map = { const circle = d3.geoCircle(), svg = d3.create("svg").attr("width", width).attr("height", height); const path = d3.geoPath().projection(projection); const topg = svg.append("g").attr("class", "topg"); // water topg .append("rect") .on("click", (d) => svg.transition().duration(1500).call(zoom.transform, d3.zoomIdentity) ) .attr("width", width) .attr("height", height) .attr("fill", "#CFDCDE"); // landmass topg .selectAll("path") .data(form.borders === "yes" ? borders.features : land.features) .enter() .append("path") .on("click", (d) => { // clicking on a country will zoom in into its bounding box const [[x0, y0], [x1, y1]] = path.bounds(d); svg .transition() .duration(1500) .call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale( Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height)) ) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2) // d3.clientPoint(event, svg.node()) ); }) .attr("d", path) .attr("fill", "white") // .attr("cursor", "pointer") .attr("stroke", "#999") .attr("stroke-width", "0px"); // country borders topg .selectAll("path") .data(form.borders === "yes" ? borders.features : land.features) .enter() .append("path") .attr("d", path) .attr("fill", "none") .attr("stroke", "#B8B8B8") .attr("stroke-width", "0.5px"); let hexes; let colorPicker = (rtt) => { if (rtt <= min_rtt) return color(min_rtt); // minn_rtt if (rtt >= max_rtt) return color(max_rtt); return color(rtt); }; const zoom = d3 .zoom() .scaleExtent([1, 32]) .on("zoom", () => { // called on onzoom event const { transform } = d3.event; // let bounds = topg.node().getBoundingClientRect(); // map lines also get thinner as we zoom in topg.selectAll("path").attr("stroke-width", 0.5 / transform.k); topg.attr("transform", transform); let hexbin = d3 .hexbin() .extent([ [0, 0], [width, height] ]) .radius(2 / transform.k) .x((d) => d.latlon[0]) .y((d) => d.latlon[1]); let aggregateFunction = aggregateBy.f || d3.median; let min_rtts_with_geo_hex = Object.assign( hexbin(min_rtts_with_geo) .map((d) => ((d.min_rtt = aggregateFunction(d, (d) => d.min_rtt)), d)) .sort((a, b) => b.prb_id - a.prb_id), { title: "RTT" } ); let p95 = d3.quantile( min_rtts_with_geo_hex.map((hex) => hex.length), 1.0 ); hexes.selectAll("path").remove(); hexes .selectAll("path") .data( min_rtts_with_geo_hex.filter((hex) => { let [x, y] = projection([hex.y, hex.x]); return true; //x > (-bounds.left + bounds.width / 2) / transform.k; }) ) .join("path") .attr("transform", (d) => { let [x, y] = projection([d.y, d.x]); return `translate(${x},${y})`; }) .attr("d", (d) => hexbin.hexagon( (d.length <= p95 ? probeScale(p95)(d.length) : probeScale(p95)(p95)) / transform.k ) ) // 5 .attr("fill", (d) => colorPicker(d.min_rtt)) .attr("stroke", (d) => d3.lab(colorPicker(d.min_rtt)).darker()) .attr("stroke-width", 1.5 / transform.k) .attr("cursor", (h) => { // link to atlas.ripe.net if hexbin contains only 1 probe return h.length === 1 ? "pointer" : ""; }) .on("click", ([first, ...otherThings]) => { // let url = `https://atlas.ripe.net/probes/${first.prb_id}` let url = `https://observablehq.com/@ripencc/atlas-probe-neighbourhood?probe_id=${first.prb_id}&af=${af.af}`; window.open(url, "_blank"); }) .on("mouseover", (d) => { mutable current_hexbin = d; mutable hover = d.min_rtt; }) .on("mouseout", () => { mutable hover = null; }) .append("title") // hexbin on:hover tooltip .text((d) => { return `In this hexbin \n\nprobes: \t\t\t ${d.length.toLocaleString()} \nlatency (${aggregateBy.label.toLowerCase()}): \t ${d.min_rtt.toFixed( 2 )}ms`; }); }); hexes = topg.append("g"); svg.call(zoom); // by this point we've got all of our drawing // definitions inside the 'zoom' callback, so // we need to fake a 0-factor zoom event to // get things painted for the first time // Also, give a 2x zoom factor if we're on // fullscreen svg.transition().call(zoom.scaleBy, document.fullscreenElement ? 2 : 0); return Object.assign(svg.node(), { zoomIn: () => svg.transition().call(zoom.scaleBy, 2), zoomOut: () => svg.transition().call(zoom.scaleBy, 0.5) // zoomRandom: random, // zoomReset: reset }); }34:T5c9,sliderTheme = ` :scope { position: relative; display: inline-block; width: 350px; --thumb-size: 15px; --thumb-radius: calc(var(--thumb-size) / 2); padding: var(--thumb-radius) 0; color: #3b99fc; margin: 2px; vertical-align: middle; } :scope .range-track { box-sizing: border-box; position: relative; height: 7px; background-color: hsl(0, 0%, 80%); overflow: visible; border-radius: 4px; padding: 0 var(--thumb-radius); } :scope .range-track-zone { box-sizing: border-box; position: relative; } :scope .range-select { box-sizing: border-box; position: relative; left: var(--range-min); width: calc(var(--range-max) - var(--range-min)); cursor: ew-resize; background: currentColor; height: 7px; border: inherit; } /* Expands the hotspot area. */ :scope .range-select:before { content: ""; position: absolute; width: 100%; height: var(--thumb-size); left: 0; top: calc(2px - var(--thumb-radius)); } :scope .range-select:focus, :scope .thumb:focus { outline: none; } :scope .thumb { box-sizing: border-box; position: absolute; width: var(--thumb-size); height: var(--thumb-size); background: #fcfcfc; top: -4px; border-radius: 100%; border: 1px solid hsl(0,0%,55%); cursor: default; margin: 0; } :scope .thumb:active { box-shadow: inset 0 var(--thumb-size) #0002; } :scope .thumb-min { left: calc(-1px - var(--thumb-radius)); } :scope .thumb-max { right: calc(-1px - var(--thumb-radius)); } `35:[] 2f:{"title":"Atlas Latency World Map","cells":[{"id":3960,"value":"md`\n# Atlas Latency World Map\n\n## RIPE Atlas min. RTT\n\n${banner}\n\n${what_is}\n\n## About this map\n\nRIPE Atlas probes send traceroutes through many networks in the world, this map shows the minimum RTT perceived between the probes and those networks. 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":4288,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":5745,"value":"viewof form = Inputs.form({\n max_rtt: Inputs.text({\n label: \"Max. RTT to show\",\n submit: true,\n type: \"number\",\n step: 10,\n value: minMax[1]\n }),\n min_rtt: Inputs.text({\n label: \"Min. RTT to show\",\n submit: true,\n type: \"number\",\n step: 10,\n value: minMax[0]\n }),\n borders: Inputs.radio([\"yes\", \"no\"], {\n value: \"yes\",\n label: \"Show country borders\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4600,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4876,"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":1767,"value":"viewof asn = {\n let input = Inputs.text({\n // label: \"Origin (ASN or ix-ID)\",\n placeholder: 'ASN or \"ix-ID\"',\n submit: true,\n type: \"text\",\n // we need to keep query.origin for backwards compatibility with\n // the widgets that were embedded with the `origin` query param\n value: query.asn || query.network || query.origin || defaults.asn.value,\n width: `25em`\n });\n\n input.addEventListener(\"focusout\", (e) => {\n input.dispatchEvent(new CustomEvent(\"submit\"));\n });\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3184,"value":"viewof date = Inputs.text({\n type: \"date\",\n // label: \"Date\",\n value: query.date || null\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4149,"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":5515,"value":"viewof proto = {\n let options = [\"Any\", \"ICMP\", \"TCP\", \"UDP\"];\n return Inputs.select(options, {\n format: (o) => o,\n // label: \"Protocol\",\n value: options.filter(\n (o) => o === query.protocol || o === defaults.protocol\n )[0]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4720,"value":"viewof aggregateBy = {\n let options = [\n { f: d3.median, label: \"Median\" },\n { f: d3.min, label: \"Minimum\" }\n ];\n return Inputs.select(options, {\n format: (o) => o.label,\n // label: \"Aggregate by\",\n value: options.filter((o) => o.label === \"Median\")[0]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3479,"value":"hist = Plot.plot({\n height: 150,\n width: 390,\n height: 85,\n marginLeft: 0,\n // title: \"Hola amigos\",\n color: {\n type: \"linear\",\n range: [\"steelblue\", \"lightgrey\"]\n },\n x: { label: \"Latency (ms)\", ticks: [50, 100, 150, 200] },\n marks: [\n Plot.barY(\n _min_rtts_with_geo,\n Plot.binX(\n { y: \"count\" },\n {\n x: \"min_rtt\",\n fill: (r) => (r.min_rtt > min_rtt && r.min_rtt < max_rtt ? 0 : 1)\n // fill: \"lightgrey\" //fill: \"min_rtt\" })\n }\n )\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3391,"value":"viewof minMax = {\n let slider = rangeSlider({\n theme: sliderTheme,\n display: (v) => \"\", // we don't want to show numbers\n min: 0, //d3.min(_min_rtts_with_geo, (m) => m.min_rtt),\n max: d3.max(_min_rtts_with_geo, (m) => m.min_rtt),\n value: [\n // defaults\n query.minrtt || 0, //d3.quantile(_min_rtts_with_geo, 0.0, (m) => m.min_rtt), // min\n query.maxrtt || d3.quantile(_min_rtts_with_geo, 1.0, (m) => m.min_rtt) // max\n ]\n });\n\n return slider;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2690,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2889,"value":"controls = {\n const form = html``;\n form.in.onclick = () => map.zoomIn();\n form.out.onclick = () => map.zoomOut();\n form.full.onclick = () =>\n // we need to walk the cell outwards\n map.parentElement.parentElement.parentElement.requestFullscreen();\n // form.random.onclick = () => map.zoomRandom();\n // form.reset.onclick = () => map.zoomReset();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3740,"value":"scale = Plot.plot({\n height: 40,\n width: 390,\n marginLeft: 0,\n x: { label: \"Min. RTT\" },\n color: {\n type: \"linear\",\n range: [\"#a1ff0a\", \"#ff0000\"],\n interpolate: \"hcl\" // uses d3.interpolateHcl\n },\n marks: [\n Plot.cell(scaleDomain, {\n x: (d) => parseInt(d),\n fill: (d, i) => {\n if (d <= min_rtt) return min_rtt;\n if (d >= max_rtt) return max_rtt;\n return d;\n }\n }),\n // in case we want to add text to the cells:\n Plot.text(scaleDomain, {\n x: (d) => parseInt(d),\n text: (d) => \"\" // <-- if we wanted to add text to the cells, it's go here\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4882,"value":"scaleDomain = {\n let min = 0;\n let max = d3.max(min_rtts_with_geo, (r) => r.min_rtt);\n\n return d3.range(\n min, // from\n max, // until\n // step: (max - min) / amount of cells\n (max - min) / 10 // amount of cells\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4668,"value":"md`\nFor the selected date ${\n date !== \"\" ? `(${date}) ` : \"\"\n}and the selected network (${asn}), we found ${prettyNumberFormatter(\n _min_rtts_with_geo.length,\n 1\n)} samples in our dataset.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2290,"value":"// viewof min_rtt = Inputs.text({\n// label: \"Min RTT to show\",\n// submit: true,\n// type: \"number\",\n// step: 10,\n// value: 0\n// })\nmin_rtt = minMax[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2101,"value":"// viewof max_rtt = Inputs.text({\n// label: 'Max RTT to show',\n// submit: true,\n// type: 'number',\n// step: 10,\n// value: 200\n// })\nmax_rtt = d3.min([minMax[1], parseFloat(form.max_rtt)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1745,"value":"md`${\n hover\n ? 'Latency on this hexbin: ' +\n current_hexbin.min_rtt.toFixed(2) +\n ' ms (min.)'\n : 'Try hovering over the map...'\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4009,"value":"defaults = {\n return {\n ..._defaults,\n // extend with some defaults for this notebook\n origin: _defaults.asn,\n detail: \"medium\",\n hist: true,\n network: _defaults.asn,\n protocol: \"Any\"\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3186,"value":"yesterday = {\n let a = new Date();\n a.setDate(a.getDate() - 1);\n return a.toISOString().split(\"T\")[0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4096,"value":"all_probes = {\n let [yyyy, m, d] = date.split(\"-\");\n const urlLocator = date === \"\" ? yesterday : `${yyyy}-${m}-${d}`; // dashes, different than the one used for the msms\n const probes = await fetch(\n `https://rd-gcp-cdn.ripe.net/api/v2/probes/archive/?date=${urlLocator}&status=1`\n ).then((r) => r.json());\n return probes[\"results\"];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1376,"value":"probe_to_latlon = Object.fromEntries(\n all_probes.map((p) => [\n p.id,\n [p.geometry.coordinates[1], p.geometry.coordinates[0]] // we need to swap them :(\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3063,"value":"_min_rtts_with_geo = [\n ...(await Promise.all(\n asn.split(\",\").map((asn) => {\n let [yyyy, m, d] = date.split(\"-\");\n let urlLocator = date === \"\" ? \"latest\" : `${yyyy}/${m}/${d}`;\n return fetch(\n `https://rd-gcp-cdn.ripe.net/rd/min-rtt-by-net/${urlLocator}/${asn}.json`\n ).then((r) => (r.status === 200 ? r.json() : []));\n })\n ))\n]\n .reduce((acc, curr) => acc.concat(curr))\n .map((o) => {\n return {\n latlon: probe_to_latlon[o.prb_id],\n prb_id: o.prb_id,\n min_rtt: o.min_rtt,\n af: o.af,\n ip_count: o.ip_count,\n origin: o.net,\n protocol: o.protoc\n };\n })\n .filter((o) => o.latlon !== undefined && o.latlon[0] !== null)\n// .filter((o) => o.protocol === proto)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2107,"value":"min_rtts_with_geo = _min_rtts_with_geo\n // .filter((o) => o.min_rtt < max_rtt && o.min_rtt > min_rtt)\n .filter((p) => {\n if (af.af === 4) return p.af === 4;\n else if (af.af === 6);\n return p.af === 6;\n return true;\n })\n .filter((p) => proto === \"Any\" || p.protocol === proto)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4216,"value":"probes = min_rtts_with_geo\n .map((m) => m.prb_id)\n .reduce((accumulator, currentValue, index, array) => {\n !accumulator.includes(currentValue) ? accumulator.push(currentValue) : null;\n return accumulator;\n }, new Array())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2155,"value":"color = d3.scaleSequential(\n d3.extent([min_rtt, max_rtt]), // domain\n // d3.interpolateYlOrBr // interpolator\n // (i) => d3.interpolateLab(\"#a1ff0a\", \"#ff0000\")(i)\n (i) => d3.interpolateHcl(\"#a1ff0a\", \"#ff0000\")(i)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"md`\n\nend of notebook\n\n---\n\n## Aux. functions supporting this notebook:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4437,"value":"h = Math.ceil((width * screen.height) / screen.width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1741,"value":"mutable hover = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":2982,"value":"mutable current_hexbin = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1326,"value":"height = Math.ceil((width * screen.height) / screen.width) // screen.height //width * (9 / 16)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3235,"value":"probeScale = (maxProbes = 100) =>\n d3\n .scaleLinear()\n .domain([0, maxProbes])\n .range([2, 5.0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3752,"value":"quantiles = {\n const N = 10;\n let quantiles = [];\n for (let n = 0.0; n <= N; n++)\n quantiles.push(d3.quantile(min_rtts_with_geo, n / N, (m) => m.min_rtt));\n return quantiles;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"a = {\n const N = 10;\n\n let colors = [];\n for (let n = 0.0; n <= N; n++)\n colors.push(color(d3.quantile(min_rtts_with_geo, n / N, (m) => m.min_rtt)));\n // let colors = [\n // color(d3.quantile(min_rtts_with_geo, 0.0 / N, (m) => m.min_rtt)), // start of first square\n // color(d3.quantile(min_rtts_with_geo, 1.0 - 1.0 / N, (m) => m.min_rtt)) // start of last square\n // ];\n\n let density_thresholds = d3.range(0, 1, 1.0 / N);\n let linearColorScale = d3\n .scaleLinear()\n .domain(d3.range(0, 1, 1 / colors.length))\n .range(colors);\n\n let quantz = d3.quantize(linearColorScale, density_thresholds.length);\n return {\n quantz: quantz,\n density_thresholds: density_thresholds\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"projection = {\n return (\n d3\n // .geoOrthographic()\n // .geoMercator()\n .geoEqualEarth()\n .scale(200)\n .translate([width / 2, height / 2]) // w, h\n // .precision(20)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@5\", \"d3-geo-projection@2\", \"d3-geo-polygon@1\", \"d3-array@^2.1\", \"d3-geo\", \"d3-hexbin@0.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"topojson = require(\"topojson@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3230,"value":"borders = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"world = {\n let detailLevel = {\n medium: \"110\",\n high: \"50\"\n };\n let detail = query.detail || defaults.detail;\n\n return fetch(\n `https://cdn.jsdelivr.net/npm/world-atlas@2/countries-${detailLevel[detail]}m.json`\n ).then((response) => response.json());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1151,"value":"water = topojson.mesh(world, world.objects.land, (a, b) => a === b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1191,"value":"not_water = topojson.mesh(world, world.objects.land, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3509,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":5307,"value":"embedding = {\n let [_, __, ___, username, notebook] = document.baseURI.split(\"/\");\n return [username, notebook.split(\"?\")[0]];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"import { thresholdColorScale } from \"@efrymire/gridding-map-files\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1717,"value":"import { ramp, swatches } from \"@d3/working-with-color\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3385,"value":"import { rangeSlider } from \"@mootari/range-slider@1326\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3956,"value":"import { what_is } from \"@aguformoso/ripe-atlas-texts\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4664,"value":"import { banner } from \"@aguformoso/ripencc-texts\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3977,"value":"import {\n defaults as _defaults,\n prettyNumberFormatter,\n query,\n getQuery\n} from \"@aguformoso/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5779,"value":"import { event, pixel } from \"@ripencc/matomo-tracking\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5778,"value":"pixel({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5777,"value":"{\n // let's emit events only when the chart changes\n embeddableCell;\n\n event({ action: \"Input\", name: `network=${asn}` });\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}