awesome-d3

A list of D3 libraries, plugins and utilities

5,274

311

5,274

View on GitHub

Top Related Projects

d3

111,176

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

billboard.js

5,927

📊 Re-usable, easy interface JavaScript chart library based on D3.js

Chart.js

66,311

Simple HTML5 Charts using the <canvas> tag

echarts

64,125

Apache ECharts is a powerful, interactive charting and data visualization library for browser

plotly.js

17,682

Open-source JavaScript charting library behind Plotly and Dash

Quick Overview

The wbkd/awesome-d3 repository is a curated list of D3.js libraries, plugins, and utilities. It serves as a comprehensive resource for developers working with D3.js, providing links to various tools, extensions, and learning materials related to the popular data visualization library.

Pros

Extensive collection of D3.js resources in one place
Well-organized and categorized for easy navigation
Regularly updated with new contributions from the community
Includes both official and third-party resources

Cons

May be overwhelming for beginners due to the large number of resources
Some listed projects might be outdated or no longer maintained
Lacks detailed descriptions or comparisons of listed resources
Does not provide direct code examples or tutorials

Note: As this is not a code library but a curated list of resources, the code example and getting started sections are not applicable.

Competitor Comparisons

d3

111,176

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

Pros of d3

Official repository for D3.js, providing the core library and documentation
Regularly updated with new features, bug fixes, and improvements
Comprehensive API reference and examples directly in the repository

Cons of d3

Can be overwhelming for beginners due to its extensive API and low-level approach
Requires more code to create visualizations compared to higher-level libraries
Less focus on curated resources and third-party extensions

Code Comparison

d3:

d3.select("body")
  .append("svg")
  .attr("width", 100)
  .attr("height", 100)
  .append("circle")
  .attr("cx", 50)
  .attr("cy", 50)
  .attr("r", 40)
  .style("fill", "blue");

awesome-d3: No direct code comparison available, as awesome-d3 is a curated list of resources rather than a library.

Summary

d3 is the official repository for the D3.js library, offering the core functionality and documentation. It's ideal for developers who want to work directly with the library and stay up-to-date with the latest features. However, it can be challenging for beginners and requires more code for basic visualizations.

awesome-d3, on the other hand, is a curated list of D3.js resources, tutorials, and extensions. It's excellent for discovering tools, learning materials, and community-created content, but doesn't provide the actual D3.js library or code examples.

billboard.js

5,927

📊 Re-usable, easy interface JavaScript chart library based on D3.js

Pros of billboard.js

Ready-to-use charting library with a simpler API, requiring less D3.js knowledge
Provides a wide range of pre-built chart types out of the box
Easier to create and customize charts with less code

Cons of billboard.js

Less flexibility compared to raw D3.js for creating highly custom visualizations
Smaller community and ecosystem compared to D3.js
May have performance limitations for large datasets or complex visualizations

Code Comparison

billboard.js:

var chart = bb.generate({
  data: {
    columns: [
      ["data1", 30, 200, 100, 400, 150, 250],
      ["data2", 50, 20, 10, 40, 15, 25]
    ],
    type: "line"
  }
});

D3.js (from awesome-d3 examples):

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Additional code for scales, axes, and line generation

billboard.js offers a more concise and straightforward approach to creating charts, while D3.js (as showcased in awesome-d3) provides greater control and flexibility for custom visualizations. The choice between the two depends on the specific project requirements, desired level of customization, and developer expertise.

Chart.js

66,311

Simple HTML5 Charts using the <canvas> tag

Pros of Chart.js

Easier to use and set up, with a simpler API and less steep learning curve
Built-in responsive design, automatically adjusting charts to fit different screen sizes
Smaller file size, leading to faster load times and better performance

Cons of Chart.js

Less flexible and customizable compared to D3.js
Limited to specific chart types, while D3.js allows for creation of any type of data visualization
Fewer animation options and less control over transitions

Code Comparison

Chart.js example:

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3]
        }]
    }
});

D3.js example:

var svg = d3.select("body").append("svg")
    .attr("width", 200)
    .attr("height", 200);

svg.selectAll("rect")
    .data([4, 8, 15, 16, 23, 42])
    .enter().append("rect")
    .attr("x", (d, i) => i * 35)
    .attr("y", (d, i) => 200 - d * 10)
    .attr("width", 30)
    .attr("height", (d) => d * 10);

echarts

64,125

Apache ECharts is a powerful, interactive charting and data visualization library for browser

Pros of ECharts

Comprehensive charting library with built-in chart types and features
Supports both SVG and Canvas rendering for better performance
Extensive documentation and examples available

Cons of ECharts

Steeper learning curve due to its comprehensive nature
Larger file size compared to D3.js core library
Less flexibility for creating highly custom visualizations

Code Comparison

ECharts:

var myChart = echarts.init(document.getElementById('main'));
var option = {
    xAxis: {type: 'category', data: ['A', 'B', 'C']},
    yAxis: {type: 'value'},
    series: [{type: 'bar', data: [1, 2, 3]}]
};
myChart.setOption(option);

D3.js:

var svg = d3.select("#chart").append("svg");
var x = d3.scaleBand().domain(['A', 'B', 'C']).range([0, width]);
var y = d3.scaleLinear().domain([0, 3]).range([height, 0]);
svg.selectAll("rect").data([1, 2, 3])
   .enter().append("rect").attr("x", d => x(d)).attr("y", d => y(d));

Summary

ECharts is a comprehensive charting library with built-in features, while awesome-d3 is a curated list of D3.js resources. ECharts offers ready-to-use charts but may be less flexible for custom visualizations. D3.js, referenced in awesome-d3, provides more control over visualizations but requires more code for basic charts.

plotly.js

17,682

Open-source JavaScript charting library behind Plotly and Dash

Pros of plotly.js

Comprehensive, ready-to-use charting library with a wide range of chart types
Interactive features built-in, including zooming, panning, and hover tooltips
Supports both static and dynamic data updates

Cons of plotly.js

Larger file size and potentially slower load times compared to D3-based solutions
Less flexibility for creating highly customized or unique visualizations
Steeper learning curve for developers familiar with D3's low-level approach

Code Comparison

plotly.js:

Plotly.newPlot('myDiv', [{
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter'
}]);

D3 (example from awesome-d3):

d3.select('body')
  .append('svg')
  .attr('width', 100)
  .attr('height', 100)
  .append('circle')
  .attr('cx', 50)
  .attr('cy', 50)
  .attr('r', 40)
  .style('fill', 'blue');

Summary

plotly.js offers a more comprehensive, out-of-the-box solution for creating interactive charts, while awesome-d3 provides a curated list of D3-based resources that offer greater flexibility and customization options. plotly.js is better suited for rapid development of standard chart types, while D3-based solutions are ideal for creating unique, highly customized visualizations with fine-grained control over every aspect of the chart.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot