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/
Built with blockbuilder.org
| <!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="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script src="http://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> |
