map = {
const container = html`<div style="height:600px;">`;
yield container;
const map = L.map(container).setView([38.0400822,-78.5200792], 12);
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 onEachFeature = (feature, layer) => {
layer.bindPopup(feature.properties.GEOID10);
layer.on({
click: (e) => {
const workID = feature.properties.GEOID10;
if (lodesMap[workID]) {
const values = Object.values(lodesMap[workID]);
const scale = chroma.scale(['yellow', 'red', 'black']).domain([Math.min(...values), Math.max(...values)]);
geoJSONLayer.eachLayer(layer => {
const homeID = layer.feature.properties.GEOID10;
const value = lodesMap[workID][homeID];
if (value) {
console.log(value);
layer.setStyle({fillColor: scale(value)});
}
})
}
}
});
}
const geoJSONLayer = L.geoJSON(tracts, {
onEachFeature: onEachFeature,
style: (feature) => {
return {
color: "black",
fillColor: "white",
weight: 1
};
}
}).addTo(map);
}
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')
lodesMap = {
const lodesCSV = await FileAttachment("bytract.csv").csv({typed: true});
const lodesMap = {};
for (let row of lodesCSV) {
lodesMap[row.w_tract] = lodesMap[row.w_tract] || {};
lodesMap[row.w_tract][row.h_tract] = row.S000;
}
return lodesMap;
}
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.
