Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
396 lines (365 sloc) 15.4 KB
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="rbow2.css" type="text/css" />
<link rel="stylesheet" href="fema.css" type="text/css" />
<!--<script type="text/javascript" src="jquery-1.8.3.min.js"></script>-->
<script type="text/javascript" src="jquery.tablesorter/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter/jquery.tablesorter.js"></script>
<body>
<div id = "main">
<div id="titlediv">
<h1>FEMA Assistance by U.S. County<a href="#datasource"><sup style="font-weight: normal; font-size: 50%">&#8224</sup></a></h1>
<p><i>Mouse over counties to see the total FEMA money allocated, click on a county to see a chart of individual agency requests.</i></p>
</div>
<div id = "extrainfo">
<p><span style="font-size: 18px; font-family: Georgia, Times New Roman, Serif;">Selected Incidents by Year&nbsp;&nbsp;</span>
<select id="selectedInc" onChange="selectInc();">
<option value="2011"></option>
<option id="inc2001">2001</option>
<option id="inc2003">2003</option>
<option id="inc2005">2005</option>
<option id="inc2010">2010</option>
<option id="inc2011">2011</option>
</select>
</p>
<div id="incdesc"></div>
<div id = "legend">
<div style="font-size: 14px; font-weight: normal; padding-bottom: 5px; font-family: Georgia, Times New Roman, Serif;">Incident Types</div>
<table cellpsacing = "2" cellpadding="2" border="0">
<tr>
<td id="firedrought"></td><td width = "160">Fire, Drought</td>
</tr>
<tr>
<td id="quaketornado"></td><td>Earthquake, Tornado</td>
</tr>
<tr>
<td id="typhoon"></td><td>Hurricane, Severe Storm</td>
</tr>
<tr>
<td id="flood"></td><td>Flooding, Dam/Levee Break</td>
</tr>
<tr>
<td id="snow"></td><td>Snow, Freezing, Severe Ice Storm</td>
</tr>
<tr>
<td id="terrorism"></td><td>Terrorism, Other</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
<script type="text/javascript" src="http://d3js.org/topojson.v0.min.js"></script>
<script type="text/javascript" src="html5slider.js"></script>
<script>
$.tablesorter.addParser({
// set a unique id
id: 'money',
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s) {
// format your data for normalization
var str = s.replace(/\$/, '').replace(/,/g,'') ;
return parseFloat(str);
},
// set type, either numeric or text
type: 'numeric'
});
// GLOBAL VARIABLES
var width = 850,
height = 500;
var path = d3.geo.path();
var svg = d3.select("#main").append("svg")
.attr("width", width)
.attr("height", height);
var femadata; //
var incidentsdata; //
var currentRateById; //
var currentCounty; //
var currentState;
var currentIncident;
var currentIncidentId;
var currentYear;
var currentId;
var prevSvg;
var currentSvg;
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip");
var quantize = d3.scale.quantize()
// Cast values into bins for colormap
.domain([7, 19])
.range(d3.range(9).map(function(i) {
return "q" + i + "-9";
}))
queue() // load files
.defer(d3.json, "us.json") // US map data
.defer(d3.tsv, "FIPS2.tsv") // FIPS IDs by county, state
.defer(d3.tsv, "Incident_by_county.tsv") // List of most common incident (for choosing color scale)
.defer(d3.tsv, "FEMA_by_year.tsv") // Data on FEMA assistance by date for each county
.await(ready);
function addColumn(tblId, moneyCol) {
var oRows = document.getElementById('viz').getElementsByTagName('tr');
var tblHeadObj = document.getElementById(tblId).tHead;
for (var h=0; h<tblHeadObj.rows.length; h++) {
var newTH = document.createElement('th');
tblHeadObj.rows[h].appendChild(newTH);
newTH.innerHTML = '';
newTH.className = 'rightth';
}
var tblBodyObj = document.getElementById(tblId).tBodies[0];
for (var i=0; i<tblBodyObj.rows.length; i++) {
var newCell = tblBodyObj.rows[i].insertCell(-1);
newCell.className = 'chartstuff';
newCell.id = 'chartstuff'+i;
var chart = d3.select("#chartstuff"+i)
.append("svg")
.attr("width", "100px")
.attr("height", "25");
var x = d3.scale.linear()
.domain([0, d3.max(moneyCol)])
.range([0, 100]);
chart.append("rect")
.attr("y",2)
.attr("height", 25)
.transition()
.attr("width", (moneyCol[i]/d3.max(moneyCol))*100)
.attr("class", function() { return "c" + currentIncident[currentId] + "q5-9"; })
.duration(1000)
.delay(100);
}
}
function updateTable(currentId, currentYear) {
// Update the table containing information about the currently selected county
d3.select("#viz table").remove();
d3.select("#viz div").remove();
d3.select("#viz h3").remove();
d3.select(".chart").remove();
var ctitle = d3.select("#viztitle")
.html("<h3>" + currentCounty[currentId] + " County, " + currentState[currentId] + " " + currentYear + "</h3>");
if (currentRateById[currentId]==0 || typeof currentRateById[currentId] == 'undefined') {
var table = d3.select("#viz")
.append("div")
.html("&nbsp;&nbsp;&nbsp;&nbsp;<i>No FEMA requests for selected county and year.</i>");
}
else {
ctitle.html(ctitle.html() + "<p class='small'><i>Click column headers to sort.</i></p>");
var fname = "countydata/"+ currentYear + "_" + currentId + ".tsv"
d3.text(fname, function(datasetText) {
var parsedCSV = d3.tsv.parseRows(datasetText);
var colnames = parsedCSV[0];
parsedCSV.splice(0,1);
var moneyCol = [];
for (row = 0; row<parsedCSV.length; row++) {
moneyCol.push(parseInt(parsedCSV[row][5].replace(/,/g,"").replace("$","")));
}
var table = d3.select("#viz")
.append("table")
.attr("id", "viztab")
.attr("class", "tablesorter")
.style("border-collapse", "collapse")
//.style("border", "2px black solid")
thead = table.append("thead"),
tbody = table.append("tbody");
thead.append("tr")
.selectAll("th")
.data(colnames)
.enter()
.append("th")
.style("border","1px solid black")
.text(function(column) { return column;});
var rows = tbody
.selectAll("tr")
.data(parsedCSV)
.enter().append("tr")
.selectAll("td")
.data(function(d){return d;})
.enter().append("td")
.style("border", "1px black solid")
.style("padding", "5px")
.attr("class", function(d){ return d;})
.on("mouseover", function(){d3.select(this).style("background-color", "aliceblue")})
.on("mouseout", function(){d3.select(this).style("background-color", "white")})
.text(function(d){return d;})
.style("font-size", "12px");
addColumn('viztab', moneyCol);
$("#viztab").tablesorter({
headers: {5: { sorter: 'money' }
}})
});
}
}
function makeTooltip(d, tooltip, svgobj) {
tooltip.style("visibility","visible")
.style("background", "#eee")
.style("border","1px solid #444")
.style("padding", "4px");
var moneySpent = (Math.exp(currentRateById[d.id])-1);
if (isNaN(moneySpent)) { moneySpent=0; }
var moneyFmt = d3.format(",.2f");
tooltip.html("<b>" + currentCounty[d.id] + " County</b><br/>$" + moneyFmt(moneySpent) );
tooltip.style("Position","absolute");
svgobj.style("stroke","red","stroke-width","3");
}
function ready(error, us, fips, incidents, femaassist) {
// receives us.json and FEMA_by_year.tsv files
var rateById = {};
var countyByFips = {};
var stateByFips = {};
var incidentByFips = {};
var baseWidth = 564; //564
var baseHeight = 400; //400
currentYear = '2011';
femaassist.forEach(function(d) { rateById[d.id] = +d[currentYear]; });
fips.forEach(function(d) { countyByFips[d.FIPS] = d['County']; });
fips.forEach(function(d) { stateByFips[d.FIPS] = d['State']; });
incidents.forEach(function(d) { incidentByFips[d.id] = d[currentYear]; });
femadata = femaassist;
incidentsdata = incidents;
currentRateById = rateById;
currentCounty = countyByFips;
currentState = stateByFips;
currentIncident = incidentByFips;
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.object(us, us.objects.counties).geometries)
.enter().append("path")
.attr("class", function(d) {
if (currentRateById[d.id] > 0) {
return "c"+currentIncident[d.id]+quantize(currentRateById[d.id]);
}
else {
return "default_col";
}
})
.attr("d", path)
.on("mouseover", function(d) { makeTooltip(d, tooltip, d3.select(this));})
.on("mousemove", function() {
return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");
})
.on("mouseout", function(d) {
if (d.id != currentId) {
d3.select(this).style("stroke","none");
tooltip.text("");
tooltip.style("visibility","hidden");
};
})
.on("click", function(d) {
var myList=document.getElementById("selectedInc");
console.log(myList);
myList.selectedIndex = '';
document.getElementById("incdesc").innerHTML='';
prevSvg = currentSvg;
if (prevSvg) { prevSvg.style("stroke","none"); }
currentSvg = d3.select(this);
currentId = d.id;
updateTable(currentId, currentYear);
});
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
.attr("class", "states")
.attr("d", path);
svg.append("path")
.datum(topojson.object(us, us.objects.land))
.attr("class", "states")
.attr("d", path);
}
function updateMap(year) {
currentYear = year;
femadata.forEach(function(d) { currentRateById[d.id] = +d[currentYear]; });
incidentsdata.forEach(function(d) { currentIncident[d.id] = d[currentYear]; });
svg.select("g").selectAll("path")
.attr("class", function(d) {
if (currentRateById[d.id] > 0) {
return "c" + currentIncident[d.id] + quantize(currentRateById[d.id]);
}
else {
return "default_col";
}
});
// Now update the table if we have already selected a county
if (currentId) updateTable(currentId, currentYear);
}
function makeColorBar(id, r1) {
var legendsvg = d3.select(id).append("svg:svg")
.attr("width", "130px")
.attr("height", "16px");
var colorData = d3.range(9);
var rects = legendsvg.selectAll("rect")
.data(colorData);
rects.enter()
.append("rect")
.attr({
width: 12,
height: 15,
y: 1,
x: function(d,i) {
return i * 13 ;
},
class: function(d,i) {
return "c" + r1 + "q" + d + "-9";
//}
}
})
}
makeColorBar("#firedrought","0");
makeColorBar("#quaketornado","1");
makeColorBar("#typhoon","2");
makeColorBar("#flood","3");
makeColorBar("#snow","4");
makeColorBar("#terrorism","5");
</script>
<div id="slidecontainer"><i>Drag slider to change the year displayed:</i><br/><input type="range" value="2011" min="1999" max="2011" step="1" id="slide" /></div>
<div id="sliderAmount">2011</div>
<div id="maincontainer">
<div id="viztitle"></div>
<div id="columnwrapper">
<div id="chart">
</div>
</div>
<div id="viz">
</div>
<br/>
<div style="clear: both;"><h2><a name="datasource"><sup>&#8224</sup></a>Data from the FEMA Public Assistance Funded Projects Summary, available at <a href="http://www.fema.gov/library/viewRecord.do?fromSearch=fromsearch&id=6299">FEMA.gov</a></h2></div>
<div id="footer">Copyright 2013 Liberty Hamilton</div>
</div>
</div>
<script>
var slide = document.getElementById('slide'),
sliderDiv = document.getElementById("sliderAmount");
slide.onchange = function() {
sliderDiv.innerHTML = this.value;
updateMap(this.value);
}
function drawCircle(fips, myYear) {
d3.select("svg .counties")
}
function selectInc() {
var myList=document.getElementById("selectedInc");
myYear = myList.options[myList.selectedIndex].text;
var incDescriptions = {'': [],
'2001': ['In 2001, we see aid for the 9/11 attacks in red around the New York City area. Despite the “terrorist” category available for FEMA aid, these were basically all classified as aid for fires — I’m not sure if that’s because they were classified as such before it was known why the attacks were carried out, or if there is another reason.'],
'2003': ['In 2003, we can see in red the “2003 Firestorm”, including the <a href="http://en.wikipedia.org/wiki/Cedar_Fire" target="new">Cedar Fire</a> and <a href="http://en.wikipedia.org/wiki/Old_Fire" target="new">Old Fire</a> that devastated much of Southern California.'],
'2005': ['In 2005, the whole gulf coast lights up in green as <a href="http://en.wikipedia.org/wiki/Hurricane_Katrina" target="new">Hurricane Katrina</a> devastated the landscape.'],
'2010': ['In 2010, there is a swath of purple around the northeast, representing “Snowmageddon”, the blizzard that <a href="http://www.google.com/hostednews/afp/article/ALeqM5j3HVBhfkkHN4c9TlIAxNkxjbwR0A" target="new">closed down the Federal Government</a>.'],
'2011': ['In 2011, we see a patch of blue following the border between Kansas and Missouri up through Iowa and Nebraska and even to the Dakotas. This represents the <a href="http://en.wikipedia.org/wiki/2011_Missouri_River_floods" target="new">2011 Missouri River flooding</a>, which was said to result from increased snowfall in the Rockies that year.']};
var selCounty = {'': [''],
'2001': [36059],
'2003': [6071],
'2005': [28047],
'2010': [11001],
'2011': [19155]};
document.getElementById("incdesc").innerHTML=incDescriptions[myYear];
drawCircle(selCounty[myYear], myYear);
if ( myYear == '') { myYear = 2011; };
updateMap(myYear);
sliderDiv.innerHTML = myYear;
slide.value = myYear;
if (selCounty != '') {
updateTable(selCounty[myYear], myYear);
}
}
</script>
You can’t perform that action at this time.