Published
Edited
Apr 28, 2020
2 stars
map = {
let container = DOM.element('div',{ style: `width:${width}px;height:${width/1.2}px` });
yield container;
let map = L.map(container, { minZoom: 11, maxZoom: 14.5 })
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
map.setView([42.34, -71.1], 11.5); // initializes the map, sets zoom & coordinates
let busLayer = L.geoJson(busRoutes, {
weight: 2.5,
filter: f => {
let r = f.properties.MBTA_ROUTE, filter = false;
for (let i = 0; i < ridershipData.length; i++) {
if (r == ridershipData[i].route) { filter = true; break; }
else { continue }
}
return filter;
},
onEachFeature: (f,l) => {
let ridership = getDataForFeature(f.properties.MBTA_ROUTE);
let r = +f.properties.MBTA_ROUTE;
let routename = (r<700) ? "Route " + r :
(r === 741) ? "Silver Line 1" :
(r === 742) ? "Silver Line 2" :
(r === 743) ? "Silver Line 3" :
"Silver Line 5";
l.bindPopup('<h4>'+routename + '</h4><br/>Currently carrying ' + (100-ridership) + '% of its pre-COVID19 ridership');
},
style: f => {
let r = f.properties.MBTA_ROUTE;
return { color: getColor(r) };
}
}).addTo(map);
let legend = L.control({position: 'bottomleft'})
legend.onAdd = function (map) {var div = L.DomUtil.create('div', 'legend'); return l};
legend.addTo(map);
}
import {legend} from "@d3/color-legend"
l = legend({
color: colorRamp,
title: "Bus ridership as a percentage of pre-pandemic ridership (%)",
tickFormat: d => d+"%"
})
getDataForFeature = (d) => {
let a = false;
for (let i = 0; i < ridershipData.length; i++) {
if (d == ridershipData[i].route) { a = ridershipData[i].p; break; }
else { continue }
}
return a;
}
function getColor(d) {
let data = getDataForFeature(d);
return data ? colorRamp(100-data) : '#fff' ;
}
colorRamp = d3.scaleLinear()
.domain([40, 10])
.range(["#b10026", "#fdd49e"])
ridershipData = [
{route: '01', p: 79},
{route: '66', p: 82},
{route: '28', p: 60},
{route: '23', p: 65},
{route: '749', p: 68},
{route: '39', p: 78},
{route: '111', p: 67},
{route: '32', p: 78},
{route: '57', p: 82},
{route: '22', p: 66},
{route: '743', p: 71},
{route: '741', p: 80},
{route: '66', p: 82},
{route: '77', p: 81},
{route: '70', p: 74},
{route: '09', p: 90},
{route: '116', p: 72},
{route: '73', p: 89},
{route: '86', p: 83},
{route: '742', p: 91},
{route: '16', p: 73}
]
busRoutes = {
let response = await fetch('https://gist.githubusercontent.com/vigorousnorth/dd35a2db81c4c030e75f5fa82a414005/raw/316b349e32e38ab920958401b7ee4c81963e1187/MTBAKeyRoutes.json');
let json = await response.json();
return json.features
}
L = require('leaflet@1.2.0')
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
d3 = require('d3@5.0')
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.