Public
Edited
Apr 14, 2024
1 fork
MasterFile = FileAttachment("Master File ISO - Copie@5.csv").csv()
uniqueCountryNames = [...new Set(MasterFile.map(entry => entry.Country))];
viewof listeDeroulantePays = Inputs.select(uniqueCountryNames, {label: "Select country"});
PaysSelectionne = await listeDeroulantePays;
uniqueNormNames = [...new Set(MasterFile.map(entry => entry.Norm))];
viewof listeDeroulanteNormes = Inputs.select(uniqueNormNames, {label: "Select norm"});
NormeSelectionne = await listeDeroulanteNormes;
uniqueSectorNames = [...new Set(MasterFile.map(entry => entry.Sector))];
viewof listeDeroulanteSecteur = Inputs.select(uniqueSectorNames, {label: "Select sector"})
SecteurSelectionne = await listeDeroulanteSecteur;
certificatesByCountryNorms = d3.rollup(
MasterFile,
(values) => d3.sum(values, (d) => d.Certificates),
(d) => d.Country,
(d) => d.Norm
)
// Fonction pour mettre à jour le graphique
function updateChart0(PaysSelectionne) {
}
// Récupérer les données pour le pays sélectionné
countryData = certificatesByCountryNorms.get(PaysSelectionne);
// Convertir les données en un tableau d'objets pour Plot
tableData = Array.from(countryData, ([norm, certificates]) => ({ norm, certificates }));
Plot.plot({
marks: [
Plot.barY(tableData, {x: "norm", y: "certificates", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.barY(tableData, { x: "norm", y: "certificates", sort: { x: "y", reverse: true } }),
Plot.ruleY([0])
],
scales: {
x: { type: "band" },
y: { type: "log", nice: true }
// Utilisation d'une échelle logarithmique
},
height: 500
});
Plot.plot({
marks: [
Plot.barY(tableData, { x: "norm", y: "certificates", sort: { x: "y", reverse: true } }),
Plot.ruleY([0]),
Plot.text(tableData, { x: "norm", y: "certificates", text: d => d.certificates.toString(), dy: -5 })
// Ajouter des étiquettes de données
],
scales: {
x: { type: "band" },
y: { type: "linear", nice: true, domain: [0, d3.max(tableData, d => d.certificates) * 1.2] }
// Ajuster la plage de domaine
},
height: 300
});
Plot.plot({
marks: [
Plot.barY(tableData, { x: "norm", y: "certificates", sort: { x: "y", reverse: true } }),
Plot.ruleY([0]),
Plot.text(tableData, { x: "norm", y: "certificates", text: d => d.certificates.toString(), dy: -12, fontSize: 12 }) // Ajuster la taille de la police
],
scales: {
x: { type: "band" },
y: { type: "linear", nice: true, domain: [0, d3.max(tableData, d => d.certificates) * 1.2] } // Ajuster la plage de domaine
},
height: 300,
width: 1000 // Ajuster la largeur du graphique
});
// 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é
// Ajouter les barres avec le dégradé de couleur
Plot.plot({
title: PaysSelectionne, // Ajouter le pays sélectionné en tant que titre
marginLeft: 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: 15
})
],
scales: {
x: { type: "band" },
y: { type: "linear", nice: true, domain: [0, d3.max(tableData, d => d.certificates) * 1.2] }
},
height: 300,
width: 1000
});
// Mettre à jour le graphique en barres avec le nom du pays sélectionné
Plot.plot({
title: PaysSelectionne, // Ajouter le pays sélectionné en tant que titre
marginLeft: 60,
marks: [
Plot.text([{ x: 500, y: 7, text: PaysSelectionne }], {
x: "x",
y: "y",
text: d => d.text,
fontSize: 16,
fontWeight: "bold",
textAlign: "center"
}),
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,
fontSize: 12
})
],
scales: {
x: { type: "band" },
y: { type: "linear", nice: true, domain: [0, d3.max(tableData, d => d.certificates) * 1.2] }
},
height: 300,
width: 1000
});
// Mettre à jour le graphique en barres avec le titre du pays sélectionné
Plot.plot({
title: PaysSelectionne, // Ajouter le pays sélectionné en tant que titre
marginLeft: 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: 15
})
],
scales: {
x: {
type: "linear", // Utiliser une échelle linéaire pour l'axe x
domain: [0, tableData.length - 1], // Définir le domaine en fonction du nombre de données
ticks: tableData.length, // Nombre de ticks correspondant au nombre de données
tickFormat: d3.format("d") // Format des ticks en entiers
},
y: { type: "linear", nice: true, domain: [0, d3.max(tableData, d => d.certificates) * 1.2] }
},
height: 300,
width: 1000
});
// Mettre à jour le graphique en barres avec le titre du pays sélectionné
Plot.plot({
title: PaysSelectionne, // Ajouter le pays sélectionné en tant que titre
marginLeft: 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: 15
})
],
scales: {
x: {
type: "linear", // Utiliser une échelle linéaire pour l'axe x
domain: [0, tableData.length - 1], // Définir le domaine en fonction du nombre de données
ticks: tableData.length, // Nombre de ticks correspondant au nombre de données
tickFormat: d3.format("d"), // Format des ticks en entiers
fontSize: 40 // Augmenter la taille de la police de l'axe des X
},
y: {
type: "linear",
nice: true,
domain: [0, d3.max(tableData, d => d.certificates) * 1.2],
ticks: Math.ceil(d3.max(tableData, d => d.certificates)), // Nombre de ticks en fonction de la valeur maximale des certificats
tickFormat: d3.format("d"), // Format des ticks en entiers
fontSize: 40 // Augmenter la taille de la police de l'axe des Y
}
},
height: 300,
width: 1000
});
// Mettre à jour le graphique en barres avec le titre du pays sélectionné
Plot.plot({
title: PaysSelectionne, // Ajouter le pays sélectionné en tant que titre
marginLeft: 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: 15
})
],
scales: {
x: {
type: "linear", // Utiliser une échelle linéaire pour l'axe x
domain: [0, tableData.length - 1], // Définir le domaine en fonction du nombre de données
ticks: tableData.length, // Nombre de ticks correspondant au nombre de données
tickFormat: d3.format("d"), // Format des ticks en entiers
fontSize: 40 // Augmenter la taille de la police de l'axe des X
},
y: {
type: "linear",
dtick: 1, // Espacement de 1 entre chaque valeur
nice: true,
domain: [1, Math.ceil(d3.max(tableData, d => d.certificates))], // Domaine de 1 au maximum arrondi des certificats
tickFormat: d3.format("d"), // Format des ticks en entiers
fontSize: 40 // Augmenter la taille de la police de l'axe des Y
}
},
height: 300,
width: 1000
});
certificatesByCountrySectors = 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 updateChart1(PaysSelectionne, NormSelectionee) {
}
// Récupérer les données pour le pays sélectionné
countryData2 = certificatesByCountrySectors.get(PaysSelectionne);
// Récupérer les données pour la norme séléctionée
countryData3 = countryData2.get(NormeSelectionne);
// Convertir les données en un tableau d'objets pour Plot
tableData2 = Array.from(countryData2, ([norm, sector]) => ({ norm, sector }));
// Convertir les données en un tableau d'objets pour Plot
tableData3 = Array.from(countryData3, ([sector, certificates]) => ({ sector, certificates }))
Plot.plot({
marks: [
Plot.dot(tableData3, { x: "sector", y: "certificates", r: 5, fill: "blue" }), // Utiliser la taille des bulles proportionnelle au nombre de certificats
Plot.ruleX([0]),
Plot.ruleY([0])
],
scales: {
x: { type: "linear", nice: true }, // Ajuster la plage de domaine pour l'axe des X automatiquement
y: { type: "band" } // Ajuster la plage de domaine pour l'axe des Y automatiquement
},
axes: [
{ orient: 'bottom', label: 'Secteur d\'activité', tickRotate: 65 } // Rotation des étiquettes des axes des X
],
width: 4000,
height: 1000
});
// Créer le graphique à bulles avec Plotly
Plot.plot({
marks: [
Plot.dot(tableData3, {
x: 'sector',
y: 'certificates',
r: tableData3.map(d => d.certificates * 5), // Taille des bulles proportionnelle au nombre de certificats
fill: 'blue', // Couleur des bulles
fillOpacity: 0.5, // Opacité des bulles
tooltipContent: d => `Secteur : ${d.sector}<br>Certificats : ${d.certificates}` // Contenu des étiquettes
})
],
width: 2000, // Largeur du graphique
height: 400 // Hauteur du graphique
});
// Créer le graphique à bulles avec Plotly
plot = Plot.plot({
marks: [
Plot.dot(tableData3, {
x: 'sector',
y: 'certificates',
r: tableData3.map(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
text: tableData3.map(d => `Secteur : ${d.sector}<br>Certificats : ${d.certificates}`) // Contenu de l'info-bulle
})
],
width: 600, // Largeur du graphique
height: 400 // Hauteur du graphique
});
// Créer le graphique à bulles avec Plotly
plot1 = Plot.plot({
title: `${PaysSelectionne} - ${NormeSelectionne}`, // Ajouter le pays et la norme sélectionnés en tant que titre
marks: [
Plot.dot(tableData3, {
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
title : d => `Sector : ${d.sector}\nCertificates : ${d.certificates}`, // Contenu de l'info-bulle
//And
tip : true
})
],
width: 600, // Largeur du graphique
height: 300 // Hauteur du graphique
});
// Créer le graphique à bulles avec Plotly
plot19 = Plot.plot({
marginLeft: 80,
marginBottom: 300,
marginTop: 60, // Ajuster la marge supérieure pour déplacer le graphique vers le haut
title: `${PaysSelectionne} - ${NormeSelectionne}`, // Ajouter le pays et la norme sélectionnés en tant que titre
marks: [
Plot.dot(tableData3, {
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
title: d => `Sector : ${d.sector}\nCertificates : ${d.certificates}`, // Contenu de l'info-bulle
tip: true
})
],
width: 1300, // Largeur du graphique
height: 700, // Hauteur du graphique
x: {
tickRotate: -35,
},
y: {
label: "↑ Number of certificates",
grid: 5 //traits horizontales sur le graphique
},
});
// Créer le graphique à bulles avec Plotly
plot193 = Plot.plot({
marginLeft: 80,
marginBottom: 300,
marginTop: 60, // Ajuster la marge supérieure pour déplacer le graphique vers le haut
title: `${PaysSelectionne} - ${NormeSelectionne}`, // Ajouter le pays et la norme sélectionnés en tant que titre
marks: [
Plot.dot(tableData3, {
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
customdata: tableData3.map(d => `Sector: <b>${d.sector}</b><br>Certificates: <b>${d.certificates}</b>`), // Texte formaté pour chaque point
hovertemplate: '%{customdata}', // Modèle de l'info-bulle avec HTML personnalisé
tip: true
})
],
width: 1300, // Largeur du graphique
height: 700, // Hauteur du graphique
x: {
tickRotate: -35,
},
y: {
label: "↑ Number of certificates",
grid: 5 //traits horizontales sur le graphique
},
});
// Créer une séquence numérique de 1 à 40
xAxisValues = Array.from({length: 40}, (_, i) => i + 1);
// Créer le graphique à bulles avec Plotly
plot1267 = Plot.plot({
title: `${PaysSelectionne} - ${NormeSelectionne}`, // Ajouter le pays et la norme sélectionnés en tant que titre
marks: [
Plot.dot(tableData3, {
x: xAxisValues, // Utiliser la séquence numérique pour les valeurs de l'axe des X
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
title: d => `Sector : ${d.sector}\nCertificates : ${d.certificates}`, // Contenu de l'info-bulle
tip: true
})
],
width: 1000, // Largeur du graphique
height: 300, // Hauteur du graphique
layout: {
margin: {l: 80, r: 20, t: 50, b: 50}, // Ajuster les marges pour faire de la place pour les étiquettes d'axe
xaxis: {
automargin: true, // Ajuster automatiquement les marges pour éviter les coupures d'étiquettes
showticklabels: true // Afficher les valeurs de l'axe des X
}
}
});
// Créer le graphique à bulles avec Plotly
plot17 = Plot.plot({
title: `${PaysSelectionne} - ${NormeSelectionne}`, // Ajouter le pays et la norme sélectionnés en tant que titre
marks: [
Plot.dot(tableData3, {
x: xAxisValues, // Utiliser la séquence numérique pour les valeurs de l'axe des X
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
title: d => `Sector : ${d.sector}\nCertificates : ${d.certificates}`, // Contenu de l'info-bulle
tip: true
})
],
width: 800, // Largeur du graphique
height: 300, // Hauteur du graphique
layout: {
margin: {l: 80, r: 20, t: 50, b: 50}, // Ajuster les marges pour faire de la place pour les étiquettes d'axe
xaxis: {
tickangle: -45, // Faire pivoter les étiquettes de l'axe des x de 45 degrés
automargin: true, // Ajuster automatiquement les marges pour éviter les coupures d'étiquettes
// Afficher tous les nombres sur l'axe des X
showticklabels: true
}
}
});
// Créer le graphique à bulles avec Plotly
plot12434467 = Plot.plot({
title: `${PaysSelectionne} - ${NormeSelectionne}`, // Ajouter le pays et la norme sélectionnés en tant que titre
marks: [
Plot.dot(tableData3, {
x: xAxisValues, // Utiliser la séquence numérique pour les valeurs de l'axe des X
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
title: d => `Sector : ${d.sector}\nCertificates : ${d.certificates}`, // Contenu de l'info-bulle
tip: true
})
],
width: 1000, // Largeur du graphique
height: 300, // Hauteur du graphique
layout: {
margin: {l: 80, r: 20, t: 50, b: 50}, // Ajuster les marges pour faire de la place pour les étiquettes d'axe
xaxis: {
tickvals: [1, 2, 3, 4, 5, 6, 7], // Spécifier manuellement les valeurs de graduation de l'axe X
ticktext: ['1','2', '10', '15', '20', '25', '30', '35', '40'], // Texte correspondant à chaque valeur de graduation
tickangle: -45, // Faire pivoter les étiquettes de l'axe des x de 45 degrés
automargin: true, // Ajuster automatiquement les marges pour éviter les coupures d'étiquettes
showticklabels: true // Afficher les valeurs de l'axe des X
}
}
});
// Fonction pour mettre à jour les informations sur le graphique
function updateGraphInfo(norm, country) {
document.getElementById('info').innerText = `Norm: ${norm}, Country: ${country}`;
}
// Mettre à jour les informations sur le graphique avec les sélections existantes
updateGraphInfo(NormeSelectionne, PaysSelectionne);
plot2 = Plot.plot({
marks: [
Plot.dot(tableData3, {
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
text: d => `<b>Secteur :</b> ${d.sector}\n<b>Certificats :</b> ${d.certificates}`, // Contenu de l'info-bulle avec balises HTML pour mettre en gras
tip: true
})
],
width: 600, // Largeur du graphique
height: 400 // Hauteur du graphique
});
// Définir les options de transformation
transformOptions = {
x: 'xValue' // Utiliser 'xValue' comme axe des X
};
// Appliquer la transformation avec les options spécifiées
Plot.transform(transformOptions, (data, facets) => {
// Ajouter une nouvelle propriété 'xValue' contenant des nombres croissants
const modifiedData = data.map((d, i) => ({
xValue: i + 1, // Remplacer 'sector' par des nombres croissants
certificates: d.certificates,
sector: d.sector
}));
return {
data: modifiedData, // Utiliser les données modifiées avec 'xValue'
facets: facets.map((I) => I.filter(() => Math.random() > 0.5))
};
});
Plot.transform(Options, (sector, facets) => {
return {
data,
facets: facets.map((I) => I.filter(() => Math.random() > 0.5))
};
})
// Définir les options de transformation
transformOptions = {
x: 'xValue' // Utiliser 'xValue' comme axe des X
};
// Appliquer la transformation avec les options spécifiées
plot = plot.plot.transform(transformOptions, (data, facets) => {
// Créer une nouvelle propriété 'xValue' pour utiliser des nombres sur l'axe des X
const modifiedData = data.map((d, i) => ({
xValue: i + 1, // Utiliser des nombres croissants pour l'axe des X
certificates: d.certificates,
sector: d.sector
}));
return {
data: modifiedData, // Utiliser les données modifiées avec 'xValue' pour l'axe des X
facets: facets.map((I) => I.filter(() => Math.random() > 0.5))
};
});
plot3 = Plot.plot({
marks: [
Plot.dot(tableData3, {
x: d => tableData3.findIndex(item => item === d), // Utiliser l'index du tableau comme valeur x
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
text: d => `<div style="font-weight:bold;">Secteur:</div><div style="text-transform:uppercase;">${d.sector}</div><div style="font-weight:bold;">Certificats:</div><div>${d.certificates}</div>`, // Contenu de l'info-bulle avec balises HTML
tip: true
})
],
width: 600, // Largeur du graphique
height: 400 // Hauteur du graphique
});
// Créer un tableau de valeurs pour l'axe des x
xValues = tableData3.map((_, index) => index);
plot4 = Plot.plot({
marks: [
Plot.dot(tableData3, {
x: d => tableData3.findIndex(item => item === d), // Utiliser l'index du tableau comme valeur x
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
text: d => `<div style="font-weight:bold;">Secteur:</div><div style="text-transform:uppercase;">${d.sector}</div><div style="font-weight:bold;">Certificats:</div><div>${d.certificates}</div>`, // Contenu de l'info-bulle avec balises HTML
tip: true
})
],
xDomain: [-1, tableData3.length], // Définir le domaine de l'axe des x pour afficher tous les points
xTickValues: xValues, // Utiliser les valeurs numériques sur l'axe des x
xTickFormat: xValues => "", // Ne pas afficher de texte sur l'axe des x
width: 600, // Largeur du graphique
height: 400 // Hauteur du graphique
});
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.
