plot2 = Plot.plot({
y: { grid: false, reverse: true},
x: {tickFormat: Math.abs, axis: null,},
//title: md`### Pyramide des âges du pop&soc 620` ,
marginLeft: 100,
marginRight: 100,
paddingRight: 100,
marginTop: 50,
marginBottom: 80,
width: 800,
height: 600,
label: null,
tooltip: {
stroke: "white",
},
marks: [
Plot.axisX({ticks: [ -100000, -200000, -300000, -400000, -500000],
tickFormat: d => Math.abs(d)/1000, fontSize:0, dx:-20, dy:5}),
Plot.axisX({ ticks: [ 100000, 200000, 300000, 400000, 500000],
tickFormat: d => Math.abs(d)/1000, fontSize:0, dx: 20, dy:5}),
Plot.axisY({
frameAnchor: "middle",
dx: 39,
tickSize: 30,
ticks: [0,10,20,30,40,50,60,70,80,90,100],
label: null,
stroke: "white",
textStroke: "white",
textStrokeWidth: 0,
fontSize: 14
}),
Plot.text(["↑ Ages"], { frameAnchor: "top", dy: -20, dx: -4, fontSize:15 }),
Plot.barX(df2, { filter: (d) => d.age <= Age, x: (d) => -d.hommes, y: "age", dx: -20,
channels: {Hommes: {value: 'hommes', label: "Nombre d'hommes:"},
Age: {value: 'age', label: 'Age:'},
annee: {value: "annee", label: 'Année de naissance:'}},
fill: "#512672", fillOpacity: 1,
stroke: '#512672', strokeWidth: 3 ,
rx1: 5, rx2: 0, inset:-.1,
tip: {format: {x: false, y: false, annee: "d",},anchor: "top", stroke: "transparent"}}),
Plot.barX(df2, {filter: (d) => d.age <= Age, x: (d) => d.femmes , y: "age", dx: 20,
channels: {Femmes: {value: 'femmes', label: 'Nombre de femmes:'},
Age: {value: 'age', label: 'Age:'},
annee: {value: "annee", label: 'Année de naissance:'}},
fill: "#ff554e", fillOpacity: 1,
stroke: '#ff554e', strokeWidth: 3 ,
rx1: 0, rx2:5, inset: -.1,
tip: {format: {x: false, y: false, annee: "d"}, anchor: "bottom", stroke: "transparent"} }),
Plot.image(ages1,{filter: (d) => d.age <= Age, x: "xc", y: "yc" , src: "img",
channels: {xc: {value: 'xx', label: ''},
yc: {value: 'xy', label: ''},
comment: {value: 'comment', label: "" }}
, dx:+20, width:14, r:14,
tip: {format: {x: false, y: false, comment: true}, lineWidth: 20, dx: +15},
Anchor: "bottom", title: (d) => [d.comment].join("\n\n")}),
Plot.text(['Femmes →'], {x: d=> 200000, y: d=>100, dy: -20.5, fontSize: 17}),
Plot.text(['← Hommes'], {x: d=> -200000, y: d=>100, dy: -20.5, fontSize: 17}),
Plot.text(['+'], {x: d=> 15000, y: d=>100, dx: 2, fontSize: 11}),
Plot.text(["Population (en milliers)"], { frameAnchor: "bottom", dy:45, fontSize: 17 }),
Plot.text(["500"], {x: d => -500000, y:d => 0, dy:22, dx: -20}),
Plot.text(["400"], {x: d => -400000, y:d => 0, dy:22, dx: -20}),
Plot.text(["300"], {x: d => -300000, y:d => 0, dy:22, dx: -20}),
Plot.text(["200"], {x: d => -200000, y:d => 0, dy:22, dx: -20}),
Plot.text(["100"], {x: d => -100000, y:d => 0, dy:22, dx: -20}),
Plot.text(["500"], {x: d => 500000, y:d => 0, dy:22, dx: 20}),
Plot.text(["400"], {x: d => 400000, y:d => 0, dy:22, dx: 20}),
Plot.text(["300"], {x: d => 300000, y:d => 0, dy:22, dx: 20}),
Plot.text(["200"], {x: d => 200000, y:d => 0, dy:22, dx: 20}),
Plot.text(["100"], {x: d => 100000, y:d => 0, dy:22, dx: 20}),
]
})
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins');
p, h1, h2, h3 {
font-family: poppins, sans-serif;
color: #414141;
}
p {
font-family: poppins, sans-serif;
font-size: 11px
}
[aria-label="text"] {
font-family: poppins, sans-serif;
//color: #000;
font-size: 15px;
}
[aria-label="y-axis tick label"] {
font-family: poppins, sans-serif;
}
:where(.plot-d6a7b5-swatches) {
font-family: poppins, sans-serif;
font-size: 14px;
}
:where(.plot-d6a7b5 text), {
white-space: pre;
font-family: poppins,sans-serif;
}
:where(.plot-d6a7b5) {
--plot-background: white;
font-family: poppins, sans-serif;
}
figure > h2 {
font-family: poppins, sans-serif;
font-size: 25px;
}
figure > h3 {
font-family: poppins, sans-serif;
font-size: 20px;
}
[aria-label="x-axis label"] {
font-size:0;
}
g[aria-label="tip"] {
font-size: 13px;
color: black;
fill: white;
/*stroke: #5bd39e;*/
opacity: .8;
}
[aria-label="tip"] {
border-radius: 30px
}
</style>
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.
