Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
map = new gridviz.Map(container, {
x: 4200000,
y: 2950000,
z: 1200,
legendDivId: "ext_legend"
}).addZoomButtons()
dataset = new gridviz.MultiResolutionDataset(
//array of resolutions, in CRS unit (m)
[1000, 2000, 5000, 10000, 20000, 50000, 100000],
//function which returns the URL for each resolution value
(resolution) =>
new gridviz.TiledGrid(
map,
"https://raw.githubusercontent.com/jgaffuri/tiledgrids/main/data/europe/population/" +
resolution +
"m/",
{ onlyDrawWhenAllTilesReady: true }
)
)
gridLayer = new gridviz.GridLayer(dataset, [], {
cellInfoHTML: (c) => "<b>" + c["2018"] + "</b> inhabitant(s)"
})
update = {
map.layers = [gridLayer, labelLayer];
gridLayer.styles = style;
map.redraw();
}
(map.layers = [gridLayer, labelLayer])
labelLayer = new gridviz.LabelLayer(
gridvizEurostat.getEuronymeLabelLayer("EUR", 50, {
ex: 1.8,
fontFamily: "Arial",
exSize: 1.8,
color: () => "black",
haloColor: () => "#ffffff",
haloWidth: () => 3
})
)
squareColorStyle = [
new gridviz.SquareColorWebGLStyle({
tFun: (cell, resolution, z, viewScale) =>
Math.sqrt(cell["2018"] / (resolution * 10)),
color: (t) => d3.interpolateOrRd(t),
blendOperation: (zf) => (zf < 50 ? "multiply" : "source-over")
}),
new gridviz.StrokeStyle({
strokeColorCol: "2018",
strokeColor: (v) => (+v ? "#666" : ""),
maxZoom: 80
})
]
legoStyle = gridviz.LegoStyle.get(
(cell) => cell["2018"],
[1500, 6000, 20000, 60000, 150000],
["#ffffd4", "#fee391", "#fec44f", "#fe9929", "#d95f0e", "#993404"]
)
joyplotStyle = [
new gridviz.JoyPlotStyle({
height: (c, r, z, scale) => scale(c["2018"]),
viewScale: gridviz.viewScale({
valueFunction: (c) => +c["2018"],
maxSizeFactor: 5,
stretching: gridviz.powerScale(0.4)
}),
lineColor: () => "white",
lineWidth: (y, ys, r, z) => 0.1 * r,
fillColor: () => "black"
})
]
pillarStyle = [
new gridviz.PillarStyle({
height: (cell, resolution, z) => 0.3 * cell["2018"],
simple: (resolution, z) => z > 1000
})
]
mosaicStyle = [
new gridviz.MosaicStyle({
color: (cell) => {
if (cell["2018"] > 150000) return "#993404";
else if (cell["2018"] > 60000) return "#d95f0e";
else if (cell["2018"] > 20000) return "#fe9929";
else if (cell["2018"] > 6000) return "#fec44f";
else if (cell["2018"] > 1500) return "#fee391";
else return "#ffffd4";
}
})
]
dotDensityStyle = [
new gridviz.DotDensityStyle({
dotNumber: (c, r, z) => c["2018"] / z / 5,
dotSize: (r, z) => 1.2 * z,
color: () => "#FF5733"
})
]
tanakaStyle = gridviz.TanakaStyle.get(
(cell) => cell["2018"],
[1500, 6000, 20000, 60000, 150000],
["#ffffd4", "#fee391", "#fec44f", "#fe9929", "#d95f0e", "#993404"]
)
gridviz = require("gridviz@3.0.17")
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.
