2b:null 2c:["$","title",null,{"children":"Useful data for creating graphs | Vanessa | Observable"}] 31:T43f,// 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 }); 32:T5ad,// 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 }); 33:T595,// 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 });34:T473,// 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: ${d.sector}
Certificates: ${d.certificates}`), // 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 }, }); 35:T469,// 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 } } }); 36:T4c6,// 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 } } }); 37:T5a3,// 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 } } }); 38:T41d, 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 => `

Secteur:

${d.sector}

Certificats:

${d.certificates}

`, // 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 }); 39:[{"id":"4f1137652d11159963a257f20ab0a1ad2bc05340720b1629d86c76c3f19cb24f1960ea9df39e73e40cb2c37c7ef82f479e19366956df75e22b275c929d1925fb","href":"https://static.observableusercontent.com/files/4f1137652d11159963a257f20ab0a1ad2bc05340720b1629d86c76c3f19cb24f1960ea9df39e73e40cb2c37c7ef82f479e19366956df75e22b275c929d1925fb","name":"Master File ISO - Copie@5.csv","type":"text/csv","lastModified":1712568957037.249,"size":2907251},{"id":"302df6971655720d4782085a633f23d36ba56993fc689c3bb7a418e772c0423140035777380acc2591530f6f459ffbef961e9b1454ce9a7b041fbb0d6d3f7ca2","href":"https://static.observableusercontent.com/files/302df6971655720d4782085a633f23d36ba56993fc689c3bb7a418e772c0423140035777380acc2591530f6f459ffbef961e9b1454ce9a7b041fbb0d6d3f7ca2","name":"Master File ISO - Copie@4.csv","type":"text/csv","lastModified":1712143053344.534,"size":2452970}] 2f:{"id":"4d5e3a63b399e834","slug":null,"title":"Useful data for creating graphs","thumbnail":"6ba438b1358e1ead6d7323448c0a15c71e4f604efab94e639088198f4e968b8e","access_level":"public","create_time":"$D2024-03-31T16:11:44.293Z","update_time":"$D2024-04-14T21:28:35.362Z","view_time":null,"first_public_time":"$D2024-04-02T16:15:35.441Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bde44a46c3cbaa6e","login":"workpaces-url","name":"Vanessa","avatar_url":"https://avatars-next.observableusercontent.com/02b586b430c380d46c61bd38ff596cd0a4b176eb72933fc29fe64761f4be6ac3","tier":"starter_2024"},"version":918,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"385ca901587f1bff","login":"faller-vanessa","name":"Faller Vanessa","avatar_url":"https://avatars-next.observableusercontent.com/d874688d165a2b047c0c1f288956cc582fc5e032967507c0eb7eb5db6c93ac2d","tier":null}],"members":[{"type":"individual","id":"385ca901587f1bff","login":"faller-vanessa","name":"Faller Vanessa","avatar_url":"https://avatars-next.observableusercontent.com/d874688d165a2b047c0c1f288956cc582fc5e032967507c0eb7eb5db6c93ac2d","tier":null,"role":"editor"},{"type":"team","id":"bde44a46c3cbaa6e","login":"workpaces-url","name":"Vanessa","avatar_url":"https://avatars-next.observableusercontent.com/02b586b430c380d46c61bd38ff596cd0a4b176eb72933fc29fe64761f4be6ac3","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Useful data for creating graphs","cells":[{"id":0,"value":"# Useful data for creating graphs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"MasterFile = FileAttachment(\"Master File ISO - Copie@5.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"uniqueCountryNames = [...new Set(MasterFile.map(entry => entry.Country))];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewof listeDeroulantePays = Inputs.select(uniqueCountryNames, {label: \"Select country\"});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"PaysSelectionne = await listeDeroulantePays;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"uniqueNormNames = [...new Set(MasterFile.map(entry => entry.Norm))];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof listeDeroulanteNormes = Inputs.select(uniqueNormNames, {label: \"Select norm\"});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"NormeSelectionne = await listeDeroulanteNormes;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"uniqueSectorNames = [...new Set(MasterFile.map(entry => entry.Sector))];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"viewof listeDeroulanteSecteur = Inputs.select(uniqueSectorNames, {label: \"Select sector\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"SecteurSelectionne = await listeDeroulanteSecteur;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"### test with D3. rollup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"certificatesByCountryNorms = d3.rollup(\n MasterFile,\n (values) => d3.sum(values, (d) => d.Certificates),\n (d) => d.Country,\n (d) => d.Norm\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"// Fonction pour mettre à jour le graphique\nfunction updateChart0(PaysSelectionne) {\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"// Récupérer les données pour le pays sélectionné\ncountryData = certificatesByCountryNorms.get(PaysSelectionne);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"// Convertir les données en un tableau d'objets pour Plot\ntableData = Array.from(countryData, ([norm, certificates]) => ({ norm, certificates }));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"# Graph 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"Plot.plot({\n marks: [\n Plot.barY(tableData, {x: \"norm\", y: \"certificates\", sort: {x: \"y\", reverse: true}}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"Plot.plot({\n marks: [\n Plot.barY(tableData, { x: \"norm\", y: \"certificates\", sort: { x: \"y\", reverse: true } }),\n Plot.ruleY([0])\n ],\n scales: {\n x: { type: \"band\" },\n y: { type: \"log\", nice: true }\n // Utilisation d'une échelle logarithmique\n },\n height: 500\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":" Plot.plot({\n marks: [\n Plot.barY(tableData, { x: \"norm\", y: \"certificates\", sort: { x: \"y\", reverse: true } }),\n Plot.ruleY([0]),\n Plot.text(tableData, { x: \"norm\", y: \"certificates\", text: d => d.certificates.toString(), dy: -5 })\n // Ajouter des étiquettes de données\n ],\n scales: {\n x: { type: \"band\" },\n y: { type: \"linear\", nice: true, domain: [0, d3.max(tableData, d => d.certificates) * 1.2] }\n // Ajuster la plage de domaine\n },\n height: 300\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":" Plot.plot({\n marks: [\n Plot.barY(tableData, { x: \"norm\", y: \"certificates\", sort: { x: \"y\", reverse: true } }),\n Plot.ruleY([0]),\n Plot.text(tableData, { x: \"norm\", y: \"certificates\", text: d => d.certificates.toString(), dy: -12, fontSize: 12 }) // Ajuster la taille de la police\n ],\n scales: {\n x: { type: \"band\" },\n y: { type: \"linear\", nice: true, domain: [0, d3.max(tableData, d => d.certificates) * 1.2] } // Ajuster la plage de domaine\n },\n height: 300,\n width: 1000 // Ajuster la largeur du graphique\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"// Définir une échelle de couleur\ncolorScale = d3.scaleLinear()\n .domain([0, d3.max(tableData, d => d.certificates)]) // Plage de valeurs des données\n .range([\"#e5f510\", \"#006d2c\"]); // Couleurs de début et de fin du dégradé","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"// Ajouter les barres avec le dégradé de couleur\nPlot.plot({\n title: PaysSelectionne, // Ajouter le pays sélectionné en tant que titre\n marginLeft: 60,\n marks: [\n Plot.barY(tableData, {\n x: \"norm\",\n y: \"certificates\",\n sort: { x: \"y\", reverse: true },\n fill: d => colorScale(d.certificates) // Utiliser l'échelle de couleur pour remplir les barres\n }),\n Plot.ruleY([0]),\n Plot.text(tableData, {\n x: \"norm\",\n y: \"certificates\",\n text: d => d.certificates.toString(),\n dy: -12, //hauteur \n fontSize: 15\n })\n ],\n scales: {\n x: { type: \"band\" },\n y: { type: \"linear\", nice: true, domain: [0, d3.max(tableData, d => d.certificates) * 1.2] }\n },\n height: 300,\n width: 1000\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"// Mettre à jour le graphique en barres avec le nom du pays sélectionné\nPlot.plot({\n title: PaysSelectionne, // Ajouter le pays sélectionné en tant que titre\n marginLeft: 60,\n marks: [\n Plot.text([{ x: 500, y: 7, text: PaysSelectionne }], {\n x: \"x\",\n y: \"y\",\n text: d => d.text,\n fontSize: 16,\n fontWeight: \"bold\",\n textAlign: \"center\"\n }),\n Plot.barY(tableData, {\n x: \"norm\",\n y: \"certificates\",\n sort: { x: \"y\", reverse: true },\n fill: d => colorScale(d.certificates) // Utiliser l'échelle de couleur pour remplir les barres\n }),\n Plot.ruleY([0]),\n Plot.text(tableData, {\n x: \"norm\",\n y: \"certificates\",\n text: d => d.certificates.toString(),\n dy: -12,\n fontSize: 12\n })\n ],\n scales: {\n x: { type: \"band\" },\n y: { type: \"linear\", nice: true, domain: [0, d3.max(tableData, d => d.certificates) * 1.2] }\n },\n height: 300,\n width: 1000\n});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"# Final Graph 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":715,"value":"### Essayer d'augmenter la taille de la police de l'axe des X et Y\n### Changer les valeurs de l'axe des Y en nombres entiers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":697,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"# Graph 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"###Objective: try to create a code to extract the values in the certificate column for each country and each ISO standard. Using these values, create a graph showing the number of certificates according to the ISO standard selected and the country selected in the drop-down lists. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":345,"value":"certificatesByCountrySectors = d3.rollup(\n MasterFile,\n (values) => d3.sum(values, (d) => d.Certificates),\n (d) => d.Country,\n (d) => d.Norm,\n (d) => d.Sector\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"// Fonction pour mettre à jour le graphique\nfunction updateChart1(PaysSelectionne, NormSelectionee) {\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"// Récupérer les données pour le pays sélectionné\ncountryData2 = certificatesByCountrySectors.get(PaysSelectionne);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"// Récupérer les données pour la norme séléctionée\ncountryData3 = countryData2.get(NormeSelectionne);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"// Convertir les données en un tableau d'objets pour Plot\ntableData2 = Array.from(countryData2, ([norm, sector]) => ({ norm, sector }));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"// Convertir les données en un tableau d'objets pour Plot\ntableData3 = Array.from(countryData3, ([sector, certificates]) => ({ sector, certificates }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":" Plot.plot({\n marks: [\n Plot.dot(tableData3, { x: \"sector\", y: \"certificates\", r: 5, fill: \"blue\" }), // Utiliser la taille des bulles proportionnelle au nombre de certificats\n Plot.ruleX([0]),\n Plot.ruleY([0])\n ],\n scales: {\n x: { type: \"linear\", nice: true }, // Ajuster la plage de domaine pour l'axe des X automatiquement\n y: { type: \"band\" } // Ajuster la plage de domaine pour l'axe des Y automatiquement\n },\n axes: [\n { orient: 'bottom', label: 'Secteur d\\'activité', tickRotate: 65 } // Rotation des étiquettes des axes des X\n ],\n width: 4000,\n height: 1000\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"// Créer le graphique à bulles avec Plotly\nPlot.plot({\n marks: [\n Plot.dot(tableData3, {\n x: 'sector',\n y: 'certificates',\n r: tableData3.map(d => d.certificates * 5), // Taille des bulles proportionnelle au nombre de certificats\n fill: 'blue', // Couleur des bulles\n fillOpacity: 0.5, // Opacité des bulles\n tooltipContent: d => `Secteur : ${d.sector}
Certificats : ${d.certificates}` // Contenu des étiquettes\n })\n ],\n width: 2000, // Largeur du graphique\n height: 400 // Hauteur du graphique\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"# Display information when hovering over the bubbles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":454,"value":"\n// Créer le graphique à bulles avec Plotly\nplot = Plot.plot({\n marks: [\n Plot.dot(tableData3, {\n x: 'sector',\n y: 'certificates',\n r: tableData3.map(d => d.certificates * 5), // Taille des bulles proportionnelle au nombre de certificats\n fill: 'blue', // Couleur des bulles\n fillOpacity: 0.5, // Opacité des bulles\n hoverinfo: 'text', // Afficher les informations au survol des bulles\n text: tableData3.map(d => `Secteur : ${d.sector}
Certificats : ${d.certificates}`) // Contenu de l'info-bulle\n })\n ],\n width: 600, // Largeur du graphique\n height: 400 // Hauteur du graphique\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"// Créer le graphique à bulles avec Plotly\nplot1 = Plot.plot({\n title: `${PaysSelectionne} - ${NormeSelectionne}`, // Ajouter le pays et la norme sélectionnés en tant que titre\n marks: [\n Plot.dot(tableData3, {\n x: 'sector',\n y: 'certificates',\n r: d => d.certificates * 5, // Taille des bulles proportionnelle au nombre de certificats\n fill: 'blue', // Couleur des bulles\n fillOpacity: 0.5, // Opacité des bulles\n hoverinfo: 'text', // Afficher les informations au survol des bulles\n title : d => `Sector : ${d.sector}\\nCertificates : ${d.certificates}`, // Contenu de l'info-bulle\n //And\n tip : true\n })\n ],\n width: 600, // Largeur du graphique\n height: 300 // Hauteur du graphique\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"# Final Graph 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":524,"value":"### Bold Secteur and Certificates in bubble info\n### Try to replace the business sectors on the X axis with numbers (lisibility) ou rotation 45°\n### Nbr entier sur l'axe des Y\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":750,"value":"// Créer le graphique à bulles avec Plotly\nplot19 = Plot.plot({\n marginLeft: 80,\n marginBottom: 300,\n marginTop: 60, // Ajuster la marge supérieure pour déplacer le graphique vers le haut\n title: `${PaysSelectionne} - ${NormeSelectionne}`, // Ajouter le pays et la norme sélectionnés en tant que titre\n marks: [\n Plot.dot(tableData3, {\n x: 'sector',\n y: 'certificates',\n r: d => d.certificates * 5, // Taille des bulles proportionnelle au nombre de certificats\n fill: 'blue', // Couleur des bulles\n fillOpacity: 0.5, // Opacité des bulles\n hoverinfo: 'text', // Afficher les informations au survol des bulles\n title: d => `Sector : ${d.sector}\\nCertificates : ${d.certificates}`, // Contenu de l'info-bulle\n tip: true\n })\n ],\n width: 1300, // Largeur du graphique\n height: 700, // Hauteur du graphique\n x: {\n tickRotate: -35,\n },\n y: {\n label: \"↑ Number of certificates\",\n grid: 5 //traits horizontales sur le graphique \n },\n});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"// Créer une séquence numérique de 1 à 40\nxAxisValues = Array.from({length: 40}, (_, i) => i + 1);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"### Try to show the selected standard and country on the graph.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":608,"value":"// Fonction pour mettre à jour les informations sur le graphique\nfunction updateGraphInfo(norm, country) {\n document.getElementById('info').innerText = `Norm: ${norm}, Country: ${country}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"// Mettre à jour les informations sur le graphique avec les sélections existantes\nupdateGraphInfo(NormeSelectionne, PaysSelectionne);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"### try putting the variables in bold","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":477,"value":"plot2 = Plot.plot({\n marks: [\n Plot.dot(tableData3, {\n x: 'sector',\n y: 'certificates',\n r: d => d.certificates * 5, // Taille des bulles proportionnelle au nombre de certificats\n fill: 'blue', // Couleur des bulles\n fillOpacity: 0.5, // Opacité des bulles\n hoverinfo: 'text', // Afficher les informations au survol des bulles\n text: d => `Secteur : ${d.sector}\\nCertificats : ${d.certificates}`, // Contenu de l'info-bulle avec balises HTML pour mettre en gras\n tip: true\n })\n ],\n width: 600, // Largeur du graphique\n height: 400 // Hauteur du graphique\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"## Try to replace the business sectors on the X axis with numbers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":627,"value":"// Définir les options de transformation\ntransformOptions = {\n x: 'xValue' // Utiliser 'xValue' comme axe des X\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"// Appliquer la transformation avec les options spécifiées\nPlot.transform(transformOptions, (data, facets) => {\n // Ajouter une nouvelle propriété 'xValue' contenant des nombres croissants\n const modifiedData = data.map((d, i) => ({\n xValue: i + 1, // Remplacer 'sector' par des nombres croissants\n certificates: d.certificates,\n sector: d.sector\n }));\n\n return {\n data: modifiedData, // Utiliser les données modifiées avec 'xValue'\n facets: facets.map((I) => I.filter(() => Math.random() > 0.5))\n };\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"Plot.transform(Options, (sector, facets) => {\n return {\n data,\n facets: facets.map((I) => I.filter(() => Math.random() > 0.5))\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"// Définir les options de transformation\ntransformOptions = {\n x: 'xValue' // Utiliser 'xValue' comme axe des X\n};\n\n// Appliquer la transformation avec les options spécifiées\nplot = plot.plot.transform(transformOptions, (data, facets) => {\n // Créer une nouvelle propriété 'xValue' pour utiliser des nombres sur l'axe des X\n const modifiedData = data.map((d, i) => ({\n xValue: i + 1, // Utiliser des nombres croissants pour l'axe des X\n certificates: d.certificates,\n sector: d.sector\n }));\n\n return {\n data: modifiedData, // Utiliser les données modifiées avec 'xValue' pour l'axe des X\n facets: facets.map((I) => I.filter(() => Math.random() > 0.5))\n };\n});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"## Try to replace the business sectors on the X axis with numbers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":484,"value":"\nplot3 = Plot.plot({\n marks: [\n Plot.dot(tableData3, {\n x: d => tableData3.findIndex(item => item === d), // Utiliser l'index du tableau comme valeur x\n y: 'certificates',\n r: d => d.certificates * 5, // Taille des bulles proportionnelle au nombre de certificats\n fill: 'blue', // Couleur des bulles\n fillOpacity: 0.5, // Opacité des bulles\n hoverinfo: 'text', // Afficher les informations au survol des bulles\n text: d => `

Secteur:

${d.sector}

Certificats:

${d.certificates}

`, // Contenu de l'info-bulle avec balises HTML\n tip: true\n })\n ],\n width: 600, // Largeur du graphique\n height: 400 // Hauteur du graphique\n});\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"## 2nd test","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":500,"value":"// Créer un tableau de valeurs pour l'axe des x\nxValues = tableData3.map((_, index) => index);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"# Graph 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"###Try to create a drop-down list for the sectors of activity and make a graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 30:"$2f:body"