Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
Public
Edited
Mar 26
10 stars
Also listed in…
Eurostat
mapConfig = {
if (dataset == "life-expectancy") {
return {
config: {
title: `Life expectancy`,
thresholds: [70, 72, 74, 76, 78, 80, 82, 84, 86],
colors: [
"#FFEB99",
"#E1EAA8",
"#BEE6B5",
"#8DD6B9",
"#63C8BD",
"#4CBBC2",
"#3792B6",
"#1B5A9E",
"#163C84",
"#17256B"
],
legendTitle: "Years old",
datasetCode: "demo_r_mlifexp",
unitText: "years",
mapHeight: 350
},
maps: [
{
id: "map1",
title: "Male",
filters: { time: "2023", age: "Y_LT1", sex: "M" }
},
{
id: "map2",
title: "Female",
filters: { time: "2023", age: "Y_LT1", sex: "F" }
}
]
};
}
if (dataset == "median-age") {
return {
maps: [
{
id: "map4",
title: "2015",
filters: { time: "2015", indic_de: "MEDAGEPOP" }
},
{
id: "map5",
title: "2016",
filters: { time: "2016", indic_de: "MEDAGEPOP" }
},
{
id: "map6",
title: "2017",
filters: { time: "2017", indic_de: "MEDAGEPOP" }
},
{
id: "map7",
title: "2018",
filters: { time: "2018", indic_de: "MEDAGEPOP" }
},
{
id: "map8",
title: "2019",
filters: { time: "2019", indic_de: "MEDAGEPOP" }
},
{
id: "map9",
title: "2020",
filters: { time: "2020", indic_de: "MEDAGEPOP" }
},
{
id: "map10",
title: "2021",
filters: { time: "2021", indic_de: "MEDAGEPOP" }
},
{
id: "map11",
title: "2022",
filters: { time: "2022", indic_de: "MEDAGEPOP" }
},
{
id: "map12",
title: "2023",
filters: { time: "2023", indic_de: "MEDAGEPOP" }
},
{
id: "map13",
title: "2024",
filters: { time: "2024", indic_de: "MEDAGEPOP" }
}
],
config: {
title: `Median age`,
thresholds: [35, 36, 37, 38, 39, 40, 41, 42, 43, 44],
colors: [
"#FFEB99",
"#E4EAA7",
"#C7E9B4",
"#9DDBB8",
"#6BCDBB",
"#58C1C0",
"#41B6C4",
"#3181AF",
"#104F99",
"#173A82",
"#17256B"
],
// colors: [
// "#F7E8EF",
// "#EFD0DE",
// "#E7B9CE",
// "#DF96B8",
// "#D78AAE",
// "#D472A0",
// "#C75B8D",
// "#BF447D",
// "#B72C6C",
// "#AF155C",
// "#7F0A45"
// ],
legendTitle: "Years old",
datasetCode: "demo_pjanind",
unitText: "years",
mapHeight: 250
}
};
} else if (dataset == "population") {
return {
maps: [
{
id: "map1",
title: "2012",
filters: { time: "2012", indic_de: "GROWRT" }
},
{
id: "map2",
title: "2013",
filters: { time: "2013", indic_de: "GROWRT" }
},
{
id: "map3",
title: "2014",
filters: { time: "2014", indic_de: "GROWRT" }
},
{
id: "map4",
title: "2015",
filters: { time: "2015", indic_de: "GROWRT" }
},
{
id: "map5",
title: "2016",
filters: { time: "2016", indic_de: "GROWRT" }
},
{
id: "map6",
title: "2017",
filters: { time: "2017", indic_de: "GROWRT" }
},
{
id: "map7",
title: "2018",
filters: { time: "2018", indic_de: "GROWRT" }
},
{
id: "map8",
title: "2019",
filters: { time: "2019", indic_de: "GROWRT" }
},
{
id: "map9",
title: "2020",
filters: { time: "2020", indic_de: "GROWRT" }
},
{
id: "map10",
title: "2021",
filters: { time: "2021", indic_de: "GROWRT" }
},
{
id: "map11",
title: "2022",
filters: { time: "2022", indic_de: "GROWRT" }
},
{
id: "map12",
title: "2023",
filters: { time: "2023", indic_de: "GROWRT" }
},
{
id: "map13",
title: "2024",
filters: { time: "2024", indic_de: "GROWRT" }
}
],
config: {
title: `Population change in Europe since 2012
<span style="color:#208486; font-weight:bold;">*Increase*</span> vs <span style="color:#997a00; font-weight:bold;">*Decrease*</span>`,
thresholds: [-10, -6, -4, -2, 0, 2, 4, 6, 10, 15],
colors: [
"#997a00",
"#be9812",
"#e5b822",
"#f3d163",
"#feea98",
"#e0ebab",
"#beebbe",
"#a0dbbd",
"#7fccbb",
"#54a7a0",
"#208486"
],
legendTitle: "Population change per 1000 inhabitants",
legendTickFormat: "+",
datasetCode: "demo_r_gind3",
unitText: "‰",
mapHeight: 240
}
};
} else if (dataset == "death") {
return {
maps: [
{
id: "map1",
title: "Circulatory",
filters: {
sex: "T",
unit: "RT",
time: "2016",
age: "TOTAL",
icd10: "I"
}
},
{
id: "map2",
title: "Cancer",
filters: {
sex: "T",
unit: "RT",
time: "2016",
age: "TOTAL",
icd10: "C"
}
},
{
id: "map3",
title: "Respiratory",
filters: {
sex: "T",
unit: "RT",
time: "2016",
age: "TOTAL",
icd10: "J"
}
}
// {
// id: "map4",
// title: "Other",
// filters: {
// sex: "T",
// unit: "RT",
// time: 2016,
// age: "TOTAL",
// icd10:
// "A_B&icd10=A_B_OTH&icd10=D00-D48&icd10=D50-D89&icd10=E&icd10=E_OTH&icd10=F&icd10=TOXICO&icd10=F_OTH&icd10=G_H&icd10=G_H_OTH&icd10=K&icd10=L&icd10=M&icd10=N&icd10=N_OTH&icd10=O&icd10=P&icd10=Q&icd10=R&icd10=U071&icd10=U072&icd10=U_COV19_OTH&icd10=V01-Y89&icd10=ACC&icd10=V_Y85&icd10=ACC_OTH&icd10=W00-W19&icd10=W65-W74&icd10=X60-X84_Y870&icd10=X40-X49&icd10=X85-Y09_Y871&icd10=Y10-Y34_Y872&icd10=V01-Y89_OTH"
// }
// }
],
config: {
title: "Causes of death",
thresholds: [
30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 500, 700, 900, 1200
],
colors: [
"#ffffd9",
"#f4fbc3",
"#e5f5b6",
"#d0ecb4",
"#b0e0b6",
"#8ad2ba",
"#65c3bf",
"#45b4c2",
"#2ea0c1",
"#2288ba",
"#216daf",
"#2353a2",
"#213c93",
"#182b79"
],
legendTitle: "Deaths per 100 000 inhabitants",
datasetCode: "hlth_cd_asdr2",
legendTickFormat: "",
unitText: "deaths per 100 000 inhabitants",
mapHeight: 250
}
};
} else if (dataset == "employment") {
return {
maps: [
{
id: "map1",
title: "Industry",
data: await FileAttachment("4A@1.csv")
.csv()
.then((res) =>
Object.fromEntries(res.map((row) => [row.NUTS, row.Value]))
)
},
{
id: "map2",
title: "Construction",
data: await FileAttachment("4B@1.csv")
.csv()
.then((res) =>
Object.fromEntries(res.map((row) => [row.NUTS, row.Value]))
)
},
{
id: "map3",
title: "Distributive trade",
data: await FileAttachment("4C@1.csv")
.csv()
.then((res) =>
Object.fromEntries(res.map((row) => [row.NUTS, row.Value]))
)
}
// {
// id: "map4",
// title: "Other market services",
// data: await FileAttachment("4D@1.csv")
// .csv()
// .then((res) =>
// Object.fromEntries(res.map((row) => [row.NUTS, row.Value]))
// )
// }
],
config: {
title: "Business economy employment",
thresholds: [5, 10, 15, 20, 25, 30, 35, 40],
colors: getColorsFromInterpolator(8),
legendTitle: "%, share of business economy employment",
legendTickFormat: "",
unitText: "%",
mapHeight: 250
}
};
} else if (dataset == "employment2") {
return {
maps: [
{
id: "map1",
title: "Retail trade",
data: await FileAttachment("5A.csv")
.csv()
.then((res) =>
Object.fromEntries(res.map((row) => [row.NUTS, row.Value]))
)
},
{
id: "map2",
title: "Administrative and support services",
data: await FileAttachment("5B.csv")
.csv()
.then((res) =>
Object.fromEntries(res.map((row) => [row.NUTS, row.Value]))
)
},
{
id: "map3",
title: "Education",
data: await FileAttachment("5C.csv")
.csv()
.then((res) =>
Object.fromEntries(res.map((row) => [row.NUTS, row.Value]))
)
},
{
id: "map4",
title: "Human health and social work",
data: await FileAttachment("5D.csv")
.csv()
.then((res) =>
Object.fromEntries(res.map((row) => [row.NUTS, row.Value]))
)
}
],
config: {
title: "Selected services employment",
thresholds: [0.5, 1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 20],
colors: getColorsFromInterpolator(15),
legendTitle: "%, share of business economy employment",
legendTickFormat: "",
unitText: "%",
mapHeight: 250
}
};
}
}
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.
