Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
Public
Edited
Dec 26
Paused
18 stars
path = d3.geoPath().projection(projection);
function simulate() {
//set region x/y as centroid
regions.forEach(function(region) {
region.x = region.x0;
region.y = region.y0;
});
color.domain(d3.extent(regions, d => d.u));
var links = d3.merge(
neighbours.map(function(neighborSet, i) {
return neighborSet
.filter(j => regions[j])
.map(function(j) {
return {
source: i,
target: j,
distance: regions[i].r + regions[j].r + 3
};
});
})
);
var simulation = d3
.forceSimulation(regions)
.force(
"cx",
d3
.forceX()
.x(d => width / 2)
.strength(0.02)
)
.force(
"cy",
d3
.forceY()
.y(d => height / 2)
.strength(0.02)
)
.force("link", d3.forceLink(links).distance(d => d.distance))
.force(
"x",
d3
.forceX()
.x(d => d.x)
.strength(0.1)
)
.force(
"y",
d3
.forceY()
.y(d => d.y)
.strength(0.1)
)
.force(
"collide",
d3
.forceCollide()
.strength(0.8)
.radius(d => d.r + 3)
)
.stop()
.on("end", function() {
//fade-in circles
//fade-out countries
//reset positions
});
while (simulation.alpha() > 0.1) {
simulation.tick();
}
//assign interpolator to each region
regions.forEach(function(region) {
var circle = pseudocircle(region);
var closestPoints = region.rings.slice(1).map(function(ring) {
var i = d3.scan(circle.map(point => distance(point, ring.centroid)));
return ring.map(() => circle[i]);
});
var interpolator = d3.interpolateArray(region.rings, [
circle,
...closestPoints
]);
region.interpolator = function(t) {
var str = pathString(interpolator(t));
// Prevent some fill-rule flickering for MultiPolygons
if (t > 0.99) {
let s = str.split("Z")[0] + "Z";
return s;
}
return str;
};
});
//end state
regionsSvg
.transition()
.attrTween("d", firstTransition)
.attr("fill", d => d3[colorInterpolation](color(d.u))) // color by unemployment (u)
.transition()
.delay(delay)
.duration(duration)
.attrTween("d", node => t => secondTransition(node, t))
.attr("d", feature => path(feature))
.on("end", (d, i) => i || setTimeout(()=>{simulate()},endDelay));
}
simulate()
function addEurostatDataToRegion(region) {
let regionId = region.properties.id;
let populationId = population_data.dimension.geo.category.index[regionId];
let unempl_id = unemployment_data.dimension.geo.category.index[regionId];
let p,u
p = population_data.value[populationId] || 0;
u = unemployment_data.value[unempl_id] || 0;
region.population = p;
region.u = u;
region.r = scaleRadius(p);
}
unemployment_data = await d3.json(
"https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/lfst_r_lfu3rt?format=json&lang=en&isced11=TOTAL&sex=T&time=2021&age=Y15-24&geoLevel=nuts1&geoLevel=aggregate"
)
html `<style>path {
stroke: #000;
stroke-width: 1px;
} h1 {max-width: unset;}</style>`
topojson = require("topojson")
d3 = require("d3")
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.
