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')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
