Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
Public
Edited
Dec 5
24 stars
animation = {
let container = html`<div style="width:${width}px; height:${height}px"></div>`;
ReglMapAnimation.animation()
.container(container)
.pointData(pointData)
.logoData(logoData)
.centerLogo(true)
.logoWidth(300)
.logoHeight(40)
.pointWidth(0.6)
.pointMargin(0)
.mapPadding(0)
.width(width)
.height(height)
.colors(["#ffeb99", "#c7e9b4", "#7fcdbb", "#41b6c4", "#104f99", "#17256b"])
.thresholds([0, 1, 500, 2500, 12500, 62500])
.duration(1000)
.delayAtEnd([500, 1000, 1000]) // for each transition (logo > map > chart), specify the delay at the end
.xAxisTitle("Population (number of inhabitants per 25 km²)")
.xAxisTitleOffsetX(-150)
.yAxisTitleOffsetX(-10)
.yAxisTitle("Area (in km²)")
.binLabels(true)
.binMargin(0.001)
.binYLabelFunction(function (bin) {
let count = bin.binCount * 25;
let str = count.toLocaleString("en").replace(/,/gi, " ");
return str + " km²";
})
.initialAnimation("logo")
.binLabelOffsetX(0)
.chartOffsetY(-70)
.legend(true)
.legendTitle("Population per 25 km²")
.legendHeight(200)
.legendFontSize(16)
.animate();
return container;
}
width = 750
sortedPointData = pointData.sort((a, b) => a.y - b.y) // b - a for reverse sort
logoData = d3.csvParse(await FileAttachment("logo.csv").text())
ReglMapAnimation = require("regl-map-animation")
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.
