Public
Edited
Jan 29, 2023
Insert cell
Insert cell
test_pyramide2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
gap = 50
Insert cell
ticks = d3.range(0,((max_x/10)-(max_x/10 ) % 1) *10, max_x/5 - (max_x /5 % 1))
Insert cell
zone = "Département"
Insert cell
x_axis = [Plot.ruleY([0], { x1: 1, x2: 8, dx: gap, strokeWidth: 0.5, stroke:'#999' }),
Plot.ruleX(ticks, { x: d => d, y: 1, insetBottom: -5, dy: 25, dx: gap, stroke:'#999' }),
Plot.text(ticks, { x: d => d, y: 1, dx: gap, dy: 25 }),

//Plot.ruleY([0], { x1: 0, x2: -30, dx: -gap, strokeWidth: 0.5, stroke:'#999' }),
Plot.ruleX(ticks, { x: d => -d, y: 1, insetBottom: -5, dy: 25, dx: -gap, stroke:'#999' }),
Plot.text(ticks, { x: d => -d, y: 1, dy: 25,dx: -gap }),

// Plot.text(['← Männer in Tausend'], { x: 0, y: 0, dx: -gap, dy: 25, textAnchor: 'end', fontWeight: 'bold' }),
//Plot.text(['Frauen in Tausend → '], { x: 0, y: 0, dx: gap, dy: 25, textAnchor: 'start', fontWeight: 'bold' })
]
Insert cell
y_axis = [
Plot.text(test_pyramide2, { y: test_pyramide2.filter(d => d.sexe_declare ==="HOMME" && d.departement === zone).map(d =>d.indice_age) ,
x: 0,
text: test_pyramide2.filter(d => d.sexe_declare ==="HOMME" && d.departement === zone).map(d =>d.age)})//,
//Plot.text(["Jahre"], { y: 80, dy: 10, fontWeight: 400 }),
//Plot.ruleY(d3.range(1, 9, 1), { x1: d => d % 10 == 0 ? 0 : gap, x2: 25, dx: gap/2, strokeWidth: 0.2 }),
//Plot.ruleY(d3.range(1, 9, 1), { x1: d => d % 10 == 0 ? 0 : -gap, x2: -25, dx: -gap/2, strokeWidth: 0.2 })
]
Insert cell
max_x = d3.max(test_pyramide2.filter(d => d.departement === zone), d => d.n)*1.3
Insert cell
Plot.plot({
//marginLeft: 100,
marginBottom: 30,
x: {tickFormat: Math.abs, ticks: 5, axis: null,
domain: [-max_x,max_x]
},
y: {axis: null,
domain: d3.sort(test_pyramide2, d => -d.indice_age).map(d => d.indice_age)
},
marks: [
x_axis,
y_axis,
Plot.text(["Hommes"], { y: 8, x: -0.8*max_x, fontWeight: 700 }),
Plot.text(["Femmes"], { y: 8, x: 0.8*max_x, fontWeight: 700 }),
Plot.barX(test_pyramide2,{
y: "indice_age",
x: "n",
fill: "#d38f9e",
dx: gap,
title: (d) => `${d.n} femmes de ${d.age} ont enregistré au moins une demande dans la semaine`,
filter: d => d.sexe_declare === "FEMME" & d.departement === zone
}),
Plot.barX(test_pyramide2,{
y: "indice_age",
x: d => -d.n,
dx: -gap,
fill: "#878787",
filter: d => d.sexe_declare === "HOMME" & d.departement === zone,
title: (d) => `${d.n} hommes de ${d.age} ont enregistré au moins une demande dans la semaine`

})
]
})
Insert cell

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.
Learn more