Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
<style>
.em-label-background{
fill: white
}
</style>
map = {
// API: https://github.com/eurostat/eurostat-map.js/blob/master/docs/reference.md
let m = eurostatmap
.map("ch")
.stat({
eurostatDatasetCode: "demo_r_d3dens",
unitText: "people/km²",
filters: { time: 2021 }
})
.nutsLvl(3)
.width(800)
.height(700)
.frameStroke("none")
.fontFamily("Source Serif Pro")
.scale("03M")
.nutsbnStroke({ 0: "black" })
.nutsbnStrokeWidth({ 0: 0.5, 1: 0, 2: 0, 3: 0, co: 0, oth: 0 })
.colorFun(d3.interpolateOranges)
.classifMethod("threshold")
.threshold([800, 600, 400, 200, 100, 50].reverse())
.geoCenter(countryConfigs[country].geoCenter)
.pixSize(countryConfigs[country].pixSize)
.cntrgFillStyle("white")
.legend({
title: "Inhabitants per km²",
labelFormat: d3.format(".1"),
titleFontSize: 13,
x: countryConfigs[country].legendX,
y: countryConfigs[country].legendY
});
// add insets
if (countryConfigs[country].insets) {
m.insets(countryConfigs[country].insets).insetBoxPosition(
countryConfigs[country].insetBoxPosition
);
}
// add labels
if (countryConfigs[country].labels) {
m.labelsConfig(countryConfigs[country].labels)
.labelling(true)
.labelsToShow(["countries"])
.labelShadow(false)
.labelShadowWidth({ seas: 3, countries: 3, cc: 3, values: 1 });
}
//filter surrounding areas
if (!showSurrounding) {
m.countriesToShow([countryConfigs[country].countryId]);
}
m.build();
return m;
}
{
if (showValues) {
map.labels({
values: true,
backgrounds: true
});
map.updateValuesLabels();
}
}
eurostatmap = require("eurostat-map")
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.
