Public
Edited
Jun 3
Insert cell
Insert cell
data = d3.csv('https://raw.githubusercontent.com/mthevenin/tssp/refs/heads/main/immigration/imm1Data.csv', d3.autoType)
Insert cell
df = data.flatMap(d => [
{ Année: d.Année, Type: "ImmigrésX", Nombre: d.Immigrés },
{ Année: d.Année, Type: "EtrangersX", Nombre: d.Etrangers },
])
Insert cell
plot = Plot.plot({
// made with Observablehq plot
title: "XXXXXXXXX",
width,
y: {
inset: 5,
grid: true,
label: "%",
domain: [0,11],
},
x: {axis: null,
},
fx: {label: null, tickFormat: "d" },
color: {legend: true},
marks: [
Plot.barY(df, {
x: "Type",y: "Nombre", fill: "Type",
fx: "Année", ry1: 20, stroke: "black",
channels: {
type: {value: "Type", label: "Type:"},
p: {value: "Nombre", label: "Pourcentage:"}
},
tip: {format: {p: (d) => `${d} %` ,fx: false, y: false, x: false,fill: false,}, fontSize: 12}
}),

Plot.ruleY([0]),

]
})
Insert cell
import {rangeSlider} from '@mootari/range-slider'

Insert cell
viewof Y = rangeSlider({
min: 1806,
max: 2023,
step: 1,
value: [1806, 2023],
title: "Choisir une plage d'années",
})
Insert cell
Y
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