Published
Edited
Oct 27, 2021
Insert cell
Insert cell
Insert cell
data = FileAttachment("FFW_Data_2016.json").json()
Insert cell
geojson = {
return {
'type' : "FeatureCollection",
'features': []
}
}
Insert cell
{
data.forEach(obj=>{
let feature = {
type: "Feature",
geometry: {
type: "Point",
coordinates: [obj.Longitude, obj.Latitude]
},
properties: {
year: obj.Year,
temp: obj['Temperature (F)']
}
}
geojson.features.push(feature)
})
return geojson
}
Insert cell
import {Scrubber} from "@mbostock/scrubber"
Insert cell
years = [...new Set(geojson.features.map(obj => obj.properties.year))].sort();
Insert cell
filtered = geojson.features.filter(obj=>obj.properties.year == yearsAnimate)
Insert cell
Insert cell
<div id="map" style="height:400px;bottom-margin:50px;">
Insert cell
mapboxgl = require("mapbox-gl")
Insert cell
mapboxgl.accessToken = 'pk.eyJ1IjoicnRydWppbGxvIiwiYSI6ImNrdjlhZDI1bDJieDQzMHFwNTltd2xmOWUifQ.wRvTxkixy-uyCAkEPvSoLA';
Insert cell
map.updateFeatures(filtered)
Insert cell

map = {

let map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v11', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});

map.on('load',function(){

// Add a geojson point source.
// Heatmap layers also work with a vector tile source.
map.addSource('fireflies', {
'type': 'geojson',
'data': geojson
});
map.addLayer({
'id': 'fireflies-heat',
'type': 'heatmap',
'source': 'fireflies',
'maxzoom': 9,
'paint': {
// Increase the heatmap weight based on frequency and property magnitude
'heatmap-weight': [
'interpolate',
['linear'],
['get', 'temp'],
0,
0,
6,
1
],
// Increase the heatmap color weight weight by zoom level
// heatmap-intensity is a multiplier on top of heatmap-weight
'heatmap-intensity': [
'interpolate',
['linear'],
['zoom'],
0,
1,
9,
3
],
// Color ramp for heatmap. Domain is 0 (low) to 1 (high).
// Begin color ramp at 0-stop with a 0-transparancy color
// to create a blur-like effect.
'heatmap-color': [
'interpolate',
['linear'],
['heatmap-density'],
0,
'rgba(33,102,172,0)',
0.2,
'rgb(103,169,207)',
0.4,
'rgb(209,229,240)',
0.6,
'rgb(253,219,199)',
0.8,
'rgb(239,138,98)',
1,
'rgb(178,24,43)'
],
// Adjust the heatmap radius by zoom level
'heatmap-radius': [
'interpolate',
['linear'],
['zoom'],
0,
2,
9,
20
],
// Transition from heatmap to circle layer by zoom level
'heatmap-opacity': [
'interpolate',
['linear'],
['zoom'],
7,
1,
9,
0
]
}
},
'waterway-label'
);
map.addLayer(
{
'id': 'fireflies-point',
'type': 'circle',
'source': 'fireflies',
'minzoom': 7,
'paint': {
// Size circle radius by earthquake magnitude and zoom level
'circle-radius': [
'interpolate',
['linear'],
['zoom'],
7,
['interpolate', ['linear'], ['get', 'temp'], 1, 1, 6, 4],
16,
['interpolate', ['linear'], ['get', 'temp'], 1, 5, 6, 50]
],
// Color circle by earthquake magnitude
'circle-color': [
'interpolate',
['linear'],
['get', 'temp'],
1,
'rgba(33,102,172,0)',
2,
'rgb(103,169,207)',
3,
'rgb(209,229,240)',
4,
'rgb(253,219,199)',
5,
'rgb(239,138,98)',
6,
'rgb(178,24,43)'
],
'circle-stroke-color': 'white',
'circle-stroke-width': 1,
// Transition from heatmap to circle layer by zoom level
'circle-opacity': [
'interpolate',
['linear'],
['zoom'],
7,
0,
8,
1
]
}
},
'waterway-label'
);
})

function updateFeatures(data){
let newgeojson = {
'type' : "FeatureCollection",
'features': data
};
map.getSource('fireflies').setData(newgeojson);
}

return Object.assign( map, {updateFeatures} );
}

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