Skip to content

Instantly share code, notes, and snippets.

@maggie-lee

maggie-lee/index.html

Created September 19, 2014 01:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save maggie-lee/4f7ff98cea98413ef5f4 to your computer and use it in GitHub Desktop.
Save maggie-lee/4f7ff98cea98413ef5f4 to your computer and use it in GitHub Desktop.
Download ZIP
vaccination rate by state
Raw
index.html
<!DOCTYPE html>
<html class="ocks-org do-not-copy">
<meta charset="utf-8">
<title>Object Constancy</title>
<!-- <head><link rel="stylesheet" type="text/css" href="flu_style.css" /></head> -->
<style>
/*default font*/
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.title {
font-size: 36px;
}
.subtitle {
font-size: 18px;
}
.axis {
font-size: 10px;
}
.chart {
font-size: 12px;
}
.footer {
font-size: 12px;
}
.axis path{
stroke: none;
fill: none;
stroke: #FFF;
shape-rendering: crispEdges;
}
.axis line {
stroke: none;
fill: none;
stroke: #FFF;
shape-rendering: crispEdges;
}
</style>
<body>
<div class="title">Georgia lags in flu vaccination rates</div>
<div class="subtitle">Georgia brought down the national flu vaccination rate during the 2012-2103 season.</div>
<p class="chart">
<p class="footer">
May, 2013 cumulative flu vaccination rate for the 2012-2013 flu season. Vaccination coverage estimates by State National Immunization Survey (NIS) and Behavioral Risk Factor Surveillance System (BRFSS), 2012–13 influenza season.
<br>
<br>
Numbers reflect a 95% confidence interval with margin of error under 5 percent.
<br>
<br>
Source: <a href="http://www.cdc.gov/flu/fluvaxview/coverage-1213estimates.htm" target="_blank">http://www.cdc.gov/flu/fluvaxview/coverage-1213estimates.htm</a>
<br><br>
Methodology:
The data above was downlaoded Sept. 9 from the CDC as a spreadsheet, concatenated and refined using Python, then filtered and graphed with Javascript.
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<script src="http://d3js.org/d3.v2.min.js?2.9.1"></script>
<script>
console.log("ok");
// ******** TO DO
// make GA red
// explainer divs
//**********
// ************ DECLARATIONS
var margin = {top: 10, right: 0, bottom: 10, left: 10},
width = 768 - margin.left - margin.right,
height = (width * 1.3) - margin.top - margin.bottom;
var states,
age;
var x = d3.scale.linear()
.domain([0, 100])// Don't use max function. Hardcode 100 b/c 100 is the real-life maximum vaccination rate.
.range([0, width-90]);
var y = d3.scale.ordinal()
.rangeRoundBands([0, height], .1);
var xAxis = d3.svg.axis()
.scale(x)
.orient("top")
.tickSize(-height - margin.bottom);
//.tickFormat(format);
var color = d3.scale.category10();
var svg = d3.select(".chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("margin-left", -margin.left + "px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis");
// ******** END DECLARATIONS
// ********* LOAD DATA, SORT & FILTER
d3.csv("thecsv.csv", function(data) {
// first, whittle down the data & clean up the labels
// ?? OR FILTER & CUT IN .CSV for quick load sake ??
// filter out data series for the 10 CDC regions. We just want the states.
data = data.filter(function (d) {
if (d.State.indexOf("Region") > -1) {return false;}
{return true;}
});
//cut extraneous columns
// to re-add, just delete the delete line
// and adjust some of the titles so they can squeeze in
data.forEach( function (d, i) {
delete d['13 - 17'],
delete d['5 to 12'],
delete d['6 months - 4 yrs'],
delete d['50 - 64'],
delete d['18 - 49'],
delete d['18 - 49 at high risk'],
d['All persons 6 months +'] = d['6 months and up, all persons'],
d['Hispanic, 6 months +'] = d['6 months and up, hispanic'],
d['Black, 6 months +'] = d['6 months and up, black'],
d['White, 6 months +'] = d['6 months and up, white'],
d['Multiple or other race, 6 months +'] = d['6 months and up, mutliple or other race']
;})
data.forEach (function (d, i) {
delete d['6 months and up, mutliple or other race'],
delete d['6 months and up, all persons'],
delete d['6 months and up, hispanic'],
delete d['6 months and up, black'],
delete d['6 months and up, white']
;})
states = data;
var ages = d3.keys(states[0]).filter(function(key) {
return key != "State";
});
color.domain(ages);
default_age = "Black, 6 months +"; // initialize the age to be graphed
states.forEach(function(state) {
ages.forEach(function(age) {
state[age] = state[age];
});
});
// ******* DATA SORTED, LOADED, FILTERED
//******** LEGEND
var legend = svg.selectAll(".legend")
.data(color.domain().slice())
.enter().append("g")
.attr("class", "legend")
// move legend up and down
.attr("transform", function(d, i) {return "translate(0," + (i+6) *20 + ")"; });
legend.append("rect")
.attr("x", width*0.97) // move leged left and right
.attr("width", 18)
.attr("height", 18)
.style("fill", color)
.on("click", function (d) {
default_age = d; // reset the age we'll draw with to whatever we click on
return change();}); //then call the change function
legend.append("text")
.attr("x", width*0.965)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function (d) {return d; })
.on("click", function (d) {
default_age = d;
return change();});
redraw();
}); // CLOSE INITIAL FUNCTION
var altKey;
d3.select(window)
.on("keydown", function() { altKey = d3.event.altKey; })
.on("keyup", function() { altKey = false; });
// ******** CHANGE FUNCTION
function change() {
d3.transition()
.duration(altKey ? 7500 : 750)
.each(redraw);
}
//********* DRAW FUNCTION
function redraw() {
var age1 = default_age,
top = states.sort(function(a, b) { return b[age1] - a[age1]; });
y.domain(top.map(function(d) { return d.State; }));
var bar = svg.selectAll(".bar")
.data(top, function(d) { return d.State; })
.attr("class", "bar");
// entering transition
var barEnter = bar.enter().insert("g", ".axis")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(0," + (y(d.State) + height) + ")"; })
.style("fill-opacity", 0); // this is when it's flipping around
barEnter.append("rect")
.attr("width", 50)
.attr("height", y.rangeBand());
barEnter.append("text")
.attr("class", "label")
.attr("x", -3)
.attr("y", y.rangeBand() / 2)
.attr("dy", ".35em")
.attr("text-anchor", "end")
// string "District of Columbia" is too long.
.text( function (d) {
if (d.State == "District of Columbia") {return "DC";}
{return d.State;}
});
// first transition done, now drawing updated bar
age = age1;
var barUpdate = d3.transition(bar)
//transform it a little further right for the labels
.attr("transform", function(d) { return "translate(80," + (d.y0 = y(d.State)) + ")"; })
.style("fill-opacity", 1.0); // this is the default
barUpdate.select("rect")
.attr("width", function (d) { return x(d[age]);})
.attr("fill", function (d) {
if (d.State == "Georgia") {return "goldenrod";} // Highlight Georgia
else {return color(age); } ;})
.attr("fill-opacity", function (d) {
if (d.State == "United States") {return 0.6;} ;});// Highlight U.S. average
// now wiping away bars
var barExit = d3.transition(bar.exit())
.attr("transform", function(d) { return "translate(0," + (d.y0 + height) + ")"; })
.style("fill-opacity", 1) //this is when it's flipping around
.remove();
barExit.select("rect")
.attr("width", 50);
barExit.select(".value")
.attr("x", function(d) { return x(d[age]) - 3; })
.text(function(d) { return format(d[age]); });
d3.transition(svg).select(".axis")
//again, translate a little further right for space for labels
.attr("transform", function(d) { return "translate(80," + 0 + ")"; })
.call(xAxis);
}
// ****** END DRAW FUNCTION
</script>
</body>
</html>
Raw
thecsv.csv
State 6 months - 17 years 18 and up 18 - 49 18 - 49 at high risk 18 - 64 18-64 at high risk 50 - 64 65 and up 13 - 17 5 to 12 6 months - 4 yrs 6 months and up, all persons 6 months and up, hispanic 6 months and up, black 6 months and up, mutliple or other race 6 months and up, white
Alabama 52.1 43.8 32.7 38.6 38.1 48.7 48.6 66.6 39.4 52.1 69.3 45.7 54 39.5 44 47.8
Alaska 46.4 37.4 31.2 33.2 34.5 46.7 40.9 56 32.9 46.9 61.4 39.7 53.8 48.9 39.2 38
Arizona 48.9 34.9 22.9 38.8 27.2 40.5 37 65.5 30.1 53.7 64 38.3 35.9 42.4 39.4 39.5
Arkansas 62.2 42.3 31.2 34 37 46.1 48.6 62.6 52.8 68.7 59.6 47 58.1 37.7 36.6 48.4
California 56.9 40.2 29.8 38.8 34.7 47 45 66.5 41.5 58.3 69.8 44.2 39.7 42.4 48.3 46.6
Colorado 58.4 45.2 35.6 43.7 40.1 54 49.4 72.1 46 55.9 72.7 48.3 45.9 50 43.9 49.4
Connecticut 64.9 41.2 30 45.2 34.4 46.8 42.3 66.8 45.4 69 84.1 46.5 44 46.7 39.6 47.6
Delaware 67.4 46.8 34.8 43 40.5 50.4 51.8 71.4 54.8 67.1 81.3 51.3 59.7 49 42.3 51.6
District of Columbia 73.1 42.4 34.5 29.8 38.5 42.3 50.2 63.6 56.7 71.4 85.9 47.4 61.7 41.2 46.6 51
Florida 46.9 30.8 19.6 17.9 22.6 27.2 28.8 56.7 36 44.3 64 34.1 31.5 33.6 41.4 40.2
Georgia 52.3 37.4 29.4 34.4 32.7 40.1 39.8 62 35 56.3 64 41.1 43.2 35.6 44.8 43.4
Hawaii 69.7 50 42.3 46.4 44.2 52.5 47.9 73.5 61.6 77.9 67 54.3 55.7 56.5 55.9 49.8
Idaho 44 35.5 25.7 33.4 29.8 38 38.4 60.5 32.1 42.7 61.9 37.8 47.4 35.5 36.6
Illinois 52.5 40.2 30.2 39.3 34.6 46.5 44.1 65 36.9 54 69 43.1 47 40.9 43.2 42.4
Indiana 53.1 38.8 27 37.5 32.8 44.3 44.6 64.6 40.2 57.5 62.3 42.2 43.5 37.7 43.8 42.5
Iowa 52.6 49.7 38.2 42.5 43.3 54.7 52.6 73.9 41.1 53.5 68 50.4 47.7 38.8 55.3 50.7
Kansas 45.9 39 28.4 36.4 33.4 44.8 43.4 65.3 31.7 47.9 62.1 40.7 38.9 37.7 41 44.4
Kentucky 59 43 29.7 34 36.3 45 48.4 71.1 40.7 58.3 79.8 46.6 60.5 49.2 46.2 45.9
Louisiana 56.9 44.1 34.2 43.8 38.8 52.2 48.5 69 48.6 56 67.8 47.1 45.6 47 50.3 47
Maine 62.6 46.9 33.9 52.7 40.6 59.9 51 68.4 57.2 62.8 71.7 50 45.2 39.5 57.9 49.8
Maryland 67.5 48.9 41.7 47.8 43.9 51.4 48.7 71.9 49.7 73.8 77 53.1 49.7 47.3 46.6 57.6
Massachusetts 75.3 52.8 45 50.9 48.5 58.1 55.5 70.6 66.9 78 83.2 57.5 64.9 56.1 60.4 56
Michigan 50.5 37.9 26.2 37.2 32.2 44.9 43.2 61 38 53.9 61.6 40.8 47.2 28.7 38.7 42.5
Minnesota 59.8 50.3 42.4 58.8 45.5 59.9 51.6 71.2 49.8 61.4 70.5 52.5 51.8 57.5 54 52.2
Mississippi 45.9 39.2 27.9 37.8 32.6 43.4 42 67.3 35.5 48.1 54.1 40.8 36.9 35.6 44.3 44.3
Missouri 51.6 44.8 32.8 41 38.1 48 48.4 72.4 41.3 49.3 73.3 46.4 49.5 39.1 50.7 46.6
Montana 45.8 40.6 27.1 47.5 34.1 52.6 45.6 65.6 25.9 48.4 65.6 41.7 40 50.7 41.2
Nebraska 60 47.2 37.3 42.1 41.8 49.8 51.1 70.4 45.5 61.8 72.3 50.3 43.4 41.1 57 51.1
Nevada 51.1 36 28.5 37.2 32.3 43.3 40 53 35.2 52.9 63.7 39.6 43.2 32.8 32.5 40.5
New Hampshire 59.2 46.1 36 40 40.3 46 47.2 69.7 45.1 62 74.8 48.9 46.7 50.9 60 48.5
New Jersey 66.4 39.1 29.8 41.3 33.1 43.4 39.3 63.6 48 67.4 88 45.3 43.3 40 46.4 46.7
New Mexico 66.9 42.1 34.2 45.2 37.5 50.3 43.9 61.5 52.6 70.5 75.5 48.1 49.5 41.1 52.2 46.5
New York 60.9 42.7 31.6 35 36.5 45.6 46.8 68.3 48 64.7 70.2 46.6 46 42.6 39.7 49
North Carolina 57.6 47.8 36.3 56.7 42.1 59.9 54.2 72.8 49.7 58.7 66 50.1 53.5 47.4 44.7 50.8
North Dakota 62.2 45.3 35.2 46.3 40.1 55.4 49.9 65.4 49.6 62.7 74.8 48.9 64.3 53.7 48.8 48.4
Ohio 54.1 42 29.9 39.7 36.4 50.7 48.7 63.9 42.2 54.8 66.7 44.8 47.1 47 42.8 44.4
Oklahoma 50.1 44.9 34.1 54 38.7 54.5 48 71.6 36 50.8 66 46.1 41.7 33.6 47.1 47.9
Oregon 47.7 38 27 35.2 32.3 44.4 42.7 61.3 40.2 48.9 57.2 40.1 42 38.6 40.7
Pennsylvania 64.9 41.2 30.1 46.4 34.8 51.2 43.9 64.6 44.8 70.1 83.5 46.2 53.4 45.7 51.6 45.5
Region 1 70.1 48.3 38.8 48.3 43 54.2 50.7 69.4 58.8 72.8 81.9 52.9 57.6 50.9 54 52.4
Region 2 62.9 41.4 30.9 37.5 35.2 44.7 44.1 66.8 48.1 65.6 76.9 46.1 44.9 42.1 42.4 48.2
Region 3 64 44.6 35 44.2 38.9 50.3 46.8 67.8 45.8 69.1 77.7 48.8 50.2 45.6 49.2 49.3
Region 4 52.3 39.3 28.3 35.8 32.9 43.3 42.2 64.7 39.8 53.2 65.6 42.2 38.8 39.2 43.4 46
Region 5 53.5 40.4 29.8 39.8 35 47.4 45.2 63.3 40.4 55.7 66.4 43.5 47.7 39.7 43 43.7
Region 6 56.7 40.9 31.1 41.8 35.3 47.9 44.9 67.7 42.1 59.5 67.3 44.9 42.3 41.7 49.5 46.7
Region 7 51.6 45.3 33.9 40.7 39 49 48.8 71.3 39.4 51.6 69.5 46.8 44.4 38.9 50.2 48
Region 8 55.5 44.3 35 43.5 39.3 52.4 48.5 68.1 39.6 56 70 47 44.2 49.6 49 47.3
Region 9 55.8 39.6 29.3 39.2 33.9 46.3 43.8 65.9 40 58 68.6 43.5 39.7 41.4 47.7 45
Region 10 52.6 41.2 31 39.1 36 47 45.8 64.5 40.1 51.9 72.2 43.8 44.5 41.9 45.6 43.4
Rhode Island 81.6 50.2 40.1 45.4 44.9 52.8 55 71.5 76.7 81.1 92.7 56.7 63.5 43.4 55.8 56.6
South Carolina 52.1 42.7 30.7 32.1 36 44.1 46.6 68.8 37.2 58 57.2 44.8 47.8 39.5 38.9 47.1
South Dakota 73.2 53.4 44.4 46.2 48.3 58.1 55.3 73.8 57.3 78.4 79.3 56.7 58.8 32.8 60.5 56
Tennessee 56.4 49.2 35.9 48.3 42.6 58.8 55.6 78 43.4 57.5 70.8 50.8 46.1 42.8 49.7 52.8
Texas 56.2 39.2 29.7 39.8 33.6 45.6 43.1 67.9 40.4 59.3 67.3 43.7 41.2 39.7 51.2 45.9
United States 56.6 41.5 31.1 39.8 35.7 47 45.1 66.2 42.5 58.6 69.8 45 42.7 41.3 46.7 46.4
Utah 49.7 39.9 33.5 43.3 36.6 48 45.3 58.8 30.7 52.6 65.7 42.9 37.5 59.9 46.1 43.3
Vermont 61.1 46.7 33.9 46.4 41.1 54.2 52.4 68.7 49.6 64.3 73.9 49.6 54.1 43.5 49.8
Virginia 61.3 46 37 36.6 40.8 47.1 48.5 69.7 43.3 67.2 72.2 49.4 44.2 44.5 51.7 50.9
Washington 58.3 44.4 34.3 43.2 39.3 50.5 49.3 67.9 42.8 57.1 81 47.5 44.7 44.9 50.6 47.4
West Virginia 54.9 47.2 33.5 39.8 40 50.9 51.4 73 43 57.4 65.7 48.8 58.6 38.6 47.5 48.9
Wisconsin 54.3 36.5 28.6 33.6 31.9 40.2 38.5 55.5 40.7 56.4 68.8 40.6 57 34.9 39.7 39.9
Wyoming 46 37.2 26.7 27.7 31.5 38.7 39.3 62.9 31.5 48.6 54.4 39.2 34.6 41.2 39.6
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment