Published
Edited
May 19, 2021
Insert cell
md`# minRTT map`
Insert cell
`first try. reusing some of the code at https://observablehq.com/@mbostock/turf-isolines`
Insert cell
{
const height = width / 1.6;
const context = DOM.context2d(width, height);
const projection = d3.geoMercator().fitSize([width, height], isolines);
const path = d3.geoPath(projection, context);
context.beginPath(), path(isolines), context.stroke();
return context.canvas;
}
Insert cell
{
const height = width / 1.6;
const context = DOM.context2d(width, height);
const projection = d3.geoMercator().fitSize([width, height], isolines);
const path = d3.geoPath(projection, context);
for (const isoband of isobands.features) {
context.beginPath();
path(isoband);
context.fillStyle = z(isoband.properties.min_rtt.split("-")[0]);
context.fill();
}
return context.canvas;
}
Insert cell
z = d3.scaleSequential(d3.interpolateViridis).domain(d3.extent(breaks))
Insert cell
breaks = [0,10,50,100,150,200]
Insert cell
isolines = turf.isolines(geoj, breaks, {zProperty: "min_rtt"})
Insert cell
isobands = turf.isobands(geoj, breaks, {zProperty: "min_rtt"})
Insert cell
geoj = FileAttachment("1299.geo.json").json()
Insert cell
turf = require("@turf/turf@5")
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more