Published
Edited
Apr 4, 2022
4 forks
Importers
9 stars
Plot: Stacked bin dotsRenko ChartHow to attach a plot to a DOM elementIrregular Bar ChartDatabase Outage PlotLog-scale histogramIrregular bins histogramPlot HyperboloidHappy anniversary, Project Gutenberg!ROC curveELD ViewerMatrix diagramK-means binningHello, Open MeteoRoad traffic under COVID restrictions (France)How many books was I reading?Metbrewer color schemesIrregular scalesTopological subsamplingVariants du SARS-CoV-2 en FranceVariants of SARS-Cov-2 in EuropeVariable tick colorMinimalist dodge plotAssemblée nationale 2017-2022AoC 12: shortest path under constraintsHow fast does walk-on-spheres converge?
Waffle Chart
Also listed in…
Plot
data = d3.csvParse(`group,label,freq
Infants <1,0-1,16467
Children <11,1-11,30098
Teens 12-17,12-17,20354
Adults 18+,18+,12456
Elderly 65+,65+,12456`)
units = data.flatMap(d => d3.range(Math.round(d.freq / 1000)).map(() => d))
Plot.plot({
marks: [
Plot.cell(
units,
Plot.stackX({
y: (_, i) => i % 5,
fill: "label",
title: "group"
})
),
Plot.text(
units,
Plot.stackX({
y: (_, i) => i % 5,
text: "label"
})
)
],
x: { axis: null },
y: { axis: null },
color: { scheme: "warm" }
})
Plot.barX(data, { x: "freq", fill: "label", title: "group" }).plot({ color: { scheme: "warm" } })
Plot.plot({
facet: {
data: data2,
y: "facet"
},
marks: [
Plot.cell(
data2,
Plot.stackX({
transform: unitTransform("freq", 6, 1000),
y: "row",
fill: "label",
title: "group"
})
),
Plot.text(
data2,
Plot.stackX({
transform: unitTransform("freq", 6, 1000),
y: "row",
text: "label"
})
)
],
x: { axis: null },
y: { axis: null },
color: { scheme: "warm" }
})
// todo: use Plot.transform
transformFlatMap = (f) =>
function transform(data, facets) {
const unitFacets = [];
const unitData = [];
for (const index of facets) {
const facet = [];
for (const d of f(Array.from(index, (i) => data[i])).flat(1)) {
facet.push(unitData.push(d) - 1);
}
unitFacets.push(facet);
}
return { data: unitData, facets: unitFacets };
}
function unitTransform(value, rows = 5, n = 1) {
return transformFlatMap(data => {
let counter = 0;
return data.map(d =>
Array.from({ length: Math.round(d[value] / n) }, () => ({
...d,
row: counter++ % rows
}))
);
});
}
data2 = ["A", "B", "C"].flatMap(facet =>
data.map(d => ({ ...d, freq: 3000 + Math.random() * 20000, facet }))
)
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.
