Published
Edited
Oct 11, 2021
7 stars
Plot: Stacked bin dotsWaffle ChartRenko 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)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?
How many books was I reading?
Also listed in…
Plot
data = books.flatMap((book) =>
d3
.utcDays(
d3.isoParse(book.start),
// 🌶 add 24hrs to the end date, in case a book is read in a single day (end==start).
24 * 3600 * 1000 + +d3.isoParse(book.stop)
)
.map((date) => ({ ...book, date }))
)
Plot.rectY(
data,
Plot.stackY({
x: "date",
interval: d3.utcDay, // transforms points in time into days (from 00:00 to 24:00)
inset: -0.5,
fill: "author",
title: "title",
order: "appearance",
reverse: true
})
).plot({ width, height: 200 })
import { Calendar } from "@observablehq/calendar-component"
Calendar(data, {
reduce: (books) => ({
value: books.length,
titles: books.map((d) => d.title).join(" | ") // shows the current books as a tooltip
}),
title: (d) => d.titles,
color: { scheme: "reds", range: [0.2, 1] },
width
})
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.
