Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Multi-city version of viz #96

Merged
merged 7 commits into from
Apr 5, 2018
Merged

Multi-city version of viz #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
42b84ee
Add functionality to switch between cities and have map display the
alicefeng Mar 22, 2018
08e27ce
Remove DOW and hourly plots for now
alicefeng Apr 1, 2018
09209f9
Update dataset creation to use latest schemas for crashes and predict…
alicefeng Apr 2, 2018
5babc5d
Implement multi-city functionality
alicefeng Apr 2, 2018
969dca3
Update project name
alicefeng Apr 4, 2018
c742530
Change labeling and color scale to reflect that predictions are risk …
alicefeng Apr 5, 2018
d9ab695
Update datasets viz uses to latest versions based on data standards.
alicefeng Apr 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3,207 changes: 0 additions & 3,207 deletions reports/cad.geojson
View file
Open in desktop

This file was deleted.

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

This file was deleted.

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

Large diffs are not rendered by default.

6 changes: 5 additions & 1 deletion reports/css/style.css
View file
Open in desktop
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
Open in desktop
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