Slippy Map TileSweet, Sweet FantasyOSM Tile MathGeotoolbox playgroundAzure Tile MathSQLite Geospatial - buffers!SQLite Geospatial - intersections!TurfJS split linePIPUpdate marker without refreshing map?Bars/Pub DensityAggregating Points by H3 HexagonsFR Temp DataFR Precip DataPizza PopularityNorth pole on the move!H3 Coverage Calculation
H3 coverage - France climate model data
geodata = turf.featureCollection(
data.map((d) => {
const geometry = { type: "Point", coordinates: [d.Longitude, d.Latitude] };
const { Latitude, Longitude, Point, ...properties } = d;
return {
type: "Feature",
geometry,
properties: {
id: Point,
value: properties[field.name],
color: color(properties[field.name])
}
};
})
)
pointHexMap = {
const pointMap = new Map();
data.forEach((d) => pointMap.set(h3.cellToCenterChild(d.h3, 7), d));
return pointMap;
}
{
map.getSource("hexes").setData(coverage);
map.getSource("points").setData(geodata);
}
// h3 level 6 map
h3l6Map = {
const gridmap = new Map();
data.forEach((d) => {
const { Latitude, Longitude } = d;
gridmap.set(h3.latLngToCell(Latitude, Longitude, 6), d);
});
return gridmap;
}
// h3 level 7 map
h3l7Map = {
const gridmap = new Map();
data.forEach((d) => {
const { Latitude, Longitude } = d;
gridmap.set(h3.latLngToCell(Latitude, Longitude, 7), d);
});
return gridmap;
}
function weightedValue(inputs) {
const sumOfWeighted = inputs.reduce((acc, cur) => {
acc += cur.weight * cur.value;
return acc;
}, 0);
const sumOfWeights = inputs.reduce((acc, cur) => {
acc += cur.weight;
return acc;
}, 0);
return Math.round((sumOfWeighted / sumOfWeights) * 1000) / 1000;
}
function getCellValue(hex, column) {
const child = h3.cellToCenterChild(hex, 7);
const zone = h3
.gridDiskDistances(child, rings)
.reduce((features, hexring, index) => {
const ringFeatures = hexring
.filter((cell) => h3l7Map.has(cell))
.map((cell) => {
return {
weight: distanceWeight(index),
value: h3l7Map.get(cell)[column]
};
});
return [...features, ...ringFeatures];
}, []);
return weightedValue(zone);
}
distanceWeight = function (distance) {
return Math.round(Math.pow(distance + 1, exponent) * 100000) / 100000;
}
function color(v) {
return d3.interpolateTurbo((v - min) / (max - min));
}
coverage = turf.featureCollection(
france.features.map((d) => {
const v = getCellValue(d.id, field.name);
d.properties.value = v;
d.properties.color = color(v);
return d;
})
)
meta = tempe_rcp85_annuel
.split("\n")
.slice(17, 36)
.map((d) => {
const parts = d.replace("# ", "").split(" : ");
return {
name: parts[0],
description: parts[1]
};
})
min = d3.min(data.map((d) => d[field.name]))
max = d3.max(data.map((d) => d[field.name]))
france = FileAttachment("france-h3l6@2.geojson").json()
// france_h3l6 = {
// const frH3 = new Set();
// const osmFrance = await FileAttachment("osm-france@1.geojson").json();
// osmFrance.features.forEach((f) => {
// if (f.geometry.coordinates.length === 1) {
// const cells = h3.polygonToCells(f.geometry.coordinates, 8, true);
// cells.forEach((cell) => frH3.add(h3.cellToParent(cell, 6)));
// } else if (f.geometry.coordinates.length > 1) {
// f.geometry.coordinates.forEach((p) => {
// const cells = h3.polygonToCells(p, 8, true);
// cells.forEach((cell) => frH3.add(h3.cellToParent(cell, 6)));
// });
// }
// });
// return geojson2h3.h3SetToFeatureCollection(Array.from(frH3));
// }
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.
