map = new g.Map(container, {
x: 4500000,
y: 2900000,
z: 3000
}).addZoomButtons()
dataset = new g.MultiResolutionDataset(
[1000, 2000, 5000, 10000, 20000, 50000, 100000],
(resolution) =>
new g.TiledGrid(
map,
"https://raw.githubusercontent.com/jgaffuri/tiled-grid-lucas/main/out/" +
resolution +
"m/"
)
)
colorScale = d3.interpolatePuBuGn //interpolateRdPu //interpolateYlGnBu //interpolateYlOrRd
style = new g.ShapeColorSizeStyle({
color: (cell, resolution, z, [min, max]) =>
colorScale(cell.COUNT_POINT_ID / max),
viewScale: (cells) => d3.extent(cells, (cell) => +cell.COUNT_POINT_ID)
})
layer = new g.GridLayer(dataset, [style], {
minPixelsPerCell: 2,
cellInfoHTML: (c, resolution) =>
"Number of visits: " +
c.COUNT_POINT_ID +
"<br>(per " +
d3.format(",.2r")(resolution * resolution * 1e-6) +
" km²)"
})
{
map.layers = [
backgroundLayer1,
backgroundLayer2,
layer,
boundariesLayer,
labelLayer
];
}
{
backgroundLayer1.visible = (z) => showBackground && z >= 50;
backgroundLayer2.visible = (z) => showBackground && z < 50;
boundariesLayer.visible = () => showBoundaries;
labelLayer.visible = () => showLabels;
map.redraw();
}
g = require("gridviz@3.0.7")
ges = require("gridviz-eurostat@2.0.0")
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.
