Skip to content

Instantly share code, notes, and snippets.

@polinabee
Created September 10, 2016 18:46
Show Gist options
  • Save polinabee/ce076a6fed47814d55006b5ef9be0469 to your computer and use it in GitHub Desktop.
Save polinabee/ce076a6fed47814d55006b5ef9be0469 to your computer and use it in GitHub Desktop.
PBFinal.html
Details
Activity
PBFinal.html
Sharing Info
General Info
Type
HTML
Size
19 KB (19,289 bytes)
Storage used
19 KB (19,289 bytes)
Location
Final V2
Owner
me
Modified
Sep 8, 2014 by me
Opened
11:38 AM by me
Created
Aug 1, 2014
Description
Add a description
Download permissions
Viewers can download
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mapping Traffic Fatalities</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.ie.css" />
<![endif]-->
<style>
body {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
#title {
font-family: 'Baskerville', serif;
border-bottom:1px solid #009999;
font-size: 22px;}
#intro{
font-family: 'Baskerville', serif;
border-bottom:1px solid #009999;
font-size: 13px;}
#analysis{
font-family: 'Baskerville', serif;
border-bottom:1px solid #009999;
border-top:1px solid #009999;
font-size: 13px;}
</style>
</head>
<body>
<center><div id="title">Geography 167 Final Project: Mapping Traffic Fatalities</div>
<div id= "intro"><br>Motor vehicle accidents consistently rank in the top 10 causes of death in the United States. Knowing where and why the risks are highest may help save lives and prevent future deaths. Some potential causes of traffic accidents are drivers that are in the risky age range of young (16-25 yo) or old (>75 yo), areas with high percentages of poverty-stricken individuals, and high speeds. Below are examples of interactive maps created with Leaflet showing locations of traffic fatalities in 2011 and their relation to these factors. <br>To view percentages of poverty and risky age groups in each city's census tracts, use the layer controls at the upper right hand corner of each map. You may also turn layers on or off, and click on the accident locations to see the respective road intersection and speed limit.</div>
<h3>Fatal Car Accidents in San Francisco in 2011</h3>
<div id = "SFmap" style= "width: 70%; height: 400px";></div>
<div style = "display:table;">
<table>
<tr>
<td><img src="SFPovertyLegend.png" border="1" height = "150"></td>
<td><img src="StreetsLegend.png" border="1" height = "150"></td>
<td><img src="SFAgeLegend.png" border="1" height = "150"></td>
</tr>
</table>
</div>
<h3><br>Fatal Car Accidents in Long Beach in 2011<h3>
<div id = "LBmap" style= "width: 70%; height: 400px";></div>
<div style = "display:table;">
<table>
<tr>
<td><img src="LBPovertyLegend.png" border="1" height = "150"></td>
<td><img src="StreetsLegend.png" border="1" height = "150"></td>
<td><img src="LBAgeLegend.png" border="1" height = "150"></td>
</tr>
</table>
</div>
<h3><br>Fatal Car Accidents in San Jose in 2011<h3>
<div id = "SJmap" style = "width: 70%; height: 400px";></div>
<div style = "display:table;">
<table>
<tr>
<td><img src="SJPovertyLegend.png" border="1" height = "150"></td>
<td><img src="StreetsLegend.png" border="1" height = "150"></td>
<td><img src="SJAgeLegend.png" border="1" height = "150"></td>
</tr>
</table></center>
</div>
<div id= "analysis"><h2>Analysis</h2>
<div style = "display:table;">
<table>
<tr>
<td><div id="bar" style="width: 500px; height: 300px;"></div></td>
<td><div id="scatter" align = "left" style="width: 500px; height: 300px;"></div></td>
</tr>
</table>
</div>
<p>The bar chart above shows a variable distribution of crashes, with San Jose having the most fatalities, and Long Beach with the least. Surprisingly, most traffic fatalities did not take place on the roads with the highest speed limits. According to the data, most fatalities happened on 35mph roads. This is likely due to the fact the 35 is a common speed limit in busy city streets, where unwary drivers may fall victim to collisions more often. <br> Although the maps showed only a slight visual correlation between poverty and accident location, and not much of a relationship between age and accident location, I did notice similarities in the patterns between risky age tract distribution and poverty percentage. The above scatter chart displays percent poverty and percent population that is of a risky age in the census tracts where fatal crashes occured. Visually, there is a clear small upwards trend. The correlation coefficient, at 0.36, is low, as is the P value at 0.7. Although the data is not statistically significant, there is still a slight positive correlation.
</p>
<div style = "padding: 5px; display:table;">
<table align = "right", style = "margin: 5px; width: 450px; height: 300 px; border: 1px solid black;"> <caption><b>Mean Summary Table: Census Tracts by Fatality Count</b></caption>
<tr>
<th>Number of Crashes</th>
<th>Percent Poverty</th>
<th>Percent Risky Age</th>
<th>Mean Speed Limit</th>
</tr>
<tr>
<td align="center">1</td>
<td align="center">27.456</td>
<td align="center">19.046</td>
<td align="center">37.794</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">33.983</td>
<td align="center">16.683</td>
<td align="center">45.00</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">25.975</td>
<td align="center">14.025</td>
<td align="center">50.00</td>
</tr>
</table><p>Since the focus areas were relatively small, large-scale patterns and correlations in census tract attributes were not found to be statistically significant. However, some small-scale patterns could be observed, as seen in the chart on the right. Although the most accidents happened in 35mph roads, the most crash-prone tracts had higher average speed limits in their roads. Tracts with 3 crashes had an average speed limit of 50 mph, compared with 27.8 mph for tracts with just one crash. Poverty and age did not correlate with fatalities, likely due to the mobility of vehicles and the small size of tracts in the populated cities chosen as study regions.</p></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script type = "text/javascript" src="SFStreets.json"></script>
<script src="SFCrashes.geojson"></script>
<script src="LBCrashes.geojson"></script>
<script src="SJCrashes.geojson"></script>
<script src="LBStreets.geojson"></script>
<script type = "text/javascript" src="SJStreets.json"></script>
<script type = "text/javascript" src="SFTracts.json"></script>
<script type = "text/javascript" src="SJTracts.json"></script>
<script type = "text/javascript" src="SFStreets.json"></script>
<script src="LBTracts.geojson"></script>
<script>
var SFmap = L.map('SFmap', {
maxBounds: [
//south west
[37.67755, -122.55411],
//north east]
[37.82861, -122.34194]
]
}).setView([37.758943, -122.451676], 13);
var LBmap = L.map('LBmap').setView([33.76979, -118.19279], 15);
var SJmap = L.map('SJmap').setView([37.34528, -121.88689], 14);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-20v6611k'
}).addTo(SFmap);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-20v6611k'
}).addTo(LBmap);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-20v6611k'
}).addTo(SJmap);
var SFCrashesStyle = {
radius: 5,
fillColor: "#FF3399",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.6,
};
var SFCrashLayer = L.geoJson(SFCrashes,{
pointToLayer: function(feature, latlng){
return L.circleMarker(latlng, SFCrashesStyle);
},
onEachFeature: function(feature, layer){
layer.bindPopup(feature.properties.Street+ ", "+feature.properties.Speed + " mph");
}
}).addTo(SFmap);
var LBCrashesStyle = {
radius: 5,
fillColor: "#6600FF",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.6
};
var LBCrashLayer = L.geoJson(LBCrashes,{
pointToLayer: function(feature, latlng){
return L.circleMarker(latlng, LBCrashesStyle);
},
onEachFeature: function(feature, layer){
layer.bindPopup(feature.properties.Street+ ", "+feature.properties.SPEED_MPH + " mph");
}
}).addTo(LBmap);
var SJCrashesStyle = {
radius: 5,
fillColor: "#33CC33",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.6
};
var SJCrashLayer = L.geoJson(SJCrashes,{
pointToLayer: function(feature, latlng){
return L.circleMarker(latlng, SJCrashesStyle);
},
onEachFeature: function(feature, layer){
layer.bindPopup(feature.properties.STREET+ ", "+feature.properties.SPEED_MPH + " mph");
}
}).addTo(SJmap);
var SFStreetsLayer = L.geoJson(SFStreets, {
style: function(feature){
switch (feature.properties.SPEED_MPH){
case 10: return {color: "#FF6666", weight: 1.5};
case 20: return {color: "#E65C5C", weight: 1.5};
case 25: return {color: "#CC5252", weight: 1.5};
case 30: return {color: "#B24747", weight: 2};
case 35: return {color: "#993D3D", weight: 2};
case 50: return {color: "#803333", weight: 2.5};
case 65: return {color: "#662929", weight: 2.5};
}
}
}).addTo(SFmap);
var LBStreetsLayer = L.geoJson(LBStreets, {
style: function(feature){
switch (feature.properties.SPEED_MPH){
case 10: return {color: "#FF6666", weight: 1.5};
case 20: return {color: "#E65C5C", weight: 1.5};
case 25: return {color: "#CC5252", weight: 1.5};
case 30: return {color: "#B24747", weight: 2};
case 35: return {color: "#993D3D", weight: 2};
case 50: return {color: "#803333", weight: 2.5};
case 65: return {color: "#662929", weight: 2.5};
}
}
}).addTo(LBmap);
var SJStreetsLayer = L.geoJson(SJStreets, {
style: function(feature){
switch (feature.properties.SPEED_MPH){
case 10: return {color: "#FF6666", weight: 2.5};
case 20: return {color: "#E65C5C", weight: 2.5};
case 25: return {color: "#CC5252", weight: 2.5};
case 30: return {color: "#B24747", weight: 3};
case 35: return {color: "#993D3D", weight: 3};
case 50: return {color: "#803333", weight: 3.5};
case 65: return {color: "#662929", weight: 3.5};
}
}
}).addTo(SJmap);
var SFPovertyTracts = L.geoJson(SFTracts, {
style: function(feature){
poverty = feature.properties.Poverty;
if (poverty >= 0 && poverty < 13.5) return {fillColor: "#ffffcc", color: "#ffffcc", weight: 1};
else if (poverty >= 13.5 && poverty <24.2) return {fillColor: "#a1dab4", color: "#a1dab4", weight: 1};
else if (poverty >= 24.2 && poverty <34.9) return {fillColor: "#41b6c4", color: "#41b6c4", weight: 1};
else if (poverty >= 34.9 && poverty <47.2) return {fillColor: "#2c7fb8", color: "#2c7fb8", weight: 1};
else return {fillColor: "#253494", color: "#253494", weight: 1};
}
}).addTo(SFmap);
var SFAgeTracts = L.geoJson(SFTracts, {
style: function(feature){
age = feature.properties.RiskyAge;
if (age >= 0 && age < 10.8) return {fillColor: "#ffffcc", color: "#ffffcc", weight: 1};
else if (age >= 10.8 && age <17.9) return {fillColor: "#c2e699", color: "#c2e699", weight: 1};
else if (age >= 17.9 && age <25) return {fillColor: "#78c679", color: "#78c679", weight: 1};
else if (age >= 25 && age <44.3) return {fillColor: "#31a354", color: "#31a354", weight: 1};
else return {fillColor: "#006837", color: "#006837", weight: 1};
}
}).addTo(SFmap);
var LBPovertyTracts = L.geoJson(LBTracts, {
style: function(feature){
poverty = feature.properties.Poverty;
if (poverty >= 0 && poverty < 14.7) return {fillColor: "#ffffcc", color: "#ffffcc", weight: 1};
else if (poverty >= 14.7 && poverty <26.1) return {fillColor: "#a1dab4", color: "#a1dab4", weight: 1};
else if (poverty >= 26.1 && poverty <39) return {fillColor: "#41b6c4", color: "#41b6c4", weight: 1};
else if (poverty >= 39 && poverty <58.3) return {fillColor: "#2c7fb8", color: "#2c7fb8", weight: 1};
else return {fillColor: "#253494", color: "#253494", weight: 1};
}
}).addTo(LBmap);
var LBAgeTracts = L.geoJson(LBTracts, {
style: function(feature){
age = feature.properties.RiskyAge;
if (age >= 0 && age < 14.1) return {fillColor: "#ffffcc", color: "#ffffcc", weight: 1};
else if (age >= 14.1 && age <19.8) return {fillColor: "#c2e699", color: "#c2e699", weight: 1};
else if (age >= 19.8 && age <25.6) return {fillColor: "#78c679", color: "#78c679", weight: 1};
else if (age >= 25.6 && age <56.5) return {fillColor: "#31a354", color: "#31a354", weight: 1};
else return {fillColor: "#006837", color: "#006837", weight: 1};
}
}).addTo(LBmap);
var SJPovertyTracts = L.geoJson(SJTracts, {
style: function(feature){
poverty = feature.properties.Poverty;
if (poverty >= 0 && poverty < 15.2) return {fillColor: "#ffffcc", color: "#ffffcc", weight: 1};
else if (poverty >= 15.2 && poverty <26.5) return {fillColor: "#a1dab4", color: "#a1dab4", weight: 1};
else if (poverty >= 26.5 && poverty <38.4) return {fillColor: "#41b6c4", color: "#41b6c4", weight: 1};
else if (poverty >= 38.4 && poverty <54.2) return {fillColor: "#2c7fb8", color: "#2c7fb8", weight: 1};
else return {fillColor: "#253494", color: "#253494", weight: 1};
}
}).addTo(SJmap);
var SJAgeTracts = L.geoJson(SJTracts, {
style: function(feature){
age = feature.properties.RiskyAge;
if (age >= 0 && age < 16.2) return {fillColor: "#ffffcc", color: "#ffffcc", weight: 1};
else if (age >= 16.2 && age <21.9) return {fillColor: "#c2e699", color: "#c2e699", weight: 1};
else if (age >= 21.9 && age <34.6) return {fillColor: "#78c679", color: "#78c679", weight: 1};
else if (age >= 34.6 && age <59.2) return {fillColor: "#31a354", color: "#31a354", weight: 1};
else return {fillColor: "#006837", color: "#006837", weight: 1};
}
}).addTo(SJmap);
/*var info = L.control({position: 'bottomleft'});
info.onAdd = function (SFmap) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = '<img src="SFAgeLegend.png"/>';
};
info.addTo(SFmap);*/
var SF_tractlayers = {
"Tracts: Poverty": SFPovertyTracts,
"Tracts: Risky Age": SFAgeTracts,
}
var SF_layers = {
"Crashes": SFCrashLayer,
"Streets": SFStreetsLayer,
}
L.control.layers(SF_tractlayers, SF_layers).addTo(SFmap);
var SJ_tractlayers = {
"Tracts: Poverty": SJPovertyTracts,
"Tracts: Risky Age": SJAgeTracts,
}
var SJ_layers = {
"Crashes": SJCrashLayer,
"Streets": SJStreetsLayer,
}
L.control.layers(SJ_tractlayers, SJ_layers).addTo(SJmap);
var LB_tractlayers = {
"Tracts: Poverty": LBPovertyTracts,
"Tracts: Risky Age": LBAgeTracts,
}
var LB_layers = {
"Crashes": LBCrashLayer,
"Streets": LBStreetsLayer,
}
L.control.layers(LB_tractlayers, LB_layers).addTo(LBmap);
</script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawVisualizations);
function drawVisualizations() {
var speed_data = google.visualization.arrayToDataTable([
['City', '25mph', '35mph', '50mph','65mph'],
['Long Beach', 0, 13, 3, 8],
['San Francisco', 9, 14, 0, 7],
['San Jose', 12, 15, 0, 9]
]);
var PovAge_data = google.visualization.arrayToDataTable([
['Poverty', 'Risky Age'],
[40.1, 24.3],
[22.3, 13.8],
[12.1, 10.6],
[22.3, 13.8],
[23.4, 18.2],
[25.7, 18.7],
[34.9, 10.9],
[51.3, 15.4],
[25.3, 13.8],
[25.6, 15.8],
[33.1, 13.9],
[34.4, 16.8],
[14, 12.2],
[29.1, 11.2],
[22.3, 13.8],
[25.9, 24.1],
[8.2, 16.8],
[34.3, 21.6],
[20.5, 15],
[17.5, 15.4],
[25.3, 13.8],
[26.8, 15.8],
[40.1, 24.3],
[48.8, 19.8],
[15.8, 13.2],
[14.8, 23.4],
[21.3, 14.4],
[35.4, 25.4],
[31.9, 17.2],
[28.6, 20.8],
[33.3, 17],
[65.5, 24.8],
[21.4, 21.4],
[29.3, 13.4],
[13.6, 18],
[13.1, 19.3],
[17.1, 15.9],
[20.2, 22.4],
[24.2, 16.4],
[0, 30.3],
[29.4, 20.5],
[28.6, 23],
[16.5, 6.6],
[38.3, 23.7],
[38.3, 23.7],
[38.3, 23.7],
[30.2, 18.3],
[26.2, 23.4],
[34.2, 19.8],
[31.5, 13.8],
[26.9, 41.9],
[31.5, 13.8],
[39.4, 18.5],
[50.3, 17.2],
[20.3, 6],
[39.4, 18.5],
[23.3, 7.9],
[31.3, 16.5],
[44.8, 26.6],
[20.7, 11.8],
[40.8, 21],
[42.1, 24.6],
[37.6, 18.3],
[29.5, 12.6],
[20.7, 11.8],
[7.8, 8.9],
[0, 0],
[25.5, 18.7],
[25.4, 21.5],
[18.3, 21.9],
[43.3, 18.6],
[20.7, 36.9],
[26.7, 23],
[15.2, 19.2],
[20.7, 22.1],
[12.3, 19.8],
[43.3, 18.6],
[0, 0],
[54.1, 51.4],
[43.3, 18.6],
[46.9, 17.9],
[25.3, 11.6],
[19.9, 16.3],
[18.7, 17.7],
[0, 0],
[46.9, 17.9],
[28.9, 23.7],
[24.2, 12.4],
[40.9, 20.8],
[8, 15.1],
[83.3, 15],
[28, 29.4]
]);
var barchart = new google.visualization.ColumnChart(document.getElementById('bar'));
barchart.draw(speed_data,{
title: 'Speed Limits of Accident Locations by City',
hAxis: {title: 'City', titleTextStyle: {color: 'blue'}}
});
var scatter = new google.visualization.ScatterChart(document.getElementById('scatter'));
scatter.draw(PovAge_data,{
title: 'Relationship of Age and Poverty in Accident Location Tracts ',
hAxis: {title: '% Risky Age'},
vAxis: {title: '% Poverty'},
legend: 'none'
});
}
</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.
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment