D3.js
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 colorEdit
Last updated February 11th, 2019