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

<!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>

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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js