Public
Edited
Jan 26, 2024
csv_1975= d3.csv("https://raw.githubusercontent.com/claireduj/data/main/brest_1975.csv")
data_1975 = csv_1975.map(function(d) {
// Convertir les valeurs de 'valeur_tn' et 'valeur_tx' en nombres avant le calcul
var tn = parseFloat(d.valeur_tn);
var tx = parseFloat(d.valeur_tx);
// Vérifier si les conversions ont réussi (tn et tx ne sont pas NaN)
if (!isNaN(tn) && !isNaN(tx)) {
// calcul de temp moyenne
d.moy_temp = (tn + tx) / 2;
} else {
//
d.moy_temp = null; //
}
return d;
});
data_1975_mois = data_1975.map(function(d) {
switch (d.anneemois) {
case "197501":
d.datetxt = 'Janvier';
break;
case "197502":
d.datetxt = 'Février';
break;
case "197503":
d.datetxt = 'Mars';
break;
case "197504":
d.datetxt = 'Avril';
break;
case "197505":
d.datetxt = 'Mai';
break;
case "197506":
d.datetxt = 'Juin';
break;
case "197507":
d.datetxt = 'Juillet';
break;
case "197508":
d.datetxt = 'Aout';
break;
case "197509":
d.datetxt = 'Septembre';
break;
case "197510":
d.datetxt = 'Octobre';
break;
case "197511":
d.datetxt = 'Novembre';
break;
case "197512":
d.datetxt = 'Décembre';
break;
}
return d;
});
data_1975_mois
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
() => htl.svg`<defs>
<linearGradient id="gradient" gradientTransform="rotate(90)">
<stop offset="15%" stop-color="#88B8FF" />
<stop offset="75%" stop-color="#BED8FF" />
<stop offset="100%" stop-color="#DCEAFF" />
</linearGradient>
</defs>`,
Plot.barY(data_1975_mois, { x: "datetxt", y: "valeur_rr", fill: "url(#gradient)"}),
() => //.le sous plot pour ajouter la courbe
Plot.plot({
// dimensions
marginLeft: 70,
marginRight: 50,
marginBottom: 50,
width: Math.min(width, 780),
height: 400,
marks: [
Plot.line(data_1975_mois, {
x: "datetxt",
y: "moy_temp",
stroke: "black",
strokeWidth: 2
})
],
x: { type: "band", axis: null },
y: { axis: "right", nice: true, line: true, label:"Température moyenne (°C)" }
})
],
marginLeft: 70,
marginRight: 50,
marginBottom: 50,
width: Math.min(width, 780),
height: 400,
x: { tickRotate: -45, tickFormat: "", label:"Mois" },
y: { axis: "left", label: "Précipitations (mm)", line: true },
})
Plot.plot({
x: {
line: true,
domain: ["J","F","M","A","M","J","J","A","S","O","N","D"] // setting the order manually by specifying the array
},
marks: [
Plot.axisX({ lineWidth: 8, marginBottom: 40}),
Plot.axisY({label: "Précipitations"}),
Plot.barY(data_1975_mois, {x: "datetxt", y: "valeur_rr"}),
Plot.ruleY([0])
]
})
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.
