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);
// data mapping patch
communities['lake view'] = communities['lakeview'];
communities['ohare'] = communities["o'hare"];
// create communities map layer
// todo: color by sides
const communitiesLayer = L.geoJson(geoData, {
weight: 2,
color: '#000',
onEachFeature: function (feature, layer) {
const communityName = feature.properties.community.toLowerCase();
const community = communities[communityName];
const html = `<div class="popup"><h4>${community.CommunityName}, ${community.Side}</h4></div>`;
layer.bindPopup(html);
layer.bindTooltip(html, {sticky: true});
}
}).addTo(map);
}
L = require('leaflet@1.3.2')
sideColors = d3[`scheme${'Pastel1'}`]
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;
}
geoData = d3.json(geoJsonUrl)
communityData = d3.csv(dataUrl)
sides = {
// group communities by side
const sides = {}
communityData.slice(1) // skip 1st null row
.map(community => {
if (!sides[community.Side]) {
sides[community.Side] = [];
}
sides[community.Side].push(community);
});
return sides;
}
communities = {
// create communities info map
const communities = {}
communityData.slice(1) // skip 1st null row
.map(community => communities[community.CommunityName.toLowerCase()] = community);
return communities;
}
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.
