Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
graph = {
// filter to importers
let paths = data
.filter((d) => importers.has(d.target))
.map((d) => Object.assign({}, d));
// add stops
paths.forEach((d) => (d.stops = []));
// paths.forEach(d => { if (centroid(d.target)[0] > width / 2) (d.stops = [...d.stops, "RUS"]) })
// define nodes
const nodes = Array.from(
new Set(paths.flatMap((d) => [d.source, ...d.stops, d.target])),
(iso) => {
const [x, y] = centroid(iso);
return { id: iso, x, y };
}
);
// define links
let links = [],
linkValues = new Map();
for (let path of paths) {
const stops = [path.source, ...path.stops, path.target];
let pairs = d3
.pairs(stops)
.map(([source, target]) => ({ source, target, value: path.value }));
for (let pair of pairs) {
const key = `${pair.source} - ${pair.target}`;
const value = linkValues.get(key) || 0;
if (!value) links.push(pair);
linkValues.set(key, value + pair.value);
}
}
links.forEach((d) => (d.value = linkValues.get(`${d.source} - ${d.target}`)));
return { nodes, links };
}
strokeWidth = d3
.scaleLinear()
.domain([0, d3.max(data, (d) => d.value)])
.range([2, 10])
// our parsed eurostat data, ready to be sankeyed
data = eurostatData
// .filter((d) => exporter.value == d.id)
.filter((d) => importer.has(d.id))
.map((d) => ({
source: exporter.value,
target: d.id,
value: d.value
}))
rawEurostatAPIData = d3.json(
// total trade
`https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/ext_tec10?format=json&lang=en&unit=THS_EUR&sizeclas=TOTAL&stk_flow=EXP&partner=${exporter.value}&time=2021&geoLevel=country`
)
rawEurostatAPIData2 = d3.json(
// inland waterways
`https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/iww_go_atygofl?format=JSON&time=2022&unit=THS_T&nst07=TOTAL&c_load=${exporter.value}&lang=en&`
)
eurostatData = indexStats(rawEurostatAPIData)
indexStats = function (data) {
const arr = Object.entries(data.dimension.geo.category.index)
// define our object structure
.map(([key, val]) => ({
id: key,
value: data.value[val] || null,
name: data.dimension.geo.category.label[key]
}));
//sort the array in ascending order by 'value'
return arr.sort((a, b) =>
a.value > b.value ? -1 : b.value > a.value ? 1 : 0
);
}
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.
