All examples By author By category About

khan2sa

Full window Github gist

b

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.

forked from thedod's block: clickable map usa

<!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="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>

}
  
function myMain() {
  var x = (document.getElementById("clicker").onclick = buton);
}

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

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 g = svg1.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .append("g")
    .attr("id", "states");

if(lname != '' && fname != '' && year != '' && states != '' && HAI != '')
      {
          var circle = svg1.append("circle")
                         .attr("cx", 55)
                         .attr("cy", 172)
                       .attr("r", 5)
     .style("fill","black");
      }

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

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

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

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

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

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

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

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

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