The avatar for @joewdavies
Joe Davies
Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
Public
Edited
Dec 26
Fork of Mapping with pie charts
6 stars
Eurostat
Grid Cartogram of Europe
Mapping shares
map: 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 reglHello, eurostat-mapVisualizing Eurostat grid data using Three.js & D3
Also listed in…
Dorling Cartograms
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
data = {
//for each region, create object with each cause of death and its rate
let pieData = [];
let all = [
...wholesale,
...retail,
...food,
...employment,
...accommodation,
...totalEmployment,
...centroids
];
let merged = mergeObjectsInArray(all, "id").map((o) => {
o.other =
o.total > o.wholesale + o.retail + o.food + o.employment + o.accommodation
? Math.round(
o.total -
o.wholesale -
o.retail -
o.food -
o.employment -
o.accommodation
)
: 0;
return o;
});
merged.filter((d) => {
let countryCode = d.id.substring(0, 2);
if (!countryCode.includes("EU") && d.value !== null && d.geometry) {
pieData.push(
//pie chart data has to be an array of objects
{
id: d.id,
name: d.name,
geometry: d.geometry,
total: d.total,
// d.wholesale +
// d.retail +
// d.food +
// d.employment +
// d.accommodation +
// d.other, // for some reason the API is returning a total inferior to this (d.total),
data: [
{ name: "Wholesale", value: d.wholesale },
{ name: "Retail", value: d.retail },
{ name: "Food", value: d.food },
{ name: "Employment", value: d.employment },
{ name: "Accommodation", value: d.accommodation },
{ name: "Other", value: d.other }
]
}
);
return d;
}
});
return pieData;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
wholesale = indexStats(
await d3.json(
`https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/sbs_r_nuts06_r2?geoLevel=nuts${nutsLevel}&indic_sb=V16110&time=${time}&nace_r2=G46`
)
).map((d) => {
d.wholesale = d.value;
return d;
})
Insert cell
Insert cell
retail = indexStats(
await d3.json(
`https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/sbs_r_nuts06_r2?geoLevel=nuts${nutsLevel}&indic_sb=V16110&time=${time}&nace_r2=G47`
)
).map((d) => {
d.retail = d.value;
return d;
})
Insert cell
Insert cell
food = indexStats(
await d3.json(
`https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/sbs_r_nuts06_r2?geoLevel=nuts${nutsLevel}&indic_sb=V16110&time=${time}&nace_r2=I56`
)
).map((d) => {
d.food = d.value;
return d;
})
Insert cell
Insert cell
employment = indexStats(
await d3.json(
`https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/sbs_r_nuts06_r2?geoLevel=nuts${nutsLevel}&indic_sb=V16110&time=${time}&nace_r2=N78`
)
).map((d) => {
d.employment = d.value;
return d;
})
Insert cell
Insert cell
accommodation = indexStats(
await d3.json(
`https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/sbs_r_nuts06_r2?geoLevel=nuts${nutsLevel}&indic_sb=V16110&time=${time}&nace_r2=I55`
)
).map((d) => {
d.accommodation = d.value;
return d;
})
Insert cell
Insert cell
//API IS RETURNING WRONG TOTALS?
totalEmployment = indexTotals(
await d3.json(
`https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/sbs_r_nuts06_r2?indic_sb=V16110&geoLevel=nuts${nutsLevel}&time=${time}&nace_r2=I&nace_r2=N&nace_r2=G`
)
).map((d) => {
d.total = d.value;
return d;
})
Insert cell
indexTotals = function (data) {
// add all values together
let numberOfCategories = data.size[1]; // (e.g. 4) (nace_r2=G47,etc)
let numberofValues = data.size[3]; // (e.g. 129) data.value

// for each GEO code
Object.entries(data.dimension.geo.category.index).forEach((regionCode, i) => {
let index = regionCode[1]; // geo code's index

// for each category (filter), add its results
for (let c = 0; c < numberOfCategories; c++) {
// for each set of results (373)
if (data.value[index + numberofValues * (c + 1)]) {
data.value[index] =
data.value[index] + data.value[index + numberofValues * (c + 1)];
}
}
});

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
);
}
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

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more