Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
css = html`<style type="text/css">
.row {margin: 1em; padding: 1em;}
.row header {border-bottom: 1px solid #888; }
.row section {margin: 0.5em 0 0 0}
.row section svg {position: absolute; left: 300px}
/*#asBoxes {display: flex; flex-flow: row wrap;}
#asBoxes .asBox {width: 250px; border: 1px solid #888; margin: 1em; padding: 1em;}
#asBoxes .asBox header {border-bottom: 1px solid #888; }
#asBoxes .asBox .year {font-size: 0.8em}
#asBoxes .asBox .number {font-weight: bold; font-size: 1.2em; }
#asBoxes .asBox .probes ul {list-style: none; margin-left: 0; padding-left: 0;}
#asBoxes .asBox .probes ul li {padding-left: 2px;}*/
</style>`
function createList() {
const container = d3.select(DOM.element("div"));
const maxIPv4Width = 400;
const barHeight = 24;
const largestIpv4NumberOfAddresses = rows.reduce((a, c) => {
const maxInRow = c.ipv4.reduce((b, d) => {
if (d.numberOfAddresses > b) b = d.numberOfAddresses;
return b;
}, 0);
if (maxInRow > a) a = maxInRow;
return a;
}, 0);
const row = container
.selectAll("div")
//.data(rows.slice(0, 3)) // REMOVE
.data(rows)
.enter()
.append("div")
.classed("row", true);
function createHeader(row) {
const header = row.append("header");
const h2 = header.append("h2").text(d => d.name);
const p = header.append("p").text(d => d.handle);
return header;
}
const header = createHeader(row);
function createIpv4(row) {
const section = row.append("section").classed("ipv4", true);
const h3 = section.append("h3").text("IPv4 prefixes");
const ul = section.append("ul");
const li = ul
.selectAll("li")
.data(d => d.ipv4.sort((a, b) => a.prefixLength > b.prefixLength))
.enter()
.append("li");
li.text(d => d.handle + " (" + d.numberOfAddresses + ")");
const svg = li
.append("svg")
.attr("height", barHeight)
.attr("width", "100%");
svg
.append("g")
.attr("transform", "translate(10,1)")
/*.append("a")
.attr("href", d => "https://atlas.ripe.net/probes/" + d.id)*/
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr(
"width",
d =>
(d.numberOfAddresses / largestIpv4NumberOfAddresses) *
maxIPv4Width /*
Math.max(
1,
)*/
)
.attr("height", barHeight)
.attr("fill", "red" /*d => status[d.status].color*/);
//.attr("stroke", "#333");
return section;
}
const ipv4 = createIpv4(row);
return container.node();
}
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.
