map = {
const circle = d3.geoCircle(),
height = width * (9 / 16),
svg = d3
.create("svg")
.attr("width", width)
.attr("height", height);
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");
// .attr("class", "outer")
// .attr("fill", "none")
// .attr("stroke", "#999")
// .attr("stroke-width", "0.5px")
// .enter()
// // .append("path")
// .attr("d", path);
// all probes, keep for reference
// svg
// .append("g")
// .attr("fill", "blue")
// .attr("stroke-width", "0.5px")
// .selectAll("circle")
// .data(all_probes.objects.filter(p => p.latitude && p.longitude))
// .join("circle")
// .attr("cx", p => {
// console.log(p);
// return projection([p.longitude, p.latitude])[0];
// })
// .attr("cy", p => projection([p.longitude, p.latitude])[1])
// .attr("r", 2);
topg
.append("g")
.selectAll("circle")
.data(plottable_probes)
.enter()
.append("a")
.attr("xlink:href", d => `https://atlas.ripe.net/probes/${d.id}`)
.attr("target", d => "_blank")
.append("circle")
.attr("stroke", "none")
///.attr("fill", d => {
/// return colorScale(scale(d.min_rtt));
///})
.attr("stroke-width", "0.5px")
.attr("cx", d => projection(
[ d.geometry.coordinates[0], d.geometry.coordinates[1] ]
)[0] )
.attr("cy", d => projection(
[ d.geometry.coordinates[0], d.geometry.coordinates[1] ]
)[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', () => {
const { transform } = d3.event;
topg.attr('transform', transform);
topg.selectAll("circle").attr('r', 2 / transform.k);
topg.selectAll("d").attr('stroke-width', .5 / transform.k);
// map lines also get thinner as we zoom in
topg.selectAll("path").attr("stroke-width", .5 / transform.k);
});
svg.call(zoom);
// 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
});
}