All examples By author By category About

khan2sa

Full window Github gist

clickable map usa

By: Shahzeb Khan, Zach Schuhmacher, And Ben Stone

<!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>
<script type="text/javascript" src="data.json"></script>
<script type="text/javascript" src="javascrip.js"></script>
<div class="w3-container w3-green" style="position:relative; left: 0px; top: 0px; width: 960px; text-align: left" >
  <button style="position:absolute;  left: 822px; top: 14px; width: 100px; text-align: left" class="btn btn-primary" onclick="myFunction()">About Page</button>
   <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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css" rel="stylesheet"/>
     
</head>
 <h3>Map of Healthcare-associated infections (HAIs) and related factors</h3>
</div>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.css" type="text/css"/>
    <script src="https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js"></script>
    <style>
        .tnt_tooltip {
        	pointer-events : none;
        }
    </style>
<style>

.background {
  fill: #bfbfbf;
  pointer-events: stroke;
  fill: #09284b
}

#states {
  stroke: #000000;
  stroke-width: .5px;
}

#states text {
  fill: #000000;
  stroke: none;
  text-anchor:middle;
  font-size: 0px;
}

#states .active {
  fill: steelblue !important;
}

#states text.active {
  font-size: 8px;
  font-weight:bold;
  fill: #ff1414;
  stroke-width: 0px;
  text-anchor:top;
  padding-top: 55%;
  fill: black !important;
  stroke: #ff0505;
}
 
#sidebartext  {    
    width: 33%;
  	position: fixed;
  	left: 660px;
    top: 230px;
    font-size: 15px;
    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: #d49b9c;
}

#entry {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
  
</style>

<body>

</body>
<body>
  <div id="sidebartext" style="position:absolute; left: 650px"> 
    <p  style="position:absolute;"></p>
    <br><br>
    <p1  style="position:absolute;"></p1>
    <br><br>
    <p2  style="position:absolute;"></p2>
    <br><br>
    <p3  style="position:absolute;"></p3>
    <br><br>
    <p4  style="position:absolute;"></p4>
    <br><br>
    <p5  style="position:absolute;"></p5>
    <p6  style="position:absolute;"></p6>

</div>
 
 
  <div id="clicker" class="w3-container w3-white" >
    <h4>
     Choose a catagory for the heat map:
  </h4>

<p>	<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: 58px;">
     User entry data map and form:
  </h4>
         <h5 id= "legend1" style="color:blue; font-size:18px; position:absolute; left: 5px; top: 170px;  width: 960px;">
      Heat Map for : Clostridium difficile HAI
      </h5>
      <h5 id= "legend2" style="color:orange; font-size:18px; position:absolute; left: 5px; top: 170px;  width: 960px;">
      Heat Map for : Central line associated bloodstream infection 
      </h5>
      <h5 id= "legend3" style="color:red; font-size:18px; position:absolute; left: 5px; top: 170px;  width: 960px;">
      Heat Map for : Methicillin-resistant Staphylococcus aureus HAI
      </h5>
      <h5 id= "legend4"style="color:	#FF1493; font-size:18px; position:absolute; left: 5px; top: 170px;  width: 960px;">
      Heat Map for : Catheter associated urinary track infection
      </h5>
      <h5 id= "legend5" style="color:green; font-size:18px; position:absolute; left: 5px; top: 170px;  width: 960px;">
      Heat Map for : Surgical site infection
      </h5>
    <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;" class="btn btn-primary" onclick="loop('7')" > User Entry Map </button>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

</div> 
    </div> 
  <div>
    <p8>
  <label id = "span" 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: -40px; width: 207px; text-align: middle" autocomplete='off'>
<P8>
  </div>
      <div id = "entry" style="display:none; position:absolute; left: 0px; top: 157px;  width: 960px;">
        <p5>
  <h3>User entry</h3>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

<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>
 
<div id="container" style="position:absolute;"></div>
<script>
  
window.onload = myMain;
var valuess;
var globalVariable;

var fname = document.getElementById("fname");
    var lname = document.getElementById("lname");
    var year = document.getElementById("year");
    var states = document.getElementById("states");
    var HAI = document.getElementById("HAI");
    
    
var fnames  = [];
var lnames   = [];
var years = [];
var statess   = [];
var HAIs = [];

function output()
  {
     d3.select("#entry").select("p").text("First Name: " +        	
     (document.getElementById("fname").value));
    
    d3.select("#entry").select("p1").text("Last Name: " +        	
     (document.getElementById("lname").value));
    
    d3.select("#entry").select("p2").text("Current Year: " +        	
     (document.getElementById("year").value));
    
    d3.select("#entry").select("p3").text("Reporting State: " +        	
     (document.getElementById("states").value));
    
    d3.select("#entry").select("p4").text("Reporting HAI: " +        	
     (document.getElementById("HAI").value));

fnames.push( fname.value );
 lnames.push( lname.value );
 years.push( year.value );
 statess.push( states.value );
 HAIs.push( HAI.value );
  
 clearAndShow();

}
        if(localVal == 2012 && localVariable == 4)
          {
            d3.select("svg").remove(); 
            mrsa(localVal);

}
        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)	
          
      { document.getElementById("span").style.display = 'block'
      document.getElementById("legend5").style.display = 'block'
               document.getElementById("3").style.backgroundColor =     'red';
        document.getElementById("7").style.backgroundColor =     '';
        document.getElementById("6").style.backgroundColor =     '';
        document.getElementById("5").style.backgroundColor =     '';
        document.getElementById("4").style.backgroundColor =     '';
        document.getElementById("2").style.backgroundColor =     '';
        document.getElementById("1").style.backgroundColor =     '';
        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)	
      { document.getElementById("span").style.display = 'block'
       document.getElementById("legend4").style.display = 'block'
               document.getElementById("2").style.backgroundColor =     'red';
        document.getElementById("7").style.backgroundColor =     '';
        document.getElementById("6").style.backgroundColor =     '';
        document.getElementById("5").style.backgroundColor =     '';
        document.getElementById("4").style.backgroundColor =     '';
        document.getElementById("3").style.backgroundColor =     '';
        document.getElementById("1").style.backgroundColor =     '';
        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)	
      { document.getElementById("span").style.display = 'block'
                document.getElementById("1").style.backgroundColor =     'red';
        document.getElementById("7").style.backgroundColor =     '';
        document.getElementById("6").style.backgroundColor =     '';
        document.getElementById("5").style.backgroundColor =     '';
        document.getElementById("4").style.backgroundColor =     '';
        document.getElementById("3").style.backgroundColor =     '';
        document.getElementById("2").style.backgroundColor =     '';
       document.getElementById("legend2").style.display = 'block'
        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' 
    }
}
document.getElementById("nRadius-value").style.display = 'none'
  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("j", function(d) { return d.properties.abbr; })
    .style("fill","#b2c8c6") //changes default map color
    .on("click", click)

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 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("#container").append("svg")
    .attr("width", width)
    .attr("height", height);
  
svg1.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", click)
.style("fill", "#97abcd");
    
    
var text = "";
var i = 0;
var fnameslength = fnames.length;
var lnameslength = lnames.length;
var yearslength = years.length;
var stateslength = statess.length;
var hailength = HAIs.length;
    
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("j", function(d) { return d.properties.abbr; })
    .style("fill","#799e7d") //changes default map color
    .on('click', click)

}
  
  
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(["#d6ddfe","#0123d0"])
  
  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.cdiff2011 || 1))}
      if(year == 2012)
        {
      return heatmap(Math.log(d.properties.cdiff2012 || 1))}
      if(year == 2013)
        {
      return heatmap(Math.log(d.properties.cdiff2013 || 1))}
      if(year == 2014)
        {
      return heatmap(Math.log(d.properties.cdiff2014 || 1))}
       })
  
    .on("click", click)
  
var gradient = svg.append("svg")
  .append("linearGradient")
.classed("gradient", true)
    .attr("id", "gradient")
    .attr("x1", "-90%")
    .attr("y1", "100%")
    .attr("x2", "90%")
    .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);

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;
  		}

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(["#fee5ec","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.mrsa2011 || 1))}
      if(year == 2012)
        {
      return heatmap(Math.log(d.properties.mrsa2012 || 1))}
      if(year == 2013)
        {
      return heatmap(Math.log(d.properties.mrsa2013 || 1))}
      if(year == 2014)
        {
      return heatmap(Math.log(d.properties.mrsa2014 || 1))}
       })
    .on("click", click)
  
var gradient = svg.append("defs")
  .append("linearGradient")
.classed("gradient", true)
    .attr("id", "gradient")
    .attr("x1", "-25%")
    .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);

if (d && centered !== d) {
    var centroid = path.centroid(d);
    	x = -centroid[0];
   	  y = -centroid[1];
      k = 4.5;
    centered = d;
 			} else {
    		centered = null;
  		}

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(["#fef4c2","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) {
      if(year == 2011)
        {
      return heatmap(Math.log(d.properties.clabsi2011|| 1))}
      if(year == 2012)
        {
      return heatmap(Math.log(d.properties.clasbi2012 || 1))}
      if(year == 2013)
        {
      return heatmap(Math.log(d.properties.clasbi2013 || 1))}
      if(year == 2014)
        {
      return heatmap(Math.log(d.properties.calbsi2014 || 1))}
       })
    .on("click", click)
  
var gradient = svg.append("defs")
  .append("linearGradient")
.classed("gradient", true)
    .attr("id", "gradient")
    .attr("x1", "-26%")
    .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);

if (d && centered !== d) {
    var centroid = path.centroid(d);
    	x = -centroid[0];
   	  y = -centroid[1];
      k = 4.5;
    centered = d;
 			} else {
    		centered = null;
  		}

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);

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(["#f3ecfd","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) {
      if(year == 2011)
        {
      return heatmap(Math.log(d.properties.cauti2011 || 1))}
      if(year == 2012)
        {
      return heatmap(Math.log(d.properties.cauti2012 || 1))}
      if(year == 2013)
        {
      return heatmap(Math.log(d.properties.cauti2013 || 1))}
      if(year == 2014)
        {
      return heatmap(Math.log(d.properties.cauti2014 || 1))}
       })
    .on("click", click)
  
var gradient = svg.append("defs")
  .append("linearGradient")
.classed("gradient", true)
    .attr("id", "gradient")
    .attr("x1", "-50%")
    .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);

if (d && centered !== d) {
    var centroid = path.centroid(d);
    	x = -centroid[0];
   	  y = -centroid[1];
      k = 4.5;
    centered = d;
 			} else {
    		centered = null;
  		}

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);

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(["#e5feeb","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) {
      if(year == 2011)
        {
      return heatmap(Math.log(d.properties.ssi2011 || 1))}
      if(year == 2012)
        {
      return heatmap(Math.log(d.properties.ssi2012 || 1))}
      if(year == 2013)
        {
      return heatmap(Math.log(d.properties.ssi2013 || 1))}
      if(year == 2014)
        {
      return heatmap(Math.log(d.properties.ssi2014 || 1))}
       })
    .on("click", click)
  
var gradient = svg.append("defs")
  .append("linearGradient")
.classed("gradient", true)
    .attr("id", "gradient")
    .attr("x1", "-35%")
    .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);

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;
  		}

Modified http://d3js.org/d3.v2.min.js?2.9.6 to a secure url

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js to a secure url

https://d3js.org/d3.v2.min.js?2.9.6

https://d3js.org/d3.v3.js

https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js

https://d3js.org/d3.v3.min.js

https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js