Public
Edited
Jul 15
data = FileAttachment("n631_4@2.csv").csv({typed:true})
size = width
height =
{ let n;
if (size>=850) {return n=800}
else if (size>=500 && size<850) {return n=500}
else if (size>=400 && size<500) {return n=350}
else if (size>=350 && size<400) {return n=300}
else {return n=280}
}
height2 = {
let n;
if (size>=480) {return n =0.7*size}
else {return n = 350}
}
dX =
{
let n;
if (size>=350) {return n=27}
else {return n=10}
}
dY =
{
let n;
if (size>=350) {return n=0}
else {return n=1}
}
radius =
{ let n;
if (size>=1000) {return n=16}
if (size>=870 && size<1000) {return n=12}
if (size>=510 && size<870) {return n=7}
if (size>=370 && size<510) {return n=5}
else {return n=4.5}
}
tick =
{
let n;
if (size>=360) {return n=24}
else {return n=30}
}
popSize = {
let n;
if (size>=400) {return n= 15}
else{return n = 12}
}
labSize = {
let n;
if (size>=500) {return n= 18}
if (size>=400) {return n= 15}
else{return n = 12}
}
mBottom = {
let n;
if (size>400) {return n=70}
else {return n=40}
}
plot4 = Plot.plot({
y: { grid: false, reverse: true, grid: false},
x: {tickFormat: Math.abs, axis: null, grid: false},
//title: md`### Pyramide des âges du pop&soc 620` ,
marginLeft: 50,
marginRight: 50,
marginTop: 60,
marginBottom: mBottom,
width,
height: height2,
label: null,
marks: [
Plot.axisX({ticks: [ -100000, -200000, -300000, -400000, -500000],
tickFormat: d => Math.abs(d)/1000, fill: "transparent", dx:-dX, dy:0}),
Plot.axisX({ ticks: [ 100000, 200000, 300000, 400000, 500000],
tickFormat: d => Math.abs(d)/1000, fill: "transparent", dx: dX, dy:0}),
Plot.axisY({
frameAnchor: "middle",
dx: 32,
tickSize: 30,
ticks: [0,10,20,30,40,50,60,70,80,90,100],
label: null,
stroke: "white",
textStroke: "white",
textStrokeWidth: 0,
fontSize: 14,
textAnchor: "middle"
}),
Plot.text(["↑ Ages"], { frameAnchor: "top", dy: -20, dx: -4, fontSize:labSize }),
Plot.barX(df, { x: (d) => -d.hommes, y: "age", dx: -27,
channels: {Age: {value: 'age', label: 'Age:'},
anneeLab: {value: "anneeLab", label: 'Année de naissance:'},
Hommes: {value: 'hommes', label: "Nombre d'hommes:"}, },
fill: color[0], fillOpacity: 1,
stroke: color[0], strokeWidth: 2 ,
rx:.5, inset:0,
tip: {format: {x: false, y: false, Hommes: (d) => `${d.toLocaleString("fr-FR")}`},anchor: "top", stroke: "black", fontSize:12}}),
Plot.barX(df, { x: (d) => d.femmes , y: "age", dx: 27,
channels: {Age: {value: 'age', label: 'Age:'},
anneeLab: {value: "anneeLab", label: 'Année de naissance:'},
Femmes: {value: 'femmes', label: 'Nombre de femmes:'}},
fill: color[0], fillOpacity: 1,
stroke: color[0], strokeWidth: 2 ,
rx:.5, inset:0,
tip: {format: {x: false, y: false, Femmes: (d) => `${d.toLocaleString("fr-FR")}`}, anchor: "bottom", stroke: "black"} }),
Plot.image(df,{ x: "xc", y: "yc" , src: question,
channels: {xc: {value: 'xx', label: ''},
yc: {value: 'xy', label: ''},
comment: {value: 'comment', label: "" }}
, dx:+20, r: radius,
tip: {format: {x: false, y: false, comment: true}, lineWidth: 20, dx: +15},
anchor: "top", title: (d) => [d.comment].join("\n\n")}),
Plot.text(['Femmes →'], {x: d=> 200000, y: d=>100, dy: -20.5, textAnchor: "start", fontWeight:600, fontSize: labSize}),
Plot.text(['← Hommes'], {x: d=> -200000, y: d=>100, dy: -20.5, textAnchor: "end", fontWeight: 600, fontSize: labSize}),
Plot.text(["Effectifs (en milliers)"], { frameAnchor: "bottom", dy:50, fontSize: labSize }),
Plot.text(["500"], {x: d => -500000, y:d => 0, dy:24, dx: -dX, fontSize: popSize}),
Plot.text(["400"], {x: d => -400000, y:d => 0, dy:tick, dx: -dX, fontSize: popSize}),
Plot.text(["300"], {x: d => -300000, y:d => 0, dy:24, dx: -dX, fontSize: popSize}),
Plot.text(["200"], {x: d => -200000, y:d => 0, dy:tick, dx: -dX, fontSize: popSize}),
Plot.text(["100"], {x: d => -100000, y:d => 0, dy:24, dx: -dX, fontSize: popSize}),
Plot.text(["500"], {x: d => 500000, y:d => 0, dy:24, dx: dX, fontSize: popSize}),
Plot.text(["400"], {x: d => 400000, y:d => 0, dy:tick, dx: dX, fontSize: popSize}),
Plot.text(["300"], {x: d => 300000, y:d => 0, dy:24, dx: dX, fontSize: popSize}),
Plot.text(["200"], {x: d => 200000, y:d => 0, dy:tick, dx: dX, fontSize: popSize}),
Plot.text(["100"], {x: d => 100000, y:d => 0, dy:24, dx: dX, fontSize: popSize}),
]
})
pyramide = htl.html `
<div class="plot">
${plot4}
</div>
<style>
/*
.plot h5 {
padding-bottom: 0px;
font-size: calc(14px + .7vw);
}
.plot {
max-width: 80%;
border: .5px solid #ff362d;
border-radius: 10px;
padding: 10px;
margin-bottom: 30px;
background-color: #fefefe;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.plot [aria-label="tip"] text {
font-family: poppins, sans-serif;
font-size: calc(8px + 1vw) }
*/
</style>
`
r = 11
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.
