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)How many books was I reading?Metbrewer color schemesIrregular scalesTopological subsamplingVariants du SARS-CoV-2 en FranceVariants of SARS-Cov-2 in EuropeMinimalist dodge plotAssemblée nationale 2017-2022AoC 12: shortest path under constraintsHow fast does walk-on-spheres converge?
Variable tick color
chart = Plot.dotX(Array.from({ length: 100 }, Math.random)).plot({
x: { domain: [0, 1] }
})
d3
.select(chart)
.select("[aria-label=x-axis]")
.selectAll("text")
.each(function (d) {
// d is the tick's value (in this case, a number)
d3.select(this)
.attr("fill", d < 0.5 ? "red" : d > 0.5 ? "green" : "black")
.attr("font-size", (d * 2) % 1 ? 8 : 15);
})
chart2 = html`<div id=chart2>${Plot.dotX(
Array.from({ length: 100 }, Math.random)
).plot({
x: { domain: [0, 1] }
})}`
html`<style>
#chart2 [aria-label=x-axis] .tick:nth-child(5n+1) text {font-size: 15px}
#chart2 [aria-label=x-axis] .tick:nth-child(n+1):nth-child(-n+5) text {fill: red}
#chart2 [aria-label=x-axis] .tick:nth-child(n+7):nth-child(-n+11) text {fill: green}
`
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.
