🏳️D3 by Observable | The JavaScript library for bespoke data visualization

Website favicond3js.org

The JavaScript library for bespoke data visualization

[Skip to content](#VPContent)

D3

==

The JavaScript library for bespoke data visualization

Create custom dynamic visualizations with unparalleled flexibility

[Get started](/getting-started)

[What is D3?](/what-is-d3)

[Examples](https://observablehq.com/@d3/gallery?utm_source=d3js-org&utm_medium=hero&utm_campaign=try-observable)

[](https://observablehq.com/@d3/area-chart/2 "Area chart

D3")

[](https://observablehq.com/@d3/projection-comparison "Projection comparison

D3")

[](https://observablehq.com/@d3/index-chart/2 "Index chart

D3")

[](https://observablehq.com/@d3/radial-cluster/2 "Radial dendrogram

D3")

[](https://observablehq.com/@d3/u-s-population-by-state-1790-1990 "U.S. population by state, 1790–1990

D3")

[](https://observablehq.com/@d3/graticule-labels-stereographic "Graticule labels

D3")

[](https://observablehq.com/@d3/hierarchical-edge-bundling/2 "Hierarchical edge bundling

D3")

[](https://observablehq.com/@d3/variable-color-line "Variable-color line

D3")

[](https://observablehq.com/@d3/donut-chart/2 "Donut chart

D3")

[](https://observablehq.com/@kerryrodden/sequences-sunburst "Sequences sunburst

Kerry Rodden")

[](https://observablehq.com/@d3/tissots-indicatrix "Tissot’s indicatrix

D3")

[](https://observablehq.com/@d3/grouped-bar-chart/2 "Grouped bar chart

D3")

[](https://observablehq.com/@d3/versor-dragging "Versor dragging

D3")

[](https://observablehq.com/@d3/spilhaus-shoreline-map "Spilhaus shoreline map

D3")

[](https://observablehq.com/@d3/scatterplot/2 "Scatterplot

D3")

[](https://observablehq.com/@d3/change-line-chart/2 "Change line chart

D3")

[](https://observablehq.com/@d3/zoomable-area-chart "Zoomable area chart

D3")

[](https://observablehq.com/@d3/solar-terminator "Solar terminator

D3")

[](https://observablehq.com/@d3/beeswarm-mirrored/2 "Mirrored beeswarm

D3")

[](https://observablehq.com/@d3/brushable-scatterplot "Brushable scatterplot

D3")

[](https://observablehq.com/@d3/realtime-horizon-chart "Realtime horizon chart

D3")

[](https://observablehq.com/@d3/raster-tiles "Raster tiles

D3")

[](https://observablehq.com/@d3/bar-chart/2 "Bar chart

D3")

[](https://observablehq.com/@harrystevens/directly-labelling-lines "Directly labelling lines

Harry Stevens")

[](https://observablehq.com/@d3/diverging-bar-chart/2 "Diverging bar chart

D3")

[](https://observablehq.com/@d3/horizontal-bar-chart/2 "Horizontal bar chart

D3")

[](https://observablehq.com/@d3/collapsible-tree "Collapsible tree

D3")

[](https://observablehq.com/@d3/q-q-plot "Q–Q plot

D3")

[](https://observablehq.com/@d3/chord-diagram "Chord diagram

D3")

[](https://observablehq.com/@d3/color-schemes "Color schemes

D3")

[](https://observablehq.com/@d3/radial-tree/2 "Radial tidy tree

D3")

[](https://observablehq.com/@d3/zoom-to-bounding-box "Zoom to bounding box

D3")

[](https://observablehq.com/@d3/connected-scatterplot/2 "Connected scatterplot

D3")

[](https://observablehq.com/@mbostock/methods-of-comparison-compared "Methods of comparison, compared

Mike Bostock")

[](https://observablehq.com/@mbostock/voronoi-stippling "Voronoi stippling

Mike Bostock")

[](https://observablehq.com/@d3/normal-quantile-plot "Normal quantile plot

D3")

[](https://observablehq.com/@d3/hexbin-map "Hexbin map

D3")

[](https://observablehq.com/@d3/voronoi-labels "Voronoi labels

D3")

[](https://observablehq.com/@d3/pack/2 "Circle packing

D3")

[](https://observablehq.com/@d3/scatterplot-with-shapes "Scatterplot with shapes

D3")

[](https://observablehq.com/@d3/antimeridian-cutting "Antimeridian cutting

D3")

[](https://observablehq.com/@mbostock/stern-brocot-tree "Stern–brocot tree

Mike Bostock")

[](https://observablehq.com/@tezzutezzu/world-history-timeline "World history timeline

Danilo Di Cuia")

[](https://observablehq.com/@d3/zoomable-treemap "Zoomable treemap

D3")

[](https://observablehq.com/@d3/candlestick-chart/2 "Candlestick chart

D3")

[](https://observablehq.com/@d3/splom/2 "Scatterplot matrix

D3")

[](https://observablehq.com/@d3/box-plot/2 "Box plot

D3")

[](https://observablehq.com/@d3/cascaded-treemap "Cascaded treemap

D3")

[](https://observablehq.com/@d3/bubble-chart/2 "Bubble chart

D3")

[](https://observablehq.com/@d3/radial-stacked-bar-chart/2 "Radial stacked bar chart

D3")

[

Selections and transitions

--------------------------

Create, update, and animate the DOM based on data without the overhead of a virtual DOM.

](/d3-selection)

[

Scales and axes

---------------

Encode abstract data into visual values such as position, size, and color. Explain position encodings with axes.

](/d3-scale)

[

Shapes

------

Render arcs, areas, curves, lines, links, pies, stacks, symbols… and any geometric primitive you might need to visualize data.

](/d3-shape)

[

Interactions

------------

Facilitate exploration with reusable interactive behaviors, including panning, zooming, brushing, and dragging.

](/d3-brush)

[

Layouts

-------

Treemaps, trees, force-directed graphs, Voronoi, contours, chords, circle-packing… a library of layout algorithms at the ready.

](/d3-hierarchy)

[

Geographic maps

---------------

More spherical projections than you can shake a stick at, with arbitrary aspects, adaptive sampling, and flexible clipping.

](/d3-geo)

[

… and much more!

----------------

CSV parsing, localized date parsing and formatting, color spaces, calendar math, statistics, and can I stop listing features now?

](/d3-array)

[

Powering Observable Plot

------------------------

The D3 team also builds Observable Plot, a high-level API for quick charts built on top of D3.

Try Observable Plot

](https://observablehq.com/plot?utm_source=d3js-org&utm_medium=features&utm_campaign=try-observable)

[

Built by Observable

-------------------

D3 is developed by Observable, the platform for collaborative data analysis.

Visit Observable

](https://observablehq.com?utm_source=d3js-org&utm_medium=features&utm_campaign=try-observable)

Build your best work with D3 on Observable

==========================================

The only data workflow platform capable of supporting the full power of D3

Connect to your data instantlyPull live data from the cloud, files, and databases into one secure place — without installing anything, ever.

Code faster than you thought possibleGet everything you need and none of what you don’t with lightweight automatic versioning, instant sharing, and real-time multiplayer editing.

Accelerate your team’s analysisCreate a home for your team’s data analysis where you can spin up charts, maps, and data apps to explore, analyze, and iterate on together.

[Build with D3 on Observable →](https://observablehq.com?utm_source=d3js-org&utm_medium=promo&utm_campaign=try-observable)