Node imports 📦 You can now import from node_modules! This lets you manage dependencies with a package manager such as npm or Yarn, import private packages from the npm registry, or import from a...

In honor of D3 1.0’s tin anniversary, I thought I’d reflect on lessons learned. This isn’t intended to be too comprehensive or serious — just a handful of observations as I look ahead to the next ten...

D3 is now modular, composed of many small libraries that you can also use independently. Each library has its own repo and release cycle for faster development. The modular approach also improves t...

The JavaScript library for exploratory data visualization

Introducing d3.express: the integrated discovery environment.

Moved to https://github.com/d3/d3/releases/tag/v5.0.0

Yes, Paul, you don’t need a library to visualize data. But here are two reasons why you might want to use a library like D3 (or Vega).

Looking for a good D3 example? Here’s a few (okay, …) to peruse. Animation D3’s data join, interpolators, and easings enable flexible animated transitions between views while preserving object...

A guide to D3’s reusable example charts D3 Charts help you get started quickly with D3. To use these charts in your application, copy-paste or import the chart function into your code, then pass the...

This is a pedagogical implementation of an animated bar chart race. Read on to learn how it works, or fork this notebook and drop in your data! The data for the race is a CSV with columns date (in...

Each number below represents a hand-drawn digit (such as or ) positioned by similarity using t-SNE. Notice that digits representing the same number (say , and , in blue) tend to cluster together....

More specifically, A* search.

Edit the textarea below to update the chart! See the DOT language documentation and the Graphviz gallery for examples! Appendix

Inspired by 3Blue1Brown. Portrait of Fourier by Stuart Jantzen. Appendix

d3-force Add iterations argument to simulation.tick. Thanks, @vasturiano! Fix bug when initializing nodes with fixed positions. Thanks, @vasturiano! d3-geo Fix projection where |longitude| > ...

We often wish to understand something by comparing values. For example, say I’m happily biking along 🚲😅 at when I get passed by a car 🚗💨 going . I might think: Yikes! That car was going three...

You’ve heard of comma-separated values (CSV)? Well, a comma-separated tree (CST) is similar, with indentation to determine the hierarchy. This gives you a hierarchical data format with the convenie...

Add d3.clientPoint. Add zoom.constrain. Add f, Q, s, u and V time format specifiers. Thanks, @BrianMitchL @krukon! Add projection.fitWidth, projection.fitHeight. Thanks, @mfogel! Add tr-TR time for...

A tour of d3-geo’s new command-line interface.

Version 1.0.0.

I’d like D3 to become the standard library of data visualization: not just a tool you use directly to visualize data by writing code, but…

Visualization toolmaker. Co-founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.

Change selection.style to return the inline style, if present. Change transition.style to start from the inline style, if present. Add link shapes! Add d3.stackOffsetDiverging. Add random.source to...

This notebook visualizes the transitive dependencies of any package in npm. Enter one or more package names (such as \`d3\` or \`react\`) separated by commas into the input below. You can also...

Ref. Jason Davies, Adam White, Inigo Quilez

Add d3.cross. Allow d3.pairs to take an optional reducer. Add d3.geoContains. Thanks, @Fil! Fix invalid transforms when an ordinal axis transition is interrupted. Localized number formats can now d...

As someone who creates open-source software, I spend a lot of time thinking about how to make software better.

California Population Density. GitHub Gist: instantly share code, notes, and snippets.

Say you’re building a new tool for studying data. What’s the most natural representation for specifying a visualization? A configurable…

Edit the textarea below to update the Sankey diagram! Each line in the textarea above represents a link in the chart. The source and target of the link are determined by the two names. (The contents...

Observable offers asynchronous collaboration using the Fork, Suggest, and Merge buttons. When you Fork a notebook, you create your own copy of a notebook, which you can then edit freely without...

GeoJSON in Three.js. GitHub Gist: instantly share code, notes, and snippets.

The current view from the International Space Station. Built with satellite.js.

The most popular emoji on Twitter over the last seconds, updated in realtime. Inspired by Robert Lesser, and based on the bar chart race. Data: Emojitracker

The JavaScript library for exploratory data visualization

A tour of d3-geo’s new command-line interface.

So, you’ve written your magnum opus: a notebook full of splendor and delight. Maybe you’ve embedded it on your blog for all to see. Now, the problem is — How do you integrate its nifty charts into...

Wikipedia has a fantastic array of tables on various subjects. Even better, Wikipedia has a CORS-accessible API! In this notebook, I’ll show how to load data directly from Wikipedia into an Observa...

When dealing with polygons in computer graphics, we often worry only about finite polygons: a two-dimensional polygon represented as a sequence of points where . Various standard algorithms—area,...

Horizon charts are an alternative to ridgeline plots and small-multiple area charts that allow greater precision for a given vertical space by using colored bands. These charts can also be used with...

Don’t go it alone. Observable makes it easy to share notebooks and collaborate around data in real time. Here’s how. Invite others to your notebook You can invite others to collaborate in your...

During sunny days in the summer, my home’s solar cells typically produce more energy than we consume. However, at night, on cloudy days, and during the winter when the sun is lower in the sky, we...