Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
Eurostat-map: continuous vs discrete colorsEurostat-map: custom geometriesEurostat-map: buttonsEurostat-map: minimapsEurostat-map: flow mapEurostat-map: time sliderEurostat-map: sparkline mapsEurostat-map: focus on a particular areaEurostat-map: custom projectionsEurostat-map: stripe compositionEurostat-map: bivariate choroplethHello, eurostat-mapSmall multiple maps
Eurostat-map: custom labels
<style>
.em-label-background{
fill: white
}
.em-label,.em-label-shadow{
font-size:16px;
}
/* you can also target individual labels with #em-label-yourlabeltext */
#em-label-GREECE {
font-weight: 'normal';
}
</style>
map = {
// API: https://github.com/eurostat/eurostat-map.js/blob/master/docs/reference.md
let m = eurostatmap
.map("choropleth")
.stat({
eurostatDatasetCode: "demo_r_d3dens",
unitText: "people/km²",
filters: { time: 2021 }
})
.nutsLevel(3)
.width(800)
.height(700)
.scale("03M")
.colorFun(d3.interpolateOranges)
.classificationMethod("threshold")
.threshold([800, 600, 400, 200, 100, 50].reverse())
.position({
x: countryConfigs[country].geoCenter[0],
y: countryConfigs[country].geoCenter[1],
z: countryConfigs[country].pixSize
})
.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.labels({ labels: countryConfigs[country].labels, shadows: true });
}
//filter surrounding areas
if (!showSurrounding) {
m.countriesToShow([countryConfigs[country].countryId]);
}
m.build();
return m;
}
{
if (showValues) {
map.labels({
values: true,
backgrounds: true
});
map.updateValuesLabels();
} else {
map.labels({
values: false,
labels: countryConfigs[country].labels,
shadows: 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.
