D3 Examples - Module 2 exercise, SVG drawing and load CSV file

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Loading CSV Data with D3</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style>
            svg {
                background-color: #7aa0b4;
            }
        </style>
    </head>
    <body>
​
        <p>You should see something sort of like an eclipse below?</p>
​
        <script type="text/javascript">     
​
            //Load in contents of CSV file
            d3.csv("CPI_Historical_Data_1974-2014.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 newSVG = d3.select("body").append("svg");
            
            newSVG.attr({
                "width": 500,
                "height": 400,
            }).append("circle").attr({
                "cx": 100,
                "cy": 100,
                "r": 200,
                "fill": '#d9b410'
            });
            
            newSVG.append("circle").attr({
                "cx": 200,
                "cy": 200,
                "r": 100,
                "fill": '#eeedeb'
            });
            
            newSVG.append("ellipse").attr({
                "cx": 380,
                "cy": 350,
                "rx": 100,
                "ry": 30,
                "fill": '#595959'
            });
​
​
        </script>
​
    </body>
</html>
    