D3OG

All examples By author By category About

maggie-lee

Full window Github gist

Georgia vaccination rate draft

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

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>

// *********** 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