md`# Census travel times`
map = {
const container = html`<div style="height:600px;">`;
yield container;
const map = L.map(container).setView([38.0400822,-78.5200792], 10);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
const tracts = await FileAttachment("tl_2020_51_tract10.geojson").json();
const times = await FileAttachment("reshaped@4.json").json();
const values = Object.values(times).map(value => {
return value.mean_travel_time;
});
const scale = chroma.scale(['yellow', '008ae5']).domain([Math.min(...values), Math.max(...values)]);
const onEachFeature = (feature, layer) => {
const record = times[feature.properties.GEOID10];
if (record) {
layer.bindTooltip(`${record.name}: ${record.mean_travel_time.toFixed(1)}`);
} else {
console.log(feature.properties.GEOID10);
}
}
const geoJSONLayer = L.geoJSON(tracts, {
onEachFeature: onEachFeature,
style: (feature) => {
const record = times[feature.properties.GEOID10];
const color = record ? scale(record.mean_travel_time) : "";
return {
color: "black",
fillColor: color,
fillOpacity: 0.4,
weight: 1
};
}
}).addTo(map);
map.on('moveend', (event) => {
const bounds = event.target.getBounds();
const layers = [];
const values = [];
map.eachLayer(layer => {
if (layer.feature) {
if (bounds.intersects(layer.getBounds())) {
layers.push(layer);
let record = times[layer.feature.properties.GEOID10];
if (record) {
values.push(record.mean_travel_time);
}
}
}
});
const scale = chroma.scale(['yellow', '008ae5']).domain([Math.min(...values), Math.max(...values)]);
layers.forEach((layer) => {
const record = times[layer.feature.properties.GEOID10];
const color = record ? scale(record.mean_travel_time) : "";
layer.setStyle({
fillColor: color,
});
});
});
}
L = {
const L = await require("leaflet@1/dist/leaflet.js");
if (!L._style) {
const href = await require.resolve("leaflet@1/dist/leaflet.css");
document.head.appendChild(L._style = html`<link href=${href} rel=stylesheet>`);
}
return L;
}
chroma = require('chroma-js')
import {Radio} from "@observablehq/inputs"
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.
