---
visibility: public
---

# D3

**repo:** [wbkd/awesome-d3](https://github.com/wbkd/awesome-d3)  
**category:** [[front-end-development|Front-End Development]]
**related:** [[svg|SVG]] · [[data-science|Data Science]] · [[javascript|JavaScript]]

---

# Awesome D3 [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)

This list keeps track of interesting [D3js](http://d3js.org) libraries, plugins and utilities.
<br />We decided not to list tutorials, resources or concepts here, because there is already a **[very good list of readings](https://github.com/mbostock/d3/wiki/Tutorials)** out there you can check out and contribute to.

Curators: [Moritz Klack](https://twitter.com/moklick) and [Christopher Möller](https://twitter.com/chrtze) of [webkid.io](http://www.webkid.io)

You can also explore the list with our interactive [D3 Discovery](https://d3-discovery.net/) tool.

## Charts

- [billboard.js](https://github.com/naver/billboard.js) - Re-usable chart library [bar, line, area, donut, pie, step, spline]
- [britecharts](https://github.com/britecharts/britecharts) - Client-side reusable [charting](/@harrisonqian/awesome/wiki/front-end-development/charting) library [bar, line, donut, sparkline, step]
- [chart-parts](https://github.com/Microsoft/chart-parts) - A flexible, [React](/@harrisonqian/awesome/wiki/front-end-development/react)-friendly, Grammar of Graphics for [data visualization](/@harrisonqian/awesome/wiki/miscellaneous/data-visualization)
- [cubism](https://github.com/square/cubism) - Time series visualization
- [c3](https://github.com/c3js/c3) - Reusable chart library [line, spline, step, area, stacked, bar, pie, donut]
- [dagre-d3](https://github.com/dagrejs/dagre-d3) - Layout directed graphs on the client-side
- [dc.js](https://github.com/dc-js/dc.js) - For heavy amounts of data
- [d2b](https://github.com/d2bjs/d2b) - Chart library for axis, pie, sankey, sunburst charts
- [d3-bar](https://github.com/tj/d3-bar) - Bar chart
- [d3-beeswarm](https://github.com/Kcnarf/d3-beeswarm) - Plugin which computes a beeswarm arrangement
- [d3-boxplot](https://github.com/akngs/d3-boxplot) - d3js box plot plugin
- [d3-bumps-chart](https://github.com/johnwalley/d3-bumps-chart) - Plugin for visualizing bumps charts
- [d3-dag](https://github.com/erikbrinkman/d3-dag) - Layout [algorithms](/@harrisonqian/awesome/wiki/theory/algorithms) for visualizing directed acylic graphs
- [d3-ez](https://github.com/jamesleesaunders/d3-ez) - Easy Reusable D3 Charts & Components [bar, donut, pie, bubble, rose, heatmap]
- [d3-[flame](/@harrisonqian/awesome/wiki/gaming/flame)-graph](https://github.com/spiermar/d3-flame-graph) - [Flame](/@harrisonqian/awesome/wiki/gaming/flame) graphs from hierarchical data
- [d3-funnel](https://github.com/jakezatecky/d3-funnel) - A funnel and [pyramid](/@harrisonqian/awesome/wiki/back-end-development/pyramid) chart library
- [d3-gridding](https://github.com/romsson/d3-gridding) - Chart mockups using grids
- [d3-heatmap](https://github.com/tj/d3-heatmap) - Heatmap
- [d3-message-sequence](https://github.com/koudelka/d3-message-sequence) - A dynamic/static message sequence chart
- [d3-upset](https://github.com/chuntul/d3-upset) - Functions for plotting an UpSet plot [upset, bar, intersections, venn, relationships]
- [d3-x3d](https://github.com/jamesleesaunders/d3-x3d) - Data Driven 3D Charts with D3 and X3D [bubble, bar, surfacearea, scatterplot, area]
- [d3fc](https://github.com/d3fc/d3fc) - A collection of interactive chart components [line, bar, stacked, scatter, candlestick, ohlc]
- [d3plus](https://github.com/alexandersimoes/d3plus) - Extension library for easy creation of visualizations [scatter, stacked, line, bar, pie, network, bubble, box, map]
- [d3panels](https://github.com/kbroman/d3panels) - Interactive charts with linked brushing [dot, scatter, line, heatmap, histogram]
- [d3pie](https://github.com/benkeen/d3pie) - A configurable pie chart lib and generator
- [D3xter](https://github.com/NathanEpstein/D3xter) - Straight forward plotting [plot, timeline, bar, histogram, pie]
- [D4](https://github.com/heavysixer/d4) - Re-usable charts DSL [bar, donut, line, scatter, stacked, waterfall]
- [dTree](https://github.com/ErikGartner/dTree) - Family tree library
- [EventDrops](https://github.com/marmelab/EventDrops) - A time based/event series interactive visualization
- [metrics-graphics](https://github.com/metricsgraphics/metrics-graphics) - Optimized for visualizing time-series data [line, scatter, area]
- [micropolar](https://github.com/biovisualize/micropolar/) - A polar chart library
- [mpld3](https://github.com/mpld3/mpld3) - Export matplotlib graphics to work in the Browser
- [neo4jd3](https://github.com/eisman/neo4jd3) - [Neo4j](/@harrisonqian/awesome/wiki/databases/neo4j) graph visualization
- [nvd3](https://github.com/novus/nvd3) - Re-usable charts and chart components [box plot, buttlet, candlestick, line, bar, pie, scatter, sparkline]
- [oecd-simple-charts](https://github.com/oecd-cyc/oecd-simple-charts) - Simple [charting](/@harrisonqian/awesome/wiki/front-end-development/charting) library [box plot, stacked bar, pearl chart]
- [plotly.js](https://github.com/plotly/plotly.js/) - High level [charting](/@harrisonqian/awesome/wiki/front-end-development/charting) library [scatter, line, bar, pie, box plot, histogram, heatmap]
- [plottable](https://github.com/palantir/plottable) - Flexible, interactive charts for the web [area, bar, line, pie, scatter, stacked]
- [rickshaw](https://github.com/shutterstock/rickshaw) - Toolkit for creating interactive real-time graphs [line, scatter, bar]
- [taucharts](https://github.com/TargetProcess/tauCharts) - Charts with a focus on design and flexibility [line, bar, area, stacked]
- [vega](https://github.com/vega/vega) - A visualization grammar
- [vega-lite](https://github.com/vega/vega-lite) - A high-level grammar of interactive graphics
- [vega-lite-api](https://github.com/vega/vega-lite-api) - A [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) API for Vega-Lite.
- [venn.js](https://github.com/benfred/venn.js) - Area proportional Venn and Euler diagrams
- [visavail](https://github.com/flrs/visavail) - Time data availability visualization
- [vizabi](https://github.com/vizabi/vizabi) - A framework for building visual data exploration tools [bubble, map, line, bar, sankey, donut]
- [WebCola](https://github.com/tgdwyer/WebCola) - Layout for graph visualization and exploration
- [xkcdgraphs](https://github.com/imkevinxu/xkcdgraphs) - Xkcd style graphs [line]

##### Third Party

- [Layer Cake](https://github.com/mhkeller/layercake) - A graphics framework built on top of [Svelte](/@harrisonqian/awesome/wiki/front-end-development/svelte).
- [nivo](https://github.com/plouc/nivo) - Dataviz components for [React](/@harrisonqian/awesome/wiki/front-end-development/react) with isomorphic ability [bar, line, area, bubble, chord, heatmap]
- [ngx-charts](https://github.com/swimlane/ngx-charts) - Chart framework for [Angular](/@harrisonqian/awesome/wiki/front-end-development/angular) [bar, pie, line, area, polar, stacked, bubble]
- [potion](https://github.com/finnfiddle/potion) - Collection of [React](/@harrisonqian/awesome/wiki/front-end-development/react) components for composing visualizations
- [react-d3-components](https://github.com/codesuki/react-d3-components) - D3 Components [bar, stacked, scatter, line, area, pie]
- [react-d3-library](https://github.com/react-d3-library/react-d3-library) - Library to use D3 in [React](/@harrisonqian/awesome/wiki/front-end-development/react) [area, bar, line, pie, scatter]
- [react-stockcharts](https://github.com/rrag/react-stockcharts) - Highly customizable stock charts [area, line, scatter, bubble, bar, stacked, candlestick]
- [react-vis](https://github.com/uber/react-vis) - A collection of [react](/@harrisonqian/awesome/wiki/front-end-development/react) components to render visualizations [area, bar, heatmap, line, scatter]
- [reaviz](https://github.com/reaviz/reaviz) - [Data visualization](/@harrisonqian/awesome/wiki/miscellaneous/data-visualization) library for [React](/@harrisonqian/awesome/wiki/front-end-development/react) based on D3
- [recharts](https://github.com/recharts/recharts) - Re-designed [charting](/@harrisonqian/awesome/wiki/front-end-development/charting) library built with [React](/@harrisonqian/awesome/wiki/front-end-development/react)
- [semiotic](https://github.com/nteract/semiotic) - A [data visualization](/@harrisonqian/awesome/wiki/miscellaneous/data-visualization) framework combining [React](/@harrisonqian/awesome/wiki/front-end-development/react) & D3 [scatter, line, area]
- [victory](https://github.com/FormidableLabs/victory) - Composable [React](/@harrisonqian/awesome/wiki/front-end-development/react) components for building visualizations [area, bar, candlestick, pie, line, scatter, voronoi]
- [vx](https://github.com/hshoff/vx) - Visualization components for [React](/@harrisonqian/awesome/wiki/front-end-development/react) [bar, line, scatter, stacked, area, pattern, heatmap, pie, radial, map, geo]
- [Vs](https://github.com/GopherJ/Vs) - Declarative visualisation components for [Vue.js](/@harrisonqian/awesome/wiki/front-end-development/vue-js) [bar, line, area, pie, donut, stacked, sankey, timeline]
- [v-chart-plugin](https://github.com/ignoreintuition/v-chart-plugin) - Easily bind a chart to the data stored in your [Vue.js](/@harrisonqian/awesome/wiki/front-end-development/vue-js) components.

## Maps

- [d3-composite-projections](https://github.com/rveciana/d3-composite-projections) - Projections for showing countries' distant lands together
- [datamaps](https://github.com/markmarkoh/datamaps) - Customizable map visualizations in one file
- [d3-topogram](https://github.com/shawnbot/topogram) - Continuous area cartograms based on TopoJSON
- [d3-exploder](https://github.com/bsouthga/d3-exploder) - Lets you easily [move](/@harrisonqian/awesome/wiki/programming-languages/move) and resize geographic features
- [d3-geo-polygon](https://github.com/d3/d3-geo-polygon) - Clipping and geometric operations for spherical polygons
- [d3-geo-projection](https://github.com/d3/d3-geo-projection) - Extended geographic projections
- [d3-geo-scale-bar](https://github.com/HarryStevens/d3-geo-scale-bar) - Displays automatic scale bars for projected geospatial data.
- [d3-geo-voronoi](https://github.com/Fil/d3-geo-voronoi) - Voronoi diagrams and Delaunay triangulation for the sphere
- [d3-geomap](https://github.com/yaph/d3-geomap) - Library for creating geographic maps
- [d3.geo2rect](https://github.com/sebastian-meier/d3.geo2rect) - Morphing [geojson](/@harrisonqian/awesome/wiki/miscellaneous/geojson) polygons into rectangles
- [d3-inertia](https://github.com/Fil/d3-inertia) - An extension to d3-drag that continues the mouse movement with some inertia
- [mapmap.js](https://github.com/floledermann/mapmap.js) - A data-driven API for interactive thematic maps
- [maptable](https://github.com/Packet-Clearing-House/maptable) - Convert [datasets](/@harrisonqian/awesome/wiki/miscellaneous/datasets) to a set of visual components (Map, Filters, Table)
- [simple-map-d3](https://github.com/MinnPost/simple-map-d3) - Easy choropleth style maps
- [spam](https://github.com/newsappsio/spam) - Create maps with D3 and [Canvas](/@harrisonqian/awesome/wiki/front-end-development/canvas), easily

##### Third Party

- [leaflet-d3](https://github.com/Asymmetrik/leaflet-d3) - Collection of plugins for using D3 with Leaflet [map, geo]
- [Wikimaps-D3js Atlas](https://github.com/WikimapsAtlas/WikimapsAtlas-generator) - CLI to generate raster, topojson and svg maps [map, geo]
- [react-simple-maps](https://github.com/zcreativelabs/react-simple-maps) - An SVG mapping component library for [React](/@harrisonqian/awesome/wiki/front-end-development/react), built on top of d3-geo [map, geo]

## Utils

- [crossfilter](https://github.com/crossfilter/crossfilter) - Library for exploring large multivariate [datasets](/@harrisonqian/awesome/wiki/miscellaneous/datasets)
- [d3kit-timeline](https://github.com/kristw/d3kit-timeline) - Timeline component that labels do not overlap
- [d3scription](https://github.com/GlobalWebIndex/d3scription) - Tooltip with window edge collision detection
- [d3-annotation](https://github.com/susielu/d3-annotation) - Annotation helper with built-in annotation types
- [d3-area-label](https://github.com/curran/d3-area-label) - A library for placing labels in areas
- [d3-breadcrumbs](https://github.com/bumbeishvili/d3-breadcrumbs) - Simplifies breadcrumbs usage
- [d3-component](https://github.com/curran/d3-component) - Lightweight component abstraction
- [d3-extended](https://github.com/wbkd/d3-extended) - Extends d3 with some common [jQuery](/@harrisonqian/awesome/wiki/front-end-development/jquery) functions
- [d3-helpers](https://github.com/bahmutov/d3-helpers) - Little utility functions
- [d3-history](https://github.com/vijithassar/d3-history) - Proper URL bar history
- [d3-hsluv](https://github.com/petulla/d3-hsluv) - Human-friendly HSL (Hue, Saturation, Lightness) color space.
- [d3-iconarray](https://github.com/tomgp/d3-iconarray) - A plug-in for aligning elements in grids
- [d3-interpolate-path](https://github.com/pbeshai/d3-interpolate-path) - Interpolates paths with different number of points
- [d3-jetpack](https://github.com/gka/d3-jetpack) - Nifty convenience wrappers that speed up your daily work
- [d3-lasso](https://github.com/skokenes/d3-lasso) - Tag elements by drawing a line over or around objects
- [d3-legend](https://github.com/susielu/d3-legend) - Legend helper
- [d3-loom](https://github.com/nbremer/d3-loom) - Plugin to create a "loom" visualization
- [d3-nelson-rules](https://github.com/53seven/d3-nelson-rules) - Apply nelsons rules of process control to a set of data
- [d3-peaks](https://github.com/efekarakus/d3-peaks) - Find peaks in a noisy signal
- [d3-ring-note](https://github.com/armollica/d3-ring-note) - Plugin for placing circle and text annotations
- [d3-scale-cluster](https://github.com/schnerd/d3-scale-cluster) - Scale that clusters data into discrete groups
- [d3-sparql](https://github.com/zazuko/d3-sparql) - Utility for accessing data from SPARQL Endpoints
- [d3-template](https://github.com/ErikOnBike/d3-template) - Plugin to create and render templates using D3's data binding mechanism
- [d3-tooltip](https://github.com/bumbeishvili/d3-tooltip) - Arrow shaped tooltip with shadows and dynamic content
- [d3-voronoi-treemap](https://github.com/Kcnarf/d3-voronoi-treemap) - Computes a treemap based on a Voronoi tesselation
- [d3-xray](https://github.com/vijithassar/d3-xray) - Bookmarklet that logs results of the data joins as you mouse over
- [swoopyarrows](https://github.com/bizweekgraphics/swoopyarrows) - Plugin to create swoopy arrows
- [swoopy-drag](https://github.com/1wheel/swoopy-drag) - Artisanal label placement for d3 graphics
- [textures](https://github.com/riccardoscalco/textures) - SVG patterns for [data visualization](/@harrisonqian/awesome/wiki/miscellaneous/data-visualization)

## Miscellaneous

- [chess-dataviz](https://github.com/ebemunk/chess-dataviz) - [Chess](/@harrisonqian/awesome/wiki/gaming/chess) dataviz library
- [codeflower](https://github.com/fzaninotto/CodeFlower) - Bird's eye view of the whole code
- [d3-cloud](https://github.com/jasondavies/d3-cloud) - Word clouds
- [d3-context-menu](https://github.com/patorjk/d3-context-menu) - Helper to create context-menus
- [d3-force-gravity](https://github.com/sohamkamani/d3-force-gravity) - Implement gravitational attraction (or force-field-like repulsion)
- [d3-force-reuse](https://github.com/twosixlabs/d3-force-reuse) - Faster force-directed graph layouts by reusing force approximations
- [d3-force-sampled](https://github.com/twosixlabs/d3-force-sampled) - Super fast, linear-time force-directed graph layouts by Random Vertex Sampling
- [d3.sketchy](https://github.com/sebastian-meier/d3.sketchy) - Creates sketchy backgrounds, shapes and lines
- [d3plus-text](https://github.com/d3plus/d3plus-text) - Smart SVG text box with line wrapping and automatic font scaling
- [graph-scroll](https://github.com/1wheel/graph-scroll) - Simple scrolling events
- [mermaid](https://github.com/knsv/mermaid) - Generation of diagrams and flowcharts from text in a [markdown](/@harrisonqian/awesome/wiki/miscellaneous/markdown) style
- [netvis](https://github.com/dborzov/netvis) - Visualize network communication for arbitrary protocols
- [treeviz](https://github.com/PierreCapo/treeviz) - Create customizable trees from [json](/@harrisonqian/awesome/wiki/miscellaneous/json) data
- [twitter-sentiment-visualisation](https://github.com/Lissy93/twitter-sentiment-visualisation) - A series of D3.js charts showing realtime sentiment of Twitter data  

## Server side
- [d3-node](https://github.com/d3-node/d3-node) - Static chart and map generation
- [Kyrix](https://github.com/tracyhenry/Kyrix) - Interactive pan/zoom Visualizations with automatic server-side scaling support. 

## Bl.ocks.org Profiles

 * [Adam Pearce - 1wheel](https://bl.ocks.org/1wheel)
 * [Colin Eberhardt - ColinEberhardt](https://bl.ocks.org/ColinEberhardt)
 * [Harry Stevens - HarryStevens](https://bl.ocks.org/HarryStevens)
 * [Luis Sevillano - LuisSevillano](https://bl.ocks.org/LuisSevillano)
 * [Peter Cook - d3indepth](https://bl.ocks.org/d3indepth)
 * [Elijah Meeks - emeeks](https://bl.ocks.org/emeeks)
 * [Ian Johnson - enjalot](https://bl.ocks.org/enjalot)
 * [Philippe Rivière - fil](https://bl.ocks.org/fil)
 * [Mike Bostock - mbostock](https://bl.ocks.org/mbostock)
 * [Matteo Filipponi - mfilippo](https://bl.ocks.org/mfilippo)
 * [Micah Stubbs - micahstubbs](https://bl.ocks.org/micahstubbs)
 * [Nadieh Bremer - nbremer](https://bl.ocks.org/nbremer)
 * [Matteo Abrate - nitaku](https://bl.ocks.org/nitaku)
 * [Susie Lu - susielu](https://bl.ocks.org/susielu)
 * [Shirley Wu - sxywu](https://bl.ocks.org/sxywu)
 * [Kai Chang - syntagmatic](https://bl.ocks.org/syntagmatic)
 * [Tom Shanley - tomshanley](https://bl.ocks.org/tomshanley)
 * [Vasco Asturiano - vasturiano](https://bl.ocks.org/vasturiano)
 * [Noah Veltman - veltman](https://bl.ocks.org/veltman)
 * [Zan Armstrong - zanarmstrong](https://bl.ocks.org/zanarmstrong)
