D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
JoaoGoncalves
Full window
Github gist
Portuguese companies with more than 10 employees with website (2003-2014)
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Data Visualization and Infographics with D3 :: Module 3 Exercise</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <style> body { background-color: rgba(170, 170, 170, 0.37); font-family: arial; } svg { background-color: rgba(205, 248, 185, 0.4); } text { fill: black; font-family: arial; font-weight: bold; fill: white; } rect { fill: teal; } rect:hover { fill: rgba(0, 128, 128, 0.58); } </style> </head> <body> <h3>Portuguese companies with website (2003-2014)</h3> <svg> </svg> <script> var w = 500; var h = 400; var barPadding = 1; var svg = d3.select("svg") .attr("width", w) .attr("height", h); d3.csv("websitesEuro18.csv", function (data) { svg.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", 0) .attr("y", function (d, i) { return i * (h / data.length); }) .attr("width", function (d) { return d.portugal * 5; }) .attr("height", h / data.length - barPadding) .append("title") .text(function (d) { return d.years; }); svg.selectAll("text") .data(data) .enter() .append("text") .text(function (d) { return d.portugal + "%"; }) .attr("x", function (d) { return (d.portugal * 5) - 35; }) .attr("y", function (d, i) { return i * (h / data.length) + ((h / data.length) / 2) + 2; }); }); </script> </body> </html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js