viewof tenure = Inputs.select(["rent", "own", "all"])
map = {
const container = html`<div style="height:600px;">`;
yield container;
const map = L.map(container).setView([38.04,-78.49], 13);
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 values = Object.values(acsData[tenure].prop_no_vehicle);
const scale = chroma.scale(['yellow', '008ae5']).domain([Math.min(...values), Math.max(...values)]);
const onEachFeature = (feature, layer) => {
const propNoVehicle = acsData[tenure].prop_no_vehicle[feature.properties.GEOID10];
layer.bindTooltip(`Blockgroup ${feature.properties.GEOID10}: ${(propNoVehicle * 100).toFixed(2)}%`);
}
const geoJSONLayer = L.geoJSON(blockgroups, {
onEachFeature: onEachFeature,
style: (feature) => {
const propNoVehicle = acsData[tenure].prop_no_vehicle[feature.properties.GEOID10];
const color = scale(propNoVehicle);
return {
color: "black",
fillColor: color,
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;
}
blockgroups = await FileAttachment("tl_2010_51_bg10.geojson").json();
acsData = {
const rows = await FileAttachment("tenure_by_vehicles_available@1.csv").csv({typed: true});
const reshaped = {};
for (let row of rows) {
for (let key of Object.keys(row)) {
if (key.startsWith("prop_")) {
const tenure = key.match(/prop_([a-z]+)/)[1];
const item = key.replace(`${tenure}_`, '');
reshaped[tenure] ||= {};
reshaped[tenure][item] ||= {};
reshaped[tenure][item][row.geoid] = row[key];
}
}
}
return reshaped;
}
chroma = require('chroma-js')
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.
