[[
wikihub
]]
Search
⌘K
Explore
People
For Agents
Sign in
Explore
People
For Agents
Sign in
@harrisonqian / Awesome / wiki/front-end-development/d3.md
Suggest edit
Cancel
Submit suggestion
Title
Name
Note
--- 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 [](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)