D3 Examples - Chicago Hardship Index by Community, 2008

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Chicago Hardship Index by Community, 2008 - 2012</title>
        <style type="text/css">
            
            body {
                background-color: #D8D8D8;
            }
​
            svg {
                background-color: #FF0040;
            }
​
        </style>
    </head>
    <body>
    <h1> Chicago Hardship Index by Community, 2008 - 2012 </h1>
    <script src="https://d3js.org/d3.v3.js"></script>
    
    <script type="text/javascript">     
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", 550)
                        .attr("height", 930);
                        
            //Load in contents of CSV file
            d3.csv("Selected Socioeconomic Indicators in Chicago from 2008-2012.csv", function(data) {
​
                //sort data in descending order based on hardshipIndex
                data.sort(function (a, b){
                    return d3.descending( a.hardshipIndex, b.hardshipIndex);
                });
            
            //create rects variable for bar chart
            var rects = svg.selectAll("rect")
                    .data(data)
                    .enter()
                    .append("rect")
                    
                //define rectangle attributes
                rects.attr("x", 0)
                    //y position based on data order, *12 for spacing
                    .attr("y", function (d,i) {
                        return i * 12 + 3
                    })
                    //bar length based on hardshipIndex, *5 for scale
                    .attr("width", function (d) {
                        return d.hardshipIndex * 5
                    })
                    .attr("height", 10)
                    //.style("fill", blue)
                    //quick tooltip for testing
                    .append("title")
                    .text(function(d){
                        return d.community + "'s Hardship Index is " + d.hardshipIndex;
                    });
                    
                //Log 'data' to the console, for verification.
                console.log(data);
​
            });
​
​
        </script>
​
​
    </body>
</html>
    