Applying GIS, Data Vis. and Deep Learning to environmental science and nuclear emergency responses
{
let container = html`<div style='height:800px;' />`;
let hexagons = null;
let zoom = 1;
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: [lng, lat],
zoom: zoom,
style: "mapbox://styles/franckalbinet/ckyaawysn1qlg15ny2auxlk8k",
projection: {
name: projMapbox
// center: [0, 0],
// parallels: [parMin, parMax]
}
});
map.addControl(new mapboxgl.NavigationControl(), "top-right");
map.on("load", () => {
map.addSource("hexbins", {
type: "geojson",
data: getHexagons(
selected,
zoomScale(map.getZoom()),
bboxToPoly(map.getBounds())
)
});
// Add a new layer to visualize the polygon.
map.addLayer({
id: "hexbins",
type: "fill",
source: "hexbins", // reference the data source
layout: {},
paint: {
"fill-color": ["interpolate", ["linear"], ["get", "value"], ...colors],
"fill-opacity": 0.8
}
});
map.on("zoomend", () => {
console.log(map.getZoom());
map
.getSource("hexbins")
.setData(
getHexagons(
selected,
zoomScale(map.getZoom()),
bboxToPoly(map.getBounds())
)
);
});
map.on("moveend", () => {
map
.getSource("hexbins")
.setData(
getHexagons(
selected,
zoomScale(map.getZoom()),
bboxToPoly(map.getBounds())
)
);
});
});
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());
}
Inputs.color
Plot.plot({
height: 300,
round: true,
color: {
type: "threshold",
domain: colorScale.domain(),
range: colorScale.range()
},
y: {
type: "linear",
label: "Depth (m) ↑",
reverse: true
},
marks: [
Plot.rect(
selected.filter((d) => d.depth < maxDepth),
Plot.bin(
{ fill: (g) => d3.max(g, (d) => d.value) },
{ x: "date", y: "depth", thresholds: 40 }
)
)
]
})
zoomScale = d3
.scaleThreshold()
.domain([2.5, 3.5, 4.5, 6, 8, 10, 12])
.range([3, 4, 5, 6, 7, 8, 9, 10])
zoomScale(1)
function getHexagons(data, zoom, bbox) {
// Filter out measurements outside bbox
let dataInBbox = data.filter((d) => d3.polygonContains(bbox, [d.lon, d.lat]));
// Generate H3 index and grouping
const hexIdxGrp = d3.rollup(
dataInBbox.map((d) => ({ ...d, h3Idx: h3.geoToH3(d.lat, d.lon, zoom) })),
(v) => d3.max(v, (d) => d.value),
(d) => d.h3Idx
);
// Convert to GeoJSON
const hexagons = geojson2h3.h3SetToFeatureCollection(
[...hexIdxGrp.keys()],
(hex) => ({
value: hexIdxGrp.get(hex)
})
);
fixTransmeridian(hexagons);
console.log("Nb. of hexagon features: ", hexagons.features.length);
return hexagons;
}
selectedGeoJSON = toGeoJSON(selected)
data.length
data = {
const data = await FileAttachment("maris-all.csv").csv();
return data.map((d) => {
return {
sampleId: +d.sample_id,
lat: +d.latitude,
lon: +d.longitude,
depth: Math.trunc(+d.sampdepth),
date: new Date(d.begperiod),
substance: d.nusymbol,
value: +d.activity,
unit: d.unit
};
});
}
width
//colorScale = d3
// .scaleSequentialLog(d3.interpolateOrRd)
// .domain(d3.extent(dataHexbin.map((d) => d.value)))
colorScale.domain()
colorScale.range()
colorScale = d3.scaleThreshold(
[100, 200, 500, 1000, 1500, 10000, 100000],
d3.schemeOrRd[8]
)
projection = d3.geoAzimuthalEqualArea()
//projection = d3.geo.stereographic()
path = d3.geoPath(projection)
outline = ({ type: "Sphere" })
graticule = d3.geoGraticule10()
land = topojson.feature(world, world.objects.land)
topojson = require("topojson-client@3")
d3 = require("d3@7", "d3-hexbin@0.2")
// Ref. to https://observablehq.com/@d3/color-legend
import { Legend, Swatches } from "@d3/color-legend"
import { rangeSlider, themes } from "@mootari/range-slider"
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;
}
turf = require("@turf/turf@6.5")
h3 = require("h3-js")
geojson2h3 = require("https://bundle.run/geojson2h3@1.0.1")
depthBins = [10, 100, 500, 1000, 5000, d3.max(selected.map((d) => d.depth))]
// Plot.plot({
// height: 640,
// width: 1200,
// padding: 0.05,
// marginLeft: 80,
// grid: true,
// x: {
// axis: "top",
// label: "Year",
// tickFormat: d3.timeYear
// },
// y: {
// label: "Depth (m)"
// },
// marks: [
// Plot.cell(depthVsTime, {
// x: "date",
// y: "depth",
// fill: (d) => colorScale(d.value)
// //rx: 20 // uncomment for circles
// })
// ]
// })
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.
