Published
Edited
Oct 15, 2020
1 star
chart = {
const height=600;
const svg = d3.select(DOM.svg(width, height))
const lambertAzimuthalEqualArea = d3.geoAzimuthalEqualArea()
.rotate([-20.0, -52.0])
.translate([width / 2, height / 2])
.scale(700)
.precision(.1);
// Use Mercator projection
var projection = lambertAzimuthalEqualArea
// Powerfull stuff! I didnt know where exactly my dataset was located projection-wise,
// but .fitExtent() allows you to fit your dataset within a specified canvas
.fitSize([width, height], {
"type": "GeometryCollection",
"geometries": lastRegionalData.filter(d => d.geometry && d.country != 'France' && d.country != 'Spain').map(d => d.geometry.geometry)
});
var path = d3.geoPath()
.projection(projection);
// Draw each province as a path
svg.append('g').selectAll('path')
.data(lastRegionalData)
.enter().append('path')
.attr('d', d => path(d.geometry))
// Styling
.style('fill', c => mapIncidenceColorFun(c))
.style('stroke', '#444')
return svg.node()
}
mapColors=['#f0ffd0','#e8f0a4','#fbc85e','#ff9246','#eb5a31','#b21d1e','#780009'];
mapIncidenceClrScale = d3.scaleThreshold(
[ 5, 10, 20, 40, 80, 160],
mapColors);
mapIncidenceColorFun = {
return (c => c ? mapIncidenceClrScale(+c.rate_14_day_per_100k) : "#808080");
}
lastRegionalData.map(d=>d.geometry).filter(a=>a)
lastRegionalData.filter(a => a.country == 'Slovenia')
lastRegionalData = {
const regArrs = d3.group(jsonRegionalData, d => d.nuts_code);
const ret = [];
regArrs.forEach(valArr => {
const objVal = valArr[d3.maxIndex(valArr, d => d.year_week)];
if (objVal && objVal.nuts_code) {
objVal.geometry = europeJsonLookup[objVal.nuts_code];
ret.push(objVal);
}
});
return ret;
}
europeJsonLookup = {
const ret = {};
europeJson.features.forEach(f => {
ret[f.id] = f;
});
return ret;
}
europeJson=d3.json("https://gisco-services.ec.europa.eu/distribution/v2/nuts/geojson/NUTS_RG_10M_2021_4326.geojson");
jsonRegionalData.filter(d => d.country == 'Spain')
jsonRegionalData = {
const wkbk = xlsx.read(binaryRegionalData, {type: 'array'});
return xlsx.utils.sheet_to_json(wkbk.Sheets['Sheet1'], {range: 0});
}
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.
