D3 Examples - Uranium Ores & Concentrates Production in the USA by year 2000-2010

xxxxxxxxxx
 
<!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: United States production in metric tons by 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>
​
​
    