D3.js - Library

D3.js is an actively used library created in 2011.

8Years Old

140,941Users

0Jobs

D3.js ranks in the top 10% of entities I track
the D3.js website
the D3.js wikipedia page
D3.js on github
D3.js first appeared in 2011
See also: javascript, svg, css, actionscript, html, json, csv, geojson, jquery
I have 42 facts about D3.js. just email me if you need more.

Example code 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

Edit

Last updated February 11th, 2019