Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
totalExtent = d3.extent(totalDeathRate.map(r => r.value))
radiusFunction = d3
.scaleSqrt()
.domain(totalExtent)
.range([7, 17])
radius = 11
addPieChartsToMap = function (map) {
// Create segments for each region
data.forEach((region) => {
if (region.geometry) {
let x = projection(region.geometry.coordinates)[0];
let y = projection(region.geometry.coordinates)[1];
let arcs = pie(region.data);
map
.append("g")
.attr("transform", "translate(" + x + "," + y + ")")
.attr("stroke", "white")
.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", (d) => sectorColor(d.data.name))
.attr(
"d",
d3.arc().innerRadius(0).outerRadius(radiusFunction(region.total))
)
.append("title")
// title will not actually be visible
.text((d) => `${d.data.name}: ${d.data.value}`);
}
});
}
arc = d3
.arc()
.innerRadius(0)
.outerRadius(radius)
pie = d3
.pie()
.sort(null)
.value(d => d.value)
sectorColor = function(value) {
if (value == "Cancer") {
return "#A4CDF8";
} else if (value == "Circulatory") {
return "#2E7AF9";
} else if (value == "Respiratory") {
return 'orange';
} else if (value == "Other") {
return '#FFCC80';
}
}
legendX = width - 25
html`<style>.legend-text{font-size:0.8rem;}</style>`
time = 2016
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
);
}
function mergeObjectsInArray(array, property) {
const newArray = new Map();
array.forEach((item) => {
const propertyValue = item[property];
newArray.has(propertyValue) ? newArray.set(propertyValue, { ...item, ...newArray.get(propertyValue) }) : newArray.set(propertyValue, item);
});
return Array.from(newArray.values());
}
data = {
//for each region, create object with each cause of death and its rate
let pieData = [];
let all = [
...cancerDeathRate,
...circulatoryDeathRate,
...respiratoryDeathRate,
...totalDeathRate,
...centroids
];
let merged = mergeObjectsInArray(all, "id").map(o => {
o.other = Math.round(o.total - o.cancer - o.circulatory - o.respiratory);
return o;
});
merged.filter(d => {
let countryCode = d.id.substring(0, 2);
if (!countryCode.includes("EU") && d.value !== null) {
pieData.push(
//pie chart data has to be an array of objects
{
id: d.id,
name: d.name,
geometry: d.geometry,
total: d.total,
data: [
{ name: "Circulatory", value: d.circulatory },
{ name: "Cancer", value: d.cancer },
{ name: "Respiratory", value: d.respiratory },
{ name: "Other", value: d.other }
]
}
);
return d;
}
});
return pieData;
}
circulatoryDeathRate = indexStats(
await d3.json(
`https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/hlth_cd_asdr2?geoLevel=nuts1&sex=T&unit=RT&time=${time}&age=TOTAL&icd10=I`
)
).map((d) => {
d.circulatory = d.value;
return d;
})
cancerDeathRate = indexStats(
await d3.json(
`https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/hlth_cd_asdr2?geoLevel=nuts1&sex=T&unit=RT&time=${time}&age=TOTAL&icd10=C`
)
).map((d) => {
d.cancer = d.value;
return d;
})
respiratoryDeathRate = indexStats(
await d3.json(
`https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/hlth_cd_asdr2?format=json&lang=en&geoLevel=nuts1&sex=T&unit=RT&time=${time}&age=TOTAL&icd10=J`
)
).map((d) => {
d.respiratory = d.value;
return d;
})
totalDeathRate = indexStats(
await d3.json(
`https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/hlth_cd_asdr2?format=json&lang=en&geoLevel=nuts1&sex=T&time=${time}&age=TOTAL&icd10=A-R_V-Y`
)
).map((d) => {
d.total = d.value;
return d;
})
centroidsData = (
await fetch(
`https://raw.githubusercontent.com/eurostat/Nuts2json/master/pub/v2/2016/3035/nutspt_1.json`
)
).json()
centroids = centroidsData.features.map(c => {
c.id = c.properties.id;
return c;
})
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.
