<!--
a friendly iteration on sdbernard’s block #248ef0adf01e0e5328d7
//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