xxxxxxxxxx
<meta charset="utf-8">
<title>Rate by demographic</title>
<style>
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
shape-rendering: crispEdges;
}
.legend {
font-size: 16px;
font-weight: bold;
text-anchor: middle;
}
.Georgia {
fill: red;
}
</style>
<h1>Rate by demographic</h1>
<p id="menu"><b>State vaccination rate by demography</b>
<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>
var margin = {top: 30, right: 10, bottom: 10, left: 100},
width = 960 - margin.left - margin.right,
height = 900 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width])
.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], .2);
var xAxis = d3.svg.axis()
.scale(x)
.orient("top");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").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()
.range(["red", "orange", "yellow", "green", "blue", "purple", "brown", "black", "lightblue", "lime"]);
d3.json("thejson.json", function (error, data){
states = data;
//************** Coerce strings into num, cut away data we don't want & other cleanup
data.forEach( function (d, i) {
d['Children 6 months - 17 years'] = +d['Children 6 mos\u221217 yrs']
d['Adults 18 and up'] = +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 and up'] = +d['Adults \u226565 yrs'],
d['People 6 months and up, all races'] = +d['Persons \u22656 mos'],
d['People 6 months and up, black'] = +d['Persons \u22656 mos, black only, non-Hispanic'],
d['People 6 months and up, white'] = +d['Persons \u22656 mos, white only, non-Hispanic'],
d['People 6 months and up, Hispanic'] = +d['Persons \u22656 mos, Hispanic'],
d['People 6 months and up, other or multiple race'] = +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 = 'Children 6 months - 17 years';
init_draw('Children 6 months - 17 years');
});
function init_draw( some_str ) {
input = some_str;
console.log(" entered _init_draw_ ");
var demographies = d3.keys(states[0]).filter(function(key) {
return key != "state";
});
if (input == null) { input = 'Adults 18 and up'; } // initialize it to something
console.log("ok line 134");
console.log(input);
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
console.log("ok line 142");
console.log(input);
console.log(data);
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", function (d) {return "bar"+ " " + d.state;}) // let GA be marked so it can alwyas be red.
.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);
console.log(data);
// ***** 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().reverse().slice())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) {return "translate(0," + i *20 + ")"; });
legend.append("rect")
.attr("x", width)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function (d) {return d; })
.on("click", function (d) {return do_two_things(d); })
; // click once,
// it calls do_two_things, which calls kill and init draw. Good.
// but why does init_draw do nothing on the first click?
} // close init draw
function kill() { ///
console.log(" entered _kill_");
svg.selectAll(".bar")
.transition().attr("width", 0).style("opacity", 0)//
.remove(); // successfully kills
svg.selectAll(".axis")
.transition().style("opacity", 0)
.remove();
console.log("something should be killed");
} // close kill
function do_two_things(input) {
console.log("entered do_two_things");
console.log("about to kill");
kill();
console.log("about to redraw")
init_draw(input);
} // close do_two_things
</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