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' />`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.