Unlisted
Edited
Apr 25, 2024
MasterFile = FileAttachment("Master File ISO - Copie@2.csv").csv()
certificatesByCountryNorms1 = d3.rollup(
MasterFile,
(values) => d3.sum(values, (d) => d.Certificates),
(d) => d.Country,
(d) => d.Norm
)
// Fonction pour mettre à jour le graphique
function updateChart0(PaysSelectionne1) {
}
// Récupérer les données pour le pays sélectionné
countryData = certificatesByCountryNorms1.get(PaysSelectionne1);
// Convertir les données en un tableau d'objets pour Plot
tableData = Array.from(countryData, ([norm, certificates]) => ({ norm, certificates }));
// Définir une échelle de couleur
colorScale = d3.scaleLinear()
.domain([0, d3.max(tableData, d => d.certificates)]) // Plage de valeurs des données
.range(["#e5f510", "#006d2c"]); // Couleurs de début et de fin du dégradé
uniqueCountryNames1 = [...new Set(MasterFile.map(entry => entry.Country))];
viewof listeDeroulantePays1 = Inputs.select(uniqueCountryNames1, {label: "Select country"});
PaysSelectionne1 = await listeDeroulantePays1;
// Mettre à jour le graphique en barres avec le titre du pays sélectionné
Plot.plot({
title: PaysSelectionne1, // Ajouter le pays sélectionné en tant que titre
margin: 60,
marks: [
Plot.barY(tableData, {
x: "norm",
y: "certificates",
sort: { x: "y", reverse: true },
fill: d => colorScale(d.certificates) // Utiliser l'échelle de couleur pour remplir les barres
}),
Plot.ruleY([0]),
Plot.text(tableData, {
x: "norm",
y: "certificates",
text: d => d.certificates.toString(),
dy: -12, // Hauteur
fontSize: 12
})
],
x: {
type: "band", // Utiliser une échelle band pour l'axe x
label:"Source : ISO Survey",
labelAnchor: "right",
labelOffset: 36,
},
y: {
type: "linear",
domain: [0, d3.max(tableData, d => d.certificates)],
ticks: tableData.length,
tickFormat: "d", // Format des ticks en entiers
},
style: {
fontSize: 12,
},
height: 400,
width: 1000,
});
certificatesByCountrySectors2 = d3.rollup(
MasterFile,
(values) => d3.sum(values, (d) => d.Certificates),
(d) => d.Country,
(d) => d.Norm,
(d) => d.Sector
)
// Fonction pour mettre à jour le graphique
function updateChart2(PaysSelectionne2, NormSelectionee2) {
}
// Récupérer les données pour le pays sélectionné
countryData22 = certificatesByCountrySectors2.get(PaysSelectionne2);
// Récupérer les données pour la norme séléctionée
countryData23 = countryData22.get(NormeSelectionne2)
// Convertir les données en un tableau d'objets pour Plot
tableData22 = Array.from(countryData22, ([norm, sector]) => ({ norm, sector }));
// Convertir les données en un tableau d'objets pour Plot
tableData23 = Array.from(countryData23, ([sector, certificates]) => ({ sector, certificates }))
uniqueCountryNames2 = [...new Set(MasterFile.map(entry => entry.Country))];
viewof listeDeroulantePays2 = Inputs.select(uniqueCountryNames2, {label: "Select country"});
PaysSelectionne2 = await listeDeroulantePays2;
uniqueNormNames2 = [...new Set(MasterFile.map(entry => entry.Norm))];
viewof listeDeroulanteNormes2 = Inputs.select(uniqueNormNames2, {label: "Select norm"});
NormeSelectionne2 = await listeDeroulanteNormes2;
// Créer le graphique à bulles avec Plotly
plot2 = Plot.plot({
marginLeft: 100,
marginBottom: 320,
marginTop: 60, // Ajuster la marge supérieure pour déplacer le graphique vers le haut
title: `${PaysSelectionne2} - ${NormeSelectionne2}`, // Ajouter le pays et la norme sélectionnés en tant que titre
marks: [
Plot.dot(tableData23, {
x: 'sector',
y: 'certificates',
r: d => d.certificates * 5, // Taille des bulles proportionnelle au nombre de certificats
fill: 'blue', // Couleur des bulles
fillOpacity: 0.5, // Opacité des bulles
hoverinfo: 'text', // Afficher les informations au survol des bulles
tip: {
format: {
sector: true,
certificates: true,
r: false,
}
}
})
],
width: 1300, // Largeur du graphique
height: 700, // Hauteur du graphique
x: {
tickRotate: -35,
label: "Sector"
},
y: {
labelArrow: "up",
label: "Number of certificates",
grid: 5 //traits horizontales sur le graphique
},
style: {
fontSize: 12,
}
});
Plot.plot({
marginLeft: 60,
marginBottom: 50,
width: 800, // Augmenter la largeur du graphique
style: {
fontSize: 11,
},
color: {
legend: true,
scheme: "Inferno" // Utiliser un schéma de couleurs différent
},
marks: [
Plot.barX(
MasterFile,
Plot.groupY(
{ x: "sum" },
{
y: ({ Region }) => Region, // Afficher les régions sur l'axe des Y
fill: ({ Norm }) => Norm,
x: "Certificates", // Certificats sur l'axe des X
y: "Region", //comment faire pour afficher dans la bubble info sans que ce soit afficher sur l'axe des Y?????????????????????????????????????????????????????????????????????????
tip: {
format: {
Norm: true,
certificates: true,
y : true
}
},
order: "sum",
sort: { color: "x", y: { value: "x", reverse: true } }
}
)
)
]
});
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.
