maggie-lee/index.html

## index.html

<!DOCTYPE html>
<html class="ocks-org do-not-copy">
<meta charset="utf-8">
<title>Rate by demographic</title>
<style>


@import url(http://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="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>

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>


## thecsv.csv

          
            state
            Adults 18 to 49
            Adults 18 to 49 at high risk

            
              Alabama
              38.6
              38.6

            
              Alaska
              33.2
              33.2

            
              Arizona
              38.8
              38.8

            
              Arkansas
              34
              34

            
              California
              38.8
              38.8

            
              Colorado
              43.7
              43.7

            
              Connecticut
              45.2
              45.2

            
              Delaware
              43
              43

            
              District of Columbia
              29.8
              29.8

            
              Florida
              17.9
              17.9

            
              Georgia
              34.4
              34.4

            
              Hawaii
              46.4
              46.4

            
              Idaho
              33.4
              33.4

            
              Illinois
              39.3
              39.3

            
              Indiana
              37.5
              37.5

            
              Iowa
              42.5
              42.5

            
              Kansas
              36.4
              36.4

            
              Kentucky
              34
              34

            
              Louisiana
              43.8
              43.8

            
              Maine
              52.7
              52.7

            
              Maryland
              47.8
              47.8

            
              Massachusetts
              50.9
              50.9

            
              Michigan
              37.2
              37.2

            
              Minnesota
              58.8
              58.8

            
              Mississippi
              37.8
              37.8

            
              Missouri
              41
              41

            
              Montana
              47.5
              47.5

            
              Nebraska
              42.1
              42.1

            
              Nevada
              37.2
              37.2

            
              New Hampshire
              40
              40

            
              New Jersey
              41.3
              41.3

            
              New Mexico
              45.2
              45.2

            
              New York
              35
              35

            
              North Carolina
              56.7
              56.7

            
              North Dakota
              46.3
              46.3

            
              Ohio
              39.7
              39.7

            
              Oklahoma
              54
              54

            
              Oregon
              35.2
              35.2

            
              Pennsylvania
              46.4
              46.4

            
              Region  1
              48.3
              48.3

            
              Region  2
              37.5
              37.5

            
              Region  3
              44.2
              44.2

            
              Region  4
              35.8
              35.8

            
              Region  5
              39.8
              39.8

            
              Region  6
              41.8
              41.8

            
              Region  7
              40.7
              40.7

            
              Region  8
              43.5
              43.5

            
              Region  9
              39.2
              39.2

            
              Region 10
              39.1
              39.1

            
              Rhode Island
              45.4
              45.4

            
              South Carolina
              32.1
              32.1

            
              South Dakota
              46.2
              46.2

            
              Tennessee
              48.3
              48.3

            
              Texas
              39.8
              39.8

            
              United States
              39.8
              39.8

            
              Utah
              43.3
              43.3

            
              Vermont
              46.4
              46.4

            
              Virginia
              36.6
              36.6

            
              Washington
              43.2
              43.2

            
              West Virginia
              39.8
              39.8

            
              Wisconsin
              33.6
              33.6

            
              Wyoming
              27.7
              27.7

	<!DOCTYPE html>
	<html class="ocks-org do-not-copy">
	<meta charset="utf-8">
	<title>Rate by demographic</title>
	<style>


	@import url(http://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="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>

	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>
state	Adults 18 to 49	Adults 18 to 49 at high risk
Alabama	38.6	38.6
Alaska	33.2	33.2
Arizona	38.8	38.8
Arkansas	34	34
California	38.8	38.8
Colorado	43.7	43.7
Connecticut	45.2	45.2
Delaware	43	43
District of Columbia	29.8	29.8
Florida	17.9	17.9
Georgia	34.4	34.4
Hawaii	46.4	46.4
Idaho	33.4	33.4
Illinois	39.3	39.3
Indiana	37.5	37.5
Iowa	42.5	42.5
Kansas	36.4	36.4
Kentucky	34	34
Louisiana	43.8	43.8
Maine	52.7	52.7
Maryland	47.8	47.8
Massachusetts	50.9	50.9
Michigan	37.2	37.2
Minnesota	58.8	58.8
Mississippi	37.8	37.8
Missouri	41	41
Montana	47.5	47.5
Nebraska	42.1	42.1
Nevada	37.2	37.2
New Hampshire	40	40
New Jersey	41.3	41.3
New Mexico	45.2	45.2
New York	35	35
North Carolina	56.7	56.7
North Dakota	46.3	46.3
Ohio	39.7	39.7
Oklahoma	54	54
Oregon	35.2	35.2
Pennsylvania	46.4	46.4
Region 1	48.3	48.3
Region 2	37.5	37.5
Region 3	44.2	44.2
Region 4	35.8	35.8
Region 5	39.8	39.8
Region 6	41.8	41.8
Region 7	40.7	40.7
Region 8	43.5	43.5
Region 9	39.2	39.2
Region 10	39.1	39.1
Rhode Island	45.4	45.4
South Carolina	32.1	32.1
South Dakota	46.2	46.2
Tennessee	48.3	48.3
Texas	39.8	39.8
United States	39.8	39.8
Utah	43.3	43.3
Vermont	46.4	46.4
Virginia	36.6	36.6
Washington	43.2	43.2
West Virginia	39.8	39.8
Wisconsin	33.6	33.6
Wyoming	27.7	27.7