Data sculptor
Public
Edited
Dec 5, 2023
5 forks
6 stars
hilbertChart = {
const margin = 90;
return HilbertChart()
.width(chartWidth - margin * 2)
.margin(margin)
.hilbertOrder(32 / 2)
.data(parseIpData(ianaData))
.rangePaddingAbsolute(1)
.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();
}
}
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.
