D3 Examples - Freestanding Emergency Rooms in Texas

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Map </title>
<style type="text/css">
.cities{
  font-size:11px;
  font-family: "Helvetica Neue";
  fill:black;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
  text-anchor: middle;
}
​
.base_map{
  fill:#c9cbcd;
  opacity:0.5;
}
​
.squares{
  width:5px;
  height:5px;
  fill:black;
}
​
.enter{
  fill:#C74848;
  opacity:0.6;
  stroke:white;
  stroke-width:0.5;
}
​
.exit{
  fill:#C74848;
  opacity:0.6;
  stroke:white;
  stroke-width:0.5;
}
​
.year{
  font-size:28px;
  font-weight: 600;
  font-family: "Helvetica Neue";
  fill:#C74848;
  opacity: 0.9;
  margin-bottom: 50px;
}
​
.value{
  font-size:28px;
  font-weight: 600;
  font-family: "Helvetica Neue";
  fill:#C74848;
  opacity: 0.9;
}
​
.label{
  font-size:15px;
  font-weight: 400;
  font-family: "Helvetica Neue";
  fill:black;
  opacity: 0.7;
}
​
#adjust{
  padding-bottom: 30px;
}
​
@media (max-width: 600px) {
  .year {
    font-size: 18px;
  }
  .value {
    font-size: 18px;
  }
  .label{
    font-size: 9.8px;
  }
}
​
​
</style>
</head>
<body>
​
<div id="graphic"></div>
<div id="chart"></div>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
​
<script>
function drawGraphic(){
d3.selectAll('svg').remove();
​
    // Set the dimensions of the canvas / graph
    var windowWidth;
    var scale;
    var radius;
​
    if(window.innerWidth > 620) {
        windowWidth =  620;
        scale = 2200;
        height = 550;
        radius = 4.5;
    } else {
      windowWidth = window.innerWidth;
      scale = 1230;
      height = 350;
      radius = 2.5;
    }
​
    var margin = {top:40, right:3, bottom:0, left:3},
      width = windowWidth - margin.left - margin.right,
      height = height;
​
    var projection = d3.geo.mercator()
      .scale(scale)
      .translate([width / 2, height /2])
      .center([-100,31]);
​
    var path = d3.geo.path()
      .projection(projection);
​
    var cities = [
      {
        'name' : 'Austin',
        'location' : [30.2500,-97.7500],
        'square': [30.1500,-97.7500]
      },
      {
        'name' : 'Houston',
        'location' : [29.7604,-95.3698],
        'square': [29.6604,-95.3698]
      },
      {
        "name" : "Dallas",
        'location' : [32.7767,-96.7970],
        'square': [32.6767,-96.7970]
      },
      {
        'name' : 'San Antonio',
        'location' : [29.4167,-98.5000],
        'square': [29.3167,-98.5000]
      },
      {
        'name' : 'El Paso',
        'location' : [31.7903,-106.4233],
        'square': [31.6903,-106.4233]
      }
      ];
​
    var sum = [
      {
        'year' : '2010',
        'value' : '22'
      },
      {
        'year' : '2011',
        'value' : '26'
      },
      {
        'year' : '2012',
        'value' : '47'
      },
      {
        'year' : '2013',
        'value' : '85'
      },
      {
        'year' : '2014',
        'value' : '136'
      },
      {
        'year' : '2015',
        'value' : '162'
      }
    ];
​
    var timeBox;
    var valueBox;
​
    var svg = d3.select("#graphic")
      .append("svg")
      .attr("width", width)
      .attr("height", height);
​
    var labelBox = svg.append("text")
      .attr("class","value")
      .attr("x", width * 0.53)
      .attr("y", height * 0.15)
      .attr('class','label')
      .text('Freestanding emergency rooms');
​
    var yearlabelBox = svg.append("text")
      .attr("class","value")
      .attr("x", width * 0.53)
      .attr("y", height * 0.06)
      .attr('class','label')
      .text('Year')
​
    queue()
      .defer(d3.json, "tx.json")
      .defer(d3.json, "emergency.json")
      .await(ready);
​
    function ready(error, baseMap, emergency) {
      svg.selectAll("path")
      .data(topojson.feature(baseMap, baseMap.objects.shape).features)
      .enter()
      .append("path")
      .attr("d",path)
      .attr("class","base_map");
​
      svg.selectAll(".cities")
      .data(cities)
      .enter()
      .append("text")
      .attr("x", function(d){ return projection([d.location[1], d.location[0]])[0]; } ) //projection([long, lat])[1]
      .attr("y", function(d){ return projection([d.location[1], d.location[0]])[1]; })
      .text(function(d){return d.name;})
      .attr("class","cities");
​
      svg.selectAll(".squares")
      .data(cities)
      .enter()
      .append("rect")
      .attr("x", function(d){ return projection([d.square[1], d.square[0]])[0]; } ) //projection([long, lat])[1]
      .attr("y", function(d){ return projection([d.square[1], d.square[0]])[1]; })
      .attr("class","squares");
​
      timeBox = svg.append("text")
      .attr("class","year")
      .attr("x", width * 0.53)
      .attr("y", height * 0.11)
​
      valueBox = svg.append("text")
      .attr("class","value")
      .attr("x", width * 0.53)
      .attr("y", height * 0.20)
​
      var yearArray = ['2010', '2011', '2012', '2013', '2014', '2015'];
      var sumArray = ['22', '26', '47', '85', '136', '162'];
​
      var yearArrayLength = yearArray.length;
      var sumArrayLength = sumArray.length;
​
      var currentIteration = 0;
​
      var interval = setInterval(function() {
       
        var year = yearArray[currentIteration];
        var value = sumArray[currentIteration];
        update(emergency, year, value);
​
        currentIteration++;
        if (currentIteration >= yearArrayLength) {
          currentIteration = 0;
        }
      }, 1500);
    };
​
​
​
    function update(emergency, year, value) {
​
      // DATA JOIN
      // Join new data with old elements, if any.
      var test = svg.selectAll("circle")
        .data(emergency.features.filter(function(d) {
          return d.properties.year === year;
        }));
​
      // ENTER
      // Create new elements as needed.
      test.enter().append("circle")
        .attr("cx",function(d) { return projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[0]; })
        .attr("cy",function(d) { return projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[1]; })
        .attr("r",0)
        .transition()
        .attr("class", "enter")
        .duration(1000)
        .attr("r",radius);
​
      // EXIT
      // Remove old elements as needed.
      test.exit().attr('class', 'exit')
        .attr("r",radius)
        .transition()
        .duration(1000)
        .attr("r",0)
        .remove();
​
      timeBox.text(year);
      valueBox.text(value);
​
    };
};
drawGraphic();
​
</script>
​
​
</body>
</html>
    