I map 🗺️ & graph 📈 data 🈸
map = {
// create map container and leaflet map
const mapContainer = DOM.element('div', {style: `width:${width}px;height:${width/1.6}px`});
yield mapContainer;
const map = createMap(mapContainer);
// create data points for the heatmap layer
let dataPoints = homicides.map(h => [h.Latitude, h.Longitude, 0.1]); // intensity
// add heatmap layer
/*
let dataHeatLayer = heatLayer(dataPoints, {
minOpacity: 0.5,
maxZoom: 18,
max: 1.0,
radius: 8,
blur: 5,
gradient: null
}).addTo(map);
*/
// add clustered markers
let markers = markerCluster({});
let markersLayer = L.geoJson(createGeoData(homicides), {
onEachFeature: function (feature, layer) {
const data = feature.properties;
const html = `<div class="popup"><h3>${data.block}</h3>` +
`<p>(${data.location.toLowerCase()})<br />${data.info}<br />${data.date}</p></div>`;
layer.bindPopup(html);
layer.bindTooltip(html, {sticky: true});
}
});
markers.addLayer(markersLayer);
map.addLayer(markers);
// map.fitBounds(markers.getBounds());
}
function createMap(mapContainer) {
// create Stamen leaflet toner map with attributions
const map = L.map(mapContainer).setView([41.85, -87.68], 10); // Chicago origins
const mapTiles = '//stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png';
const osmCPLink = '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
const mapCPLink = '<a href="http://maps.stamen.com/toner">Stamen Design</a>';
const tileLayer = L.tileLayer(mapTiles, {
attribution: `${osmCPLink} | ${mapCPLink}`,
detectRetina: false,
maxZoom: 18,
minZoom: 10,
noWrap: false,
subdomains: 'abc'
}).addTo(map);
return map;
}
popUpCss = html`<style type="text/css">
div.popup p { margin: 4px 0; }
</style>`
function createGeoData(homicides) {
const geoData = {
type: 'FeatureCollection',
crs: {type: 'name', properties: {name: 'urn:ogc:def:crs:OGC:1.3:CRS84'}},
features: []
};
homicides.map(h => {
geoData.features.push({
type: 'Feature',
properties: {
block: h.Block,
location: h['Location Description'],
info: h.Description,
date: h.Date
},
geometry: {
type: 'Point',
coordinates: [h.Longitude, h.Latitude]
}
});
});
return geoData;
}
d3 = require('d3') // for csv data load
L = require('leaflet@1.3.2')
leafletCSS = html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
heatLayer = L, require('leaflet.heat').catch(() => L.heatLayer)
markerCluster = L, require('leaflet.markercluster@1.1.0').catch(() => L.markerClusterGroup)
markerClusterCSS = html`<link href='${resolve('leaflet.markercluster@1.1.0/dist/MarkerCluster.Default.css')}' rel='stylesheet' />`
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.
