The avatar for @joewdavies
Joe Davies
Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
Public
Edited
Jun 10
6 forks
56 stars
Eurostat
Grid Cartogram of EuropeMapping sharesmap: stripe compositionMapping with Textures.jsEurope in watercolormap: bivariate choroplethNUTS regions (The Nomenclature of territorial units for statistics): PerspectiveSmall multiple mapsDorling cartogram of Europe with labelsNUTS Dorling CartogramDorling Cartogram ConfigurationAnimated Dorling CartogramAnimating Gridded Statistics using regl
Hello, eurostat-map
Visualizing Eurostat grid data using Three.js & D3
Also listed in…
Eurostat-map.js
30 Day Map Challenge
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
eurostatmap = require("eurostat-map@4.2.4")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
spainProjection = d3.geoAzimuthalEqualArea().rotate([2.3, -41.55]).scale(3500)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
<svg style='display:none;'>
<defs>
<filter id="blur-effect" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
</defs>
</svg>
<style>
/* thicken national borders */
#minimap .em-cntbn {
stroke-width: 3px !important;
stroke: white !important;
filter: url(#blur-effect);
}
</style>
Insert cell
minimapMap = {
const map = eurostatmap
.map("choropleth")
.svgId("minimap")
.stat({
eurostatDatasetCode: "demo_r_d3dens",
unitText: "people/km²",
filters: { TIME: "2023" }
})
.colorFunction(d3.interpolatePurples)
.nutsLevel(2)
.nutsYear(2024)
.position({ x: 4400000, y: 3100000, z: 1400 })
.zoomExtent([-100, 1000])
.minimap({
x: 705,
y: 90,
z: 230,
countryId: "DE",
//size: 120,
debounce: 10
})
.tooltip({ omitRegions: ["RU"] });

map.build();
return map;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
<style>
/*our non-default styles*/

/* map frames */
.em-insets .em-frame{
stroke:grey;
stroke-width:0.3px !important;
}
/* Hide non-nuts borders */
g#em-cntbn > .em-bn-oth:not(.em-bn-co):not(.em-bn-cc):not(.em-bn-eu):not(.em-bn-efta) {
stroke-width: 0px !important;
}
/* .em-cntrg {
display:none;
} */
</style>
Insert cell
Insert cell
Insert cell

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.
Learn more