D3 Examples - Module 5: Homeownership Rates vs. Median Income in Large US Metro Areas, 2013

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Home Ownership Rates and Median Income by Metro Area</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            
            body {
                background-color: white;
                font-family: Helvetica, Arial, sans-serif;
            }
            
            
            h1 {
                font-size: 24px;
                margin: 0;
            }
​
            p {
                font-size: 12px;
                margin: 3px 50px 0 0;
            }
            
            
            svg {
                background-color: white;
            }
​
            circle:hover {
                fill: orange;
            }
            
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
​
        </style>
    </head>
    <body>
        
        <hl><strong>Examining Homeownership Rates vs. Median Household Income Across Major Metro Areas in US</strong></hl>
        <p>This scatterplot looks at the relationship between 2013 median household income (horizontal axis) and the share of housing units owned by the occupant (vertical axis). There appears to be little or no correlation between these two variables.<br> Source: <a href="https://www.census.gov/housing/hvs/files/annual14/ann14t_16.xls">US Census Bureau</a>.</p>
​
        <script type="text/javascript"> 
            
            var w = 650;
            var h = 500;
            var padding = [ 20, 10, 30, 50 ];  //Top, right, bottom, left
            
         var xScale = d3.scale.linear()
                                .range([ padding [3], w - padding[1] - padding[3] ]);
            
            var yScale = d3.scale.linear()
                                .range([ h - padding[2], padding[0]  ]);   
      
            
            
            var xAxis = d3.svg.axis()
                            .scale(xScale)
                            .orient("bottom");
​
            var yAxis = d3.svg.axis()
                            .scale(yScale)
                            .orient("left");
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
            
            d3.csv("home_ownership_median_income_MSA.csv", function(data) {
                
                
                 xScale.domain([
                    d3.min(data, function(d) {
                        return +d.medianIncome2013;
}),
                    d3.max(data, function(d) {
                       return +d.medianIncome2013;
}) 
]);
​
                yScale.domain([
                    d3.min(data, function(d) {
                        return +d.ownership2013;
                    }),
                    d3.max(data, function(d) {
                       return +d.ownership2013;
                    }) 
                ]);
                
                
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
​
circles.attr("cx", function(d) {
        return xScale(+d.medianIncome2013);
    })     
      .attr("cy", function(d) {
        return yScale(+d.ownership2013);
    })                
    .attr("r", 4)
    .attr("fill", "green")
    .append("title")
    .text(function(d) {
        return "The median income for " + d.MSA + " is " +  +d.medianIncome2013 + " and the homeownership rate is " + +d.ownership2013 + "%";
    });
                
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (h - padding[2]) + ")")
    .call(xAxis);
​
svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + padding[3] + ",0)")
    .call(yAxis);
            });
​
</script>
</body>
</html>
    