Cartography associate professor (MCF) at Toulouse-Jean Jaurès university.
Public
Edited
Oct 5, 2023
1 star
carte = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let myApp = new gridviz.App(container, {legendDivId: 'legendContainer'})
//set position and zoom
.setGeoCenter({ x: 3763437, y: 2891045 })
.setZoomFactor(50.1)
//add CSV layer
.addMultiScaleTiledGridLayer(
[200, 400, 1000, 2000, 5000, 10000, 20000, 50000],
(r) =>
'https://raw.githubusercontent.com/jgaffuri/tiledgrids/main/data/france/filosofi/ind/2017/' +
r +
'm/',
[
new gridviz.ShapeColorSizeStyle({
sizeCol: 'Ind',
size: (v, r, s, zf) => 1.4 * r * gridviz.sPow(v / s.max, 0.13),
colorCol: 'age_ratio',
color: (v, r, s) => d3.interpolateSpectral(1 - v),
shape: () => 'circle',
}),
],
{
pixNb: 6,
preprocess: (c) => {
//<24
const yyy = +c.Ind_0_3 + +c.Ind_4_5 + +c.Ind_6_10 + +c.Ind_11_17 + +c.Ind_18_24
//>65
const ooo = +c.Ind_65_79 + +c.Ind_80p
c.age_ratio = yyy + ooo == 0 ? 0 : (yyy - ooo) / (yyy + ooo)
c.age_ratio = c.age_ratio * 0.5 + 0.5
},
}
)
myApp.layers[0].styles[0].legends.push(
new gridviz.SizeLegend({
title: 'Number of inhabitants',
exaggerationFactor: 0.8,
shape: 'circle',
fillColor: '#e54f37',
})
)
myApp.layers[0].styles[0].legends.push(
new gridviz.ColorLegend({
title: 'Age Ratio',
width: 400,
ticks: 5,
colorRamp: d3.interpolateSpectral,
fun: (v, r, s) => d3.interpolateSpectral(1 - v),
})
)
}
legendContainer = {
let lc = DOM.element('div', { style: `width:${width/2}px;height:${width/3}px` });
yield lc;
}
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.
