container = html`<div style="height: 600px;"></div>`
viewof magVar = html`<input type=range min=0 max=10 step=.5>`
viewof depVar = html`<input type=range min=0 max=50 step=5>`
magVar
depVar
{
var magFilter = function (feature) {
if (feature.properties.mag >= magVar) return true};
var depFilter = function (feature) {
if (point.properties.mag >= magVar) return true};
}
{
var map = L.map(container).setView([34.669359, -160.083985], 2.5);
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/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
$.getJSON("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson",function(data){
var datalayer = L.geoJson(data ,{
onEachFeature: function(feature, featureLayer) {
featureLayer.bindPopup("Place: " + feature.coordinates.depth + "<br/>Magnitude: " + feature.properties.mag );
}
}).addTo(map);
});
invalidation.then(() => map.remove()); // clean up when rerunning the cell
}
$ = require("https://code.jquery.com/jquery-3.3.1.js")
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.
