Skip to content

Commit

Permalink
merge
Browse files Browse the repository at this point in the history
  • Loading branch information
@mktle
mktle committed May 11, 2024
2 parents a56fa3b + 18e1862 commit 59d5791
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 45 deletions.
14 changes: 12 additions & 2 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,17 @@

<div class="intro-container">
<h2>How are transportation options and rent prices limiting your access to high-paying jobs?</h2>
<p>As rent prices climb in the Boston area, many tenants are being driven farther away from the center of the city<sup><a href="https://www.cbsnews.com/boston/news/boston-high-rent-city-workers-city-council-residence-requirement/">1</a>, <a href="https://www.forbes.com/sites/andrewdepietro/2023/01/24/the-average-rent-in-boston-now-rivals-bay-area-cities/?sh=7e5080d9434b">2</a></sup>. Unfortunately, this displacement often means living farther away from areas that are dense with high-paying job opportunities. Though many workers resort to long daily commutes, studies have also found that increased commute times are associated with reduced work and life satisfaction and decreased physical health<sup><a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC9819363/">3</a></sup>.</p>
<p>As rent prices climb in the Boston area, many tenants are being driven farther away from the center of the city<sup><a href="https://www.cbsnews.com/boston/news/boston-high-rent-city-workers-city-council-residence-requirement/">1</a>, <a href="https://www.forbes.com/sites/andrewdepietro/2023/01/24/the-average-rent-in-boston-now-rivals-bay-area-cities/?sh=7e5080d9434b">2</a></sup>. Unfortunately, this displacement often means living farther away from areas that are dense with high-paying job opportunities.</p>
<h3>Effects on mental and physical health</h3>
<p>
The trade off between affordability and commute time carries dire implications to overall health. According to the Metropolitan Area Planning Council (MAPC),
a record <b>51% of Greater Boston renters are considered rent burdened</b>, spending more than the recommended maximum 30% of their monthly income on housing.
Several longitudinal studies have documented how stress related to housing affordability and housing cost burden is significantly associated with
declines in mental health and emotional well-being<sup><a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8435361/">3</a></sup>.
While many resort to long daily commutes, studies have also found that increased commute times are associated with reduced work
and life satisfaction and decreased physical health<sup><a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC9819363/">4</a></sup>.
</p>
<h3>The trade-off between rent, commute time, and salary</h3>
<p>But just how large is the trade-off between rent and commute time? Our analyses find that in the Boston area, a <b>$100 increase in rent</b> per bedroom is about equivalent to a <b>1 minute and 45 second decrease in commute</b> time.</p>

<div id="commutePlot"></div>
Expand All @@ -124,4 +134,4 @@
line-height: 2;
}
</style>
</style>
169 changes: 126 additions & 43 deletions src/routes/dashboard/Dashboard.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@
let salaryLayerId;
let salaryLineLayerId;
let salarySourceId = "boston_cambridge_salary";
let dashboardLayerId;
let dashboardLineLayerId;
let dashboardSourceId = 'boston_cambridge_all';
let mbtaLayerId;
let mbtaOutlineLayerId;
Expand Down Expand Up @@ -359,6 +362,35 @@
'layout': {'visibility': 'none'},
});
// ADD DASHBOARD LAYER
map.addSource(dashboardSourceId, {
type: 'geojson',
data: 'https://raw.githubusercontent.com/yoakiyama/zoning-dashboard-fp/main/data/Boston_Cambridge_all.geojson',
generateId: false
});
dashboardLayerId = 'boston_cambridge_all';
dashboardLineLayerId = 'boston_cambridge_all_outline';
map.addLayer({
'id': dashboardLayerId,
'source': dashboardSourceId,
'type': 'fill',
'paint': {
'fill-color': 'hsla(200, 100%, 100%, 0.8)'
},
'layout': {'visibility': 'none'},
});
map.addLayer({
'id': dashboardLineLayerId,
'source': dashboardSourceId,
'type': 'line',
'paint': {
'line-color': defaultOutlineColor,
'line-opacity': 0.95
},
'layout': {'visibility': 'none'},
});
// When clicking on map colored by rent
Expand Down Expand Up @@ -397,6 +429,7 @@
selectedCommute = 60;
dashboard = true;
showSidePanel = true;
colorDashboard()
} else {
console.log("you can't click that neighborhood")
}
Expand Down Expand Up @@ -443,18 +476,18 @@
if (map) {
if (option === 'rent') {
console.log(selectedRent);
colorbyRent();
//colorbyRent();
commuteColor=false;
rentColor=true;
salaryColor=false;
} else if (option === 'commute') {
console.log(selectedCommute);
colorbyCommute();
//colorbyCommute();
commuteColor=true;
rentColor=false;
salaryColor=false;
} else if (option == 'salary') {
colorbySalary();
//colorbySalary();
commuteColor=false;
rentColor=false;
salaryColor=true;
Expand All @@ -470,6 +503,22 @@
console.log(rentVar)
}
function colorDashboard() {
map.setLayoutProperty(rentFillLayerId, 'visibility', 'none');
map.setLayoutProperty(rentOutlineLayerId, 'visibility', 'none');
map.setLayoutProperty(commuteLayerId, 'visibility', 'none');
map.setLayoutProperty(commuteLineLayerId, 'visibility', 'none');
for (const layerId of transitLayers) {
map.setLayoutProperty(layerId, 'visibility', 'none');
}
map.setLayoutProperty(transitStopsLayerId, 'visibility', 'none');
map.setLayoutProperty(salaryLayerId, 'visibility', 'none');
map.setLayoutProperty(salaryLineLayerId, 'visibility', 'none');
map.setLayoutProperty(dashboardLayerId, 'visibility', 'visible');
map.setLayoutProperty(dashboardLineLayerId, 'visibility', 'visible');
}
function colorbyRent() {
map.setLayoutProperty(rentFillLayerId, 'visibility', 'visible');
map.setLayoutProperty(rentOutlineLayerId, 'visibility', 'visible');
Expand Down Expand Up @@ -634,15 +683,12 @@
maxRent, rentMaxColor, // End of your gradient (e.g., $3000)
]
]);
rentData.forEach(function(feature) {
var isRentBelowSelected = feature.properties.avg_per_bed < selectedRent;
rentState[feature.id] = isRentBelowSelected;
});
} else {
map.setPaintProperty(rentFillLayerId, 'fill-color', [
map.setPaintProperty(dashboardLayerId, 'fill-color', [
'case',
['>', ['get', 'avg_salary'], selectedSalary], // New condition for average salary
['>', ['get', clickedNeighborhood], selectedCommute],
unavailableColor,
['<', ['get', 'avg_salary'], selectedSalary], // New condition for average salary
unavailableColor,
['>', ['get', rentVar], selectedRent],
unavailableColor,
Expand All @@ -654,12 +700,11 @@
maxRent, rentMaxColor, // End of your gradient (e.g., $3000)
]
]);
rentData.forEach(function(feature) {
}
rentData.forEach(function(feature) {
var isRentBelowSelected = feature.properties.avg_per_bed < selectedRent;
rentState[feature.id] = isRentBelowSelected;
});
}
addColorLegend(colorLegendElement, "Average rent per bedroom", minRent, maxRent, rentMinColor, rentMaxColor);
}
}
Expand All @@ -670,23 +715,42 @@
minSalary = 40;
maxSalary = 180;
map.setPaintProperty(salaryLayerId, 'fill-color', [
'case',
['<', ['get', 'avg_salary'], selectedSalary],
unavailableColor,
[
'interpolate',
['linear'],
['get', 'avg_salary'],
minSalary, salaryMinColor, // Start of your gradient (e.g., $0)
maxSalary, salaryMaxColor, // End of your gradient (e.g., $3000)
]
]);
if (!dashboard) {
map.setPaintProperty(salaryLayerId, 'fill-color', [
'case',
['<', ['get', 'avg_salary'], selectedSalary],
unavailableColor,
[
'interpolate',
['linear'],
['get', 'avg_salary'],
minSalary, salaryMinColor, // Start of your gradient (e.g., $0)
maxSalary, salaryMaxColor, // End of your gradient (e.g., $3000)
]
]);
} else {
map.setPaintProperty(dashboardLayerId, 'fill-color', [
'case',
['>', ['get', clickedNeighborhood], selectedCommute],
unavailableColor,
['<', ['get', 'avg_salary'], selectedSalary], // New condition for average salary
unavailableColor,
['>', ['get', rentVar], selectedRent],
unavailableColor,
[
'interpolate',
['linear'],
['get', 'avg_salary'],
minSalary, salaryMinColor, // Start of your gradient (e.g., $0)
maxSalary, salaryMaxColor, // End of your gradient (e.g., $3000)
]
]);
}
var features = map.querySourceFeatures(salarySourceId);
features.forEach(function(feature) {
var isSalaryBelowSelected = feature.properties['avg_salary'] <= selectedSalary;
salaryState[feature.id] = isSalaryBelowSelected;
var isSalaryAboveSelected = feature.properties['avg_salary'] > selectedSalary;
salaryState[feature.id] = isSalaryAboveSelected;
});
addColorLegend(colorLegendElement, "Average salary ($/hour)", minSalary, maxSalary, salaryMinColor, salaryMaxColor);
}
Expand All @@ -700,22 +764,41 @@
const commutes = await fetchCommuteData(clickedNeighborhood);
minCommute = commutes.minCommute;
maxCommute = commutes.maxCommute;
map.setPaintProperty(commuteLayerId, 'fill-color', [
'case',
['==', ['get', clickedNeighborhood], 180],
unavailableColor, // Placeholder for NaN, no commute time data so greyed out
['case',
['>', ['get', clickedNeighborhood], selectedCommute],
unavailableColor,
[
'interpolate',
['linear'],
['get', clickedNeighborhood],
minCommute, commuteMinColor,
maxCommute, commuteMaxColor,
]]
]);
if (!dashboard) {
map.setPaintProperty(commuteLayerId, 'fill-color', [
'case',
['==', ['get', clickedNeighborhood], 180],
unavailableColor, // Placeholder for NaN, no commute time data so greyed out
['case',
['>', ['get', clickedNeighborhood], selectedCommute],
unavailableColor,
[
'interpolate',
['linear'],
['get', clickedNeighborhood],
minCommute, commuteMinColor,
maxCommute, commuteMaxColor,
]]
]);
} else {
map.setPaintProperty(dashboardLayerId, 'fill-color', [
'case',
['>', ['get', clickedNeighborhood], selectedCommute],
unavailableColor,
['<', ['get', 'avg_salary'], selectedSalary], // New condition for average salary
unavailableColor,
['>', ['get', rentVar], selectedRent],
unavailableColor,
[
'interpolate',
['linear'],
['get', clickedNeighborhood],
minCommute, commuteMinColor,
maxCommute, commuteMaxColor,
]
]);
}
for (const layerId of transitLayers) {
map.setPaintProperty(layerId, 'line-opacity', [
'case',
Expand Down

0 comments on commit 59d5791

Please sign in to comment.