Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Obesity In The USA (Octopress Blog Post)
---
layout: post
title: "Obesity in the USA"
date: 2013-03-14 12:59
comments: true
categories:
---
<!-- Make sure to include D3 first or else the IIFEs won't work. -->
<script src="http://d3js.org/d3.v2.js"></script>
<script type="text/javascript" src="/Data/obesitystatedata.js"></script>
<!-- CSS Styles: -->
<div>
<style type="text/css">
#states path {
stroke: white;
}
.year {
font-size: 3em;
}
.controls {
padding-top: 10px;
padding-left: 15;
width: 540;
text-align: center;
font-size: 12px;
}
.controls span {
padding-left: 2px;
padding-right: 2px;
}
.legendtext {
font-size: 15px;
font-family:"Arial, sans-serif";
font-weight: bold;
}
</style>
</div>
<!-- Global Variables and Handlers: -->
<!-- Notes:
Each Octopress blog post is contained within the div with class '.entry-content'.
-->
<script type="text/javascript">
//var margin = {top: 40, right: 40, bottom: 40, left: 40},
var width = $('.entry-content').width();
//plus 50 for the height so room for the legend
var height = (width/2 + 50);
var barwidth = width/2,
barheight = height/4,
x1 = 200,
y1 = 400;
var year = 1995;
$(window).resize(function() {
width = $('.entry-content').width();
});
</script>
<div id='chart-obesity'></div>
<script type='text/javascript'>
//have to move the map up 50 to leave 50 room for the legend
var xy = d3.geo.albersUsa()
.scale(width)
.translate([width/2, height/2 - 50]);
var path = d3.geo.path().projection(xy);
var yearcontrols = d3.select("#chart-obesity")
.append("div")
.attr("class", "controls");
var svg = d3.select("#chart-obesity")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("id", "states");
var statesmap = d3.select("#states");
var data = obesitystatedata;
var maxobese = d3.max(data, function (d)
{
return Math.max(d["obese"]);
});
var minobese = d3.min(data, function (d)
{
return Math.min(d["obese"]);
});
var lightness = d3.scale.linear().domain([minobese, maxobese]).range([0, 1]);
var gradient = statesmap.append("svg:defs")
.append("svg:linearGradient")
.attr("id", "gradient")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "0%");
for (i=0; i<=1; i+=0.05) {
gradient.append("svg:stop")
.attr("offset", (i*100)+ "%")
.attr("stop-color", colorof(i,lightness))
.attr("stop-opacity", 1);
}
//Add the legend
svg.append('svg:rect') // create a new rectangle for the scale legend
.attr("x", width/2 -100)
.attr("y", height - 50)
.attr('width','200')
.attr('height','20')
.attr('fill', 'url(#gradient)'); // fill the object using the gradient with the id 'legendgrad'
//Labels for the legend
svg.append('svg:text') // create a new text area for the label for the starting point of the gradient
.attr('class','legendtext') // give the object the id 'minlabel'
.attr("x", width/2- 100)
.attr("y", height - 54)
.attr('text-anchor', 'start')
.attr('font-family','Arial') // sets the font family to Arial, for a nicer look
.text(minobese + "%"); // the text of the label (our lowest value)
svg.append('svg:text') // create a new text area for the label for the ending point of the gradient
.attr('class','legendtext') // give the object the id 'maxlabel'
.attr('x', width/2 + 100)
.attr('y', height - 54)
.attr('text-anchor', 'end') // set 'text-achor' to right so that it works right-to-left so that the end of the
.text(maxobese + "%") // the text of the label (our maximum value and everything above it)
svg.append('svg:text') // create a new text area for the label for the legend
.attr('class','legendtext') // give the object the id 'legendlabel'
.attr("x", width/2)
.attr("y", height-10)
.attr('text-anchor', 'middle') // set 'text-achor' to middle so that it distributes the text evenly left and right so that our text remains centered
.attr('font-family','Arial') // sets the font family to Arial, for a nicer look
.text('Percent of Americans Obese'); //
//Add the controls for changing the year and the current year value
yearcontrols.append("span")
.append("a")
.attr("class", "year back")
.attr("href", "javascript: yearnext(false);")
.text("<<");
var title = yearcontrols.append("span")
.attr("class", "year")
.text(year);
yearcontrols.append("span")
.append("a")
.attr("class", "year next")
.attr("href", "javascript: yearnext(true);")
.text(">>");
//Create all the states
d3.json("/Data/us-states.json", function (collection) {
statesmap.selectAll("path")
.data(collection.features)
.enter()
.append("path")
.attr("d", path)
.attr("fill", function(d){return colorspec(d,year, lightness)});
});
//FUNCTIONS
function colorspec (states, year, lightness){
var level = obesitylevel(states, year);
var hue = 0;
var l = lightness(level);
color = d3.hsl(hue,1,(1-l));
return (color.toString());
}
function colorof (i, lightness) {
var hue = 0;
color = d3.hsl(hue, 1, (1-i));
return (color.toString());
}
function obesitylevel (states, year){
var year = year;
var data = obesitystatedata;
var state = [states.properties.name];
var allstateatyear = data.filter(function(d){return d.year==[year];});
var stateatyear = allstateatyear.filter (function (allstateatyear){return allstateatyear.state==[state];});
var level = stateatyear.map(function(d){return d["obese"];});
return level;
}
function yearnext(next) {
if (next) {
year = Math.min(2010, year+1);
if (year == 2009)
year += 1;
statesmap.selectAll("path").attr("fill", function(d){return colorspec(d,year, lightness)});
title.text(year);
}
else {
year = Math.max(1995, year-1);
if (year == 1996)
year -= 1;
statesmap.selectAll("path")
.attr("fill", function(d) { return colorspec(d,year,lightness)});
title.text(year);
}
}
document.onkeydown = function(event) {
switch(event.keyCode) {
case 37:
yearnext(false);
break;
case 39:
yearnext(true);
break;
}
};
</script>
###Notes:
- The motivation for this project was
1. To learn D3
2. To learn how to create a D3 visualization in an Octopress blog post
3. To improve upon the current CDC graphic for visualizing this data.
- The metric being used is the % of people per state that are classified as obese (BMI 30.0+).
- The CDC has a [set of powerpoint slides on their website](http://www.cdc.gov/obesity/data/adult.html) that loops through the years and color codes states by obesity level. I felt that D3 would offer a chance to improve on the graphic by making it more interactive, and also using a linear color gradient as opposed to more significant color changes each 5%.
- All the data was collected using [this CDC tool](http://apps.nccd.cdc.gov/BRFSS/) that provides the percent of obese individuals per state since 1995. I downloaded individual CSV files for each year and then combined them into one CSV for 1995-2010. I then used [this data converted](http://www.shancarter.com/data_converter/index.html) to convert the CSV into JSON-properties that I could then access.
- If you are interested in how to create D3 graphics in an Octopress blog post I have posted the raw code for this post in a [gist here](). It isn't the cleanest, but it works and if you have feedback please drop me a comment!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.