Skip to content

Instantly share code, notes, and snippets.

@micahstubbs
Last active Jun 14, 2016
Embed
What would you like to do?
Obesity in the United States - iteration v1
license: CC0-1.0
<!--
a friendly iteration on sdbernard’s block #248ef0adf01e0e5328d7
http://bl.ocks.org/sdbernard/248ef0adf01e0e5328d7
+ labels shown by default
+ the year radio buttons ordered ascending left to right
+ an extraneous brace removed after the </style> tag
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Obesity vs poverty scatterplot</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: #fff1e0;
margin: 0;
font-family: Arial, sans-serif;
}
form{
position: absolute;
top: 80px;
left: 582px;
font-size: 12px;
color: #74736c;
}
circle {
fill: #bb6d82;
}
.barLabel {
font-size: 10px;
fill: #74736c;
pointer-events: none;
}
.labelsOn{
opacity: 1;
transition: opacity 0.3s;
}
.labelsOff{
opacity: 0;
transition: opacity 0.3s;
}
.barValue {
font-size: 12px;
fill: #74736c;
}
h1, p {
position: relative;
left: 10px;
color: #333333;
font-weight: normal;
}
.hover{
fill: #9e2f50;
transition: fill 0.2s;
}
.footnote {
position: relative;
}
.source{
font-size: 11px;
}
.axis line {
fill: none;
stroke: #e9decf;
stroke-dasharray:2,1;
shape-rendering: crispEdges;
}
.axis text {
font-family: Arial,sans-serif;
font-size: 11px;
fill: #74736c;
}
.x.axis path,
.y.axis path{
opacity: 0;
}
.toolTip{
padding: 6px;
background-color: #fff;
border-radius: 4px;
position: absolute;
font-size: 12px;
line-height: 18px;
visibility: hidden;
}
.stateName{
font-weight: bold;
font-size: 14px;
/*margin-bottom: -8px;
display: block;*/
}
.dataNum{
font-weight: bold;
}
.subhead{
fill: #74736c;
font-size: 14px;
}
#cbLabel{
margin-right: 20px;
}
label{
margin-right: 12px;
}
</style>
</head>
<body>
<div class="toolTip"></div>
<form>
<input type="checkbox" class="myCB" name="vehicle" value="states" checked="true"/>
<label id="cbLabel" for="states">Show state labels</label>
<input type="radio" class="myRB" name="vehicle" value="2005" checked="true"/>
<label for="2005">2005</label>
<input type="radio" class="myRB" name="vehicle" value="2010"/>
<label for="2010">2010</label>
<input type="radio" class="myRB" name="vehicle" value="2013"/>
<label for="2013">2013</label>
</form>
<script type="text/javascript">
var margin = {top: 10, right: 10, bottom: 35, left: 50};
var w = 900,
h = 760,
tt,
rbYr = 2013;
var body = d3.select('body');
body.append('h1')
.text('Obesity in the United States')
var svg = d3.select('body').append('svg'),
barHeight = 10,
circlespace = 5
svg.append('text')
.text('% of Americans in poverty, by state (2013)')
.attr('transform', function(d) {
return "rotate(-90 0, 360)"
})
.attr('x', 0)
.attr('y', h/2)
.attr('text-anchor', 'middle')
.attr('class', 'y subhead')
.attr('opacity', 0)
svg.append('text')
.text('% of Americans classified as obese, by state (2013)')
.attr('x', w/2)
.attr('y', h -3 )
.attr('text-anchor', 'middle')
.attr('class', 'x subhead')
.attr('opacity', 0)
svg.attr('width', w)
.attr('height', h)
var xScale = d3.scale.linear()
.range([ margin.left, w - margin.left - margin.right ]);
var yScale = d3.scale.linear()
.range([0, h - margin.bottom ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.tickSize(-(h-margin.top - margin.bottom))
.ticks(12)
.orient('bottom');
var yAxis = d3.svg.axis()
.scale(yScale)
.tickSize(-w-margin.left - margin.right)
.ticks(15)
.orient('left');
//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)
});
xScale.domain([
d3.min(data, function(d) {
return +d.obesity2005 -1;
}), d3.max(data, function(d) {
return +d.obesity2013 +1;
}) ]);
yScale.domain([
d3.max(data, function(d) {
return +d.poverty2013 +1;
}),
d3.min(data, function(d) {
return +d.poverty2005 -1;
})
]);
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(' + -w + ',' + (h - margin.bottom) + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + margin.left + ',' + -w +')')
.call(yAxis);
d3.select('.y.axis')
.transition()
.delay(1000)
.duration(800)
.ease('quad')
.attr('transform', 'translate(' + margin.left + ',0)')
d3.select('.x.axis')
.transition()
.duration(800)
.ease('quad')
.attr('transform', 'translate(0,' + (h - margin.bottom) + ')')
d3.select('.x.subhead')
.transition()
.delay(800)
.attr('opacity', 1)
d3.select('.y.subhead')
.transition()
.delay(1800)
.attr('opacity', 1)
var circleGroups = svg.selectAll('.circleGroup')
.data(data)
.enter()
.append('g')
.attr({
'class': 'circleGroup'
})
var circles = circleGroups.append('circle')
.attr({
'r': 5,
'cx':margin.left,
'cy':h- margin.bottom,
'opacity': 0
})
circles.transition().delay(function (d,i){ return 2000 + (i * 30);}).ease('quad').duration(500)
.attr({
'cx': function(d) { return xScale(d.obesity2013); },
'cy': function(d) { return yScale(d.poverty2013); },
'opacity': 0.7
})
circleGroups.append('text')
.text(function(d) { return d.state; })
.attr({
'class': 'barLabel',
'dx': 4,
'dy': -4,
'x': function(d) { return xScale(d.obesity2013); },
'y': function(d) { return yScale(d.poverty2013); },
'opacity': 0,
})
circles.style('cursor', 'pointer')
circles.on('mouseover', function(d) {
d3.select(this)
.classed('hover', true)
.transition()
.attr('r', 10)
tt = d3.select('.toolTip');
tt.html('<span class="stateName">' + d.state + '</span><br/>' + 'Obesity ' + rbYr + ': <span class="dataNum">' + d.obesity2013 + '</span>%<br/>Poverty ' + rbYr + ': <span class="dataNum">' + d.poverty2013 + '</span>%')
.style('top', d3.event.pageY - 12 + 'px')
.style('visibility', 'visible')
})
circles.on('mouseout', function() {
d3.select(this)
.classed('hover', false)
.transition()
.attr('r', 5)
tt.style('visibility', 'hidden')
})
circleGroups.on('mousemove', function (d) {
var toolW = d3.select('.toolTip').node().getBoundingClientRect().width;
if(d3.event.pageX > (w - toolW)) {
tt.style('left', d3.event.pageX - toolW - 12 + 'px')
} else {
tt.style('left', d3.event.pageX + 12 + 'px')
}
})
body.append('p')
.text('Source: Centers for Disease Control and Prevention')
.attr('class', 'source')
body.append('p')
.text('Hover over the circles!!!')
.attr('class', 'footnote')
d3.selectAll('.myRB').on('click', function() {
rbYr = this.value;
circles.transition().ease('quad').duration(500)
.attr({
'cx': function(d) { return xScale(d['obesity' + [rbYr]]); },
'cy': function(d) { return yScale(d['poverty' + [rbYr]]); }
})
d3.selectAll('.barLabel').transition().ease('quad').duration(500)
.attr({
'x': function(d) { return xScale(d['obesity' + [rbYr]]); },
'y': function(d) { return yScale(d['poverty' + [rbYr]]); }
})
})
d3.select('.myCB').on('click', function() {
if (this.checked) {
d3.selectAll('.barLabel')
.classed('labelsOn', true)
.classed('labelsOff', false)
}
else {
d3.selectAll('.barLabel')
.classed('labelsOff', true)
.classed('labelsOn', false)
}
});
d3.selectAll('.barLabel')
.classed('labelsOn', true)
.classed('labelsOff', false)
});
</script>
</body>
</html>
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