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(borders.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", "0.5px");
// country borders
topg
.selectAll("path")
.data(borders.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
});
}
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.
