Published
Edited
Sep 16, 2019
chart = {
const svg = d3.select(DOM.svg(width, height));
const g = svg.append("g")
.selectAll("g")
.data(bins)
.join("g");
g.append("path")
.attr("stroke", "currentColor")
.attr("d", d => `
M${x((d.x0 + d.x1) / 2)},${y(d.range[1])}
V${y(d.range[0])}
`);
g.append("path")
.attr("fill", "#ddd")
.attr("d", d => `
M${x(d.x0) + 1},${y(d.quartiles[2])}
H${x(d.x1)}
V${y(d.quartiles[0])}
H${x(d.x0) + 1}
Z
`);
g.append("path")
.attr("stroke", "currentColor")
.attr("stroke-width", 2)
.attr("d", d => `
M${x(d.x0) + 1},${y(d.quartiles[1])}
H${x(d.x1)}
`);
g.append("g")
.attr("fill", "currentColor")
.attr("fill-opacity", 0.2)
.attr("stroke", "none")
.attr("transform", d => `translate(${x((d.x0 + d.x1) / 2)},0)`)
.selectAll("circle")
.data(d => d.outliers)
.join("circle")
.attr("r", 2)
.attr("cx", () => (Math.random() - 0.5) * 4)
.attr("cy", d => y(d.y));
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
bins = d3.histogram()
.thresholds(n)
.value(d => d.x)
(data)
.map(bin => {
bin.sort((a, b) => a.y - b.y);
const values = bin.map(d => d.y);
const min = values[0];
const max = values[values.length - 1];
const q1 = d3.quantile(values, 0.00);
const q2 = d3.quantile(values, 0.50);
const q3 = d3.quantile(values, 0.95);
const iqr = q3 - q1; // interquartile range
const r0 = Math.max(min, q1 - iqr * 1.5);
const r1 = Math.min(max, q3 + iqr * 1.5);
bin.quartiles = [q1, q2, q3];
bin.range = [r0, r1];
bin.outliers = bin.filter(v => v.y < r0 || v.y > r1); // TODO
return bin;
})
rttFile = d3.text("https://sg-pub.ripe.net/emile/tmp/minexternalrtts.2019-09-01.txt").then(d => d.split("\n"))
de_prbs = fetch("https://atlas.ripe.net/api/v2/probes/archive?status=1,2").then(d => d.json())
data2 = de_prbs.results.filter(p => p.country_code==="DE").filter(p => p.id < 6000 || p.id > 10000).map(p => {
let pR = rttArr.find(p2 => p2.prb_id===p.id);
let pK = probes_kreis.find(pk => Number(pk[0])===p.id);
return {
prb_id: p.id,
rtt: pR && pR.rtt,
pop_density: pK && Number(pK[2]),
kreis: pK && Number(pK[1])
}
}).filter(p => p.rtt).reduce((kreis, p) => { if (kreis[p.kreis]) { kreis[p.kreis].rtts.push(p.rtt) } else { kreis[p.kreis]={ rtts: [p.rtt], pop_density: p.pop_density} }; return kreis },{})
probes_kreis = d3.text("https://sg-pub.ripe.net/emile/tmp/probes_kreis3.csv").then(text => d3.dsvFormat("\t").parseRows(text))
rttArr = rttFile.map(e => { let a = e.split(" "); return { prb_id: Number(a[0]), af: Number(a[1]), rtt: Number(a[2]) }})
// data = d3.csv("https://gist.githubusercontent.com/mbostock/d63e6019c63887e39e44646696abfb69/raw/5b2b15b4c652167f6c038e717bbe3385dbb9bb99/diamonds.csv", ({carat, price}) => ({x: +carat, y: +price}))
data3 = Object.entries(data2).filter(k => k[1].rtts.length > 3).map(p => ({ name: p[0], y0: d3.min(p[1].rtts), y1: d3.max(p[1].rtts), median: d3.median(p[1].rtts), x: p[1].pop_density}))
data = rttArr.map(r => {
let popDens = probes_kreis.find(prb => Number(prb[0]) === r.prb_id)
return {
y: r.rtt,
x: popDens && Number(popDens[2]) || null
}
}).filter(r => r.x)
d3.min(probes_kreis, d => Number(d[2]))
x = d3.scaleLinear()
.domain([d3.min(bins, d => d.x0), d3.max(bins, d => d.x1)])
.rangeRound([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([d3.min(bins, d => d.range[0]), d3.max(bins, d => d.range[1])]).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(n).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, "s"))
.call(g => g.select(".domain").remove())
n = width / 30
height = 600
margin = ({top: 20, right: 20, bottom: 30, left: 40})
d3 = require("d3@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.
