Graphique Hybride par l'IA
Pour réaliser ce graphique, j'ai utilisé ChatGPT. J'ai dû rédiger plusieurs prompts, que je vous présente ci-dessous, afin que l'IA comprenne au mieux ma demande. Certaines données sont manquantes, mais le résultat reste globalement clair et interprétable.
Des améliorations pourraient inclure l’ajout des titres des axes des ordonnées ou d’un tooltip pour récupérer les données plus précisément. J'ai d'ailleurs intégré ces possibilités dans mon schéma principal.
J'ai utilisé le schéma de ce site internet :
Deloitte – Empreinte environnementale de l’IA
, que j'ai directement envoyé à ChatGPT avec les données déjà mises en tableau que j'ai réalisées moi-même pour plus de précision.
Prompts Chat GPT
1er prompt :
Je réalise un graphique de type "hybride" avec des éléments graphiques, puis la programmation JavaScript et le format SVG pour construire (algorithmiquement) votre graphique et l'animer.
Mon idée : j’aimerais que tu représentes le graphique que je t’ai envoyé avec des barres/rectangles fins qui montent du bas vers le haut.
Pour chaque donnée j’aimerais une couleur différente de ton choix.
Je veux que ce que tu fais ressemble au graphique que je t’ai envoyé, avec les barres qui partent de l’axe des abscisses, qui sont les unes au-dessus des autres.
Donne-moi le code JavaScript et le HTML séparément.
Mais avant ça, as-tu des questions ?
2ème prompt :
Réponse à Chat GPT
Voici les données à utiliser :
const data = [ { annee: 2016, scena_base: 0, scena_haut: 0, hyperscale: 50, enterprise: 67, autres: 96 }, { annee: 2020, scena_base: 20, scena_haut: 0, hyperscale: 90, enterprise: 110, autres: 80 }, { annee: 2023, scena_base: 60, scena_haut: 0, hyperscale: 110, enterprise: 121, autres: 91 }, { annee: 2030, scena_base: 213, scena_haut: 216, hyperscale: 250, enterprise: 200, autres: 91 }, { annee: 2035, scena_base: 289, scena_haut: 1118, hyperscale: 250, enterprise: 210, autres: 108 }, { annee: 2040, scena_base: 300, scena_haut: 1691, hyperscale: 304, enterprise: 242, autres: 120 }, { annee: 2045, scena_base: 326, scena_haut: 1975, hyperscale: 439, enterprise: 216, autres: 103 }, { annee: 2050, scena_base: 417, scena_haut: 1865, hyperscale: 769, enterprise: 328, autres: 171 } ];
Je veux que tu gardes le même style "stacked bar chart". Je veux que le rectangle grandisse de 0 à la hauteur finale (correspondant aux données).
Tu peux donner les titres aux axes, je te les donnerai si tu le veux.
Tu peux choisir une palette cohérente avec des couleurs différentes, un seul gros SVG.
3ème prompt :
Réponse à Chat GPT
1 = oui, 2 = graphique jusqu'à 4000 TWh, 3 = cascade
4ème prompt :
Réponse à Chat GPT
J’aimerais que tu ajoutes la légende du graphique avec la correspondance des couleurs.
5ème prompt :
Réponse à Chat GPT
Oui et avec ces noms :"autres": "Autres", "enterprise": "DC d’entreprise", "hyperscale": "DC Hyperscale", "scena_base": "DC hyperscale IA - Scénario Bas", "scena_haut": "DC hyperscale IA - Scénario Haut"