Public
Edited
May 16, 2024
1 star
buildingsDataset = new gridviz.MultiResolutionDataset(
[1000, 2000, 5000, 10000, 20000, 50000, 100000],
(resolution) =>
new gridviz.TiledGrid(
map,
"https://raw.githubusercontent.com/joewdavies/tiled-grids/main/buildings/" +
resolution +
"m/"
)
)
colors = [
"#FFEB99",
"#D1E9B0",
"#8DD6B9",
"#58C1C0",
"#3792B6",
"#134891",
"#17256B",
]
colorFunction = (cell) => {
if (cell.value > 1000) return colors[6]
if (cell.value > 900) return colors[5]
if (cell.value > 800) return colors[4]
if (cell.value > 600) return colors[3]
if (cell.value > 400) return colors[2]
if (cell.value > 300) return colors[1]
if (cell.value > 100) return colors[0]
}
colorScale = d3.interpolateCividis
colorStyle = new gridviz.ShapeColorSizeStyle({
color: (c, r, z, viewScale) => viewScale(c.value),
viewScale: gridviz.viewScaleColor({
valueFunction: (c) => +c.value,
colorScale: colorScale,
stretching: gridviz.logarithmicScale(-7)
})
})
joyplotStyle = new gridviz.JoyPlotStyle({
height: (c) => Math.sqrt(c.value) * 100,
lineColor: () => "white",
lineWidth: (y, ys, r, z) => (z < 599 ? 2 * z : 1 * z),
fillColor: () => "black"
})
pillarStyle = new gridviz.PillarStyle({
viewScale: (cells) => d3.max(cells, (cell) => +cell.value),
height: (cell, resolution, z, max) => (300 * z * cell.value) / max,
simple: () => true,
color: () => "#FF3D12aa",
viewHeightFactor: 5,
width: (cell, resolution) => 0.3 * resolution,
viewSX: -0.7,
viewSY: -3,
shadowDirection: (21 * Math.PI) / 180.0,
shadowFactor: 0.5
})
tanakaStyle = gridviz.TanakaStyle.get(
(cell) => cell.value,
[100, 200, 500, 1000, 2000],
["#ffffd4", "#fee391", "#fec44f", "#fe9929", "#d95f0e", "#993404"]
)
//define legend
legend = new gridviz.ColorLegend({
title: "Number of buildings per km",
colorScale: colorScale,
ticks: 4,
textScale: (t, vs) => Math.floor(vs?.invert(t))
})
colorStyle.legends = [legend]
buildingsLayer = new gridviz.GridLayer(buildingsDataset, [], {
cellInfoHTML: (cell, r) =>
`<strong>${cell.value}</strong> buildings / ${r / 1000}km²`
})
(map.layers = [buildingsLayer, boundariesLayer, labelLayer])
{
// thank you Julien!
buildingsLayer.styles = [style];
map.redraw();
}
gridviz = require("gridviz")
gridvizEurostat = require("gridviz-eurostat")
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.
