Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
{
customStyle.draw = (cells, resolution, cg) => {
//draw with HTML canvas in geo coordinates
cg.setCanvasTransform();
const minInc = d3.min(cells, (c) => +c.rIncome);
const maxInc = d3.max(cells, (c) => +c.rIncome);
let minPop;
let maxPop;
if (populationAlpha) {
minPop = d3.min(cells, (c) => +c.ind);
maxPop = d3.max(cells, (c) => +c.ind);
}
// population determines opacity, income determines color
for (let cell of cells) {
// example cell
// {
// "x": 3550000,
// "y": 2850000,
// "imputed": "363",
// "ind": "1593",
// "ind_snv": "31946271.4",
// "rIncome": 1671.1797133291484
// }
//do not draw cells with no data or no "ind"
if (!cell.ind) continue;
// population as transparency
let transparency = 1;
if (populationAlpha) {
let p = (cell.ind - minPop) / (maxPop - minPop);
p = gviz.sExpRev(p, -pd);
transparency = Math.round(p * 10) / 10;
}
//Income as color
let t = (cell.rIncome - minInc) / (maxInc - minInc);
t = gviz.sExpRev(t, -d);
let c = d3.color(d3.interpolateYlGnBu(t));
c.opacity = transparency;
let color = c.formatRgb();
cg.ctx.fillStyle = color;
//fill cell
cg.ctx.fillRect(cell.x, cell.y, resolution, resolution);
}
};
//this redraw need to be executed to be ensure the map redraws when the style draw function changes
map.redraw();
}
map = new gviz.App(container)
.setGeoCenter({ x: 3750000, y: 2960000 })
.setZoomFactor(400)
.setLabelLayer({
url: "https://raw.githubusercontent.com/eurostat/euronym/main/pub/v2/UTF/50/EUR.csv",
preprocess: (lb) => {
//project from geo coordinates to ETRS89-LAEA
const p = proj([lb.lon, lb.lat]);
lb.x = p[0];
lb.y = p[1];
delete lb.lon;
delete lb.lat;
return lb.cc == "FR";
},
style: (lb, zf) => {
if (lb.rs < zf) return;
if (lb.r1 < zf) return "1em Arial";
return "1.5em Arial";
},
haloColor: () => "white"
})
proj = d3
.geoAzimuthalEqualArea()
.rotate([-10, -52])
.reflectX(false)
.reflectY(true)
.scale(6378137)
.translate([4321000, 3210000])
ds = map.makeMultiScaleTiledGridDataset(
[200, 400, 1000, 2000, 5000, 10000, 20000, 50000, 100000],
(r) =>
"https://raw.githubusercontent.com/jgaffuri/tiled-grid-france-filosofi/main/out/csv/met/inc/2019/" +
r +
"m/",
{
preprocess: (c) => {
c.rIncome = c.ind_snv / c.ind / 12;
}
}
)
layer = {
const lay = new gviz.Layer(ds, [customStyle], {
pixNb: 12,
cellInfoHTML: (c) => {
return `Average monthly income: <strong>€${Math.floor(
c.rIncome
)}</strong> <br>
Inhabitants: <strong>${Math.floor(c.ind)}</strong>
`;
}
});
map.layers = [lay];
return lay;
}
roughjs = import("https://unpkg.com/roughjs@4.6.4/bundled/rough.esm.js?module")
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.
