Find inspiration and techniques to create beautiful and appropriate charts with Observable Plot. This collection highlights best practices and real use cases.

Mike Bostock

Observable

Plot: A few custom time axes

Access to Family planning

Plot: Marimekko

Autoplot matrix

Robert Kosara

What do people buy on Bandcamp?

Anna Wiederkehr

Plot: colorContrast transform

A Timeline of Democratic Presidential Candidates

Plot: Diverging stacked bars

Plot: Horizon Chart

Plot: Ridgeline Plot

Torsten Sprenger

Two-Tone Pseudo Color Scales with Observable Plot & Vega-Lite

Toph Tucker

Recreating Östling’s regression visualizations

Error bars

Plot: regression

Skies Plot

Irene de la Torre

Horizon graph & Barcode with Plot

Yuri Vishnevsky

Temporal Aliasing

Mark McClure

Plot for mathematicians

John Alexis Guerra Gómez

Plot Isotype dot plot

Martien van Steenbergen

COVID-19 Netherlands Reproduction Number Tutorial

Plot Mountain Sunset

rcatlord

Spine charts

Greenhouse gas emission projections

Raincloud Plots with Observable Plot

Upset Plots with Observable Plot

Visnu Pitiyanuvath

Exploring CIELChab

Chris Ryan

Nature variant waves graphic

Robert Lesser

When Presidents Fade Away

Benjamin Schmidt

The Coronavirus landscape

Daniel Bachler

Our World In Data charts visualisation

The normal model

Ramona

Sometime around August, a bunch of us realized we were all playing The New York Times’s daily mini crossword. We started a Slack channel & shared invite links to add each other to our in-app leaderboards, which use Observable Plot.

Visualizing The New York Times’s Mini Crossword

Distributions and summary statistics - a collection of Plot examples

Variants of SARS-Cov-2 in Europe

Chris Zubak-Skees

Laid off: 6 million jobs and counting

francobollo

Concentration values vs. Time

Topological subsampling

Plot of plots

Cyclical time scale, v2

Bullet graph II

Plot: Bullet graph

Cyclical time scale

Road traffic under COVID restrictions (France)

K-means binning

Matrix diagram

ELD Viewer

Happy anniversary, Project Gutenberg!

ROC curve

Plot stargazer history

Plot Hyperboloid

Phone bar plots

Log-scale histogram

Database Outage Plot

Bertin’s hotel

Ireland’s top trade partners

Bump chart

Bubble Matrix

Renko Chart

Tom MacWright

GitHub Burndown

Plot: Grid choropleth

Candlestick Chart

Collections related to specific areas of interest, curated by the Observable team. 

Topics

Plot Examples

Notebooks that illustrate ways to use MathJax

MathJax

Math

try x: { domain: [0, 1.2], ticks: [0.25, 0.75], tickFormat: ".2s" }

Ah - the placement is correctly specified but the format function rounds the input. And using tickFormat we can obviously set the ticks to be anything we want

Thanks!

The new-ish axis marks should give you what you need. Try this: Plot.ruleX([0]), Plot.ruleY([0]), Plot.axisX({y: 0}), Plot.axisY({x: 0}).

Yep - just hadn't quite got round to it. Thanks for the nudge!

If you like, you can now inject TeX into the Plot using a function mark:

() => svg`<g transform="translate(${w / 3} ${h / 2}) scale(3)">
  ${MathJax.tex2svg(String.raw`A = \frac{1}{4} \pi \, r^2`).querySelector("svg")}
</g>`

Thanks Mike! When I first saw this, I spent a while trying to figure out the "function mark"; I thought it might be something like Plot.function(...). It finally dawned on me that a function that returns an SVG *is* a mark. :)

Just used it for the first time for a class demo: https://observablehq.com/d/b15bc41eebac681f

Purpose-built for displays of data