xxxxxxxxxx
<meta charset="utf-8">
<title>Rate by demographic</title>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#hed {
font-size: 36px;
}
#subhed {
font-size: 16px;
}
.axis text {
font: 12px sans-serif;
}
.axis path,
.axis line {
fill: none;
shape-rendering: crispEdges;
}
.legend {
font-size: 12px;
text-anchor: middle;
}
.Georgia {
fill: red;
}
.x.axis line {
stroke: #fff;
}
.x.axis .minor {
stroke-opacity: .5;
}
/*div.draft{
position: relative;
font: 12px sans-serif;
top: -680px;
right: -340px;
width: 350px;
height: 80px;
border: 0px;
border-radius: 0px;
text-align: justify;
color: red;
}*/
</style>
<p id="hed">Georgia lags in flu vaccinations</p>
<p id="subhed">Nationwide, about **** percent of people got a flu vaccine during the 2012-2013 seasion. Georgia brought down the average.</p>
<p = "draft"><font color="red"> DRAFT not for publication or citiation</font>
<p id="questions"> ** questions: What is the optimum vaccination rate? Why does Georgia lag?
<p id="instructions">_________________________Click on a demographic in the legend to learn more <font size=6>↓</font>
<p id="chart">
<p id="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="https://www.cdc.gov/flu/fluvaxview/coverage-1213estimates.htm" target="_blank">https://www.cdc.gov/flu/fluvaxview/coverage-1213estimates.htm</a>
<script>document.write('<script src="https://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
// *********** TO DO *************
// add footnotes
// what to do if no data?
// add "Click to see how your demographic measures up"
// change to D of C
// make the squares clickable
// *******************************
var margin = {top: 20, right: 10, bottom: 10, left: 100},
width = 768 - margin.left - margin.right,
height = 800 - margin.top - margin.bottom;
var factor = 0.7; // increase to scoot legend right
var x = d3.scale.linear()
.range([0, width*0.65])
.domain([0, 100]); // no max function here b/c I want to hardcode the max as 100, which would be the real maximum vaccination rate.
var y = d3.scale.ordinal()
.rangeRoundBands([0, height], .15);
var xAxis = d3.svg.axis()
.scale(x)
.orient("top")
.ticks(5)
.tickSize(-height);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var input; //initialize the input to something.
var color = d3.scale.ordinal() // color scheme lifted from https://adconnect-staging.ajc.com/images/help/ajc-color-chart.png
.range([
"#019EEB", // AJC blue / 6 mo-17 years
"#563A8F", //18 and up
"#A23C8F", // 18 to 64
"#EE6D96", // 18 to 64 at high risk
"#F06E1A", //65 and up
"#FFD800", // 6 months and up all races
"#43AF38", // 6 months and up black
"#016F30", // 6 months and up white
"#231F80",// six months and up hispanic
"#BD5814" //6 months and up other or multiple race
]);
d3.json("thejson.json", function (error, data){
data = data.filter(function (d) {
if (d.state.indexOf("Region") > -1) {return false;}
{return true;}
});
states = data;
//************** Coerce strings into num, cut away data we don't want & other cleanup
data.forEach( function (d, i) {
d['6 months - 17 years'] = +d['Children 6 mos\u221217 yrs']
d['Adults 18+'] = +d['Adults \u226518 yrs'],
d['Adults 18 - 64'] = +d['Adults 18\u221264 yrs'],
d['Adults 18 - 64 at high risk'] = +d['Adults 18\u221264 yrs at high risk||'],
d['Adults 65+'] = +d['Adults \u226565 yrs'],
d['All races 6 months'] = +d['Persons \u22656 mos'],
d['Black 6 months+'] = +d['Persons \u22656 mos, black only, non-Hispanic'],
d['White 6 months+'] = +d['Persons \u22656 mos, white only, non-Hispanic'],
d['Hispanic 6 months+'] = +d['Persons \u22656 mos, Hispanic'],
d['Other or multiple race 6 months+'] = +d['Persons \u22656 mos, other or multiple race\u00b6'],
delete d['Persons \u22656 mos, other or multiple race\u00b6'],
delete d['Persons \u22656 mos, Hispanic'],
delete d['Persons \u22656 mos, white only, non-Hispanic'],
delete d['Persons \u22656 mos, black only, non-Hispanic'],
delete d['Persons \u22656 mos'],
delete d['Adults 50\u221264 yrs'],
delete d['Children 6 mos\u221217 yrs'],
delete d['Adults \u226518 yrs'],
delete d['Adults \u226565 yrs'],
delete d['Adults 18\u221264 yrs at high risk||'],
delete d['Adults 18\u221264 yrs'],
delete d['Adults 18\u221264 yrs'],
delete d['Children 13\u221217 yrs'],
delete d['Children 5\u221212 yrs'],
delete d['Children 6 mos\u22124 yrs'],
delete d['Adults 18\u221249 yrs'],
delete d['Adults 18\u221249 yrs at high risk||'];
});
//**************************************************************************
var demographies = d3.keys(states[0]).filter(function(key) {
return key != "state";
});
console.log(demographies);
color.domain(demographies);
input = 'Adults 65+';
init_draw('Adults 65+');
});
function init_draw( some_str ) {
input = some_str;
console.log("init_draw's input");
console.log(input);
var demographies = d3.keys(states[0]).filter(function(key) {
return key != "state";
});
if (input == null) { input = 'Adults 18 and up'; }
data = states.sort(function (a, b) {return b[input] - a[input]; });
y.domain(states.map(function (d) {return d.state; }));
color.domain(demographies);
// ***** and start drawing
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", function (d) {return "bar"+ " " + d.state;})
.attr("x", 0)
.attr("y", function(d) { return y(d.state); })
.attr("width", function (d) { return (x(d[demographies[demographies.indexOf(input)]])); })
.attr("fill", function (d) {return color([demographies[demographies.indexOf(input)]]); })
.attr("height", y.rangeBand())
.attr("opacity", 1);
// ***** call the axes
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// ****** construct the legend
var legend = svg.selectAll(".legend")
.data(color.domain().slice())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) {return "translate(0," + (i+1) *20 + ")"; });
legend.append("rect")
.attr("x", width*factor)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
//.on("click", function (d) {return redraw(input =d);}); // this doesnt work
legend.append("text")
.attr("x", width*factor*1.05)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function (d) {return d; })
.on("click", function (d) {return kill(d);});
} // close init draw
function kill(input) { /// hmm, first click kills it, second click redraws it
svg.selectAll(".bar")
//.transition().style("opacity", 0)
.remove(); // successfully kills
svg.selectAll(".axis")
//.transition().style("opacity", 0)
.remove();
console.log(input);
init_draw(input); // but doesnt redraw
}
</script>
Modified http:// to a secure url
Modified http://d3js.org/d3.v3.min.js to a secure url
https://
https://d3js.org/d3.v3.min.js