Published
Edited
Mar 1, 2019
Insert cell
Insert cell
Insert cell
L = require('leaflet@1.2.0')
Insert cell
Insert cell
html`<link href='https://unpkg.com/leaflet@1.2.0/dist/leaflet.css' rel='stylesheet' />`
Insert cell
Insert cell
quakes = {
let response = await fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_week.geojson');
let json = await response.json();
return json;
}
Insert cell
Insert cell
Insert cell
md`${result}`
Insert cell
Insert cell
quakesLayer = {
// See: https://leafletjs.com/examples/geojson/
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
// See: https://leafletjs.com/reference-1.4.0.html#geojson-pointtolayer
var pointToLayer = function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}
let quakesLayer = L.geoJson(quakes.features, { pointToLayer: pointToLayer }).addTo(map);


return quakesLayer;
}
Insert cell
Insert cell
viewof slider = html`<input type=range min=0 max=10 step=0.1>`
Insert cell
Insert cell
Insert cell
result = {
var count = 0;
// The bounds are here for the extra credit question.
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
// Earthquake filtering occurs here
quakesLayer.eachLayer(function(quakeLayer) { // Each earthquake has its own "layer"
var threshold = slider / 10;
// The next line uses Javascript's conditional (ternary) operator.
// If you're not familiar with this operator, then look at the following reference.
// See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
// Python version: https://docs.python.org/3/reference/expressions.html#conditional-expressions
let mag = quakeLayer.feature.properties.mag;
// let opacity = (mag > slider) && (mag <= slider+1) ? 1 : 0;
let opacity = (mag > slider) ? 1 : 0;
let lon = quakeLayer.feature.geometry.coordinates[0];
let lat = quakeLayer.feature.geometry.coordinates[1];
//If earthquake is inside bounding box or not
if (lon > sw.lng && lon < ne.lng && lat > sw.lat && lat < ne.lat) count = count + opacity;
// count = count + opacity;
quakeLayer.setStyle({opacity: opacity, fillOpacity: opacity});
});
var bnds = " \nmap bound -- sw: " + Math.round(sw.lng) + " " + Math.round(sw.lat)
+ " \nmap bound -- ne: " + Math.round(ne.lng) + " " + Math.round(ne.lat);
return count + " earthquake" + (count == 1 ? "" : "s") + " exceeding magnitude " + slider + bnds;
}
Insert cell
Insert cell
Insert cell

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.
Learn more