Skip to content

Instantly share code, notes, and snippets.

@apbryant

apbryant/hh_data.csv

Created September 16, 2018 18:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save apbryant/5a7c9a25aee480979c7bbacec0bd57c7 to your computer and use it in GitHub Desktop.
Save apbryant/5a7c9a25aee480979c7bbacec0bd57c7 to your computer and use it in GitHub Desktop.
Download ZIP
U.S. household square footage and people, 1973-2014
Raw
hh_data.csv
year size people
1973 1525 3.01
1974 1560 2.97
1975 1535 2.94
1976 1590 2.89
1977 1610 2.86
1978 1655 2.81
1979 1645 2.78
1980 1595 2.76
1981 1550 2.73
1982 1520 2.72
1983 1565 2.73
1984 1605 2.71
1985 1605 2.69
1986 1660 2.67
1987 1755 2.66
1988 1810 2.64
1989 1850 2.62
1990 1905 2.63
1991 1890 2.63
1992 1920 2.62
1993 1945 2.63
1994 1940 2.67
1995 1920 2.65
1996 1950 2.65
1997 1975 2.64
1998 2000 2.62
1999 2028 2.61
2000 2057 2.62
2001 2103 2.58
2002 2114 2.58
2003 2137 2.57
2004 2140 2.57
2005 2227 2.57
2006 2248 2.57
2007 2277 2.56
2008 2215 2.56
2009 2135 2.57
2010 2169 2.59
2011 2233 2.58
2012 2306 2.55
2013 2384 2.54
2014 2453 2.54
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
#description{
font-size:12px;
font-weight:normal;
}
#hhSizeLabel{
position:absolute;
top:500px;
left:900px;
transform:rotate(90deg);
}
#hhSizeLine{
fill:none;
stroke:green;
}
p{
font-family:Arial;
font-size:14px;
font-weight:bold;
}
#sqFootageLabel{
position:absolute;
top:500px;
transform:rotate(-90deg);
}
#sqFootageLine{
fill:none;
stroke:blue;
}
svg{
position:absolute;
top:100px;
left:100px;
}
#yearLabel{
position:absolute;
top:750px;
left:550px;
}
</style>
</head>
<body>
<p>Average house square footage and average household size in the United States, 1973 - 2014</p>
<p id="yearLabel">Year</p>
<p id="sqFootageLabel">Average square footage</p>
<p id="hhSizeLabel">Average household size</p>
<p id="description">I think this is an interesting trend in American society.
Even though family sizes are getting smaller, houses have been getting larger. It's
a sign of the prosperity of the country in today's age (Look! I can buy a huge house!). However,
the minimalist in me is cringing at the inefficiency of it all, because people no only buy all that extra house, pay taxes and insurance on it,
heat it and cool it, clean it (or pay someone to do so), and buy stuff to fill it.
</p>
<script type="text/javascript">
d3.csv("hh_data.csv").then(function(data){
var parseTime = d3.timeParse("%Y")
for(i = 0; i < data.length;i++){
data[i].year = parseTime(data[i].year);
data[i].size = +data[i].size;
data[i].people = +data[i].people;
};
console.log(data);
var h = 600;
var w = 800;
var padding = 30;
var xScale = d3.scaleTime()
.domain([d3.min(data, function(d){ return d.year; }), d3.max(data, function(d){ return d.year; })])
.range([0, w]);
var sqFootageScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d){ return d.size; })])
.range([h, 0]);
var hhSizeScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d){ return d.people; })])
.range([h, 0]);
var xAxis = d3.axisBottom().scale(xScale);
var sqFootageAxis = d3.axisLeft().scale(sqFootageScale);
var hhsizeAxis = d3.axisLeft().scale(hhSizeScale);
var sqFootageLine = d3.line()
.x(function(d){ return xScale(d.year); })
.y(function(d){ return sqFootageScale(d.size); });
var hhSizeLine = d3.line()
.x(function(d){ return xScale(d.year); })
.y(function(d){ return hhSizeScale(d.people); });
var svg = d3.select('body')
.append('svg')
.attr('width', w)
.attr('height', h);
svg.append('path')
.datum(data)
.attr('class', 'line')
.attr('id', 'sqFootageLine')
.attr('transform', 'translate (' + (padding + 20) + ',0)')
.attr('d', sqFootageLine);
svg.append('path')
.datum(data)
.attr('class', 'line')
.attr('id', 'hhSizeLine')
.attr('transform', 'translate (' + (padding + 20) + ',0)')
.attr('d', hhSizeLine);
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate (' + (padding + 20) + ',' + (h - (padding - 10)) + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate (' + (padding + 20) + ',' + (-5) + ')')
.call(sqFootageAxis);
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate (' + (w - 1) + ',' + (-5) + ')')
.call(hhsizeAxis);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment