D3 Examples

https://gist.github.com/4544529 (demo) was my first d3 adventure, where I scraped signatures from a White House petition and showed them as a pie chart.
Here, I show them as a US heat map (based on one of Mike Bostock's map demos). You can click on a state, and see how many signatures came from it.
Darker color means more signatures, but since the numbers range from a few dozens to >4500, the scale is logarithmic. I don't know yet how to use log() interpolators (I promise to learn), so I just did it quick and dirty with linear() and masking tape.
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">   
<script src="https://d3js.org/d3.v2.min.js?2.9.6"></script>
<script src="/lib/w3.js"></script>
<script src="histograms.js"></script>
<div class="w3-container w3-blue">
   <head>
    <meta charset = "utf-8">
    <link rel = "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel = "stylesheet" href = "style.css">
    <script src="https://d3js.org/d3.v3.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script>
​
</head>
 <h3>Map of Healthcare-associated infections (HAIs) and related factors</h3>
</div>
<style>
​
.background {
  fill: #bfbfbf;
  pointer-events: stroke;
  fill: #09284b
}
​
#states {
  stroke: #ffffff;
  stroke-width: 1px;
}
​
#states text {
  fill: #000000;
  stroke: none;
  text-anchor:middle;
  font-size: 0px;
}
​
#states .active {
  fill: steelblue !important;
}
​
#states text.active {
  font-size: 5px;
  font-weight:bold;
  fill: #ffffff;
  stroke-width: 0px;
  fill: black !important;
  stroke: #ffffff;
}
 
#sidebartext  {    
    width: 33%;
    position: fixed;
    left: 660px;
    top: 230px;
    font-size: 16px;
    font-weight:bold;
}
​
​
input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
​
input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
​
input[type=submit]:hover {
    background-color: #45a049;
}
​
#entry {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
  
</style>
​
<body>
​
​
</body>
<body>
  <div id="sidebartext"> 
    <p></p>
    <p1></p1>
    <br><br>
    <p2></p2>
    <br><br>
    <p3></p3>
    <br><br>
    <p4></p4>
    <br><br>
    <p5></p5>
  </div>
 
  <div id="clicker" class="w3-container w3-white" >
    <h4>
     Choose a catagory for the Heat Map:
  </h4>
​
  <button id="1" class="btn btn-primary" onclick="loop('1')">CLABSI</button>
    <button id="2" class="btn btn-primary" onclick="loop('2')"> CAUTI </button>
    <button id="3" class="btn btn-primary" onclick="loop('3')"> SSI </button>
    <button id="4" class="btn btn-primary" onclick="loop('4')"> MRSA </button>
    <button id="5"  class="btn btn-primary" onclick="loop('5')" > C. Difficile </button>
    <div>
       <h4 style="position:absolute; left: 615px; top: 56px;">
     User Entry Form and Map:
  </h4>
    <button style="position:absolute; left: 746px; top: 95px;" id="6"  class="btn btn-primary" onclick="loop('6')" > User Entry </button>
    <button id="7"style="position:absolute; left: 615px; top: 95px;" id="6"  class="btn btn-primary" onclick="loop('7')" > User Entry Map </button>
       </div> 
    </div> 
  <div>
    <p8>
  <label for="nRadius" 
         style="position:relative; left: 302px; top: 3px;" class="range-slider-handle" >
         The year is: <span id="nRadius-value" style="position:relative; left: 85px; top: -20px">…</span>
  </label>
  <input type="range" min="2011" max="2014" id="nRadius" value='2011' onchange="updateTextInput(this.value);" style="position:relative; left: 430px; top: -43px; width: 207px; text-align: middle" autocomplete='off'>
<P8>
  </div>
      <div id = "entry" style="display:none;">
        <p5>
  <h3>User entry</h3>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name.." autocomplete='off'>
​
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name.." autocomplete='off'>
    
    <label for="year">Year</label>
    <input type="text" id="year" name="year" placeholder="Year is...." autocomplete='off'>
​
    <label for="state">State</label>
    <select id="states" name="state1">
      <option value="Hawaii">Hawaii</option>
      <option value="Alaska">Alaska</option>
      <option value="Virginia">Virginia</option>
    </select>
    
    <label for="reporting">Health Care Assiociated Infection being Reported</label>
    <select id="HAI" name="HAIs">
      <option value="MRSA ">MRSA</option>
      <option value="C. Difficile ">C. Difficile </option>
      <option value="CLABSI ">CLABSI</option>
      <option value="CAUTI  ">CAUTI</option>
      <option value="SSI  ">SSI</option>
    </select>
  
    <input type="submit" value="Submit" onclick= "output()">
          </p5>
<p></p>
    <p1></p1>
    <br><br>
    <p2></p2>
    <br><br>
    <p3></p3>
    <br><br>
    <p4></p4>
    <br><br>
</div>
  
​
<script>
  
window.onload = myMain;
var valuess;
var globalVariable;
  
function output()
  {
    var x,y,z,zz,zzz;
    
     d3.select("#entry").select("p").text("First Name: " +          
     (zzz = document.getElementById("fname").value));
    
    d3.select("#entry").select("p1").text("Last Name: " +           
     (zz = document.getElementById("lname").value));
    
    d3.select("#entry").select("p2").text("Current Year: " +            
     ( z = document.getElementById("year").value));
    
    d3.select("#entry").select("p3").text("Reporting State: " +         
     ( y = document.getElementById("states").value));
    
    d3.select("#entry").select("p4").text("Reporting HAI: " +           
     ( x = document.getElementById("HAI").value));
​
  }
  
function myMain() {
  var x = (document.getElementById("clicker").onclick = buton);
}
​
function buton(e) {
  if (e.target.tagName == 'BUTTON') {
    globalVariable = (e.target.id);
    barChange();
  } 
}
  
 document.getElementById("nRadius").style.display = 'none' 
 
  function updateTextInput(val) { 
     valuess = val;
     barChange();   
    valuess = 2011;
   }
  
  function barChange() {
    
    var localVal = valuess;
    var localVariable = globalVariable;
 
     d3.select("svg").remove();
       d3.select("#sidebartext").select("p").text("")
      .attr("opacity", 0);
      d3.select("#sidebartext").select("p1").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p2").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p3").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p4").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p5").text("")
      .attr("opacity", 0)
      if(localVariable == 7)
      {
         document.getElementById("nRadius").style.display = 'none' 
         document.getElementById("nRadius-value").style.display = 'none'
        run();
      }
    if(localVariable == 5)  
      {
        d3.select("svg").remove();
        Cdiff(2011);
        
    if(localVal == 2011 && localVariable == 5)
          {
            d3.select("svg").remove();
            Cdiff(localVal);
           
          }
        if(localVal == 2012 && localVariable == 5)
          {
            d3.select("svg").remove();
             Cdiff(localVal);
          }
        if(localVal == 2013 && localVariable == 5)
          {
                d3.select("svg").remove();
             Cdiff(localVal)
          }
        if(localVal == 2014 && localVariable == 5)
          {
                 d3.select("svg").remove();
             Cdiff(localVal)
          }           
      }
        if(localVariable == 4)  
      {
        d3.select("svg").remove();
        mrsa(2011);
        
    if(localVal == 2011 && localVariable == 4)
          {
            d3.select("svg").remove(); 
            mrsa(localVal);
            console.log(localVal);
    console.log(localVariable);
          }
        if(localVal == 2012 && localVariable == 4)
          {
            d3.select("svg").remove(); 
            mrsa(localVal);
            console.log(localVal);
    console.log(localVariable);
          }
        if(localVal == 2013 && localVariable == 4)
          {
            d3.select("svg").remove(); 
            mrsa(localVal);
          }
        if(localVal == 2014 && localVariable == 4)
          {
            d3.select("svg").remove(); 
            mrsa(localVal);
          }    
      }
        if(localVariable == 3)  
      {
        d3.select("svg").remove();
        ssi(2011);
        
    if(localVal == 2011 && localVariable == 3)
          {
            d3.select("svg").remove();
            ssi(localVal);
          }
        if(localVal == 2012 && localVariable == 3)
          {
            d3.select("svg").remove();
            ssi(localVal);
          }
        if(localVal == 2013 && localVariable == 3)
          {
            d3.select("svg").remove();
            ssi(localVal);
          }
        if(localVal == 2014 && localVariable == 3)
          {
            d3.select("svg").remove();
            ssi(localVal);
          }    
      }
        if(localVariable == 2)  
      {
        d3.select("svg").remove();
        cauti(2011);
        
    if(localVal == 2011 && localVariable == 2)
          {
            d3.select("svg").remove(); 
            cauti(localVal);
          }
        if(localVal == 2012 && localVariable == 2)
          {
            d3.select("svg").remove(); 
            cauti(localVal);
          }
        if(localVal == 2013 && localVariable == 2)
          {
             d3.select("svg").remove(); 
            cauti(localVal);
          }
        if(localVal == 2014 && localVariable == 2)
          {
             d3.select("svg").remove(); 
            cauti(localVal);
          }    
      }
        if(localVariable == 1)  
      {
        d3.select("svg").remove();
        claubi(2011);
        
    if(localVal == 2011 && localVariable == 1)
          {
            d3.select("svg").remove(); 
            claubi(localVal);
          }
        if(localVal == 2012 && localVariable == 1)
          {
           d3.select("svg").remove(); 
            claubi(localVal);
          }
        if(localVal == 2013 && localVariable == 1)
          {
           d3.select("svg").remove(); 
            claubi(localVal);
          }
        if(localVal == 2014 && localVariable == 1)
          {
            d3.select("svg").remove(); 
            claubi(localVal);
          }    
      }
      
    
  }
  
​
function loop(data){
​
 d3.select("svg").remove();
      d3.select("svgContainer").remove(); 
          d3.select("#sidebartext").select("p").text("")
      .attr("opacity", 0);
      d3.select("#sidebartext").select("p1").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p2").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p3").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p4").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p5").text("")
      .attr("opacity", 0)
       var x = document.getElementById('entry');
  document.getElementById("nRadius").style.display = 'block' 
     
  if(data == 6)
      {
        x.style.display = 'block';
      }
  else
    {
      x.style.display = 'none';
    }
   if(data == 7)
      {
        run()
      }
  if(data == 5)
    {
      d3.select("svg").remove();
      d3.select("svgContainer").remove(); 
      d3.select("#nRadius").on("input", function() {
  update(this.value);
});
​
// Initial starting radius of the circle 
update(2011);
  
  function update(nRadius) {
​
  // adjust the text on the range slider
  var x = d3.select("#nRadius-value").text(nRadius);
  var y = d3.select("#nRadius").property("value", nRadius);
}
       
    }
   if(data == 4)
    {
      d3.select("svg").remove();
      d3.select("svgContainer").remove();
              d3.select("#nRadius").on("input", function() {
  update(+this.value);
});
​
// Initial starting radius of the circle 
update(2011);
  
  function update(nRadius) {
​
  // adjust the text on the range slider
  d3.select("#nRadius-value").text(nRadius);
  d3.select("#nRadius").property("value", nRadius);
}
    }
  if(data == 3)
    {
      d3.select("svg").remove(); 
      d3.select("svgContainer").remove();
              d3.select("#nRadius").on("input", function() {
  update(+this.value);
});
​
// Initial starting radius of the circle 
update(2011);
  
  function update(nRadius) {
​
  // adjust the text on the range slider
  d3.select("#nRadius-value").text(nRadius);
  d3.select("#nRadius").property("value", nRadius);
}
    }
  if(data == 2)
    {
      d3.select("svg").remove(); 
      d3.select("svgContainer").remove();
              d3.select("#nRadius").on("input", function() {
  update(+this.value);
});
​
// Initial starting radius of the circle 
update(2011);
  
  function update(nRadius) {
​
  // adjust the text on the range slider
  d3.select("#nRadius-value").text(nRadius);
  d3.select("#nRadius").property("value", nRadius);
}
    }
  if(data == 1)
    {
      d3.select("svg").remove(); 
      d3.select("svgContainer").remove();
              d3.select("#nRadius").on("input", function() {
  update(+this.value);
});
​
// Initial starting radius of the circle 
update(2011);
  
  function update(nRadius) {
​
  // adjust the text on the range slider
  d3.select("#nRadius-value").text(nRadius);
  d3.select("#nRadius").property("value", nRadius);
}
    }
  if(data == 6)
    {
       document.getElementById("nRadius").style.display = 'none' 
       document.getElementById("nRadius-value").style.display = 'none' 
       
    }
  else
    {
         document.getElementById("nRadius").style.display = 'block' 
       document.getElementById("nRadius-value").style.display = 'block' 
    }
}
  
  var flag = true;
var hits = {};
var parade = window.histograms.states;
for (var i = 0 ; i<parade.length ; i++)
    hits[parade[i].name] = parade[i].hits;
​
var width = 960,
    height = 600,
    centered;
​
var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([0, 0]);
​
var path = d3.geo.path()
    .projection(projection);
​
var svg1 = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
  
svg1.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", click);
​
var g = svg1.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .append("g")
    .attr("id", "states");
​
d3.json("states.json", function(json) {
  var heatmap = d3.scale.linear()
 
  var states = g.selectAll("path")
    .data(json.features)
    .enter().append("path")
    .attr("d", path)
    .attr("id", function(d) { return d.properties.abbr; })
    .style("fill","#b2c8c6") //changes default map color
    .on("click", click)
  
    
  var labels = g.selectAll("text")
    .data(json.features)
    .enter().append("text")
    .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
    .attr("id", function(d) { return 'label-'+d.properties.abbr; })
    .attr("dy", ".35em")
    .on("click", click)
    .text(function(d) { return d.properties.abbr; });
});
  ///////////////////////
  var sidebar = svg1.append("rect")
    .classed("sidebar", true)
    .attr("width", width/3)
    .attr("height", height)
        .attr("x", function () { return width})
        .attr("y", 0)
    .attr("fill", "#96cdcd")
​
      
  function wrap(text, width) {
    text.each(function() {
        var text = d3.select(this),
        words = text.text().split(/\*+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 4, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(" "));
            if (tspan.node().getComputedTextLength() > width) {
                line.pop();
                tspan.text(line.join(" "));
                line = [word];
                tspan = text.append("tspan").attr("x", 0).attr("y", -25).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
            }
        }
    })}
​
function click(d) {
  flag=!flag
  if(!flag)
  {
    sbt = d3.select("#sidebartext");
    sbt.attr("opacity", 1);
    sbt.select("p").text(function(e) { return "Reported MRSA HAIs: " + d.properties.MRSA});
     sbt.select("p1").text(function(e) { return "Reported C. Difficile HAIs: " + d.properties.clostridium}); 
    sbt.select("p2").text(function(e) { return "Reported CLABSI HAIs: " + d.properties.clabsi});
     sbt.select("p3").text(function(e) { return "Reported CAUTI HAIs: " + d.properties.cauti});
     sbt.select("p4").text(function(e) { return "Reported SSI HAIs: " + d.properties.ssi});
    sbt.select("p5").text(function(e) { return "Antibiotics prescribed per 1,000: " + d.properties.antibio});
    d3.select(".sidebar")
    .transition()
    .duration(0)
    .attr("opacity", 0.75)
    .attr("x", width - (width/3));
  var x = 0,
      y = 0,
      k = 1;
  }
  else
  {
     sbt.select("p").text(function(e) { return "Reported MRSA HAIs: " + d.properties.MRSA});
     sbt.select("p1").text(function(e) { return "Reported C. Difficile HAIs: " + d.properties.clostridium}); 
    sbt.select("p2").text(function(e) { return "Reported CLABSI HAIs: " + d.properties.clabsi});
    sbt.select("p3").text(function(e) { return "Reported CAUTI HAIs: " + d.properties.cauti});
    sbt.select("p4").text(function(e) { return "Reported CLABSI SSI: " + d.properties.ssi});
    sbt.select("p5").text(function(e) { return "Antibiotics prescribed per 1,000: " + d.properties.antibio});
    flag=true
    if (d && centered == d)
    {
      d3.select("#sidebartext").select("p").text("")
      .attr("opacity", 0);
      d3.select("#sidebartext").select("p1").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p2").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p3").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p4").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p5").text("")
      .attr("opacity", 0)
        d3.select(".sidebar")
        .transition()
        .duration(0)
        .attr("opacity", 1)
        .attr("x", width + (width/3));
         }
     else
     {
      flag = false  
     }
        var x = 0,
      y = 0,
      k = 1;
  }
​
​
  if (d && centered !== d) {
    var centroid = path.centroid(d);
        x = -centroid[0];
      y = -centroid[1];
      k = 4.5;
    centered = d;
            } else {
            centered = null;
        }
​
  g.selectAll("path")
      .classed("active", centered && function(d) { return d === centered; });
  g.selectAll("text")
      .text(function(d) { return d.properties.abbr; })
      .classed("active",false);
  g.selectAll("text")
      .text(function(d) { return d.properties.name})
      .classed("active", centered && function(d) { return d === centered; })
      .call(wrap, 0)
        .style('fill')
  g.transition()
      .duration(500)
      .attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")translate(-35,0)")
      .style("stroke-width", 0.75 / k + "px");
}
  
function run()
  {
    
     var fname = document.getElementById("fname").value;
    var lname = document.getElementById("lname").value;
    var year = document.getElementById("year").value;
    var states = document.getElementById("states").value;
    var HAI = document.getElementById("HAI").value;
    
    var flag = true;
var hits = {};
var parade = window.histograms.states;
for (var i = 0 ; i<parade.length ; i++)
    hits[parade[i].name] = parade[i].hits;
​
var width = 960,
    height = 600,
    centered;
​
var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([0, 0]);
​
var path = d3.geo.path()
    .projection(projection);
​
var svg1 = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
  
svg1.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", click);
    
​
var g = svg1.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .append("g")
    .attr("id", "states");
​
d3.json("states.json", function(json) {
  var heatmap = d3.scale.linear()
 
  var states = g.selectAll("path")
    .data(json.features)
    .enter().append("path")
    .attr("d", path)
    .attr("id", function(d) { return d.properties.abbr; })
    .style("fill","#a08b7c") //changes default map color
    .on("click", click)
​
      
    if(lname != '' && fname != '' && year != '' && states != '' && HAI != '')
      {
          var circle = svg1.append("circle")
                         .attr("cx", 55)
                         .attr("cy", 172)
                       .attr("r", 5)
     .style("fill","black");
      }
​
  
    
  var labels = g.selectAll("text")
    .data(json.features)
    .enter().append("text")
    .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
    .attr("id", function(d) { return 'label-'+d.properties.abbr; })
    .attr("dy", ".35em")
    .on("click", click)
    .text(function(d) { return d.properties.abbr; });
});
  ///////////////////////
  var sidebar = svg1.append("rect")
    .classed("sidebar", true)
    .attr("width", width/3)
    .attr("height", height)
        .attr("x", function () { return width})
        .attr("y", 0)
    .attr("fill", "#96cdcd")
​
      
  function wrap(text, width) {
    text.each(function() {
        var text = d3.select(this),
        words = text.text().split(/\*+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 4, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(" "));
            if (tspan.node().getComputedTextLength() > width) {
                line.pop();
                tspan.text(line.join(" "));
                line = [word];
                tspan = text.append("tspan").attr("x", 0).attr("y", -25).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
            }
        }
    })}
​
function click(d) {
  flag=!flag
  if(!flag)
  {
    sbt = d3.select("#sidebartext");
    sbt.attr("opacity", 1);
    sbt.select("p").text(function(e) { return "Reported MRSA HAIs: " + d.properties.MRSA});
     sbt.select("p1").text(function(e) { return "Reported C. Difficile HAIs: " + d.properties.clostridium}); 
    sbt.select("p2").text(function(e) { return "Reported CLABSI HAIs: " + d.properties.clabsi});
     sbt.select("p3").text(function(e) { return "Reported CAUTI HAIs: " + d.properties.cauti});
     sbt.select("p4").text(function(e) { return "Reported SSI HAIs: " + d.properties.ssi});
    sbt.select("p5").text(function(e) { return "Antibiotics prescribed per 1,000: " + d.properties.antibio});
    d3.select(".sidebar")
    .transition()
    .duration(0)
    .attr("opacity", 0.75)
    .attr("x", width - (width/3));
  var x = 0,
      y = 0,
      k = 1;
  }
  else
  {
     sbt.select("p").text(function(e) { return "Reported MRSA HAIs: " + d.properties.MRSA});
     sbt.select("p1").text(function(e) { return "Reported C. Difficile HAIs: " + d.properties.clostridium}); 
    sbt.select("p2").text(function(e) { return "Reported CLABSI HAIs: " + d.properties.clabsi});
    sbt.select("p3").text(function(e) { return "Reported CAUTI HAIs: " + d.properties.cauti});
    sbt.select("p4").text(function(e) { return "Reported CLABSI SSI: " + d.properties.ssi});
    sbt.select("p5").text(function(e) { return "Antibiotics prescribed per 1,000: " + d.properties.antibio});
    flag=true
    if (d && centered == d)
    {
      d3.select("#sidebartext").select("p").text("")
      .attr("opacity", 0);
      d3.select("#sidebartext").select("p1").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p2").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p3").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p4").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p5").text("")
      .attr("opacity", 0)
        d3.select(".sidebar")
        .transition()
        .duration(0)
        .attr("opacity", 1)
        .attr("x", width + (width/3));
         }
     else
     {
      flag = false  
     }
        var x = 0,
      y = 0,
      k = 1;
  }
​
​
  if (d && centered !== d) {
    var centroid = path.centroid(d);
        x = -centroid[0];
      y = -centroid[1];
      k = 4.5;
    centered = d;
            } else {
            centered = null;
        }
​
  g.selectAll("path")
      .classed("active", centered && function(d) { return d === centered; });
  g.selectAll("text")
      .text(function(d) { return d.properties.abbr; })
      .classed("active",false);
  g.selectAll("text")
      .text(function(d) { return d.properties.name})
      .classed("active", centered && function(d) { return d === centered; })
      .call(wrap, 0)
        .style('fill')
  g.transition()
      .duration(500)
      .attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")translate(-35,0)")
      .style("stroke-width", 0.75 / k + "px");
}
  }
  
  
  function Cdiff(year){
var flag = true;
var hits = {};
var parade = window.histograms.states;
for (var i = 0 ; i<parade.length ; i++)
    hits[parade[i].name] = parade[i].hits;
​
var width = 960,
    height = 600,
    centered;
​
  
var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([0, 0]);
​
var path = d3.geo.path()
    .projection(projection);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
  // create a text wrapping function
  
svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", click);
    
//Create the Scale we will use for the Axis
 var axisScale = d3.scale.linear()
                          .domain([0, 11000])
                          .range([20, 640])
​
​
//Create the Axis
var xAxis = d3.svg.axis()
                   .scale(axisScale)
​
​
​
//Create an SVG group Element for the Axis elements and call the xAxis function
var xAxisGroup = svg.append("g")
                              .call(xAxis)
.attr("transform", "translate(" + 0 + "," + 570 + ")").style("fill",'white');
    
var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .append("g")
    .attr("id", "states");
​
d3.json("states.json", function(json) {
  var heatmap = d3.scale.linear()
    .domain([0,d3.max(json.features, function(d) { return Math.log(hits[d.properties.abbr] || 1); })])
    .interpolate(d3.interpolateRgb)
    .range(["#a8d9fe","#5672fe"])
  
  var states = g.selectAll("path")
    .data(json.features)
    .enter().append("path")
    .attr("d", path)
    .attr("id", function(d) { return d.properties.abbr; })
    .style("fill", function(d) {
      if(year == 2011)
        {
      return heatmap(Math.log(d.properties.clostridium || 1))}
      if(year == 2012)
        {
      return heatmap(Math.log(d.properties.MRSA || 1))}
      if(year == 2013)
        {
      return heatmap(Math.log(d.properties.ssi || 1))}
      if(year == 2014)
        {
      return heatmap(Math.log(d.properties.clabsi || 1))}
       })
  
    .on("click", click)
  
var gradient = svg.append("svg")
  .append("linearGradient")
.classed("gradient", true)
    .attr("id", "gradient")
    .attr("x1", "-16%")
    .attr("y1", "100%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad")
​
gradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "white")
    .attr("stop-opacity", 1.64);
​
gradient.append("stop")
    .attr("offset", "75%")
    .attr("stop-color", "blue")
    .attr("stop-opacity", 1);
​
var threshold_scale = svg.selectAll("body")
    .data(json.features)
    .enter().append("rect")
    .attr("width", 620)
    .attr("height", 22)
    .attr("x", 20)
    .attr("y",550)
    .style("fill", "url(#gradient)")
.attr("opacity", 1);
    
  var labels = g.selectAll("text")
    .data(json.features)
    .enter().append("text")
    .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
    .attr("id", function(d) { return 'label-'+d.properties.abbr; })
    .attr("dy", ".35em")
    .on("click", click)
    .text(function(d) { return d.properties.abbr; });
});
  ///////////////////////
  var sidebar = svg.append("rect")
    .classed("sidebar", true)
    .attr("width", width/3)
    .attr("height", height)
        .attr("x", function () { return width})
        .attr("y", 0)
    .attr("fill", "#96cdcd")
​
      
  function wrap(text, width) {
    text.each(function() {
        var text = d3.select(this),
        words = text.text().split(/\*+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 4, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(" "));
            if (tspan.node().getComputedTextLength() > width) {
                line.pop();
                tspan.text(line.join(" "));
                line = [word];
                tspan = text.append("tspan").attr("x", 0).attr("y", -25).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
            }
        }
    })}
​
function click(d) {
  flag=!flag
  if(!flag)
  {
    sbt = d3.select("#sidebartext");
    sbt.attr("opacity", 1);
    sbt.select("p").text(function(e) { return "Reported MRSA HAIs: " + d.properties.MRSA});
     sbt.select("p1").text(function(e) { return "Reported C. Difficile HAIs: " + d.properties.clostridium}); 
    sbt.select("p2").text(function(e) { return "Reported CLABSI HAIs: " + d.properties.clabsi});
     sbt.select("p3").text(function(e) { return "Reported CAUTI HAIs: " + d.properties.cauti});
     sbt.select("p4").text(function(e) { return "Reported SSI HAIs: " + d.properties.ssi});
    sbt.select("p5").text(function(e) { return "Antibiotics prescribed per 1,000: " + d.properties.antibio});
    d3.select(".sidebar")
    .transition()
    .duration(0)
    .attr("opacity", 0.75)
    .attr("x", width - (width/3));    
    
  var x = 0,
      y = 0,
      k = 1;
  }
  else
  {
     sbt.select("p").text(function(e) { return "Reported MRSA HAIs: " + d.properties.MRSA});
     sbt.select("p1").text(function(e) { return "Reported C. Difficile HAIs: " + d.properties.clostridium}); 
    sbt.select("p2").text(function(e) { return "Reported CLABSI HAIs: " + d.properties.clabsi});
    sbt.select("p3").text(function(e) { return "Reported CAUTI HAIs: " + d.properties.cauti});
    sbt.select("p4").text(function(e) { return "Reported CLABSI SSI: " + d.properties.ssi});
    sbt.select("p5").text(function(e) { return "Antibiotics prescribed per 1,000: " + d.properties.antibio});
    flag=true
    if (d && centered == d)
    {
      d3.select("#sidebartext").select("p").text("")
      .attr("opacity", 0);
      d3.select("#sidebartext").select("p1").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p2").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p3").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p4").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p5").text("")
      .attr("opacity", 0)
        d3.select(".sidebar")
        .transition()
        .duration(0)
        .attr("opacity", 0.75)
        .attr("x", width + (width/3));
      
         }
     else
     {
      flag = false  
     }
        var x = 0,
      y = 0,
      k = 1;
  }
​
​
  if (d && centered !== d) {
    var centroid = path.centroid(d);
        x = -centroid[0];
      y = -centroid[1];
      k = 4.5;
    centered = d;
            } else {
            centered = null;
        }
​
  g.selectAll("path")
      .classed("active", centered && function(d) { return d === centered; });
  g.selectAll("text")
      .text(function(d) { return d.properties.abbr; })
      .classed("active",false);
  g.selectAll("text")
      .text(function(d) { return d.properties.name})
      .classed("active", centered && function(d) { return d === centered; })
      .call(wrap, 0)
        .style('fill')
  g.transition()
      .duration(500)
      .attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")translate(-35,0)")
      .style("stroke-width", 0.75 / k + "px");
}
  
  }
  
    function mrsa(year){
var flag = true;
var hits = {};
var parade = window.histograms.states;
for (var i = 0 ; i<parade.length ; i++)
    hits[parade[i].name] = parade[i].hits;
​
var width = 960,
    height = 600,
    centered;
​
  
var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([0, 0]);
​
var path = d3.geo.path()
    .projection(projection);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
  // create a text wrapping function
  
svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", click);
​
    
//Create the Scale we will use for the Axis
 var axisScale = d3.scale.linear()
                          .domain([0, 850])
                          .range([55, 600]);
​
//Create the Axis
var xAxis = d3.svg.axis()
                   .scale(axisScale);
​
​
//Create an SVG group Element for the Axis elements and call the xAxis function
var xAxisGroup = svg.append("g")
                              .call(xAxis)
.attr("transform", "translate(" + -35 + "," + 570 + ")").style("fill",'white');
    
var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .append("g")
    .attr("id", "states");
​
d3.json("states.json", function(json) {
  var heatmap = d3.scale.linear()
    .domain([0,d3.max(json.features, function(d) { return Math.log(hits[d.properties.abbr] || 1); })])
    .interpolate(d3.interpolateRgb)
    .range(["white","brown"])
  
  var states = g.selectAll("path")
    .data(json.features)
    .enter().append("path")
    .attr("d", path)
    .attr("id", function(d) { return d.properties.abbr; })
    .style("fill", function(d) { 
      if(year == 2011)
        {return heatmap(Math.log(d.properties.MRSA || 1))}; })
    .on("click", click)
  
var gradient = svg.append("defs")
  .append("linearGradient")
.classed("gradient", true)
    .attr("id", "gradient")
    .attr("x1", "-16%")
    .attr("y1", "100%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");
​
gradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "white")
    .attr("stop-opacity", 1.64);
​
gradient.append("stop")
    .attr("offset", "60%")
    .attr("stop-color", "brown")
    .attr("stop-opacity", 1);
​
var threshold_scale = svg.selectAll("body")
    .data(json.features)
    .enter().append("rect")
    .attr("width", 545)
    .attr("height", 22)
    .attr("x", 20)
    .attr("y",550)
    .style("fill", "url(#gradient)");
    
  var labels = g.selectAll("text")
    .data(json.features)
    .enter().append("text")
    .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
    .attr("id", function(d) { return 'label-'+d.properties.abbr; })
    .attr("dy", ".35em")
    .on("click", click)
    .text(function(d) { return d.properties.abbr; });
});
  ///////////////////////
  var sidebar = svg.append("rect")
    .classed("sidebar", true)
    .attr("width", width/3)
    .attr("height", height)
        .attr("x", function () { return width})
        .attr("y", 0)
    .attr("fill", " #96cdcd")
​
      
  function wrap(text, width) {
    text.each(function() {
        var text = d3.select(this),
        words = text.text().split(/\*+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 4, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(" "));
            if (tspan.node().getComputedTextLength() > width) {
                line.pop();
                tspan.text(line.join(" "));
                line = [word];
                tspan = text.append("tspan").attr("x", 0).attr("y", -25).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
            }
        }
    })}
​
function click(d) {
  flag=!flag
  if(!flag)
  {
   sbt = d3.select("#sidebartext");
    sbt.attr("opacity", 1);
    sbt.select("p").text(function(e) { return "Reported MRSA HAIs: " + d.properties.MRSA});
     sbt.select("p1").text(function(e) { return "Reported C. Difficile HAIs: " + d.properties.clostridium}); 
    sbt.select("p2").text(function(e) { return "Reported CLABSI HAIs: " + d.properties.clabsi});
     sbt.select("p3").text(function(e) { return "Reported CAUTI HAIs: " + d.properties.cauti});
     sbt.select("p4").text(function(e) { return "Reported SSI HAIs: " + d.properties.ssi});
    sbt.select("p5").text(function(e) { return "Antibiotics prescribed per 1,000: " + d.properties.antibio});
    d3.select(".sidebar")
    .transition()
    .duration(0)
    .attr("opacity", 0.75)
    .attr("x", width - (width/3));
  var x = 0,
      y = 0,
      k = 1;
  }
  else
  {
     sbt.select("p").text(function(e) { return "Reported MRSA HAIs: " + d.properties.MRSA});
     sbt.select("p1").text(function(e) { return "Reported C. Difficile HAIs: " + d.properties.clostridium}); 
    sbt.select("p2").text(function(e) { return "Reported CLABSI HAIs: " + d.properties.clabsi});
    sbt.select("p3").text(function(e) { return "Reported CAUTI HAIs: " + d.properties.cauti});
    sbt.select("p4").text(function(e) { return "Reported CLABSI SSI: " + d.properties.ssi});
    sbt.select("p5").text(function(e) { return "Antibiotics prescribed per 1,000: " + d.properties.antibio});
    flag=true
    if (d && centered == d)
    {
      d3.select("#sidebartext").select("p").text("")
      .attr("opacity", 0);
      d3.select("#sidebartext").select("p1").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p2").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p3").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p4").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p5").text("")
      .attr("opacity", 0)
        d3.select(".sidebar")
        .transition()
        .duration(0)
        .attr("opacity", 0.75)
        .attr("x", width + (width/3));
         }
     else
     {
      flag = false  
     }
        var x = 0,
      y = 0,
      k = 1;
  }
​
​
  if (d && centered !== d) {
    var centroid = path.centroid(d);
        x = -centroid[0];
      y = -centroid[1];
      k = 4.5;
    centered = d;
            } else {
            centered = null;
        }
​
  g.selectAll("path")
      .classed("active", centered && function(d) { return d === centered; });
  g.selectAll("text")
      .text(function(d) { return d.properties.abbr; })
      .classed("active",false);
  g.selectAll("text")
      .text(function(d) { return d.properties.name})
      .classed("active", centered && function(d) { return d === centered; })
      .call(wrap, 0)
        .style('fill')
  g.transition()
      .duration(500)
      .attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")translate(-35,0)")
      .style("stroke-width", 0.75 / k + "px");
}
  
  }
</script>
 
<script>
    function claubi(year){
var flag = true;
var hits = {};
var parade = window.histograms.states;
for (var i = 0 ; i<parade.length ; i++)
    hits[parade[i].name] = parade[i].hits;
​
var width = 960,
    height = 600,
    centered;
​
  
var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([0, 0]);
​
var path = d3.geo.path()
    .projection(projection);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
  // create a text wrapping function
  
svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", click);
​
    
//Create the Scale we will use for the Axis
 var axisScale = d3.scale.linear()
                          .domain([0, 3000])
                          .range([55, 600]);
​
//Create the Axis
var xAxis = d3.svg.axis()
                   .scale(axisScale);
​
​
//Create an SVG group Element for the Axis elements and call the xAxis function
var xAxisGroup = svg.append("g")
                              .call(xAxis)
.attr("transform", "translate(" + -30+ "," + 570 + ")").style("fill",'white');
    
var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .append("g")
    .attr("id", "states");
​
d3.json("states.json", function(json) {
  var heatmap = d3.scale.linear()
    .domain([0,d3.max(json.features, function(d) { return Math.log(hits[d.properties.abbr] || 1); })])
    .interpolate(d3.interpolateRgb)
    .range(["white","orange"])
  
  var states = g.selectAll("path")
    .data(json.features)
    .enter().append("path")
    .attr("d", path)
    .attr("id", function(d) { return d.properties.abbr; })
    .style("fill", function(d) { 
      return heatmap(Math.log(d.properties.clabsi || 1)); })
    .on("click", click)
  
var gradient = svg.append("defs")
  .append("linearGradient")
.classed("gradient", true)
    .attr("id", "gradient")
    .attr("x1", "-16%")
    .attr("y1", "100%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");
​
gradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "white")
    .attr("stop-opacity", 1.64);
​
gradient.append("stop")
    .attr("offset", "60%")
    .attr("stop-color", "orange")
    .attr("stop-opacity", 1);
​
var threshold_scale = svg.selectAll("body")
    .data(json.features)
    .enter().append("rect")
    .attr("width", 545)
    .attr("height", 22)
        .attr("x", 25)
    .attr("y",550)
    .style("fill", "url(#gradient)");
    
  var labels = g.selectAll("text")
    .data(json.features)
    .enter().append("text")
    .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
    .attr("id", function(d) { return 'label-'+d.properties.abbr; })
    .attr("dy", ".35em")
    .on("click", click)
    .text(function(d) { return d.properties.abbr; });
});
  ///////////////////////
  var sidebar = svg.append("rect")
    .classed("sidebar", true)
    .attr("width", width/3)
    .attr("height", height)
        .attr("x", function () { return width})
        .attr("y", 0)
    .attr("fill", " #96cdcd")
​
      
  function wrap(text, width) {
    text.each(function() {
        var text = d3.select(this),
        words = text.text().split(/\*+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 4, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(" "));
            if (tspan.node().getComputedTextLength() > width) {
                line.pop();
                tspan.text(line.join(" "));
                line = [word];
                tspan = text.append("tspan").attr("x", 0).attr("y", -25).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
            }
        }
    })}
​
function click(d) {
  flag=!flag
  if(!flag)
  {
    sbt = d3.select("#sidebartext");
    sbt.attr("opacity", 1);
    sbt.select("p").text(function(e) { return "Reported MRSA HAIs: " + d.properties.MRSA});
     sbt.select("p1").text(function(e) { return "Reported C. Difficile HAIs: " + d.properties.clostridium}); 
    sbt.select("p2").text(function(e) { return "Reported CLABSI HAIs: " + d.properties.clabsi});
     sbt.select("p3").text(function(e) { return "Reported CAUTI HAIs: " + d.properties.cauti});
     sbt.select("p4").text(function(e) { return "Reported SSI HAIs: " + d.properties.ssi});
    sbt.select("p5").text(function(e) { return "Antibiotics prescribed per 1,000: " + d.properties.antibio});
    d3.select(".sidebar")
    .transition()
    .duration(0)
    .attr("opacity", 0.75)
    .attr("x", width - (width/3));
  var x = 0,
      y = 0,
      k = 1;
  }
  else
  {
     sbt.select("p").text(function(e) { return "Reported MRSA HAIs: " + d.properties.MRSA});
     sbt.select("p1").text(function(e) { return "Reported C. Difficile HAIs: " + d.properties.clostridium}); 
    sbt.select("p2").text(function(e) { return "Reported CLABSI HAIs: " + d.properties.clabsi});
    sbt.select("p3").text(function(e) { return "Reported CAUTI HAIs: " + d.properties.cauti});
    sbt.select("p4").text(function(e) { return "Reported CLABSI SSI: " + d.properties.ssi});
    sbt.select("p5").text(function(e) { return "Antibiotics prescribed per 1,000: " + d.properties.antibio});
    flag=true
    if (d && centered == d)
    {
      d3.select("#sidebartext").select("p").text("")
      .attr("opacity", 0);
      d3.select("#sidebartext").select("p1").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p2").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p3").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p4").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p5").text("")
      .attr("opacity", 0)
        d3.select(".sidebar")
        .transition()
        .duration(0)
        .attr("opacity", 0.75)
        .attr("x", width + (width/3));
         }
     else
     {
      flag = false  
     }
        var x = 0,
      y = 0,
      k = 1;
  }
​
​
  if (d && centered !== d) {
    var centroid = path.centroid(d);
        x = -centroid[0];
      y = -centroid[1];
      k = 4.5;
    centered = d;
            } else {
            centered = null;
        }
​
  g.selectAll("path")
      .classed("active", centered && function(d) { return d === centered; });
  g.selectAll("text")
      .text(function(d) { return d.properties.abbr; })
      .classed("active",false);
  g.selectAll("text")
      .text(function(d) { return d.properties.name})
      .classed("active", centered && function(d) { return d === centered; })
      .call(wrap, 0)
        .style('fill')
  g.transition()
      .duration(500)
      .attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")translate(-35,0)")
      .style("stroke-width", 0.75 / k + "px");
}
  
  }
</script>
  <script>
    function cauti(year){
var flag = true;
var hits = {};
var parade = window.histograms.states;
for (var i = 0 ; i<parade.length ; i++)
    hits[parade[i].name] = parade[i].hits;
​
var width = 960,
    height = 600,
    centered;
​
  
var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([0, 0]);
​
var path = d3.geo.path()
    .projection(projection);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
  // create a text wrapping function
  
svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", click);
​
//Create the Scale we will use for the Axis
 var axisScale = d3.scale.linear()
                          .domain([0, 3800])
                          .range([55, 600]);
​
//Create the Axis
var xAxis = d3.svg.axis()
                   .scale(axisScale);
​
​
//Create an SVG group Element for the Axis elements and call the xAxis function
var xAxisGroup = svg.append("g")
                              .call(xAxis)
.attr("transform", "translate(" + -35 + "," + 570 + ")").style("fill",'white');
    
var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .append("g")
    .attr("id", "states");
​
d3.json("states.json", function(json) {
  var heatmap = d3.scale.linear()
    .domain([0,d3.max(json.features, function(d) { return Math.log(hits[d.properties.abbr] || 1); })])
    .interpolate(d3.interpolateRgb)
    .range(["white","violet"])
  
  var states = g.selectAll("path")
    .data(json.features)
    .enter().append("path")
    .attr("d", path)
    .attr("id", function(d) { return d.properties.abbr; })
    .style("fill", function(d) { return heatmap(Math.log(d.properties.cauti || 1)); })
    .on("click", click)
  
var gradient = svg.append("defs")
  .append("linearGradient")
.classed("gradient", true)
    .attr("id", "gradient")
    .attr("x1", "-16%")
    .attr("y1", "100%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");
​
gradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "white")
    .attr("stop-opacity", 1.64);
​
gradient.append("stop")
    .attr("offset", "60%")
    .attr("stop-color", "violet")
    .attr("stop-opacity", 1);
​
var threshold_scale = svg.selectAll("body")
    .data(json.features)
    .enter().append("rect")
    .attr("width", 545)
    .attr("height", 22)
    .attr("x", 20)
    .attr("y",550)
    .style("fill", "url(#gradient)");
    
  var labels = g.selectAll("text")
    .data(json.features)
    .enter().append("text")
    .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
    .attr("id", function(d) { return 'label-'+d.properties.abbr; })
    .attr("dy", ".35em")
    .on("click", click)
    .text(function(d) { return d.properties.abbr; });
});
  ///////////////////////
  var sidebar = svg.append("rect")
    .classed("sidebar", true)
    .attr("width", width/3)
    .attr("height", height)
        .attr("x", function () { return width})
        .attr("y", 0)
    .attr("fill", " #96cdcd")
​
      
  function wrap(text, width) {
    text.each(function() {
        var text = d3.select(this),
        words = text.text().split(/\*+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 4, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(" "));
            if (tspan.node().getComputedTextLength() > width) {
                line.pop();
                tspan.text(line.join(" "));
                line = [word];
                tspan = text.append("tspan").attr("x", 0).attr("y", -25).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
            }
        }
    })}
​
function click(d) {
  flag=!flag
  if(!flag)
  {
   sbt = d3.select("#sidebartext");
    sbt.attr("opacity", 1);
    sbt.select("p").text(function(e) { return "Reported MRSA HAIs: " + d.properties.MRSA});
     sbt.select("p1").text(function(e) { return "Reported C. Difficile HAIs: " + d.properties.clostridium}); 
    sbt.select("p2").text(function(e) { return "Reported CLABSI HAIs: " + d.properties.clabsi});
     sbt.select("p3").text(function(e) { return "Reported CAUTI HAIs: " + d.properties.cauti});
     sbt.select("p4").text(function(e) { return "Reported SSI HAIs: " + d.properties.ssi});
    sbt.select("p5").text(function(e) { return "Antibiotics prescribed per 1,000: " + d.properties.antibio});
    d3.select(".sidebar")
    .transition()
    .duration(0)
    .attr("opacity", 0.75)
    .attr("x", width - (width/3));
  var x = 0,
      y = 0,
      k = 1;
  }
  else
  {
     sbt.select("p").text(function(e) { return "Reported MRSA HAIs: " + d.properties.MRSA});
     sbt.select("p1").text(function(e) { return "Reported C. Difficile HAIs: " + d.properties.clostridium}); 
    sbt.select("p2").text(function(e) { return "Reported CLABSI HAIs: " + d.properties.clabsi});
    sbt.select("p3").text(function(e) { return "Reported CAUTI HAIs: " + d.properties.cauti});
    sbt.select("p4").text(function(e) { return "Reported CLABSI SSI: " + d.properties.ssi});
    sbt.select("p5").text(function(e) { return "Antibiotics prescribed per 1,000: " + d.properties.antibio});
    flag=true
    if (d && centered == d)
    {
      d3.select("#sidebartext").select("p").text("")
      .attr("opacity", 0);
      d3.select("#sidebartext").select("p1").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p2").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p3").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p4").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p5").text("")
      .attr("opacity", 0)
        d3.select(".sidebar")
        .transition()
        .duration(0)
        .attr("opacity", 0.75)
        .attr("x", width + (width/3));
         }
     else
     {
      flag = false  
     }
        var x = 0,
      y = 0,
      k = 1;
  }
​
​
  if (d && centered !== d) {
    var centroid = path.centroid(d);
        x = -centroid[0];
      y = -centroid[1];
      k = 4.5;
    centered = d;
            } else {
            centered = null;
        }
​
  g.selectAll("path")
      .classed("active", centered && function(d) { return d === centered; });
  g.selectAll("text")
      .text(function(d) { return d.properties.abbr; })
      .classed("active",false);
  g.selectAll("text")
      .text(function(d) { return d.properties.name})
      .classed("active", centered && function(d) { return d === centered; })
      .call(wrap, 0)
        .style('fill')
  g.transition()
      .duration(500)
      .attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")translate(-35,0)")
      .style("stroke-width", 0.75 / k + "px");
}
  
  }
</script>
  <script>
    function ssi(year){
var flag = true;
var hits = {};
var parade = window.histograms.states;
for (var i = 0 ; i<parade.length ; i++)
    hits[parade[i].name] = parade[i].hits;
​
var width = 960,
    height = 600,
    centered;
​
  
var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([0, 0]);
​
var path = d3.geo.path()
    .projection(projection);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
  // create a text wrapping function
  
svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", click);
​
//Create the Scale we will use for the Axis
 var axisScale = d3.scale.linear()
                          .domain([0, 950])
                          .range([55, 600]);
​
//Create the Axis
var xAxis = d3.svg.axis()
                   .scale(axisScale);
​
​
//Create an SVG group Element for the Axis elements and call the xAxis function
var xAxisGroup = svg.append("g")
                              .call(xAxis)
.attr("transform", "translate(" + -35 + "," + 570 + ")").style("fill",'white');
    
var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .append("g")
    .attr("id", "states");
​
d3.json("states.json", function(json) {
  var heatmap = d3.scale.linear()
    .domain([0,d3.max(json.features, function(d) { return Math.log(hits[d.properties.abbr] || 1); })])
    .interpolate(d3.interpolateRgb)
    .range(["white","green"])
  
  var states = g.selectAll("path")
    .data(json.features)
    .enter().append("path")
    .attr("d", path)
    .attr("id", function(d) { return d.properties.abbr; })
    .style("fill", function(d) { return heatmap(Math.log(d.properties.ssi || 1)); })
    .on("click", click)
  
var gradient = svg.append("defs")
  .append("linearGradient")
.classed("gradient", true)
    .attr("id", "gradient")
    .attr("x1", "-16%")
    .attr("y1", "100%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");
​
gradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "white")
    .attr("stop-opacity", 1.64);
​
gradient.append("stop")
    .attr("offset", "60%")
    .attr("stop-color", "green")
    .attr("stop-opacity", 1);
​
var threshold_scale = svg.selectAll("body")
    .data(json.features)
    .enter().append("rect")
    .attr("width", 545)
    .attr("height", 22)
        .attr("x", 20)
    .attr("y",550)
    .style("fill", "url(#gradient)");
    
  var labels = g.selectAll("text")
    .data(json.features)
    .enter().append("text")
    .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
    .attr("id", function(d) { return 'label-'+d.properties.abbr; })
    .attr("dy", ".35em")
    .on("click", click)
    .text(function(d) { return d.properties.abbr; });
});
  ///////////////////////
  var sidebar = svg.append("rect")
    .classed("sidebar", true)
    .attr("width", width/3)
    .attr("height", height)
        .attr("x", function () { return width})
        .attr("y", 0)
    .attr("fill", " #96cdcd")
​
      
  function wrap(text, width) {
    text.each(function() {
        var text = d3.select(this),
        words = text.text().split(/\*+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 4, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(" "));
            if (tspan.node().getComputedTextLength() > width) {
                line.pop();
                tspan.text(line.join(" "));
                line = [word];
                tspan = text.append("tspan").attr("x", 0).attr("y", -25).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
            }
        }
    })}
​
function click(d) {
  flag=!flag
  if(!flag)
  {
    sbt = d3.select("#sidebartext");
    sbt.attr("opacity", 1);
    sbt.select("p").text(function(e) { return "Reported MRSA HAIs: " + d.properties.MRSA});
     sbt.select("p1").text(function(e) { return "Reported C. Difficile HAIs: " + d.properties.clostridium}); 
    sbt.select("p2").text(function(e) { return "Reported CLABSI HAIs: " + d.properties.clabsi});
     sbt.select("p3").text(function(e) { return "Reported CAUTI HAIs: " + d.properties.cauti});
     sbt.select("p4").text(function(e) { return "Reported SSI HAIs: " + d.properties.ssi});
    sbt.select("p5").text(function(e) { return "Antibiotics prescribed per 1,000: " + d.properties.antibio});
    d3.select(".sidebar")
    .transition()
    .duration(0)
    .attr("opacity", 0.75)
    .attr("x", width - (width/3));
  var x = 0,
      y = 0,
      k = 1;
  }
  else
  {
     sbt.select("p").text(function(e) { return "Reported MRSA HAIs: " + d.properties.MRSA});
     sbt.select("p1").text(function(e) { return "Reported C. Difficile HAIs: " + d.properties.clostridium}); 
    sbt.select("p2").text(function(e) { return "Reported CLABSI HAIs: " + d.properties.clabsi});
    sbt.select("p3").text(function(e) { return "Reported CAUTI HAIs: " + d.properties.cauti});
    sbt.select("p4").text(function(e) { return "Reported CLABSI SSI: " + d.properties.ssi});
    sbt.select("p5").text(function(e) { return "Antibiotics prescribed per 1,000: " + d.properties.antibio});
    flag=true
    if (d && centered == d)
    {
      d3.select("#sidebartext").select("p").text("")
      .attr("opacity", 0);
      d3.select("#sidebartext").select("p1").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p2").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p3").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p4").text("")
      .attr("opacity", 0)
      d3.select("#sidebartext").select("p5").text("")
      .attr("opacity", 0)
        d3.select(".sidebar")
        .transition()
        .duration(0)
        .attr("opacity", 0.75)
        .attr("x", width + (width/3));
         }
     else
     {
      flag = false  
     }
        var x = 0,
      y = 0,
      k = 1;
  }
​
​
  if (d && centered !== d) {
    var centroid = path.centroid(d);
        x = -centroid[0];
      y = -centroid[1];
      k = 4.5;
    centered = d;
            } else {
            centered = null;
        }
​
  g.selectAll("path")
      .classed("active", centered && function(d) { return d === centered; });
  g.selectAll("text")
      .text(function(d) { return d.properties.abbr; })
      .classed("active",false);
  g.selectAll("text")
      .text(function(d) { return d.properties.name})
      .classed("active", centered && function(d) { return d === centered; })
      .call(wrap, 0)
        .style('fill')
  g.transition()
      .duration(500)
      .attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")translate(-35,0)")
      .style("stroke-width", 0.75 / k + "px");
}
  
  }
</script>
​
    