Published
Edited
Apr 4, 2022
2 forks
13 stars
Plot: Stacked bin dotsWaffle ChartRenko ChartHow to attach a plot to a DOM elementIrregular Bar ChartDatabase Outage PlotLog-scale 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?
Irregular bins histogram
Plot.plot({
x: {
label: "Commute time (minutes) →",
ticks: 20
},
y: {
label: "↑ People (per 5 minute interval)",
transform: (n) =>
n * 5 /* 5-minute intervals */ * 1000 /* data is in thousands */,
tickFormat: "~s",
nice: true,
grid: true
},
caption: "Histogram of travel time (to work), US 2000 census.",
marks: [
Plot.rectY(commute, {
x1: "lo",
x2: "hi",
y: (d) => d.people / (d.hi - d.lo),
fill: "#aaa",
insetRight: 1,
title: (d) =>
`${new Intl.NumberFormat("en-US").format(d.people / 1000)} million people\nspend ${d.lo} to ${d.hi} minutes\nto commute to work.`
}),
Plot.text(commute, {
filter: "annotation",
text: "annotation",
x: "hi",
y: (d) => d.people / (d.hi - d.lo),
dx: 2,
dy: 8,
textAnchor: "start"
}),
Plot.ruleY([0])
],
height: 240,
width: 400
})
commute = d3.csvParse(
`lo,hi,people,annotation
0,5,4180
5,10,13687
10,15,18618
15,20,19634
20,25,17981
25,30,7190
30,35,16369,"← For 16.4 million workers, commuting takes 30 to 35 min."
35,40,3212
40,45,4122
45,60,9200
60,90,6461
90,150,3435
`,
d3.autoType
)
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.
