D3 Examples - Chicago Hardship Index, Week 4

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: white;
                font-family: Helvetica, Arial, sans-serif;
            }
            
            h1 {
                font-family: Arial;
                margin: 0;
            }
            
            p {
                font-size: 14px;
                color: #9C9EA0;
                margin: 10px 0px 0px 0px;
            }
​
            svg {
                background-color: white;
            }
            /*not working...figure out next goround*/   
            rect:hover {
                fill: yellow;
            }
            
            /*style for axis*/
            .axis path,
            .axis line {
                    fill: none;
                    stroke: black;
                    shape-rendering: crispEdges;
                    }
            
            .y.axis path,
            .y.axis line {
                    opacity: 0
            }
            .y.axis text {
                    font-family: Arial;
                    font-size: 14px;
                    }
                    
            .x.axis text {
                    font-family: Arial;
                    font-size: 20px;
            }
            
            .x.axis.top path,
            .x.axis.top line {
                        opacity : 0
            }
                    
        </style>
    </head>
    <body>
    <h1> Chicago Hardship Index by Community, 2008 - 2012 </h1>
    <p> This data is based on US Census estimates of socioeconomic indicators between 2008 and 2012. 
        The economic hardship index is standardized on a 0 to 100 scale, with a higher score indicating less hardship.
         The full dataset can be found at <a href=https://data.cityofchicago.org/Health-Human-Services/Census-Data-Selected-socioeconomic-indicators-in-C/kn9c-c2s2>the City of Chicago Data Portal</a>. </p>
    <script src="https://d3js.org/d3.v3.js"></script>
    
    <script type="text/javascript">     
​
            //height, width and padding variables, allowing for SVG size to change dynamically without
            //updates elsewhere in code if need be
            var w = 850
            var h = 1200
            var padding = [ 20, 30, 30, 175 ];  //Top, right, bottom, left
            
            //scales SVG to w var. mapped to data below (range = SVG pixels. Domain = data)
            var widthScale = d3.scale.linear()
                                .range([ 0, w - padding[1] - padding[3] ]);
                                
            //determines vertical position of bars, scaled to SVG height, with pixels rounded and 10% spacing
            var heightScale = d3.scale.ordinal()
                                .rangeRoundBands([ padding[0], h - padding[2] ], 0.20);
            
            //create x-axis var
            var xAxis = d3.svg.axis()
                            .scale(widthScale)
                            .orient("bottom"); //places labels under axis
                            
            var xAxisTop = d3.svg.axis()
                            .scale(widthScale)
                            .orient("top");
                            
            //create y-axis var
            var yAxis = d3.svg.axis()
                            .scale(heightScale)
                            .orient("left"); 
            
            //create SVG element and append to body
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
                        
            //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 (need + to treat data as number instead of string)
                data.sort(function (a, b){
                    return d3.descending( +a.hardshipIndex, +b.hardshipIndex);
                });
            
            //scales length of bars related to svg width and as a function of the data
            widthScale.domain([ 0, d3.max(data, function(d) {
                return +d.hardshipIndex;
                }) ]);
                
            //console.log(data.map(function(d) { return d.community; } ));
            //scales bar position based on the data and returns community for scale label
            heightScale.domain(data.map(function(d) { return d.community; } ));
            //heightScale.domain(d3.range(data.length));
            
            //create rects variable for bar chart
            var rects = svg.selectAll("rect")
                    .data(data)
                    .enter()
                    .append("rect")
                    
                //define rectangle attributes
                rects.attr("x", padding[3]) //sets left edge to left padding
                    //y position based on data order, number of data points
                    .attr("y", function (d,i) {
                        return heightScale(d.community); //heightScale mapped to community
                    })
                    //bar length based on hardshipIndex, widthScale
                    .attr("width", function (d) {
                        return widthScale(d.hardshipIndex);
                    })
                    //bar thickness (height) scaled based on rangeBand
                    .attr("height", heightScale.rangeBand())
                    .style("fill", "purple")
                    //quick tooltip for testing
                    .append("title")
                    .text(function(d){
                        return d.community + "'s Hardship Index is " + d.hardshipIndex;
                    });
                    
                //append x-axis group to svg and place at bottom
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")//positions axis
                    .call(xAxis);
                    
                    //append x-axistop group to the top of svg and place at bottom
                svg.append("g")
                    .attr("class", "x axis top")
                    .attr("transform", "translate(" + padding[3] + "," + (padding[0]) + ")")//positions axis
                    .call(xAxis);
                    
                //append y-axis group to svg and place at left
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + (padding[3] - 5) + ",0)")
                    .call(yAxis);
                    
                //Log 'data' to the console, for verification.
                console.log(data);
​
            });
​
​
        </script>
​
​
    </body>
</html>
    