Applying GIS, Data Vis. and Deep Learning to environmental science and nuclear emergency responses
Published
Edited
Feb 27, 2022
1 star
{
let container = html`<div style='height:800px;' />`;
// const colors = colorScale
// .range()
// .map(function (d, i) {
// if (i == 0) {
// return [0, d];
// } else {
// return [colorScale.domain()[i - 1], d];
// }
// })
// .flat();
// Give the container dimensions.
yield container;
// Create the \`map\` object with the mapboxgl.Map constructor, referencing
// the container div
let map = new mapboxgl.Map({
container,
center: [-1.12, 43.35],
zoom: 9,
style: "mapbox://styles/franckalbinet/ciyzxjgxu009y2rp9r69npafy"
});
map.addControl(new mapboxgl.NavigationControl(), "top-right");
map.on("load", () => {
// Add a geojson point source.
// Heatmap layers also work with a vector tile source.
map.addSource("invasives", {
type: "geojson",
data: data
});
map.addLayer(
{
id: "invasives-heat",
type: "heatmap",
source: "invasives",
maxzoom: 22,
paint: {
// Increase the heatmap weight based on frequency and property magnitude
"heatmap-weight": [
"interpolate",
["linear"],
["get", "weight"],
0,
0,
50,
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,
// 20,
// 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"], 9, 5, 24, 50]
// Transition from heatmap to circle layer by zoom level
// "heatmap-opacity": ["interpolate", ["linear"], ["zoom"], 7, 1, 20, 0]
}
},
"waterway-label"
);
});
map.addControl(new mapboxgl.FullscreenControl());
// Be careful to clean up the map's resources using \`map.remove()\` whenever
// this cell is re-evaluated.
invalidation.then(() => map.remove());
}
lut = ({
"-1": 1,
"1-2": 1.5,
"2-5": 2.5,
"6-10": 8,
"11-20": 15,
"21-50": 35,
"50+": 50
})
// Update properties with weights corresponding to cover surface
(data.features = data.features.map((d) => {
d.properties["weight"] = lut[d.properties["surf_occup"]];
return {
type: d.type,
geometry: d.geometry,
properties: d.properties
};
}))
fileNames = zip_files.filenames
zip_files = FileAttachment("invasives-wgs84.zip").zip()
shapefile = require("shapefile@0.6")
mapboxgl = {
let mapboxgl = await require("mapbox-gl@2.6.0");
mapboxgl.accessToken =
"pk.eyJ1IjoiZnJhbmNrYWxiaW5ldCIsImEiOiJja3hpdHExMHExZ3JvMnducHJzeWl6cHl1In0.XnOi6i1FZRYwL6j1m5WR1g";
const href = await require.resolve("mapbox-gl@2.6.0/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
return mapboxgl;
}
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.
