Public
Edited
Sep 20, 2023
Importers
width = 560
height = 300
accessor = d => d.value
xAxisText = 'Unemployment rate (%)'
yAxisSupplementText = '(no. of counties)'
Object.keys(d3).filter(d => d.startsWith("random"))
// https://github.com/d3/d3-random
// randomGen = d3.randomInt(1, 10)
randomGen = d3.randomNormal(1, 10)
function appendHistogram(group, data, accessor, width, height, xAxisText, yAxisSupplementText, prob=false) {
// https://observablehq.com/@d3/d3-bin
let bins = d3.bin()
.thresholds(40)
.value(accessor)
(data);
let x = d3.scaleLinear()
.domain([bins[0].x0, bins[bins.length - 1].x1])
.range([0, width]);
group.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
.call((g) => g.append("text")
.attr("x", width)
.attr("y", 25)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text(`${xAxisText.length == 0 ? "Rate" : xAxisText} →`));
group.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
let totalCount = 1
if (prob) {
totalCount = data.length;
}
let y = d3.scaleLinear()
.domain([0, d3.max(bins, (d) => d.length / totalCount)])
.range([height, 0]);
const yAxisAnnotation = prob ? "Prob." : "Freq.";
group.append("g")
.call(d3.axisLeft(y).ticks(height / 40))
.call((g) => g.select(".domain").remove())
.call((g) => g.append("text")
.attr("x", -20)
.attr("y", -30)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(`↑ ${yAxisAnnotation} ${yAxisSupplementText}`));
group.append("g")
.attr("fill", "steelblue")
.selectAll()
.data(bins)
.join("rect")
.attr("x", (d) => x(d.x0) + 1)
.attr("width", (d) => x(d.x1) - x(d.x0)- 1)
.attr("y", (d) => y(d.length / totalCount))
.attr("height", (d) => y(0) - y(d.length / totalCount));
}
// https://observablehq.com/@observablehq/interactivity-in-observable
viewof useProb = Inputs.toggle({label: "Prob", value: true})
// TODO: CDF on the same chart
histogram = {
const margin = {top: 40, right: 0, bottom: 30, left: 40};
const svg_width = width + margin.left + margin.right;
const svg_height = height + margin.top + margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto;");
const chart = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`);
appendHistogram(chart, data, accessor, width, height, xAxisText, yAxisSupplementText, useProb)
return svg.node();
}
function updateData() {
for (let i = 0; i < data.length; ++i) {
data[i].value = randomGen();
}
return data;
}
updateData();
{
updateData();
return Plot.rectY(data, Plot.binX({y: "count"}, {x: "value"})).plot()
}
data = d3.map(Array(1000), (d, i) => ({pos: i, value: randomGen()}))
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.
