Skip to content

Instantly share code, notes, and snippets.

@david-j-davis

david-j-davis/HUD-median-incomes-1985-2009.csv

Last active November 16, 2016 02:26
Show Gist options
  • Save david-j-davis/b37757fd1c40b1b3f264 to your computer and use it in GitHub Desktop.
Save david-j-davis/b37757fd1c40b1b3f264 to your computer and use it in GitHub Desktop.
Download ZIP
HUD Median Household Incomes from 1987-2009
Raw
HUD-median-incomes-1985-2009.csv
city 1987 1989 1991 1993 1995 1997 1999 2001 2003 2005 2007 2009
Austin, TX 33400 37200 41000 41800 43200 48600 55400 64700 66900 67300 69300 73300
Bakersfield, CA 28100 31000 33300 35000 36600 37700 38700 40300 42800 46600 47800 52200
Boulder-Longmont, CO 37600 41700 43900 50500 54200 61200 68700 81400 81900 82000 82500 89100
Colorado Springs, CO 28400 31900 34100 39100 40200 45300 48000 53600 59700 63400 65500 70800
Dallas, TX 35600 39700 43900 45500 47000 52300 58200 64400 65000 65100 62200 67600
Denver, CO 35900 39500 41900 46400 48600 54900 58600 64400 68000 71650 71400 76000
Detroit, MI 35500 39900 44600 46700 47000 53300 60500 66500 66700 67800 67033 70883
Fresno, CA 27600 30600 33400 33000 34600 35600 37200 39700 41700 45900 49950 52850
Houston, TX 38300 41000 42400 42500 45300 49100 54100 58500 59100 61000 57300 63800
Los Angeles-Long Beach, CA 33200 38000 42000 43000 45200 47800 51300 54500 50300 54450 56500 62100
New York City, NY 29500 33800 40500 41700 43000 47300 53400 59100 51900 54400 56800 61600
Oakland, CA 36700 42400 46800 52400 55400 60100 65700 71600 76600 82200 83000 89300
San Diego, CA 31400 36700 41300 43900 45400 48600 52500 56900 59900 63400 69400 74900
San Francisco, CA 39800 44000 49900 54300 58800 64400 72400 80100 91500 95000 86500 96800
San Jose, CA 43100 51100 57700 59300 64200 70200 82600 87300 105500 105500 94500 102500
Washington, DC-MD-VA 44500 51000 57300 60600 62700 70300 78900 85600 84800 89300 94500 102700
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Line Chart with Multiple Lines</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {background-color: grey; color: lightgrey; font-family: sans-serif; padding: 1em;}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
margin-top: 30px;
}
path {
stroke: gray;
stroke-width: 0.5;
-moz-transition-property: all;
-o-transition-property: all;
-webkit-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
path:hover {stroke: black;}
g.highlight path {
stroke: green;
stroke-width: 3;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
font-weight: lighter;
stroke: grey;
}
/*.y.axis path, .y.axis line {opacity: 0}*/
p {color: darkgrey}
a {color: darkgrey;}
</style>
</head>
<body>
<h1>US Department of Housing and Urban Development</h1>
<h3>Median Household Incomes from 1987-2009</h3>
<p>Source: <a href="http://www.huduser.gov/portal/datasets/hads/hads.html">American Housing Survey</a></p>
<script type="text/javascript">
//Dimensions and padding
var w = 700;
var h = 600;
var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left
//Set up date formatting and years
var dateFormat = d3.time.format("%Y");
//Set up scales
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
//Configure axis generators
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(15)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//Configure line generator
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.year));
})
.y(function(d) {
return yScale(+d.amount);
});
//Create the empty SVG image
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load data
d3.csv("HUD-median-incomes-1985-2009.csv", function(data) {
//New array with all the years, for referencing later
var years = ["1987", "1989","1991","1993","1995","1997","1999","2001","2003","2005","2007","2009"];
//Create a new, empty array to hold our restructured dataset
var dataset = [];
//Loop once for each row in data
for (var i = 0; i < data.length; i++) {
//Create new object with this city's name and empty array
dataset[i] = {
city: data[i].city,
income: []
};
//Loop through all the years
for (var j = 0; j < years.length; j++) {
// If value is not empty
if (data[i][years[j]]) {
//Add a new object to the income data array
dataset[i].income.push({
year: years[j],
amount: data[i][years[j]]
});
}
}
}
//Uncomment to log the original data to the console
//console.log(data);
//Uncomment to log the newly restructured dataset to the console
console.log(dataset);
//Set scale domains
xScale.domain([
d3.min(years, function(d) {
return dateFormat.parse(d);
}),
d3.max(years, function(d) {
return dateFormat.parse(d);
})
]);
yScale.domain([
d3.max(dataset, function(d) {
return d3.max(d.income, function(d) {
return +d.amount;
});
}),
0
]);
//Make a group for each city
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.classed("highlight", function(d) {
if (d.city == "San Jose, CA" ||
d.city == "San Francisco, CA" ||
d.city == "Washington, DC-MD-VA") {
return true;
} else {
return false;
}
});
//Append a title with the city name (so we get easy tooltips)
groups.append("title")
.text(function(d) {
return d.city;
});
//Within each group, create a new line/path,
//binding just the emissions data to each one
groups.selectAll("path")
.data(function(d) {
return [ d.income ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "grey")
.attr("stroke-width", 2);
//Axes
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment