Digital historian at the Roy Rosenzweig Center for History and New Media, George Mason University
Public
Edited
Jan 29
parish_shp = d3.json("https://data.chnm.org/bom/geometries")
parishes = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let map = L.map(container);
let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
let districts = L.geoJson(parish_shp, {
onEachFeature: onEachFeature,
style: d => {
return {
weight: 1,
color: "#e7298a",
fillOpacity: 0.1,
fillColor: "#1b9e77",
}
}
}).addTo(map);
map.fitBounds(districts.getBounds());
// control that shows state info on hover
const info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create("div", "info");
this._div.style.backgroundColor = "#fff";
this._div.style.padding = "10px";
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML =
"<h4>Parish Information</h4>" +
(props
?
"Parish: " +
props.dbn_par +
"<br/>Start year: " +
props.start_yr +
"<br/>Subunit: " +
props.subunit +
"</br>City/County: " +
props.city_cnty || 'N/A'
: "Hover over a parish");
};
info.addTo(map);
function highlightFeature(e) {
let layer = e.target;
layer.setStyle({
stroke: true,
weight: 2,
color: "#666",
dashArray: "",
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
function resetHighlight(e) {
districts.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
}
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.
