Public
Edited
Sep 11, 2022
2 stars
ASN Registry HexGrids
RegistryHexgrid(xx, { registry: "PSINet, Inc.", scale: "registry" })
RegistryHexgrid(xx, { registry: "LACNIC", fill: "#8cbf55", scale: "registry" })
RegistryHexgrid(xx, { registry: "ARIN", fill: "#5a84c0", scale: "registry" })
RegistryHexgrid(xx, { registry: "AFRINIC", fill: "#e68d42", scale: "registry" })
RegistryHexgrid(xx, { registry: "APNIC", fill: "#e2d25b", scale: "registry" })
RegistryHexgrid(xx, {
registry: "RIPE NCC",
fill: "#7e6aaa",
scale: "registry"
})
function RegistryHexgrid(
data,
{
registry = "RIPE NCC",
fill = "#67000d",
stroke = "#3e3d3d",
empty = "white",
scale = "all"
} = {}
) {
var reg = data.filter((d) => d.Designation == registry);
var max_val =
scale == "all" ? d3.max(data.map((d) => d.n)) : d3.max(reg.map((d) => d.n));
var titles = reg.map(
(d) =>
"[" +
registry +
"] " +
d.org +
": " +
d3.format(",")(d.n) +
" Unique IPv4s"
);
var alphas = reg.map((d) => Math.log(d.n) / Math.log(max_val));
var Tile = Honeycomb.defineHex({ dimensions: 7 });
var grid = new Honeycomb.Grid(
Tile,
Honeycomb.rectangle({
width: Math.sqrt(reg.length),
height: Math.sqrt(reg.length)
})
);
var corners = [];
grid.forEach((d) => corners.push(d.corners));
var ofs_x = d3.min(corners.flatMap((v) => v.map((d) => d.x)));
var ofs_y = d3.min(corners.flatMap((v) => v.map((d) => d.y)));
var height = d3.max(corners.flatMap((v) => v.map((d) => d.y))) + ofs_y;
var width = d3.max(corners.flatMap((v) => v.map((d) => d.x))) + ofs_x;
var base_grid = d3
.create("svg")
.attr("width", width + 20)
.attr("height", height + 20)
.attr("viewBox", [0, 0, width + 20, height + 20])
.attr("style", "height: auto; height: intrinsic;");
var line = d3
.line()
.x((d) => d.x + Math.abs(ofs_x) + 1)
.y((d) => d.y + Math.abs(ofs_y));
base_grid
.append("g")
.attr("class", "hexes")
.selectAll("hexes")
.data(corners)
.enter()
.append("path")
.attr("stroke", stroke)
.attr("stroke-width", (d, i) => (i < reg.length ? 0.5 : 0))
.attr("fill", (d, i) => (i < reg.length ? fill : empty))
.attr("fill-opacity", (d, i) => alphas[i])
.attr("d", (d) => line(d.concat(d[0])))
.append("title")
.text((d, i) => titles[i]);
return base_grid.node();
}
Honeycomb = require("honeycomb-grid@beta")
xx = FileAttachment("xx.csv").csv({ typed: true })
map = FileAttachment("map.png").image()
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.
