Applying GIS, Data Vis. and Deep Learning to environmental science and nuclear emergency responses
// Legend(colorScale, {
// title: "Activity (Bq/m3)",
// tickFormat: "~s"
// })
{
let container = html`<div style='height:800px;' />`;
let hexagons = null;
let zoom = 2;
let hoveredHexId = null;
const colors = asMapboxStepExpr(colorScale);
// 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,
zoom: zoom,
style: "mapbox://styles/franckalbinet/ckyaawysn1qlg15ny2auxlk8k",
// style: "mapbox://styles/mapbox/light-v11",
projection: {
name: projMapbox
}
// zoom: 8,
// center: [-74.5447, 40.6892]
});
// Create a popup, but don't add it to the map yet.
const popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
map.addControl(new mapboxgl.NavigationControl(), "top-right");
map.on("load", () => {
// map.addSource("wms-test-source", {
// type: "raster",
// // use the tiles option to specify a WMS tile source URL
// // https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/
// tiles: [
// "https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015"
// ],
// tileSize: 256
// });
// refer to: https://gist.github.com/ThomasG77/0feccc76e01bdbfd98b7f628c1c4e6f0
// map.addSource("wms-test-source", {
// type: "raster",
// // use the tiles option to specify a WMS tile source URL
// // https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/
// tiles: [
// "https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv?request=getmap&service=wms&BBOX=-2000000,4000000,2000000,7000000&crs=EPSG:3857&format=image/png&transparent=true&layers=gebco_latest_2&width=600&height=600&version=1.3.0"
// ],
// tileSize: 327
// });
// map.addLayer(
// {
// id: "wms-test-layer",
// type: "raster",
// source: "wms-test-source",
// paint: {}
// }
// "building" // Place layer under labels, roads and buildings.
// );
https: map.addSource("hexbins", {
type: "geojson",
data: getHexagons(
dataRdnDepth,
zoomScale(map.getZoom()),
bboxToPoly(map.getBounds())
),
generateId: true
});
// Hexbins fill
map.addLayer({
id: "hexbins-fill",
type: "fill",
source: "hexbins",
layout: {},
paint: {
"fill-color": ["step", ["get", "max", ["get", "value"]], ...colors],
"fill-opacity": 0.8
}
});
map.addLayer({
id: "hexbins-line",
type: "line",
source: "hexbins",
layout: {},
paint: {
"line-color": [
"case",
["boolean", ["feature-state", "hover"], false],
"black",
"#bbb"
],
"line-opacity": 0.5,
"line-width": [
"case",
["boolean", ["feature-state", "hover"], false],
4,
0.5
]
}
});
});
map.on("zoomend", () => {
map
.getSource("hexbins")
.setData(
getHexagons(
dataRdnDepth,
zoomScale(map.getZoom()),
bboxToPoly(map.getBounds())
)
);
});
map.on("moveend", () => {
map
.getSource("hexbins")
.setData(
getHexagons(
dataRdnDepth,
zoomScale(map.getZoom()),
bboxToPoly(map.getBounds())
)
);
});
// When the user moves their mouse over the state-fill layer, we'll update the
// feature state for the feature under the mouse.
map.on("mousemove", "hexbins-fill", (e) => {
map.getCanvas().style.cursor = "pointer";
// console.log(e.features[0]);
// console.log(e.features[0].id);
if (e.features.length > 0) {
if (hoveredHexId !== null) {
map.setFeatureState(
{ source: "hexbins", id: hoveredHexId },
{ hover: false }
);
}
hoveredHexId = e.features[0].id;
map.setFeatureState(
{ source: "hexbins", id: hoveredHexId },
{ hover: true }
);
}
// Copy coordinates array.
const coordinates = turf.centroid(turf.centroid(e.features[0].geometry))
.geometry.coordinates;
const description = JSON.parse(e.features[0].properties.value).max;
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
// Populate the popup and set its coordinates
// based on the feature found.
popup.setLngLat(coordinates).setHTML(description).addTo(map);
});
// When the mouse leaves the state-fill layer, update the feature state of the
// previously hovered feature.
map.on("mouseleave", "hexbins-fill", () => {
map.getCanvas().style.cursor = "";
if (hoveredHexId !== null) {
map.setFeatureState(
{ source: "hexbins", id: hoveredHexId },
{ hover: false }
);
}
hoveredHexId = null;
popup.remove();
});
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());
}
zoomScale = d3
.scaleThreshold()
.domain([2.5, 3.5, 4.5, 6, 8, 10, 12])
.range([3, 4, 5, 6, 7, 8, 9, 10])
radiusScale = d3
.scaleSqrt() // instead of scaleLinear()
.domain([0, d3.max(dataRdnDepth, (d) => d.value)])
.range([0, 100])
colorScale = d3.scaleThreshold(
[100, 200, 500, 1000, 1500, 10000, 100000],
d3.schemeOrRd[8]
)
maris-seawater-all.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
dataRdn = data.filter((d) => d.nusymbol == rdn)
maxDepth = d3.max(dataRdn, (d) => d.sampdepth)
dataRdnDepth = dataRdn.filter(
(d) => d.sampdepth >= depthRange[0] && d.sampdepth <= depthRange[1]
)
width
import { interval } from "@mootari/range-slider@1781"
lodash = require("lodash")
d3 = require("d3@7.8.1")
mapboxgl = {
let mapboxgl = await require("mapbox-gl@2.12");
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;
}
h3 = require("h3-js")
geojson2h3 = require("https://bundle.run/geojson2h3@1.0.1")
turf = require("@turf/turf@6")
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.
