bar graph reload on legend click

<!DOCTYPE html>
<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>

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