Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
bo_asn
bo_as = Promise.all(
bo_asn.map(asn => d3.json(baseUrl + "D002/" + asn + ".json"))
)
css = html`<style type="text/css">
#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 drawASBox(data, container) {
//const height = 300;
const asBox = container.append("div").classed("asBox", true);
const header = asBox.append("header");
header.append("h2").text(data.as.number);
header.append("p").text(data.as.name);
asBox
.append("p")
.classed("year", true)
.text("Sistema autónomo atribuido en " + data.as.since);
function appendTextWithNumber(element, number, text) {
element
.append("span")
.classed("number", true)
.text(number.toLocaleString("es-BO"));
element
.append("span")
.classed("text", true)
.text(text);
}
const ipv4 = asBox.append("p").classed("ipv4", true);
appendTextWithNumber(ipv4, data.ipv4.number, " direcciones IPv4");
const probes = asBox.append("div").classed("probes", true);
const title = probes.append("p").classed("title", true);
appendTextWithNumber(title, data.probesNumber, " sondas RIPE Atlas");
function drawProbes(data, getText) {
const ul = probes.append("ul");
const li = ul
.selectAll("li")
.data(data)
.enter()
.append("li");
li.append("span").text(getText);
const svg = li.append("svg").attr("height", 24);
/* TODO: arrange the icons in various lines if there are many */
svg
.append("g")
.attr("transform", "translate(10,1)")
.selectAll("g")
.data(d => d.probes)
.enter()
.append("g")
.attr("transform", (d, i) => "translate(" + i * 24 + ",0) scale(0.5)")
.append("a")
.attr("href", d => "https://atlas.ripe.net/probes/" + d.id)
.append("path")
.attr("d", iconPath)
.attr("fill", d => status[d.status].color)
.attr("stroke", "#333");
}
function drawProbesByStatus() {
drawProbes(data.probesByStatus, d => status[d.status].nombre);
}
function drawProbesByYear() {
drawProbes(data.probesByYear, d => d.year);
}
//drawProbesByYear();
drawProbesByStatus();
return asBox.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.
