Public
Edited
Nov 29, 2020
1 star
map = eurostatmap
.map("ch")
.svgId("map1")
.width(600)
.title("Population in Europe")
.titleFontSize(30)
.titleFill("#444")
.scale("60M")
.datasetCode("demo_r_d3dens")
.classifMethod("threshold")
.threshold([50, 75, 100, 150, 300, 850])
.unitText("people/km²")
.tooltipShowFlags(false)
.showLegend(true)
.legend()
.titleText("Population density (people/km²)")
.legend()
.labelDecNb(0)
.legend()
.width(150)
.legend()
.height(250)
.build()
html`<svg id="map1"></svg>`
eurostatmap
.map("ps")
.width(600)
.scale("60M")
.svgId("map2")
.datasetCode("demo_r_pjangrp3")
.filters({ age: "TOTAL", sex: "T", unit: "NR", time: 2016 })
.psMaxSize(25)
.psStrokeWidth(0.3)
.unitText("inhabitants")
.tooltipShowFlags("long")
.showLegend(true)
.legend()
.titleText("Population")
.legend()
.cellNb(6)
.legend()
.labelDecNb(0)
.legend()
.height(200)
.legend()
.width(140)
.build()
html`<svg id="map2"></svg>`
eurostatmap
.map("ct")
.svgId("map3")
.title("NUTS urban/rural typology")
.width(600)
.scale("60M")
.NUTSyear(2013)
.nutsLvl(3)
.csvDataSource({
url:
"https://raw.githubusercontent.com/eurostat/eurostat-map.js/master/examples/urb_rur_typo.csv",
geoCol: "NUTS_ID_2013",
valueCol: "urban_rural"
})
.classToFillStyleCT({ urb: "#fdb462", int: "#ffffb3", rur: "#ccebc5" })
.classToText({ urb: "Urban", int: "Intermediate", rur: "Rural" })
.showLegend(true)
.legend()
.labelDecNb(0)
.legend()
.height(110)
.legend()
.width(130)
.build()
html`<svg id="map3"></svg>`
eurostatmap = require('eurostat-map@2.0.1')
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.
