Applying GIS, Data Vis. and Deep Learning to environmental science and nuclear emergency responses
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Inputs.color
substancesSorted
// mapBubble = {
// let container = html`<div style='height:800px;' />`;
// // 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: 2,
// style: "mapbox://styles/franckalbinet/ckyaawysn1qlg15ny2auxlk8k",
// projection: {
// name: "naturalEarth"
// // center: [0, 0],
// // parallels: [parMin, parMax]
// }
// });
// map.addControl(new mapboxgl.NavigationControl(), "top-right");
// map.on("load", () => {
// map.addSource("maris", {
// type: "geojson",
// // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
// // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
// data: selectedGeoJSON,
// cluster: true,
// // clusterMaxZoom: 14, // Max zoom to cluster points on
// clusterRadius: 20, // Radius of each cluster when clustering points (defaults to 50)
// clusterProperties: { max: ["max", ["get", "value"]] }
// });
// map.addLayer({
// id: "clusters",
// type: "circle",
// source: "maris",
// filter: ["has", "point_count"],
// paint: {
// "circle-color": "gold",
// "circle-opacity": 0.8,
// "circle-stroke-width": 1,
// "circle-stroke-color": "#888",
// "circle-radius": [
// "interpolate",
// ["linear"],
// ["sqrt", ["get", "max"]],
// 1,
// 2,
// 10000,
// 100
// ]
// }
// });
// map.addLayer({
// id: "cluster-count",
// type: "symbol",
// source: "maris",
// filter: ["has", "point_count"],
// layout: {
// //"text-field": "{point_count_abbreviated}",
// //"text-field": "{max}",
// "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
// "text-size": 12
// }
// });
// map.addLayer({
// id: "unclustered-point",
// type: "circle",
// source: "maris",
// filter: ["!", ["has", "point_count"]],
// paint: {
// "circle-color": "#11b4da",
// "circle-radius": 4,
// "circle-stroke-width": 1,
// "circle-stroke-color": "#fff"
// }
// });
// });
// // Be careful to clean up the map's resources using \`map.remove()\` whenever
// // this cell is re-evaluated.
// invalidation.then(() => map.remove());
// }
d3.max(selected, (d) => d.value)
// viewof resolution = Inputs.range([100, 300], {
// label: "Hexagon radius: ",
// value: 200,
// step: 1
// })
// mapHexbin = {
// let container = html`<div style='height:800px;' />`;
// let hexagons = null;
// // const colors = [
// // 0,
// // "#ffffd9",
// // 100,
// // "#edf8b1",
// // 200,
// // "#c7e9b4",
// // 500,
// // "#7fcdbb",
// // 1000,
// // "#41b6c4",
// // 1500,
// // "#1d91c0",
// // 10000,
// // "#225ea8",
// // 100000,
// // "#0c2c84"
// // ];
// 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: 2,
// style: "mapbox://styles/franckalbinet/ckyaawysn1qlg15ny2auxlk8k",
// projection: {
// name: projMapbox
// // center: [0, 0],
// // parallels: [parMin, parMax]
// }
// });
// map.addControl(new mapboxgl.NavigationControl(), "top-right");
// map.on("load", () => {
// hexagons = getHexbin(
// selectedGeoJSON,
// toPolygon(map.getBounds()),
// resolution
// );
// map.addSource("hexbins", {
// type: "geojson",
// data: hexagons
// });
// // 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", "max"], ...colors],
// "fill-opacity": 0.8
// //"fill-stroke-width": 1,
// //"stroke-color": "red"
// }
// });
// // map.addLayer({
// // id: "outline",
// // type: "line",
// // source: "hexbins",
// // layout: {},
// // paint: {
// // "line-color": "#fff",
// // "line-width": 1,
// // "line-opacity": 0.2
// // }
// // });
// });
// map.on("zoomend", () => {
// hexagons = getHexbin(
// selectedGeoJSON,
// toPolygon(map.getBounds()),
// resolution
// );
// map.getSource("hexbins").setData(hexagons);
// });
// map.on("moveend", () => {
// hexagons = getHexbin(
// selectedGeoJSON,
// toPolygon(map.getBounds()),
// resolution
// );
// map.getSource("hexbins").setData(hexagons);
// });
// function getHexbin(points, clipArea, resolution = 200) {
// let options = { units: "kilometers" };
// // 1. Clips
// const clipped = turf.pointsWithinPolygon(points, clipArea);
// const cellSide = Math.sqrt(turf.area(clipArea)) / (1000 * resolution);
// // 2. Creates grid
// const grid = turf.hexGrid(turf.bbox(clipArea), cellSide, options);
// // 3. Collects points in poly
// const collected = turf.collect(grid, clipped, "value", "values");
// // 4. Filter out "empty" hexagons
// collected.features = collected.features.filter(
// (d) => d.properties.values.length
// );
// // 5. Computes summary stats
// turf.propEach(collected, (props) => {
// props.max = d3.max(props.values);
// props.length = props.values.length;
// });
// return collected;
// }
// function fixAntimeridian(bounds) {
// // let cap = 150;
// // bounds._ne.lng = Math.min(cap, bounds._ne.lng);
// // bounds._sw.lng = Math.max(-cap, bounds._sw.lng);
// return bounds;
// }
// function toPolygon(bounds) {
// return turf.bboxPolygon(fixAntimeridian(bounds).toArray().flat());
// }
// 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());
// }
{
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());
}
zoomScale = d3
.scaleThreshold()
.domain([2.5, 3.5, 4.5, 6, 8, 10, 12])
.range([3, 4, 5, 6, 7, 8, 9, 10])
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.
