xxxxxxxxxx
<html class="ocks-org do-not-copy">
<meta charset="utf-8">
<title>Rate by demographic</title>
<style>
@import url(https://fonts.googleapis.com/css?family=PT+Serif|PT+Serif:b|PT+Serif:i|PT+Sans|PT+Sans:b);
html {
min-width: 1040px;
}
svg {
font: 10px sans-serif;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar rect {
fill: blue;
}
.bar:hover rect {
fill: red;
}
.value {
fill: white;
}
.axis {
shape-rendering: crispEdges;
}
.axis path {
stroke: none;
}
.x.axis line {
stroke: #fff;
stroke-opacity: .8;
}
.y.axis path {
stroke: black;
}
</style>
<h1>Rate by demographic</h1>
<p id="chart">
<p id="menu"><b>State vaccination rate by demography:</b><br>Choose a demographic: <select></select>
<script>document.write('<script src="https://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<script src="https://d3js.org/d3.v2.min.js?2.9.1"></script>
<script>
var margin = {top: 20, right: 40, bottom: 10, left: 40},
width = 960,
height = 250 - margin.top - margin.bottom;
var format = d3.format(".1%"),
states,
age;
var x = d3.scale.linear()
.range([0, width]);
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 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");
svg.append("g")
.attr("class", "y axis")
.append("line")
.attr("class", "domain")
.attr("y2", height);
var menu = d3.select("#menu select")
.on("change", change);
d3.csv("thecsv.csv", function(data) {
console.log(data);
data.forEach(function (d) {
console.log("Adults 18 to 49 at high risk");
console.log(d['Adults 18 to 49 at high risk']);
d['Adults 18 to 49'] = +d['Adults 18 to 49'],
d['Adults 18 to 49 at high risk'] = +d['Adults 18 to 49 at high risk'];
console.log(d['Adults 18 to 49 at high risk']);
});
states = data;
console.log(data);
console.log(states);
var ages = d3.keys(states[0]).filter(function(key) {
return key != "state";
});
states.forEach(function(state) {
ages.forEach(function(age) {
state[age] = state[age];
});
});
console.log(ages);
menu.selectAll("option")
.data(ages)
.enter().append("option")
.text(function(d) { return d; });
menu.property("value", "Adults 18 to 49 at high risk");
redraw();
});
var altKey;
d3.select(window)
.on("keydown", function() { altKey = d3.event.altKey; })
.on("keyup", function() { altKey = false; });
function change() {
clearTimeout(timeout);
d3.transition()
.duration(altKey ? 7500 : 750)
.each(redraw);
}
function redraw() {
var age1 = menu.property("value"),
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; });
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);
barEnter.append("rect")
.attr("width", age && function(d) { return x(d[age]); })
.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")
.text(function(d) { return d.state; });
barEnter.append("text")
.attr("class", "value")
.attr("x", age && function(d) { return x(d[age]) - 3; })
.attr("y", y.rangeBand() / 2)
.attr("dy", ".35em")
.attr("text-anchor", "end");
x.domain([0, top[0][age = age1]]);
var barUpdate = d3.transition(bar)
.attr("transform", function(d) { return "translate(0," + (d.y0 = y(d.state)) + ")"; })
.style("fill-opacity", 1);
barUpdate.select("rect")
.attr("width", function(d) { return x(d[age]); });
barUpdate.select(".value")
.attr("x", function(d) { return x(d[age]) - 3; })
.text(function(d) { return format(d[age]); });
var barExit = d3.transition(bar.exit())
.attr("transform", function(d) { return "translate(0," + (d.y0 + height) + ")"; })
.style("fill-opacity", 0)
.remove();
barExit.select("rect")
.attr("width", function(d) { return x(d[age]); });
barExit.select(".value")
.attr("x", function(d) { return x(d[age]) - 3; })
.text(function(d) { return format(d[age]); });
d3.transition(svg).select(".x.axis")
.call(xAxis);
}
var timeout = setTimeout(function() {
menu.property("value", "Adults 18 to 49").node().focus();
change();
}, 5000);
</script>
Modified http:// to a secure url
Modified http://d3js.org/d3.v2.min.js?2.9.1 to a secure url
https://
https://d3js.org/d3.v2.min.js?2.9.1