md`# LODES origin by destination`
viewof mode = Radio(["by work", "by home"], {label: "mode", value: "by work"})
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.on({
click: (e) => {
const workID = feature.properties.GEOID10;
const map = mode === "by work" ? countsByWork : countsByHome;
if (map[workID]) {
const values = Object.values(map[workID]);
const scale = chroma.scale(['yellow', '008ae5']).domain([Math.min(...values), Math.max(...values)]);
geoJSONLayer.eachLayer(layer => {
const homeID = layer.feature.properties.GEOID10;
const value = map[workID][homeID];
layer.unbindTooltip();
if (value) {
layer.setStyle({fillColor: scale(value)});
layer.bindTooltip(`Tract ${homeID}: ${value}`);
} else {
layer.setStyle({fillColor: "white"});
}
})
}
}
});
}
const geoJSONLayer = L.geoJSON(tracts, {
onEachFeature: onEachFeature,
style: (feature) => {
return {
color: "black",
fillColor: "white",
fillOpacity: 0.4,
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')
import {Radio} from "@observablehq/inputs"
lodesCSV = await FileAttachment("bytract.csv").csv({typed: true});
countsByWork = {
const countsByWork = {};
for (let row of lodesCSV) {
countsByWork[row.w_tract] = countsByWork[row.w_tract] || {};
countsByWork[row.w_tract][row.h_tract] = row.S000;
}
return countsByWork;
}
countsByHome = {
const countsByHome = {};
for (let row of lodesCSV) {
countsByHome[row.h_tract] = countsByHome[row.h_tract] || {};
countsByHome[row.h_tract][row.w_tract] = row.S000;
}
return countsByHome;
}
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.
