31:Te6d,map = { const circle = d3.geoCircle(), svg = d3 .create("svg") .attr("width", width) .attr("height", height); var center = projection([0, 0]); const path = d3.geoPath().projection(projection); const topg = svg.append("g").attr("class", "topg"); // topg // .selectAll("path") // .data(land.features) // .enter() // .append("path") // .attr("d", path) // .attr("fill", "none") // .attr("stroke", "#999") // .attr("stroke-width", "0.5px"); topg .append("path") .datum(water) .attr("class", "outer") .attr("fill", "none") .attr("stroke", "#999") .attr("stroke-width", "0.5px") .attr("d", path) .attr("id", "usPath"); svg .append("clipPath") .attr("id", "usClipPath") .append("use") .attr("xlink:href", "#usPath"); const g = topg .append("g") .selectAll(".contour") .data(contours) .join("g"); g.append("path") .attr("clip-path", "url(#usClipPath)") .attr("class", d => `contour ${d.value}`) .attr("d", d3.geoPath()) .attr("stroke-width", (d, i) => (i % 5 && hover !== d.value ? 0.25 : 1)) .style("stroke", "white") .attr("fill", d => colorScale(s(d.value))); // .on("mouseover", d => { // mutable hover = d.value; // }) // .on("mouseout", () => { // mutable hover = null; // }); let hexes; let first_pass = true; const zoom = d3 .zoom() .scaleExtent([1, 32]) .on('zoom', () => { // called on onzoom event const { transform } = d3.event; let bounds = topg.node().getBoundingClientRect(); // console.log(bounds); first_pass = false; // map lines also get thinner as we zoom in topg.selectAll("path").attr("stroke-width", .5 / transform.k); topg.attr('transform', transform); let hexbin = d3 .hexbin() .extent([[0, 0], [width, height]]) .radius(1.25 / transform.k) .x(d => d.latlon[0]) .y(d => d.latlon[1]); let min_rtts_with_geo_hex = Object.assign( hexbin(min_rtts_with_geo) .map(d => ((d.min_rtt = d3.median(d, d => d.min_rtt)), d)) .sort((a, b) => b.prb_id - a.prb_id), { title: "Median RTT" } ); 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(2 / transform.k)) .attr("fill", d => color(d.min_rtt)) .attr("stroke", d => d3.lab(color(d.min_rtt)).darker()) .attr("stroke-width", .5 / transform.k) // .on("mouseover", d => { // mutable hover = d.min_rtt; // }) // .on("mouseout", () => { // mutable hover = null; // }) .append("title") .text(d => `${d.length.toLocaleString()} probes`); }); 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 svg.transition().call(zoom.scaleBy, 0); // return svg.node(); 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":1621948064185.973,"size":19441264}] 2f:{"title":"RIPE Atlas min RTT: isolines","cells":[{"id":0,"value":"md`# RIPE Atlas min RTT: isolines`","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":3213,"value":"viewof date = Inputs.text({\n type: 'date',\n label: 'Choose a date',\n value: yesterday\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":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})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1745,"value":"md`${\n hover\n ? 'Latency on this hexbin: ' + hover.toFixed(2) + ' ms (min.)'\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":2889,"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":2690,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3112,"value":"s = d3\n .scaleLinear()\n .domain([\n d3.min(contours.map(c => c.value)),\n d3.max(contours.map(c => c.value))\n ])\n .range([0, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2988,"value":"gridPoints = hexbin(min_rtts_with_geo)\n .map(d => ((d.min_rtt = d3.median(d, d => d.min_rtt)), d))\n .map(d => {\n return { x: d.x, y: d.y, min_rtt: d.min_rtt };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2984,"value":"hexbin = d3\n .hexbin()\n .extent([\n [0, 0],\n [width, height]\n ])\n .radius(7)\n .x((d) => d.latlon[0])\n .y((d) => d.latlon[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2944,"value":"contour_data = gridPoints\n .map(hex =>\n new Array(Math.floor(hex.min_rtt)).fill(projection([hex.y, hex.x]))\n )\n .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2979,"value":"contour = d3\n .contourDensity()\n .x((d) => d[0])\n .y((d) => d[1])\n .size([width, height])\n .cellSize(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2982,"value":"contours = contour(contour_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2199,"value":"viewof pow = Inputs.range([0, 1], {\n label: 'pow',\n step: .01,\n value: .06\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3215,"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":3207,"value":"yyyy = date.split('-')[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3209,"value":"m = date.split(\"-\")[1] //.replace('0', '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":3211,"value":"d = date.split(\"-\")[2] //.replace('0', '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1570,"value":"δ = 7","pinned":false,"hidden":false,"mode":"ojs"},{"id":1567,"value":"ε = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":1602,"value":"π = Math.PI","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":1398,"value":"_min_rtts_with_geo = 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.json())","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(o => o.af === 4)\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":2155,"value":"color = d3.scaleSequential(\n d3.extent(min_rtts_with_geo, d => d.min_rtt),\n d3.interpolateYlOrBr\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1411,"value":"circles = min_rtts_with_geo.map(m => {\n return {\n geometry: { type: \"Point\", coordinates: m.latlon },\n rtts: [m.min_rtt]\n };\n})\n// .slice(0, 500)","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":805,"value":"width = 954","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":37,"value":"mutable rawPoints = {\n let [W, E, S, N] = [\n Math.min(...circles.map(circle => circle.geometry.coordinates[0])) - ε,\n Math.max(...circles.map(circle => circle.geometry.coordinates[0])) + ε,\n Math.min(...circles.map(circle => circle.geometry.coordinates[1])) - ε / 2,\n Math.max(...circles.map(circle => circle.geometry.coordinates[1])) + ε / 2\n ];\n // range longitudes from S to N for every δ degrees\n const lons = d3.range(S, N, δ).reverse();\n\n // range latitudes from W to E for every δ degrees\n const lats = d3.range(W, E, δ);\n\n // long / lat points in order from west to east, then north to south, like a wrap\n return lons.map((lon, i) => lats.map(lat => [lat, lon])).flat();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"geojson = rawPoints.map((d, i) => {\n return {\n type: \"Feature\",\n geometry: {\n type: \"Point\",\n coordinates: d\n },\n properties: {\n index: i\n }\n };\n})","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\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":true,"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":true,"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":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":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":152,"value":"import {\n sum_array,\n miliseconds_to_radius\n} from \"@aguformoso/multilateration-from-your-browser\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}