I map 🗺️ & graph 📈 data 🈸
Published
Edited
Jul 8, 2018
2 forks
6 stars
Chicago Taxi Trips Deck.gl Grid MapChicago Traffic TrackerChicago Average Daily Traffic Counts Deck.gl MapChicago Traffic Crashes Deck.gl HeatmapChicago Average Daily Traffic CountsChicago Red Light Camera ViolationsChicago Red Light Camera LocationsChicago Speed Camera ViolationsChicago Speed Camera LocationsChicago Community Areas VegaChicago Homicides Leaflet MapChicago Homicides by Community Area LeafletChicago Community Areas LeafletLeaflet Pixi OverlayChicago Crimes HeatmapChicago Crimes Hexgrid Map
Charter schools in Los Angeles County
Also listed in…
Random Bits
map = {
// create map container
let mapContainer = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield mapContainer;
// create leaflet map with attributions
let map = L.map(mapContainer).setView([34.1, -118.25], 10);
let osmLayer = L.tileLayer( // 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png')
'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
attribution: '© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors, © <a href=\"http://cartodb.com/attributions\">CartoDB</a>',
detectRetina: false,
maxZoom: 18,
minZoom: 10,
noWrap: false,
subdomains: 'abc'
}).addTo(map);
// create school points for the heatmap layer
let schoolPoints = schools.features.map(feature =>
feature.geometry.coordinates.slice().reverse().concat([0.1])); // intensity
// add heatmap layer
let schoolsHeatLayer = heatLayer(schoolPoints, {
minOpacity: 0.5,
maxZoom: 18,
max: 1.0,
radius: 8,
blur: 5,
gradient: null
}).addTo(map);
// add school markers
let markers = markerCluster({});
let schoolsLayer = L.geoJson(schools, {
onEachFeature: function (feature, layer) {
const school = feature.properties;
const html = `<div class="popup"><h2>${school.name}</h2>` +
`<p>${school.district} District</p><p>grades: ${school.grades_served}</p></div>`
layer.bindPopup(html);
layer.bindTooltip(`${school.name}, ${school.grades_served}`, {sticky: true});
}
});
markers.addLayer(schoolsLayer);
map.addLayer(markers);
// map.fitBounds(markers.getBounds());
// add fullscreen toggle
fullScreen({
position: 'topright',
title: 'full screen',
titleCancel: 'exit full screen',
forceSeparateButton: true,
}).addTo(map);
map.on('enterFullscreen', function(){
console.log('entered fullscreen');
});
}
popUpCss = html`<style type="text/css">
div.popup p { margin: 4px 0; }
</style>`
L = require('leaflet@1.2.0')
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' />`
fullScreen = L, require('leaflet.fullscreen@1.4.5').catch(() => L.control.fullscreen)
fullScreenCSS = html`<link href='${resolve('leaflet.fullscreen@1.4.5/Control.FullScreen.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.