Skip to content

Instantly share code, notes, and snippets.

@sdbernard

sdbernard/index.html

Last active August 29, 2015 14:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sdbernard/31de3e75efce7ef91a95 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sdbernard/31de3e75efce7ef91a95 to your computer and use it in GitHub Desktop.
Download ZIP
Module 3: Obesity in the United States
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading CSV Data with D3</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: #fff1e0;
margin: 0;
font-family: Arial, sans-serif;
}
rect {
fill: #bb6d82;
}
.barLabel {
font-size: 12px;
fill: #74736c;
text-anchor: end;
}
.barValue {
font-size: 12px;
fill: #74736c;
}
h1, p {
position: relative;
left: 10px;
color: #333333;
}
.hover rect{
fill: #9e2f50;
transition: fill 0.2s;
}
.hover text {
fill: #000000;
}
.footnote {
position: relative;
}
</style>
</head>
<body>
<script type="text/javascript">
var margin = {top: 10, right: 10, bottom: 0, left: 5};
var body = d3.select('body');
body.append('h1')
.text('Obesity in the United States')
body.append('p')
.text('% of Americans classified as obese, by state (2013)')
var svg = d3.select('body').append('svg'),
barHeight = 10,
barSpace = 5
svg.attr('width', 900)
.attr('height', 760)
//Load in contents of CSV file
d3.csv('obesityPoverty.csv', function(data) {
console.log(data);
data.sort(function(a,b) {
return d3.descending(a.obesity2013, b.obesity2013)
});
svg.selectAll('g')
.data(data)
.enter()
.append('g')
var barGroup = d3.selectAll('g');
barGroup.append('rect')
.attr({
'width': function(d) { return d.obesity2013 * 20; },
'height': barHeight,
'x': 150,
'y': function(d, i) { return margin.top + (barHeight + barSpace) * i; }
})
barGroup.append('text')
.text(function(d) { return d.state; })
.attr('y', function(d, i) { return margin.top + 9 + (barHeight + barSpace) * i; })
.attr('class', 'barLabel')
.attr('x', 140)
barGroup.append('text')
.attr('class', 'barValue')
.attr('x', function(d) { return (d.obesity2013 * 20) + 155; } )
.attr('y', function(d, i) { return margin.top + 9 + (barHeight + barSpace) * i; })
.text(function(d) { return d.obesity2013 + '%'; })
barGroup.style('cursor', 'pointer')
barGroup.on('mouseover', function() {
d3.select(this)
.classed('hover', true)
})
barGroup.on('mouseout', function() {
d3.select(this)
.classed('hover', false)
})
body.append('p')
.text('Hover over the bars!!!')
.attr('class', 'footnote')
});
</script>
</body>
</html>
Raw
obesityPoverty.csv
state obesity2013 obesity2012 obesity2011 obesity2010 obesity2009 obesity2008 obesity2007 obesity2006 obesity2005 poverty2013 poverty2012 poverty2011 poverty2010 poverty2009 poverty2008 poverty2007 poverty2006 poverty2005
Alabama 32.4 33 32 33 31.6 32.2 30.9 30.5 28.9 16.7 16.2 15.4 17.2 16.6 14.3 14.5 14.3 16.7
Alaska 28.4 25.7 27.4 25.2 25.4 27.1 28.2 26.2 27.4 10.9 10.0 11.7 12.5 11.7 8.2 7.6 8.9 10.0
Arizona 26.8 26 25.1 25.2 25.9 25.6 25.8 22.9 21.1 20.2 19.0 17.2 18.8 21.2 18.0 14.3 14.4 15.2
Arkansas 34.6 34.5 30.9 30.9 31.5 29.5 29.3 26.9 28 17.1 20.1 18.7 15.3 18.9 15.3 13.8 17.7 13.8
California 24.1 25 23.8 24.7 25.5 24.3 23.3 23.3 22.7 14.9 15.9 16.9 16.3 15.3 14.6 12.7 12.2 13.2
Colorado 21.3 20.5 20.7 21.4 19 19.1 19.3 18.2 17.8 10.6 11.9 13.2 12.3 12.3 11.0 9.8 9.7 11.4
Connecticut 25 25.6 24.5 23 21 21.4 21.7 20.6 20.1 11.3 10.3 10.1 8.6 8.4 8.1 8.9 8.0 9.3
Delaware 31.1 26.9 28.8 28.7 27.6 27.8 28.2 26 23.5 14.0 13.5 13.7 12.2 12.3 9.6 9.3 9.3 9.2
District of Columbia 22.9 21.9 23.8 22.4 20.1 22.3 22.2 22.5 21.7 21.3 18.4 19.9 19.5 17.9 16.5 18.0 18.3 21.3
Florida 26.4 25.2 26.6 27.2 26.5 25.2 24.1 23.1 22.8 14.9 15.3 14.9 16.0 14.6 13.1 12.5 11.5 11.1
Georgia 30.3 29.1 28 30.4 27.7 27.8 28.7 27.1 26.5 16.3 18.1 18.4 18.8 18.4 15.5 13.6 12.6 14.4
Hawaii 21.8 23.6 21.9 23.1 22.9 23.1 21.7 20.6 19.7 11.1 13.8 12.1 12.4 12.5 9.9 7.5 9.2 8.6
Idaho 29.6 26.8 27.1 26.9 25.1 25.2 25.1 24.1 24.5 12.9 14.4 15.7 13.8 13.7 12.2 9.9 9.5 9.9
Illinois 29.4 28.1 27.1 28.7 27.4 26.9 25.6 25.1 25.1 13.3 12.6 14.2 14.1 13.2 12.3 10.0 10.6 11.5
Indiana 31.8 31.4 30.8 30.2 30 27 27.4 27.8 27.2 11.6 15.2 15.6 16.3 16.1 14.3 11.8 10.6 12.6
Iowa 31.3 30.4 29 29.1 28.5 26.7 27.7 25.7 25.4 10.8 10.3 10.4 10.3 10.7 9.5 8.9 10.3 11.3
Kansas 30 29.9 29.6 30.1 28.8 28.1 27.7 25.9 23.9 13.2 14.0 14.3 14.5 13.7 12.7 11.7 12.8 12.5
Kentucky 33.2 31.3 30.4 31.8 32.4 30.3 28.7 28 28.6 20.0 17.9 16.0 17.7 17.0 17.1 15.5 16.8 14.8
Louisiana 33.1 34.7 33.4 31.7 33.9 29 30.7 27.1 30.8 19.2 21.1 21.1 21.5 14.3 18.2 16.1 17.0 18.3
Maine 28.9 28.4 27.8 27.4 26.4 25.9 25.2 23.1 22.7 12.3 12.8 13.4 12.6 11.4 12.0 10.9 10.2 12.6
Maryland 28.3 27.6 28.3 27.9 26.8 26.7 26.3 24.9 24.4 10.3 9.9 9.3 10.9 9.6 8.7 8.8 8.4 9.7
Massachusetts 23.6 22.9 22.7 23.6 21.8 21.5 21.7 20.3 20.7 11.9 11.3 10.6 10.9 10.8 11.3 11.2 12.0 10.1
Michigan 31.5 31.1 31.3 31.7 30.3 29.5 28.2 28.8 26.2 14.5 13.7 15.0 15.7 14.0 13.0 10.8 13.3 12.0
Minnesota 25.5 25.7 25.7 25.4 25.4 25.2 26 24.7 23.7 12.0 10.0 10.0 10.8 11.1 9.9 9.3 8.2 8.1
Mississippi 35.1 34.6 34.9 34.5 35.4 33.4 32.6 31.4 30.9 22.5 22.0 17.4 22.5 23.1 18.1 22.6 20.6 20.1
Missouri 30.4 29.6 30.3 31.4 30.6 29.1 28.2 27.2 26.9 13.7 15.2 15.4 15.0 15.5 13.3 12.8 11.4 11.6
Montana 24.6 24.3 24.6 23.5 23.7 24.3 22.6 21.2 21.3 14.5 13.4 16.5 14.5 13.5 12.9 13.0 13.5 13.8
Nebraska 29.6 28.6 28.4 27.5 28.1 27.2 26.5 26.9 26 11.0 12.2 10.2 10.2 9.9 10.6 9.9 10.2 9.5
Nevada 26.2 26.2 24.5 23.1 26.4 25.6 24.6 25 21.2 17.4 15.8 15.5 16.6 13.0 10.8 9.7 9.5 10.6
New Hampshire 26.7 27.3 26.2 25.5 26.3 24.9 25.1 22.4 23.1 9.0 8.1 7.6 6.5 7.8 7.0 5.8 5.4 5.6
New Jersey 26.3 24.6 23.7 24.8 23.9 23.6 24.1 22.6 22.1 11.1 9.3 11.4 11.1 9.3 9.2 8.7 8.8 6.8
New Mexico 26.4 27.1 26.3 25.6 25.6 25.7 25.1 22.9 21.7 21.7 20.4 22.2 18.3 19.3 19.3 14.0 16.9 17.9
New York 25.4 23.6 24.5 24.5 24.6 25.1 25.5 22.9 22.2 14.5 17.2 16.0 16.0 15.8 14.2 14.5 14.0 14.5
North Carolina 29.4 29.6 29.1 28.6 30.1 29.5 28.7 26.6 25.9 18.6 17.2 15.4 17.4 16.9 13.9 15.5 13.8 13.1
North Dakota 31 29.7 27.8 27.9 28.4 27.8 27 25.4 25.4 9.9 11.4 9.9 12.6 10.9 11.8 9.3 11.4 11.2
Ohio 30.4 30.1 29.7 29.7 29.8 29.3 28.1 28.4 24.3 13.7 15.4 15.1 15.4 13.3 13.7 12.8 12.1 12.3
Oklahoma 32.5 32.2 31.1 31.3 32 31 28.8 28.8 26.8 14.0 18.0 13.9 16.3 12.9 13.6 13.4 15.2 15.6
Oregon 26.5 27.3 26.7 27.6 23.6 25 26.3 24.8 23.8 15.1 13.5 14.4 14.3 13.4 10.6 12.8 11.8 12.0
Pennsylvania 30 29.1 28.6 29.2 28.1 28.4 27.8 24 25.3 12.4 13.9 12.6 12.2 11.1 11.0 10.4 11.3 11.2
Rhode Island 27.3 25.7 25.4 26 24.9 22.1 21.7 21.4 21 13.5 13.6 13.4 14.0 13.0 12.7 9.5 10.5 12.1
South Carolina 31.7 31.6 30.8 32 30.1 30.7 29 29.4 29.1 15.9 16.7 19.0 16.9 13.7 14.0 14.1 11.2 15.0
South Dakota 29.9 28.1 28.1 27.7 30.3 28.1 27.2 25.4 25.5 10.3 12.8 14.5 13.6 14.1 13.1 9.4 10.7 11.8
Tennessee 33.7 31.1 29.2 31.7 32.9 31.2 30.7 28.8 27.4 18.1 18.6 16.3 16.7 16.5 15.0 14.8 14.9 14.9
Texas 30.9 29.2 30.4 31.7 29.5 28.9 28.6 26.1 27 16.8 17.0 17.4 18.4 17.3 15.9 16.5 16.4 16.2
Utah 24.1 24.3 24.4 23 24 23.1 22.4 21.9 21.2 8.3 11.0 11.0 10.0 9.7 7.6 9.6 9.3 9.2
Vermont 24.7 23.7 25.4 23.9 23.4 23.3 21.9 21.2 20.2 8.7 11.2 11.6 10.8 9.4 9.0 9.9 7.8 7.6
Virginia 27.2 27.4 29.2 26.4 25.5 25.8 25.3 25.1 25.1 10.4 10.6 11.4 10.7 10.7 10.3 8.6 8.6 9.2
Washington 27.2 26.8 26.5 26.2 26.9 26 25.9 24.2 23.3 12.0 11.6 12.5 11.6 11.7 10.4 10.2 8.0 10.2
West Virginia 35.1 33.8 32.4 32.9 31.7 31.9 30.3 31 30.6 17.3 16.7 17.5 16.8 15.8 14.5 14.8 15.3 15.4
Wisconsin 29.8 29.7 27.7 26.9 29.2 26.1 25.3 26.6 24.4 11.0 11.4 13.1 10.1 10.8 9.8 11.0 10.1 10.2
Wyoming 27.8 24.6 25 25.7 25.4 25.2 24.5 23.3 24.2 11.8 9.6 10.7 9.6 9.2 10.1 10.9 10.0 10.6
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment