Published
Edited
Apr 12, 2022
map = {
let h = (width<600) ? width + 200: width * 0.75,
z = (width<600) ? 6.5 : 7,
container = DOM.element('div', { style: `width:${width}px;height:${h}px` });
yield container;
let map = L.map(container).setView([42.1, -71.8], 9); // initializes the map, sets zoom & coordinates
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
//create an empty geojson layer
//with a style and a popup on click
let tractsOverlay = L.geoJson(tracts, {
style: function(feature) {
let blackPop = feature.properties.B02001003, totPop = feature.properties.B02001001,
blackPct = (blackPop/totPop).toFixed(2),
c = (blackPct>0.1) ? colorRamp(blackPct) : '#fff',
o = (blackPct>0.1) ? 0.8 : 0;
return {
color : c,
stroke: '#999',
opacity: 1,
weight: 0.5,
fillOpacity: o
}
},
onEachFeature: function(feature, layer) {
let blackPop = feature.properties.B02001003, totPop = feature.properties.B02001001,
blackPct = (blackPop/totPop * 100).toFixed(2);
layer.bindPopup('<h4>'+feature.properties.name+'</h4><p>Black population: '+blackPop+'<br/>Total population: ' + totPop + '</p>')
}
}).addTo(map);
var geojsonMarkerOptions = {
radius: 5,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.25
};
let crashOverlay = L.geoJson(crashGeo, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}
}).addTo(map);
let legend = L.control({position: 'bottomleft'})
legend.onAdd = function (map) {var div = L.DomUtil.create('div', 'legend'); return l};
legend.addTo(map);
}
L = require('leaflet@1.2.0')
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
topojson = require("topojson-client@3")
crashGeo = {
let a = new Object;
a.type = "FeatureCollection";
a.features = crashArray;
yield a;
}
crashArray = crashes.map( d => {
let o = new Object;
o.type = "Feature";
o.properties = d;
o.geometry = {"type":"Point", "coordinates": [+d.lon,+d.lat]};
return o;
});
crashes = FileAttachment("MassFatalCrashes.csv").csv()
tracts = FileAttachment("acs2019_5yr_B02001_14000US25021415101@1.geojson").json();
import {legend} from "@d3/color-legend"
colorRamp = d3.scaleLinear()
.domain([0.08, 0.50])
.range([ "#fff", "blue"])
l = legend({
color: colorRamp,
title: "% Black population by Census tract",
tickFormat: d => (d*100)+"%"
})
d3 = require('d3@5.0')
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.
