31:Taf3,map = { const circle = d3.geoCircle(), svg = d3 .create("svg") .attr("width", width) .attr("height", Math.ceil((width * screen.height) / screen.width)); const path = d3.geoPath().projection(projection); const topg = svg.append("g").attr("class", "topg"); // water topg .append('rect') .attr('width', width) .attr('height', Math.ceil((width * screen.height) / screen.width)) .attr('fill', daylight.value ? '#CFDCDE' : '#00173D'); // landmass topg .selectAll("path") .data(land.features) .enter() .append("path") .attr("d", path) .attr("fill", daylight.value ? "white" : '#002652') .attr("stroke", "#999") .attr("stroke-width", "0.5px"); // country borders topg .selectAll("path") .data(borders.features) .enter() .append("path") .attr("d", path) .attr("fill", "none") .attr("stroke", daylight.value ? "#B8B8B8" : '#003566') .attr("stroke-width", "0.5px"); topg .append("g") .selectAll("circle") .data(min_rtts_with_geo) .enter() .append("a") .attr("xlink:href", d => `https://atlas.ripe.net/probes/${d.prb_id}`) .attr("target", d => "_blank") .append("circle") .attr("stroke", "none") .attr("fill", d => { return colorScale(scale(d.min_rtt)); }) .attr("fill-opacity", daylight.value ? 1.0 : 0.50) .attr("stroke-width", "0.5px") .attr("cx", d => projection([d.latlon[1], d.latlon[0]])[0]) .attr("cy", d => projection([d.latlon[1], d.latlon[0]])[1]) .attr("r", d => 2) .on("mouseover", d => { mutable hover = d; }) .on("mouseout", () => { mutable hover = null; }); 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", .5 / transform.k); topg.attr('transform', transform); topg.selectAll("circle").attr('r', 2 / transform.k); // map lines also get thinner as we zoom in topg.selectAll("path").attr("stroke-width", .5 / transform.k); }); 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 }); }32:[{"id":"1a8bde0512edac0aa5cde4f5c6f78a385bfda9a806bef75dc34b1b485ce1bcaeda01651c5588a109d381892b0e098ec2e13ac5f74b6582d48f419b9d7f3da2dc","href":"https://static.observableusercontent.com/files/1a8bde0512edac0aa5cde4f5c6f78a385bfda9a806bef75dc34b1b485ce1bcaeda01651c5588a109d381892b0e098ec2e13ac5f74b6582d48f419b9d7f3da2dc","name":"20210518.json","type":"application/json","lastModified":1621498598286.602,"size":19441264}] 2f:{"title":"RIPE Atlas min RTT: probes","cells":[{"id":0,"value":"md`# RIPE Atlas min RTT: probes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1767,"value":"viewof asn = Inputs.text({\n label: \"ASN\",\n placeholder: \"Type the ASN\",\n submit: true,\n type: 'number',\n value: 3333\n})","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})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2165,"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})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2290,"value":"viewof date = Inputs.text({\n type: 'date',\n label: 'Choose a date',\n value: yesterday\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1745,"value":"md`${\n hover\n ? `Latency on [this probe](https://atlas.ripe.net/probes/${hover.prb_id}): ` +\n hover.min_rtt.toFixed(2) +\n ' ms'\n : 'Try hovering on the probes in the map...'\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1724,"value":"swatches(a.quantz.reverse())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2265,"value":"{\n const form = html``;\n form.in.onclick = () => map.zoomIn();\n form.out.onclick = () => map.zoomOut();\n // form.random.onclick = () => map.zoomRandom();\n // form.reset.onclick = () => map.zoomReset();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2347,"value":"fullscreen = {\n const button = html``;\n button.onclick = () => map.parentElement.requestFullscreen();\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1931,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2141,"value":"viewof green_on_top = {\n let options = [\n { label: \"fast on top\", value: 1 },\n { label: \"slow on top\", value: 0 }\n ];\n\n return Inputs.radio(options, {\n legend: \"Painting order\",\n format: l => l.label,\n value: options.filter(option => option.value == 1)[0]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2410,"value":"// I know, the whole planet Earth\n// can't be at day or night at the\n// same time, not even during an eclipse\n\nviewof daylight = {\n let options = [\n { label: 'day', value: true },\n { label: 'night', value: false }\n ];\n return Inputs.radio(options, {\n format: o => o.label,\n value: options.filter(o => o.label === 'day')[0]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1386,"value":"all_probes = FileAttachment(\"20210518.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1376,"value":"probe_to_latlon = Object.fromEntries(\n all_probes.objects.map(p => [p.id, [p.latitude, p.longitude]])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2336,"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":2310,"value":"yyyy = date.split('-')[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2323,"value":"m = date.split(\"-\")[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2327,"value":"d = date.split(\"-\")[2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2269,"value":"_min_rtts_with_geo = [\n ...(await Promise.all(\n asn\n .split(\",\")\n .map((asn) =>\n fetch(\n `https://rd-gcp-cdn.ripe.net/rd/min-rtt-by-net/${yyyy}/${m}/${d}/${\n asn > 0 ? asn : 3333\n }.json`\n ).then((r) => (r.status == 200 ? r.json() : []))\n )\n ))\n].reduce((acc, curr) => acc.concat(curr))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2284,"value":"min_rtts_with_geo = _min_rtts_with_geo\n .filter(o => o.min_rtt < max_rtt && o.min_rtt > min_rtt)\n .sort((a, b) =>\n green_on_top.value ? b.min_rtt - a.min_rtt : a.min_rtt - b.min_rtt\n )\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.origin\n };\n })\n .filter(o => o.latlon !== undefined && o.latlon[0] !== null)","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":1741,"value":"mutable hover = 0","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":394,"value":"// colorScale = d3\n// .scaleOrdinal()\n// .domain(a.density_thresholds)\n// // .range(a.quantz.slice(-23))\n// .range(a.quantz)\ncolorScale = a.colorScale","pinned":false,"hidden":false,"mode":"ojs"},{"id":1862,"value":"scale = d3\n .scaleLinear()\n .domain([\n Math.min(...min_rtts_with_geo.map(m => m.min_rtt)),\n Math.max(...min_rtts_with_geo.map(m => m.min_rtt))\n ])\n .range([0, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"a = {\n let colors = [\"#ffffd4\", \"#fe9929\", \"#8c2d04\"];\n\n let density_thresholds = d3.range(0, 1, .1);\n let linearColorScale = d3\n .scaleLinear()\n .domain(d3.range(0, 1, 1 / colors.length))\n .range(colors);\n let quantz = d3.quantize(linearColorScale, density_thresholds.length + 1);\n return {\n quantz: quantz,\n density_thresholds: density_thresholds,\n colorScale: linearColorScale\n // contours: contours,\n // contour_data: contour_data,\n // gridPoints: gridPoints\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(.1)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2360,"value":"borders = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"world = fetch(\n \"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\"\n).then(response => response.json())","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":2,"value":"d3 = require(\"d3@5\", \"d3-geo-projection@2\", \"d3-geo-polygon@1\", \"d3-array@^2.1\", \"d3-geo\", \"d3-tile@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"topojson = require(\"topojson@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1717,"value":"import { ramp, swatches } from \"@d3/working-with-color\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}