D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
kvnphllps
Full window
Github gist
Uranium Ores & Concentrates: production in metrics tons by country and year (2000-2010)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Uranium Ores & Concentrates </title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> </head> <body> <hr> <h1>Uranium Ores & Concentrates: production in metric tons by country and year (2000-2010).</h1> <hr> <svg width="1100" height="210"> <circle cx="100" cy="100" r="100" fill="gold" /> <circle cx="100" cy="100" r="50" fill="pink" /> <circle cx="310" cy="100" r="100" fill="pink" /> <circle cx="310" cy="100" r="50" fill="gold" /> <circle cx="520" cy="100" r="100" fill="gold" /> <circle cx="520" cy="100" r="50" fill="pink" /> <circle cx="730" cy="100" r="100" fill="pink" /> <circle cx="730" cy="100" r="50" fill="gold" /> <circle cx="940" cy="100" r="100" fill="gold" /> <circle cx="940" cy="100" r="50" fill="pink" /> </svg> <hr> <script type="text/javascript"> // Define our working SVG area of the page var currSVG = d3.select("body") .append("svg") .attr("width",1100) .attr("height",400) .attr("background", "pink"); //Load in contents of CSV file d3.csv("uranium_production_metric_tons.csv", function(data) { //Now CSV contents have been transformed into //an array of JSON objects. //Log 'data' to the console, for verification. // console.log(data); var rects = currSVG.selectAll("rect") .data(data) // data gets bound .enter() // data enters the stage .append("rect") //what we are drawing with rects.attr("fill","gold") .attr("x",0) // each bar starts at same x position .attr("y", function(d, i){ //"d" here is a single data point, while "i" is the index return i * 20; }) // y position set to index time 10 pixel units. .attr("width", function(d){ return d.USA/2; // Divide by 2 to make bars fit on screen ... responsive design, ha! }) .attr("height",10) .append("title") .text(function(d) { return d.USA + " metric tons of uranium ore & concentrate production in " + d.Year; }); }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js