Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
eurostatmap
.map("spark")
.svgId("sparklineSVG")
.nutsLvl(2)
.width(width)
.nutsYear(2021)
.title("Crude rate of total population change 2009 - 2023")
//.zoomExtent([1, 2]) //pan & zoom
.statSpark(
{
eurostatDatasetCode: "demo_r_gind3",
filters: { indic_de: "GROWRT" },
unitText: "Population change"
},
[
"2009",
"2010",
"2011",
"2012",
"2013",
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2022",
"2023"
], //dates
[
"2009",
"2010",
"2011",
"2012",
"2013",
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2022",
"2023"
] //labels
)
.sparkType("line")
.sparkLineWidth(30)
.sparkLineStrokeWidth(1.3)
.sparkLineColor((d, i) => {
const v = d[d.length - 1].value;
if (v < -1) return "#ff4444";
if (v < 0) return "#f9a4a4";
if (v >= 10) return "#0083ff";
if (v >= 0) return "#b5cbff";
})
.sparkLineHeight(5)
.sparkLineOpacity(1)
.sparkLineCircleRadius(0)
//map styling
.nutsbnStroke({
0: "black",
1: "grey",
2: "grey",
3: "grey",
oth: "black",
co: "black"
})
.nutsbnStrokeWidth({ 0: 0.2, 1: 0.1, 2: 0, 3: 0, oth: 0.1, co: 0.2 })
.tooltip({
xOffset: 30,
yOffset: 150,
fontSize: "12px",
maxWidth: Math.min(400, window.innerWidth)
})
.sparkTooltipChart({
width: 150,
height: 50,
margin: { left: 60, right: 40, top: 40, bottom: 40 },
circleRadius: 0
})
.build()
eurostatmap = require("eurostat-map@3.6.47")
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.
