Robuta

The area of each leaf circle in a circle-packing diagram is proportional its value (here, file size). Although nested circles do not use space as efficiently...

The JavaScript library for bespoke data visualization

Click a black node to expand or collapse the tree. Alternatively, create a tidy tree in a few lines of code with Observable Plot’s tree mark.

This variation of a donut chart demonstrates how to update values with an animated transition. Clicking on the radio buttons changes the displayed metric.

This notebook implements an animated tour of a scatterplot using zoom transitions. The tour zooms in on each cluster’s bounding box in succession before...

Animations can preserve object constancy, allowing the reader to follow the data across views. See Heer and Robertson for more.

This variation of a line chart uses a gradient to change the line color based on its y-value. For a related technique along the x-axis, see variable-color...

Every positive rational number may be expressed as a finite continued fraction where and are non-negative integers and each subsequent coefficient is a...

The temperature in New York compared to San Francisco; days when San Francisco was warmer are <span style="border-bottom: 2px solid...

Here a Voronoi diagram is used to label a scatterplot: the area of each Voronoi cell determines whether the associated label is visible: larger cells tend to...

Ref. @fil/geo-delaunay <br>Ref. jasondavies.com/maps/voronoi/airports

“Oklab is able to predict perceived lightness, chroma and hue well, while being simple and well-behaved numerically and easy to adopt.” This is a fork of...

This notebook demonstrates using d3.interpolateZoom to implement smooth pan-and-zoom transitions between two views. See also d3.zoom’s transitions, which...

A slope chart, with additional intermediate steps. The values here are survival rate (in percents) for various cancers. Based on Tufte. See the Plot: Cancer...

This chord diagram shows dependencies among a software class hierarchy. Although it does not reveal class-level detail, as hierarchical edge bundling does, it...

Sep 25, 2025 - Starting with Xcode 26, there’s a new way to observe properties of your models. In the past, we had to use the function to access properties and receive...

This chart shows unemployed persons by industry, 2000–2010. Compare to a streamgraph and normalized stacked area. Data: BLS Using Observable Plot’s concise...

The variant of a line chart shows the change in price of Apple stock relative to price of $ . The log y-scale allows accurate comparison. Data: Yahoo Finance...

I recently started sending out a weekly-ish email newsletter consisting of content from my blog. I’ve mostly automated that, using an Observable Notebook to...

<span style="text-decoration: underline #4e79a7 3px;">Blue</span> represents surplus male population and <span...

Observable is an all-in-one platform for data visualization with tools for developers, data analysts, and collaborators.

Bubble charts are non-hierarchical packed circles. The area of each circle is proportional its value (here, file size). The organic appearance of these...

Creating a Subject is a good way to test your skills in a new language.

This time series line chart includes Bollinger bands: simple, lagging moving averages for characterizing volatility. Data: Yahoo Finance With Observable...

How to perform common NLP tasks using winkNLP.

Apr 11, 2017 - Learning objectives - contains action verbs that are observable and measurable, Learning outcomes, components, behavior, criteria, standard, will be able to

This area chart with an upper and lower bound shows San Francisco daily high and low temperatures. Data: National Climatic Data Center Or, using Observable...

This chart shows the relationship between idle and eruption times for Old Faithful. Or you could use Observable Plot’s density mark. See the complete Plot...

human-computer interaction x responsible artificial intelligence

This treemap supports zooming: click any cell to zoom in, or the top to zoom out.

This variant of an icicle diagram shows only three layers of the hierarchy at a time. Click a node to zoom in, or the left column to zoom out. Compare to a...

This chart shows the relative frequency of letters in the English language. Or, using Observable Plot’s concise API:

This chart shows the estimated population by age in the United States as of 2015. The total estimated population is . Compare to a donut chart. Data: U.S....

Based on a graphic by Emily Badger and Kevin Quealy, this chart shows the change from 1980 to 2015 of the ratio of 90th-percentile wages to 10th-percentile...

This time-series line chart shows the daily close of Apple stock. Compare to a log y-scale showing change, an area chart, a horizon chart, a candlestick chart,...

Interpolate numbers, colors, strings, arrays, objects, whatever!

Developer friendly Natural Language Processing ✨

A demonstration of d3-cloud. Paste into or edit the text below to update the chart. Note: word clouds may be harmful. (Martin Luther King, Jr.: “I Have a...

Blue to white gradient comparisons This demo is to showcase `okLCH` as a space with corrections in one of LCH's problem areas. `sRGB`, `p3` and `rec2020`...

This treemap variant applies padding to label internal nodes, better revealing the hierarchical structure. It is, however, less compact than a standard...

This line chart uses line.defined to show gaps for missing data. The defined function considers NaN and undefined to be missing. A second area shows linear...

This chart stacks negative categories to the left and positive categories to the right. Inspired by Robert Mann, the truthfulness of presidential candidates is...

This Voronoi diagram shows the region that is closest to each airport.

A recreation of the Paper.js example (though lacking the playful flocking behavior!).

A recreation of E.J. Marey’s graphical train schedule. Stations are positioned to scale so that slope encodes speed. This display also reveals when and where...

A view of patent-related lawsuits in the mobile communications industry, circa 2011. Data: Thomson Reuters

Google Chrome CSS DevRel 🥑; #VisBug creator; dev += designer; parentNode + 2 leafs; CSS/JS/UX addict; repeat(∞, [empathize, define, design, develop,...

With Deno's Jupyter support, you can explore, interact, and create interactive charts with TypeScript and HTML. Here's a tutorial featuring data of over...

Luckily, we don't have to count them one by one.

Click a blue bar to drill down, or click the background to go back up.

from the June 2023 RUM Archive 🔗 Links RUM Archive View Transitions are Incompatible with Incremental Rendering 🧑‍💻 Query

A box-and-whisker plot shows summary statistics of a quantitative distribution. Here, the price distribution (y-axis) of a set of diamonds is plotted for a...

This chart shows the daily average temperature range and recorded extremes at San Francisco International Airport from 1999–2018. This form is useful for...

D3’s cluster layout produces node-link diagrams with leaf nodes at equal depth. These are less compact than tidy trees, but are useful for dendrograms,...

Data: Trading Economics via Lisa Charlotte Rost Or, using Observable Plot’s concise API: