hilbertChart = {
const margin = 90;
return HilbertChart()
.width(chartWidth - margin * 2)
.margin(margin)
.hilbertOrder(32 / 2)
.data(parseIpData(ianaData))
.rangePadding(0.03)
.valFormatter(ipFormatter)
.rangeTooltipContent((d) => `<b>${d.name}</b>: ${prefixFormatter(d)}`);
function parseIpData(ipData) {
const prefixes = [];
ipData
.map((row) => {
const pref = new Ip.Prefix(row.Prefix);
return {
start: pref.firstIp().toNum(),
length: pref.countIps(),
name: getName(row.Designation),
infos: [row]
};
})
.forEach((prefix) => {
let last;
if (
prefixes.length &&
(last = prefixes[prefixes.length - 1]) &&
last.name === prefix.name &&
last.start + last.length === prefix.start
) {
last.length += prefix.length;
last.infos.push(prefix.infos[0]);
} else {
prefixes.push(prefix);
}
});
return prefixes;
//
function getName(designation) {
let name = designation;
if (name.indexOf("Administered by") > -1) {
name = "Various Registries";
}
return name;
}
}
function ipFormatter(d) {
return new Ip.Addr(d).toString();
}
function prefixFormatter(d) {
const ipRange = new Ip.Range(d.start, d.start + d.length - 1);
const prefixes = ipRange.toPrefixes();
return (prefixes.length === 1 ? prefixes[0] : ipRange).toString();
}
}
setTimeout(
() =>
// run async to allow hilbertChart to be DOM initialized
hilbertChart.addMarker(
new Ip.Addr("128.0.0.0").toNum(),
censysHeatmapUrl,
chartWidth - 90 * 2,
chartWidth - 90 * 2,
() => ``
),
5
)
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.
