Skip to content

Instantly share code, notes, and snippets.

@jeremycflin
Last active October 12, 2015 05:12
Show Gist options
  • Save jeremycflin/eb555cfc17bd8ba6aee7 to your computer and use it in GitHub Desktop.
Save jeremycflin/eb555cfc17bd8ba6aee7 to your computer and use it in GitHub Desktop.
Freestanding Emergency Rooms in Texas
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!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>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment