Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
Public
Edited
Dec 15
1 fork
7 stars
Also listed in…
Eurostat
bivariateMap = eurostatmap
.map("chbi")
.width(width / 1.3)
.svgId("bivariate")
.title("Unemployment and population density")
.subtitle(
"% share of unemployed persons aged 20-64 years & inhabitants per km²"
)
.titleFontSize(24)
.subtitleFontSize(16)
.nutsLvl(1)
.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: 2019 },
unitText: "% unemployed"
})
.classToFillStyle((i, j) => {
if (i == 0 && j == 2) return colors[6];
if (i == 1 && j == 2) return colors[7];
if (i == 2 && j == 2) return colors[8];
if (i == 0 && j == 1) return colors[3];
if (i == 1 && j == 1) return colors[4];
if (i == 2 && j == 1) return colors[5];
if (i == 0 && j == 0) return colors[0];
if (i == 1 && j == 0) return colors[1];
if (i == 2 && j == 0) return colors[2];
return "gray";
})
// .startColor("#e8e8e8")
// .color1("#be64ac")
// .color2("#5ac8c8")
// .endColor("#3b4994")
.scale("10M")
.legend({
boxFill: "none",
squareSize: 100,
rotation: legendRotation,
labelFontSize: 15,
label1: "Population / km²",
label2: "Unemployment ",
x: 0,
y: legendRotation == 0 ? 170 : 140,
arrowWidth: 30,
arrowHeight: 30,
noDataYOffset: legendRotation == 0 ? 10 : 30
})
.labelling(false)
.labelsToShow(["countries"])
.labelShadow(["countries"])
.labelShadowWidth({ seas: 3, countries: 1.1, cc: 1, values: 1 })
.drawGraticule(false)
.noDataFillStyle("#bfbfbf")
.drawCoastalMargin(false)
.zoomExtent(enableZoom ? [1, 4] : false)
.geoCenter([4900000, 3500000])
.fontFamily("Source Serif Pro")
.frameStroke("white")
.seaFillStyle("white")
.frameStrokeWidth(0)
.cntrgFillStyle("white")
.cntbnStroke("white")
.nutsrgSelFillSty("red")
.nutsbnStrokeWidth({ 0: 0.5 })
.nutsbnStroke({ 0: "black", 1: "none", co: "none" })
.transitionDuration(0)
.build()
schemes = [
{
name: "BuPu",
colors: [
"#e8e8e8",
"#ace4e4",
"#5ac8c8",
"#dfb0d6",
"#a5add3",
"#5698b9",
"#be64ac",
"#8c62aa",
"#3b4994"
]
},
{
name: "CH01M03 - PalA",
colors: [
"#17256B",
"#2644A7",
"#738CE5",
"#9CC1FA",
"#FF8080",
"#EFD18C",
"#C6AF5D",
"#B09120",
"#866110"
]
},
{
name: "CH02M03 - PalB",
colors: [
"#E9E9E9",
"#91B8E1",
"#388AE2",
"#CDA0D0",
"#807EC8",
"#2644A7",
"#B656BD",
"#6C41AE",
"#17256B"
]
},
{
name: "CH02M03 - PalC",
colors: [
"#003922",
"#007243",
"#33A033",
"#A2DDB2",
"#EFD18C",
"#9CC1FA",
"#738CE5",
"#2644A7",
"#17256B"
]
},
// made using https://observablehq.com/@benjaminadk/bivariate-choropleth-color-generator, based on ESTAT style guide colors
{
name: "Sunset Red / Cornflower",
colors: [
"#e9e9e9",
"#91b8e1",
"#3684d8",
"#e19c9c",
"#8c7b96",
"#345890",
"#d63d3d",
"#86303b",
"#312339"
]
},
{
name: "Sunset Red / Cobalt",
colors: [
"#e9e9e9",
"#8594c4",
"#2441a0",
"#e19c9c",
"#806383",
"#232b6b",
"#d63d3d",
"#7a2733",
"#21112a"
]
},
{
name: "Sunset Red / Teal",
colors: [
"#e9e9e9",
"#85b5b6",
"#1f7e80",
"#e19c9c",
"#807979",
"#1d5456",
"#d63d3d",
"#7a2f30",
"#1c2122"
]
},
{
name: "Fuscia / Forest Green",
colors: [
"#e9e9e9",
"#90c390",
"#319931",
"#cda0d0",
"#7f8680",
"#2b692b",
"#b656bd",
"#6c4570",
"#243626"
]
},
{
name: "Fuscia / Cornflower",
colors: [
"#e9e9e9",
"#91b8e1",
"#3684d8",
"#cda0d0",
"#807ec8",
"#2f5ac0",
"#b656bd",
"#6c41ae",
"#282fa8"
]
},
{
name: "Fuscia / Teal",
colors: [
"#e9e9e9",
"#85b5b6",
"#1f7e80",
"#cda0d0",
"#757ca2",
"#1b5672",
"#b656bd",
"#63408d",
"#172d63"
]
},
{
name: "Berry / Cornflower",
colors: [
"#e9e9e9",
"#91b8e1",
"#3684d8",
"#cc8aa8",
"#7f6ca2",
"#2f4e9c",
"#a71458",
"#681055",
"#260b52"
]
},
{
name: "Berry / Cobalt",
colors: [
"#e9e9e9",
"#8594c4",
"#2441a0",
"#cc8aa8",
"#74588d",
"#202673",
"#a71458",
"#5f0d4a",
"#1a063c"
]
},
{
name: "Berry / Dark Orchid",
colors: [
"#e9e9e9",
"#a78dd3",
"#632bbc",
"#cc8aa8",
"#925399",
"#561987",
"#a71458",
"#780c50",
"#470447"
]
},
{
name: "Sienna / Teal",
colors: [
"#e9e9e9",
"#85b5b6",
"#1f7e80",
"#c6a381",
"#717e65",
"#1a5847",
"#a35b17",
"#5d4612",
"#15310d"
]
}
// {
// name: "RdBu",
// colors: [
// "#e8e8e8",
// "#e4acac",
// "#c85a5a",
// "#b0d5df",
// "#ad9ea5",
// "#985356",
// "#64acbe",
// "#627f8c",
// "#574249"
// ]
// },
// {
// name: "GnBu",
// colors: [
// "#e8e8e8",
// "#b5c0da",
// "#6c83b5",
// "#b8d6be",
// "#90b2b3",
// "#567994",
// "#73ae80",
// "#5a9178",
// "#2a5a5b"
// ]
// },
// {
// name: "PuOr",
// colors: [
// "#e8e8e8",
// "#e4d9ac",
// "#c8b35a",
// "#cbb8d7",
// "#c8ada0",
// "#af8e53",
// "#9972af",
// "#976b82",
// "#804d36"
// ]
// },
// {
// name: "topologies",
// colors: [
// "#71a8df",
// "#286eb4",
// "#1e5388",
// "#fddba2",
// "#faa519",
// "#c87e04",
// "#9dd58a",
// "#5fb441",
// "#468631"
// ]
// }
]
eurostatmap = require("eurostat-map@3.6.40")
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.
