container = DOM.element("div", {
style: `width:${width}px;height:${width / 3}px`
})
map = new gridviz.Map(container, {
x: 4500000,
y: 2900000,
z: 3000
}).addZoomButtons()
dataset = new gridviz.CSVGrid(
map,
"https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/pop_2018_10km.csv",
10000
)
colorFunction = (cell) => {
if (cell.population > 150000) return "#993404";
else if (cell.population > 60000) return "#d95f0e";
else if (cell.population > 20000) return "#fe9929";
else if (cell.population > 6000) return "#fec44f";
else if (cell.population > 1500) return "#fee391";
else return "#ffffd4";
}
style = new gridviz.ShapeColorSizeStyle({ color: colorFunction })
layer = new gridviz.GridLayer(dataset, [style])
{
map.layers = [layer];
}
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.
