Awesome D3 Js – Massive Collection of Resources

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
• cirrusjs – A multi-renderer charts library [area, line, stacked]
• 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
• dimple – An object-oriented API for business analytics [bubble, area, stacked]
• d2b – Chart library for axis, pie, sankey, sunburst charts
• d3.chart – Framework for building reusable charts
• d3.chart.sankey – Reusable D3 Sankey diagram
• 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-circle – Circle chart [donut]
• d3-dag – Layout algorithms for visualizing directed acylic graphs
• d3-dot – Dot chart
• 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-horizon-chart – Horizon charts module
• d3-line – Line chart
• d3-message-sequence – A dynamic/static message sequence chart
• d3-timeline – responsive timeline charts
• d3-timeseries – Time series charting library
• 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
• epoch – A general purpose, real-time visualization library [area, bar, line, pie, scatter]
• EventDrops – A time based/event series interactive visualization
• Fancycharts.js – Library to visualize percentage values [bar, circles, donut]
• firespray – Streaming charts [bar, line, stacked]
• forest-d3 – A time series charting library [line, area, stacked, bar, scatter, pie ohlc]
• Gantt-Chart – Gantt chart library
• insights – Library to visualize and navigate graphs
• kotojs – ES6 based framework
• 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]
• peek – Object-oriented chart library [scatter, line, area, bar, pie, donut]
• 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]
• radar-chart-d3 – Radar chart module
• rickshaw – Toolkit for creating interactive real-time graphs [line, scatter, bar]
• taucharts – Charts with a focus on design and flexibility [line, bar, area, stacked]
• techan.js – A visual, stock charting and technical analysis [candlestick, ohlc]
• uvCharts – Supports lots of different chart types [bar, area, pie, stacked, line, polar, donut]
• 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

• angular-nvd3 – NVd3 for AngularJS [line, stacked, bar, area, scatter, bullet, donut]
• d3act – d3 with React [bar, bubble, pie]
• d3-simpleCharts – A d3 wordpress plugin
• ember-charts – Charts for Ember [line, bar, stacked, pie, scatter]
• Layer Cake – A graphics framework built on top of Svelte.
• line-chart – Line chart module for AngularJS [line, area, bar]
• 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 – Charts for React [area, bar, candlestick, line, pie, scatter]
• 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-carto-map – A mapping API that uses D3 geospatial functionality
• 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
• earthjs – Building orthographic globe with SVG, Canvas & WebGL
• mapmap.js – A data-driven API for interactive thematic maps
• mapsense.js – Full resolution vector maps with D3
• 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]
• react-d3-basic – Library For Building Composable And Declarative Maps [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-jetpack – Nifty convenience wrappers that speed up your daily work
• d3-Labeler – Plug-in for automatic label placement
• 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-slider – jQuery UI inspired slider
• d3-starterkit – Helper functions simplifying common and verbose d3 patterns
• d3-template – Plugin to create and render templates using D3’s data binding mechanism
• d3-tip – Tooltip helper
• d3-tipy – Tooltip helper
• d3-tooltip – Arrow shaped tooltip with shadows and dynamic content
• d3-trail – A layout for creating better path elements
• 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
• d3.svg.circularbrush – A brush for selecting cyclical data
• d3.svg.ribbon – An area interpolator
• d3kit – A set of tools to speed D3 related project development
• iopctrl – Lib for making simple user interface controls
• kodama – Tooltip Plugin
• 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
• comic.js – Cartoon style drawing. Works also for canvas, Raphael & SVG.js
• dragit – A toolkit to enable the manipulation of data graphics
• d3moji – First class emoji support
• 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-resume – Resume visualizer
• 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
• jsdoc2diagram – Create tree diagram from jsdoc
• 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.

Code Editors

• d3-snippets – Snippets for Atom
• d3-snippets-for-sublime-text-2 – Snippets for Sublime
• d3Snippets – Snippets for VS Code

Bl.ocks.org Profiles

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