Public
Edited
May 30, 2023
{
let m = eurostat
.map("chbi")
// .width(width)
// .height((width * 2.25) / 3)
.titleFontSize(25)
.svgId("foo");
// m.statData().setData({ v1: { DE: 100, BE: 90 }, v2: { DE: 100, BE: 90 } });
m.stat("v1", { DE: 100, BE: 90 }).stat("v2", { DE: 100, BE: 90 });
m.title("Unemployment and population density")
.subtitle("% unemployed persons aged 20-64 years & inhabitants per km²")
.nutsLvl(0)
.nutsYear(2016)
// .stat("v1", { eurostatDatasetCode: "demo_r_d3dens", unitText: "inh./km²" })
// .stat("v2", {
// eurostatDatasetCode: "lfst_r_lfu3rt",
// filters: { age: "Y20-64", sex: "T", unit: "PC", time: 2017 },
// unitText: "% unemployed"
// })
.clnb(4)
.startColor("white")
.color1("red")
.color2("blue")
.endColor("green")
.scale("10M")
.legend({
boxFill: "none",
squareSize: 100,
labelFontSize: 12,
label1: "Population / km² →",
label2: "← Unemployment ",
x: 20,
y: 160
})
.labelling(true)
.labelsToShow(["cc"])
.labelShadow(["cc"])
.drawGraticule(false)
.seaFillStyle("white")
.cntrgFillStyle("#f2f2f2")
.noDataFillStyle("#bfbfbf")
.drawCoastalMargin(false)
.zoomExtent([1, 2])
.frameStrokeWidth(0)
.geoCenter([4900000, 3500000])
.fontFamily("Source Serif Pro")
.nutsrgSelFillSty("red")
.build();
return m.statData().getArray();
}
{
let m = eurostat
.map("ch")
.title("Population density in Europe")
.nutsLvl(0)
// .stat({ eurostatDatasetCode: "demo_r_d3dens", unitText: "people/km²" })
.legend({ x: 500, y: 180, title: "Density, people/km²", labelDecNb: 0 })
.build();
m.statData().set("FR", 500);
m.statData().setData({ DE: 100, BE: 90 });
return m.statData();
}
eurostat = require("eurostat-map@3.6.29")
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.
