Awesome D3
This list keeps track of interesting D3js libraries, plugins and utilities.
We decided not to list tutorials, resources or concepts here, because there is already a very good list of readings
out there you can check out and contribute to.
Curators: Moritz Klack and Christopher Möller of webkid.io
You can also explore the list with our interactive D3 Discovery tool.
Charts
-
billboard.js
- Re-usable chart library [bar, line, area, donut, pie, step, spline]
-
britecharts
- Client-side reusable charting library [bar, line, donut, sparkline, step]
-
chart-parts
- A flexible, React-friendly, Grammar of Graphics for data visualization
-
cubism
- Time series visualization
-
c3
- Reusable chart library [line, spline, step, area, stacked, bar, pie, donut]
-
dagre-d3
- Layout directed graphs on the client-side
-
dc.js
- For heavy amounts of data
-
d2b
- Chart library for axis, pie, sankey, sunburst charts
-
d3-bar
- Bar chart
-
d3-beeswarm
- Plugin which computes a beeswarm arrangement
-
d3-boxplot
- d3js box plot plugin
-
d3-bumps-chart
- Plugin for visualizing bumps charts
-
d3-dag
- Layout algorithms for visualizing directed acylic graphs
-
d3-ez
- Easy Reusable D3 Charts & Components [bar, donut, pie, bubble, rose, heatmap]
-
d3-flame-graph
- Flame graphs from hierarchical data
-
d3-funnel
- A funnel and pyramid chart library
-
d3-gridding
- Chart mockups using grids
-
d3-heatmap
- Heatmap
-
d3-message-sequence
- A dynamic/static message sequence chart
-
d3-upset
- Functions for plotting an UpSet plot [upset, bar, intersections, venn, relationships]
-
d3-x3d
- Data Driven 3D Charts with D3 and X3D [bubble, bar, surfacearea, scatterplot, area]
-
d3fc
- A collection of interactive chart components [line, bar, stacked, scatter, candlestick, ohlc]
-
d3plus
- Extension library for easy creation of visualizations [scatter, stacked, line, bar, pie, network, bubble, box, map]
-
d3panels
- Interactive charts with linked brushing [dot, scatter, line, heatmap, histogram]
-
d3pie
- A configurable pie chart lib and generator
-
D3xter
- Straight forward plotting [plot, timeline, bar, histogram, pie]
-
D4
- Re-usable charts DSL [bar, donut, line, scatter, stacked, waterfall]
-
dTree
- Family tree library
-
EventDrops
- A time based/event series interactive visualization
-
metrics-graphics
- Optimized for visualizing time-series data [line, scatter, area]
-
micropolar
- A polar chart library
-
mpld3
- Export matplotlib graphics to work in the Browser
-
neo4jd3
- Neo4j graph visualization
-
nvd3
- Re-usable charts and chart components [box plot, buttlet, candlestick, line, bar, pie, scatter, sparkline]
-
oecd-simple-charts
- Simple charting library [box plot, stacked bar, pearl chart]
-
plotly.js
- High level charting library [scatter, line, bar, pie, box plot, histogram, heatmap]
-
plottable
- Flexible, interactive charts for the web [area, bar, line, pie, scatter, stacked]
-
rickshaw
- Toolkit for creating interactive real-time graphs [line, scatter, bar]
-
taucharts
- Charts with a focus on design and flexibility [line, bar, area, stacked]
-
vega
- A visualization grammar
-
vega-lite
- A high-level grammar of interactive graphics
-
vega-lite-api
- A JavaScript API for Vega-Lite.
-
venn.js
- Area proportional Venn and Euler diagrams
-
visavail
- Time data availability visualization
-
vizabi
- A framework for building visual data exploration tools [bubble, map, line, bar, sankey, donut]
-
WebCola
- Layout for graph visualization and exploration
-
xkcdgraphs
- Xkcd style graphs [line]
Third Party
-
Layer Cake
- A graphics framework built on top of Svelte.
-
nivo
- Dataviz components for React with isomorphic ability [bar, line, area, bubble, chord, heatmap]
-
ngx-charts
- Chart framework for Angular [bar, pie, line, area, polar, stacked, bubble]
-
potion
- Collection of React components for composing visualizations
-
react-d3-components
- D3 Components [bar, stacked, scatter, line, area, pie]
-
react-d3-library
- Library to use D3 in React [area, bar, line, pie, scatter]
-
react-stockcharts
- Highly customizable stock charts [area, line, scatter, bubble, bar, stacked, candlestick]
-
react-vis
- A collection of react components to render visualizations [area, bar, heatmap, line, scatter]
-
reaviz
- Data visualization library for React based on D3
-
recharts
- Re-designed charting library built with React
-
semiotic
- A data visualization framework combining React & D3 [scatter, line, area]
-
victory
- Composable React components for building visualizations [area, bar, candlestick, pie, line, scatter, voronoi]
-
vx
- Visualization components for React [bar, line, scatter, stacked, area, pattern, heatmap, pie, radial, map, geo]
-
Vs
- Declarative visualisation components for Vue.js [bar, line, area, pie, donut, stacked, sankey, timeline]
-
v-chart-plugin
- Easily bind a chart to the data stored in your Vue.js components.
Maps
-
d3-composite-projections
- Projections for showing countries’ distant lands together
-
datamaps
- Customizable map visualizations in one file
-
d3-topogram
- Continuous area cartograms based on TopoJSON
-
d3-exploder
- Lets you easily move and resize geographic features
-
d3-geo-polygon
- Clipping and geometric operations for spherical polygons
-
d3-geo-projection
- Extended geographic projections
-
d3-geo-scale-bar
- Displays automatic scale bars for projected geospatial data.
-
d3-geo-voronoi
- Voronoi diagrams and Delaunay triangulation for the sphere
-
d3-geomap
- Library for creating geographic maps
-
d3.geo2rect
- Morphing geojson polygons into rectangles
-
d3-inertia
- An extension to d3-drag that continues the mouse movement with some inertia
-
mapmap.js
- A data-driven API for interactive thematic maps
-
maptable
- Convert datasets to a set of visual components (Map, Filters, Table)
-
simple-map-d3
- Easy choropleth style maps
-
spam
- Create maps with D3 and Canvas, easily
Third Party
-
leaflet-d3
- Collection of plugins for using D3 with Leaflet [map, geo]
-
Wikimaps-D3js Atlas
- CLI to generate raster, topojson and svg maps [map, geo]
-
react-simple-maps
- An SVG mapping component library for React, built on top of d3-geo [map, geo]
Utils
-
crossfilter
- Library for exploring large multivariate datasets
-
d3kit-timeline
- Timeline component that labels do not overlap
-
d3scription
- Tooltip with window edge collision detection
-
d3-annotation
- Annotation helper with built-in annotation types
-
d3-area-label
- A library for placing labels in areas
-
d3-breadcrumbs
- Simplifies breadcrumbs usage
-
d3-component
- Lightweight component abstraction
-
d3-extended
- Extends d3 with some common jQuery functions
-
d3-helpers
- Little utility functions
-
d3-history
- Proper URL bar history
-
d3-hsluv
- Human-friendly HSL (Hue, Saturation, Lightness) color space.
-
d3-iconarray
- A plug-in for aligning elements in grids
-
d3-interpolate-path
- Interpolates paths with different number of points
-
d3-jetpack
- Nifty convenience wrappers that speed up your daily work
-
d3-lasso
- Tag elements by drawing a line over or around objects
-
d3-legend
- Legend helper
-
d3-loom
- Plugin to create a “loom” visualization
-
d3-nelson-rules
- Apply nelsons rules of process control to a set of data
-
d3-peaks
- Find peaks in a noisy signal
-
d3-ring-note
- Plugin for placing circle and text annotations
-
d3-scale-cluster
- Scale that clusters data into discrete groups
-
d3-sparql
- Utility for accessing data from SPARQL Endpoints
-
d3-template
- Plugin to create and render templates using D3’s data binding mechanism
-
d3-tooltip
- Arrow shaped tooltip with shadows and dynamic content
-
d3-voronoi-treemap
- Computes a treemap based on a Voronoi tesselation
-
d3-xray
- Bookmarklet that logs results of the data joins as you mouse over
-
swoopyarrows
- Plugin to create swoopy arrows
-
swoopy-drag
- Artisanal label placement for d3 graphics
-
textures
- SVG patterns for data visualization
Miscellaneous
-
chess-dataviz
- Chess dataviz library
-
codeflower
- Bird’s eye view of the whole code
-
d3-cloud
- Word clouds
-
d3-context-menu
- Helper to create context-menus
-
d3-force-gravity
- Implement gravitational attraction (or force-field-like repulsion)
-
d3-force-reuse
- Faster force-directed graph layouts by reusing force approximations
-
d3-force-sampled
- Super fast, linear-time force-directed graph layouts by Random Vertex Sampling
-
d3.sketchy
- Creates sketchy backgrounds, shapes and lines
-
d3plus-text
- Smart SVG text box with line wrapping and automatic font scaling
-
graph-scroll
- Simple scrolling events
-
mermaid
- Generation of diagrams and flowcharts from text in a markdown style
-
netvis
- Visualize network communication for arbitrary protocols
-
treeviz
- Create customizable trees from json data
-
twitter-sentiment-visualisation
- A series of D3.js charts showing realtime sentiment of Twitter data
Server side
-
d3-node
- Static chart and map generation
-
Kyrix
- Interactive pan/zoom Visualizations with automatic server-side scaling support.
Bl.ocks.org Profiles