D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
acurvadegauss
Full window
Github gist
DVD3.js - Module 3 Exercise
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>OCDE's GDP per capita</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> svg { background-color: #D9D9C3; } rects { background-color: #black; } </style> </head> <body> <svg width="1000"> <ellipse cx="10" cy="10" rx="100" ry="100" fill="#B8CCB8" /> <ellipse cx="75" cy="75" rx="50" ry="50" fill="#D9FFFF" /> <text x="65" y="80" fill="charcoal" font-size="36" font-weight="bold" font-family="Helvetica">Gross Domestic Produt (GDP) per capita in 2013</text> <text x="65" y="105" fill="charcoal" font-size="14" font-weight="bold" font-family="Helvetica">Total, US dollars/capita, 2013 - Source: Aggregate National Accounts, Gross domestic product</text> <script type="text/javascript"> var svg = d3.select("body") .append("svg") .attr("width", 1000) .attr("height", 500); d3.csv("gdppercapita.csv", function(data) { data.sort(function(a, b) { return d3.descending(+a.YR2013, +b.YR2013); }); var rects = svg.selectAll("rect") .data(data) .enter() .append("rect"); rects.attr("x", 65) .attr("y", function(d, i) { return i * 15 + 10; }) .attr("width", function(d) { return +d.YR2013 / 125; }) .attr("height", 12) .append("title") .text(function(d) { return d.Location + "'s GDP per capita in 2013 was US$ " + d.YR2013; }); }); </script> </svg> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js