Top 1,000 Features Creators Events Podcasts Extensions Interviews Blog Explorer CSV

D3.js

< >

D3.js is an open source library created in 2010 by Mike Bostock.

#212on PLDB 14Years Old
Download source code:
git clone https://github.com/d3/d3
HomepageSource CodeWikipediaTwitter

D3.js (or just D3 for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely implemented SVG, HTML5, and CSS standards. It is the successor to the earlier Protovis framework. Read more on Wikipedia...


Example from Wikipedia:
// Data var countriesData = [ { name:"Ireland", income:53000, life: 78, pop:6378, color: "black"}, { name:"Norway", income:73000, life: 87, pop:5084, color: "blue" }, { name:"Tanzania", income:27000, life: 50, pop:3407, color: "grey" } ]; // Create SVG container var svg = d3.select("#hook").append("svg") .attr("width", 120) .attr("height", 120) .style("background-color", "#D0D0D0"); // Create SVG elements from data svg.selectAll("circle") // create virtual circle template .data(countriesData) // bind data .enter() // for each row in data... .append("circle") // bind circle & data row such that... .attr("id", function(d) { return d.name }) // set the circle's id according to the country name .attr("cx", function(d) { return d.income / 1000 }) // set the circle's horizontal position according to income .attr("cy", function(d) { return d.life }) // set the circle's vertical position according to life expectancy .attr("r", function(d) { return d.pop / 1000 *2 }) // set the circle's radius according to country's population .attr("fill", function(d) { return d.color }); // set the circle's color according to country's color

View source

- Build the next great programming language About Resources Acknowledgements Part of the World Wide Scroll