md`# Earthquake GeoJSON + Views + More Interactive`
html `<div id='map' style="height: 400px;"></div>`
md`The current magnitude shown is between ${range[0]} and ${range[1]}.`
import {rangeSlider} from '@mootari/range-slider'
viewof range = rangeSlider({
min: 0,
max: 10,
value: [4.7, 7.4],
precision: 1, // how many decimal places
title: 'Ranges of magnitude between 0 and 10',
})
range
quakesLayer = {
var map = L.map('map').setView([24.75, -20.65], 2);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
function onEachFeature(feature, layer) {
var popupContent = "Earthquake magnitude: " +
feature.properties.mag;
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
}
const quakesLayer = L.geoJson(earthQ, {
filter: function(feature, layer, latlng) {
//return feature.properties.mag <= z && feature.properties.mag >= x;
return L.circleMarker(latlng, geojsonMarkerOptions);
},
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 0,
fillOpacity: 0.8
});
}
}).addTo(map);
map.fitBounds(quakesLayer.getBounds());
invalidation.then(() => map.remove()); // clean up when rerunning the cell
return quakesLayer;
}
mutable z = range[1]
mutable x = range[0]
quakesLayer.eachLayer(quakeLayer => {
const opacity = ((quakeLayer.feature.properties.mag > range[0])
&& (quakeLayer.feature.properties.mag < range[1]))
? 1 : 0;
quakeLayer.setStyle({fillOpacity: opacity})
})
md`# Data`
earthQ = d3.json("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson")
L = {
const L = await require("leaflet@1/dist/leaflet.js");
if (!L._style) {
const href = await require.resolve("leaflet@1/dist/leaflet.css");
document.head.appendChild(L._style = html`<link href=${href} rel=stylesheet>`);
}
return L;
}
d3 = require('d3@5')
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.
