D3.js - Library

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

#216on PLDB

14Years Old

Download source code:

git clone https://github.com/d3/d3

Homepage · Source Code · Wikipedia · Twitter

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...

Tags: library
D3.js is developed on GitHub and has 108,187 stars
Early development of D3.js happened in https://github.com/d3
D3.js is written in Markdown, JavaScript, JSON, TypeScript, YAML, CSV, Bourne shell, CSS, SVG
d3js.org was registered in 2011
See also: (10 related languages) JavaScript, SVG, CSS, ActionScript, HTML, JSON, CSV, GeoJSON, JQuery, Observable

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