Freestanding Emergency Rooms in Texas

A data viz on the raise of Texas freestanding emergency rooms. Built with d3.js and JavaScript.

You can read the whole story on the Texas Tribune.

Here's the url: http://www.texastribune.org/2015/08/21/freestanding-emergency-rooms-rise-texas/

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

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

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

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

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

https://d3js.org/topojson.v1.min.js

https://d3js.org/queue.v1.min.js