Skip to content

Commit

Permalink
Merge pull request #96 from Data4Democracy/make-mvp
Browse files Browse the repository at this point in the history 
Multi-city version of viz
  • Loading branch information
@alicefeng
alicefeng authored Apr 5, 2018
2 parents 505c4cf + d9ab695 commit b12418e
Show file tree
Hide file tree
Showing 10 changed files with 162,866 additions and 110,272 deletions.
3,207 changes: 0 additions & 3,207 deletions reports/cad.geojson
View file

This file was deleted.

106,818 changes: 0 additions & 106,818 deletions reports/car_preds_named.json
View file

This file was deleted.

17,280 changes: 17,280 additions & 0 deletions reports/crashes.geojson
View file

Large diffs are not rendered by default.

6 changes: 5 additions & 1 deletion reports/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ h4 {
font-weight: normal;
}

#city_selection {
padding: 20px 0px 0px 2px;
}

.wrapper {
display: grid;
grid-template-columns: 50% 50%;
Expand Down Expand Up @@ -151,7 +155,7 @@ select {
}

.colors {
background: linear-gradient(to right, #ffffb2, #fecc5c, #fd8d3c, #e31a1c);
background: linear-gradient(to right, #ffe0b2, #ffb74d, #ff9800, #f57c00);
}

.label {
Expand Down
94 changes: 63 additions & 31 deletions reports/historical_crash_map.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>

<title>Historical Crash Map</title>
<title>Crash Modeling</title>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand All @@ -22,30 +22,38 @@
</head>
<body>
<div id="header">
<h1>Crashes on Boston's Streets in 2016</h1>
<h1>Crash Modeling</h1>
</div>

<div id="content">
<div id="city_selection">
<label for="city_selector">Select Your City:</label>
<select id="city_selector" autocomplete="off">
<option value="boston">Boston, MA</option>
<option value="cambridge">Cambridge, MA</option>
<option value="dc">Washington, DC</option>
</select>
</div>
<div class="wrapper">
<div class="box input_overlay">
<label for="week_selector">Week: </label>
<output for="week_selector" id="week_num">1</output>
<input type="range" id="week_selector" autocomplete="off" min="1" max="53" step="1" value="1" />
<input type="range" id="week_selector" autocomplete="off" min="1" max="52" step="1" value="1" />
</div>
<div class="box input_overlay">
<label for="week_selector">Comparison Week: </label>
<output for="week_selector" id="compare_week">1</output>
<input type="range" id="compare_week_selector" autocomplete="off" min="1" max="53" step="1" value="1" />
<input type="range" id="compare_week_selector" autocomplete="off" min="1" max="52" step="1" value="1" />
</div>
<div id="before" class="map">
<div id="legend">
<h4>Predicted Crash Probability:</h4>
<h4>Risk Score:</h4>
<div class="row colors"></div>
<div class="row labels">
<div class="label">0.02</div>
<div class="label">0.03</div>
<div class="label">0.04</div>
<div class="label">0.05</div>
<div class="label">0.2</div>
<div class="label">0.4</div>
<div class="label">0.6</div>
<div class="label">0.8</div>
</div>
</div>
</div>
Expand All @@ -56,7 +64,7 @@ <h4>Predicted Crash Probability:</h4>
<h3>Total Crashes by Week</h3>
</div>

<div id="dow_barplot" class="plot">
<!-- <div id="dow_barplot" class="plot">
<h3>Crashes by Day of Week</h3>
</div>
<div id="hourly_barplot" class="plot">
Expand All @@ -65,12 +73,13 @@ <h3>Distribution of Crashes by Time of Day</h3>
<label><input type="radio" name="daytype" value="Weekday" checked="checked" autocomplete="off">Weekday</label>
<label><input type="radio" name="daytype" value="Weekend" autocomplete="off">Weekend</label>
</div>
</div>
</div> -->
</div>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="js/make_plots.js"></script>
<script src="js/update_map.js"></script>

<script>
// create base map
mapboxgl.accessToken = config.MAPBOX_TOKEN;
Expand All @@ -95,16 +104,16 @@ <h3>Distribution of Crashes by Time of Day</h3>
type: 'line',
source: {
type: 'geojson',
data: 'car_preds_named.json'
data: 'preds.json'
},
paint: {
'line-color': {
property: 'pred',
property: 'prediction',
stops: [
[0.02, '#ffffb2'],
[0.03, '#fecc5c'],
[0.04, '#fd8d3c'],
[0.05, '#e31a1c']
[0.2, '#ffe0b2'],
[0.4, '#ffb74d'],
[0.6, '#ff9800'],
[0.8, '#f57c00']
]
},
'line-width': [
Expand All @@ -114,15 +123,15 @@ <h3>Distribution of Crashes by Time of Day</h3>
],
'line-opacity': 1
},
filter: ['==', 'week', 1]
filter: ['all', ['==', 'week', 1], ['==', 'city', 'boston']]
}, 'admin-2-boundaries-dispute');

beforeMap.addLayer({
id: 'crashes',
type: 'circle',
source: {
type: 'geojson',
data: 'cad.geojson'
data: 'crashes.geojson'
},
paint: {
'circle-radius': [
Expand All @@ -134,12 +143,12 @@ <h3>Distribution of Crashes by Time of Day</h3>
'circle-stroke-color': '#9e00c5',
'circle-opacity': 0.8
},
filter: ['==', 'week', 1]
filter: ['all', ['==', 'week', 1], ['==', 'city', 'boston']]
}, 'admin-2-boundaries-dispute');

// add popup for predictions
beforeMap.on('click', 'predictions', function(e) {
var popupText = (e.features[0].properties.st_name !== "null") ? (e.features[0].properties.st_name + "<br / > Predicted Probability for Week " + e.features[0].properties.week + ": " + e.features[0].properties.pred) : ("Predicted Probability for Week " + e.features[0].properties.week + ": " + e.features[0].properties.pred);
var popupText = "Risk Score for Week " + e.features[0].properties.week + ": " + e.features[0].properties.prediction.toFixed(2);

new mapboxgl.Popup()
.setLngLat(e.lngLat)
Expand All @@ -162,16 +171,16 @@ <h3>Distribution of Crashes by Time of Day</h3>
type: 'line',
source: {
type: 'geojson',
data: 'car_preds_named.json'
data: 'preds.json'
},
paint: {
'line-color': {
property: 'pred',
property: 'prediction',
stops: [
[0.02, '#ffffb2'],
[0.03, '#fecc5c'],
[0.04, '#fd8d3c'],
[0.05, '#e31a1c']
[0.2, '#ffe0b2'],
[0.4, '#ffb74d'],
[0.6, '#ff9800'],
[0.8, '#f57c00']
]
},
'line-width': [
Expand All @@ -181,15 +190,15 @@ <h3>Distribution of Crashes by Time of Day</h3>
],
'line-opacity': 1
},
filter: ['==', 'week', 10]
filter: ['all', ['==', 'week', 1], ['==', 'city', 'boston']]
}, 'admin-2-boundaries-dispute');

afterMap.addLayer({
id: 'crashes',
type: 'circle',
source: {
type: 'geojson',
data: 'cad.geojson'
data: 'crashes.geojson'
},
paint: {
'circle-radius': [
Expand All @@ -201,12 +210,12 @@ <h3>Distribution of Crashes by Time of Day</h3>
'circle-stroke-color': '#9e00c5',
'circle-opacity': 0.8
},
filter: ['==', 'week', 10]
filter: ['all', ['==', 'week', 1], ['==', 'city', 'boston']]
}, 'admin-2-boundaries-dispute');

// add popup for predictions
afterMap.on('click', 'predictions', function(e) {
var popupText = (e.features[0].properties.st_name !== "null") ? (e.features[0].properties.st_name + "<br / > Predicted Probability for Week " + e.features[0].properties.week + ": " + e.features[0].properties.pred) : ("Predicted Probability for Week " + e.features[0].properties.week + ": " + e.features[0].properties.pred);
var popupText = "Risk Score for Week " + e.features[0].properties.week + ": " + e.features[0].properties.prediction.toFixed(2);

new mapboxgl.Popup()
.setLngLat(e.lngLat)
Expand All @@ -228,6 +237,29 @@ <h3>Distribution of Crashes by Time of Day</h3>
// Add zoom controls to map
beforeMap.addControl(new mapboxgl.NavigationControl());
afterMap.addControl(new mapboxgl.NavigationControl());

//Pan map to different city based on selection
$('#city_selector').change(function() {
city = $('#city_selector').val();
if(city === 'boston') {
beforeMap.flyTo({
center: [-71.0589, 42.3301],
zoom: 11
});
}
else if(city === 'cambridge') {
beforeMap.flyTo({
center: [-71.1097, 42.3736],
zoom: 11
});
}
else {
beforeMap.flyTo({
center: [-77.0369, 38.9072],
zoom: 11
});
}
});
</script>

</body>
Expand Down
Loading

0 comments on commit b12418e

Please sign in to comment.