Questions Columns Rows
GitHub icon


D3.js - Library

< >

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

Source code:
git clone
#307on PLDB 12Years Old

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 ="#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 }) // 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 }) // 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 Search Add Language Features Creators Resources About Blog Acknowledgements Stats Sponsor Traffic Traffic Today Day 268 Logout