SAE 303 – Visualisation de données

Infographie graphique stricte :

Graphique PNG généré par IA pour la partie strict

Image graphique fait avec l'IA pour le graphique créatif

Prompt utilisé pour générer le graphique

Prompt :

À partir de cette image, prends les données dans cette dernière et fait moi un graphique qui doit être en barre. L'axe des y doit représenter les TWh et l'axe des x les années de 2020 a 2035. les barres doivent representer les different types de consommations comme sur le schéma en piece jointe et les differents types de consommation doivent se superposé en 1 seule barre. Les barre représentant les années de 2026 a 2035 doivent être avec une opacité plus basse car ce sont des hypothèses. Les données a représenter sont celles de l'image. Met une couleur différente pour chaque type de consommation et fait moi une legende. fait moi une version image générer en png et une version d'un site interactif sans menu et sans footer juste l'intérieur s'il te plait.

Explication et retour

Voici le prompt que j’ai réalisé avec ChatGPT. J’ai testé plusieurs autres IA comme Gemini ou Mistral, mais je n’avais encore jamais utilisé une IA pour générer du code HTML. C’est pour cette raison que je me suis tourné vers ChatGPT : c’est le seul qui m’a produit des graphiques vraiment cohérents contrairement aux deux autres IA. Pour une fois, je n’ai pas eu besoin de refaire plusieurs essais, et je trouve que l’image PNG générée est plutôt correcte, sans défauts majeurs.

Infographie graphique hybride :

Prompt utilisé pour générer le graphique

Prompt 1

J'ai besoin de ton aide afin d'animer une carte en SVG, et d’y afficher des données concernant la consommation d'énergie liée aux data centers et à la part d'IA dans le monde.

Voici les données que je souhaite présenter :

Le but est de comparer ce que consomment l'IA et les data centers entre les trois plus grandes puissances mondiales.

J'aimerais donc une animation en JavaScript et SVG (ou CSS) qui permette d'afficher ces données lorsque l'on clique sur un des trois pays, et que ces animations puissent s'accumuler (on doit pouvoir afficher en même temps plusieurs données concernant différents pays).

Pour ce qui est du type d'animation pour les données, je te laisse un choix libre. Tout ce que je souhaite, c'est que cela soit présenté à la manière d'un graphique, et que les données puissent être interprétées facilement.

Pour faire apparaître les animations, je souhaite que lorsque l'on clique sur un pays, l'animation puisse se lancer. J'ai donc nommé les pays dans mon fichier SVG pour que tu puisses paramétrer l'animation en fonction d'un clic dessus. Par exemple, lorsque l'on clique sur l'élément SVG comportant la balise <g id="usa">, l'animation doit apparaître, de même pour les éléments nommés <g id="ue"> et <g id="chine">.

Je vais ensuite t'envoyer, sous forme de parties, mon code SVG, car celui-ci est trop long pour être envoyé en un seul message. Après ce message, attends-toi à recevoir 5 autres prompts composés des parties de mon SVG. À chaque fois que tu récupères une partie de ma forme vectorielle, je veux que tu me répondes uniquement « reçu ». Une fois que tout sera envoyé, interprète le code et je te dirai « go », et à ce moment-là, et seulement à ce moment-là, tu pourras lancer la génération d'une page web qui accueillera cette animation.

Pour cette page web, ne te focalise pas sur sa présentation : pas de fond coloré, de menu, de footer, etc. Concentre-toi uniquement sur l'animation de ma carte et de mes données.

Prompt 2

C'est cool mais le système de barres ne me plaît pas. Essaye de me générer une autre présentation, comme un graphique en camembert par exemple, où les données concernant les parts liées aux datacenters et à la part d'IA se mêleraient dans la part de la consommation globale de chaque pays.

Prompt 3

Ta présentation est parfaite. Le seul bémol est que les parties des camemberts concernant les données globales apparaissent brusquement puis disparaissent la seconde d'après, tandis que les autres données apparaissent bien.

Propose-moi une version corrigée qui permet d'afficher toutes les données correctement, tout en gardant ce que tu m'as proposé à côté. J'ai aimé l'idée des pourcentages affichés, donc garde cela, mais corrige l'affichage des données globales.

Explication et retour

J’ai réalisé ce graphique avec l’aide de ChatGPT. Le résultat final est très proche de ce que j’avais imaginé, avec quelques différences dues aux modifications que j’ai demandées. Par exemple, il était plus simple pour l’IA de représenter les données sous forme de camemberts. ChatGPT a également effectué les calculs et généré des pourcentages, ce qui a permis d’ajouter des informations supplémentaires et de faciliter la comparaison des données. Globalement, le code a été assez simple à générer : en seulement trois prompts, j’avais un résultat satisfaisant. J’ai seulement apporté une petite modification pour corriger une couleur qui s’affichait mal, mais à part ça, tout était bien réalisé.

Infographie graphique créatif :

Image graphique fait avec l'IA pour le graphique créatif

Prompt utilisé pour générer le graphique

Prompt :

Créer un graphique en barres illustrant la consommation énergétique pour différents pays en 2024 .

Style visuel : moderne, clair, légèrement futuriste, avec des illustrations symboliques de l’énergie (icônes : ampoule, data center, serveur, processeur IA, planète, foudre).
Je souhaite un fond coloré qui évoque l’IA et des barres de couleur fluo (effet néon) .

Axes du graphique :

Pour chaque pays, afficher trois barres , chacune avec une couleur ou texture différente :

Données à afficher

Explication et retour

Voici le prompt que j’ai utilisé sur Artlist, un générateur d’images IA. J’ai testé exactement le même prompt sur de nombreuses autres intelligences artificielles comme Gemini, ChatGPT, Hera, Sora, etc.

Mais à chaque fois, le résultat était très insatisfaisant : il manquait des données ou des lettres, les éléments étaient mélangés, les pays n’étaient pas regroupés correctement… De plus, les crédits étaient rapidement épuisés, ce qui obligeait à payer pour recommencer.

Artlist, en revanche, m’a généré du premier coup un graphique qui m’a tout de suite convaincue. Il contient malheureusement une petite erreur : la première barre verte des datacenters n’est pas représentative, sa taille n’est pas correcte. Mis à part cela, tout le reste est parfaitement fidèle. Malheureusement, les crédits sont à nouveau insuffisants pour relancer une génération.

Ce sont les aléas des outils d’IA générative, qui restent encore imparfaits et parfois peu fiables.