Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
textStyle = new g.TextStyle({
color: () => "#000",
fontFamily: () => fontFamily,
text: (cell, resolution) => {
const value = cell["2018"];
if (type == "emoji") {
// emojis
if (value < threshold * resolution * 0.25) {
return emojis[0];
} else if (value < threshold * resolution * 0.5) {
return emojis[1];
} else if (value < threshold * resolution * 0.75) {
return emojis[2];
} else if (value < threshold * resolution * 1) {
return emojis[3];
} else if (value >= threshold * resolution * 1) {
return emojis[4];
}
} else {
// text
if (value < threshold * resolution * 0.1) {
return characters[0];
} else if (value < threshold * resolution * 0.6) {
return characters[1];
} else if (value >= threshold * resolution * 0.6) {
return characters[2];
}
}
}
})
typeWriterStyles = [
new g.TextStyle({
color: () => "#000",
fontFamily: () => fontFamily,
text: (cell, resolution) => {
const value = cell["2018"];
// text
return "E";
}
}),
new g.TextStyle({
color: () => "#000",
fontFamily: () => fontFamily,
text: (cell, resolution) => {
const value = cell["2018"];
// text
if (
value > threshold * resolution * 0.25 &&
value < threshold * resolution * 1.25
) {
return "U";
}
}
}),
new g.TextStyle({
color: () => "#000",
fontFamily: () => fontFamily,
text: (cell, resolution) => {
const value = cell["2018"];
// text
if (value >= threshold * resolution * 1.25) {
return "R";
}
}
})
]
dataset = new g.MultiResolutionDataset(
[1000, 2000, 5000, 10000, 20000, 50000, 100000],
(resolution) =>
new g.TiledGrid(
map,
"https://raw.githubusercontent.com/jgaffuri/tiledgrids/main/data/europe/population/" +
resolution +
"m/"
)
)
gridLayer = new g.GridLayer(dataset, [], {
minPixelsPerCell: 5,
cellInfoHTML: (cell) => "<b>" + cell["2018"] + "</b> inhabitant(s)"
})
labelLayer = new g.LabelLayer(ges.getEuronymeLabelLayer())
map = new g.Map(document.getElementById("container-div"), { w: 600, h: 600 , x: 4000000, y: 2960000,z:2000 })
.addZoomButtons()
map.layers = [gridLayer, labelLayer]
{
gridLayer.styles = type == "typewriter" ? typeWriterStyles : [textStyle];
gridLayer.minPixelsPerCell = pixNb;
map.redraw();
}
{
labelLayer.visible = () => placenames;
map.redraw();
}
style = html`
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=${parseFont}:ital@0;1&display=swap">
<style>
body, svg {
font-family: '${fontFamily}', serif;
/* font-size: 48px; */
}
</style>
`
parseFont = fontFamily.split(" ").join("+")
/*function getFlagEmoji(countryCode) {
const codePoints = countryCode
.toUpperCase()
.split("")
.map((char) => 127397 + char.charCodeAt());
return String.fromCodePoint(...codePoints);
}*/
//getFlagEmoji("FR")
g = require("gridviz@3.0.0")
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.
