Créer un globe interactif des bourses mondiales avec l’IA

Pour ce Prompt Tuesday #11, on demande à l’IA de générer une visualisation HTML/JavaScript impressionnante : un globe 3D en rotation sur lequel les grandes bourses mondiales s’allument selon leur statut d’ouverture.

Entre deux développements sur Linkeum, il y a parfois des idées qui donnent immédiatement envie de tester jusqu’où l’IA peut aller. Pour ce Prompt Tuesday #11, l’objectif était ambitieux : demander à Qwen de générer une page HTML/JavaScript capable d’afficher un globe 3D en rotation, avec les plus grandes bourses du monde représentées par des points lumineux qui changent d’état selon que le marché soit ouvert ou fermé.

L’idée était simple sur le papier, mais très visuelle dans son rendu. Chaque place financière devait apparaître comme un point vert pulsant quand la bourse est ouverte, ou rouge quand elle est fermée, avec la possibilité de cliquer dessus pour afficher une petite fenêtre contenant ses informations principales.

Le prompt utilisé dans Qwen

Comme souvent pour ce type de génération, le prompt a été rédigé en anglais. Les modèles de génération de code comprennent généralement mieux les consignes techniques détaillées dans cette langue, surtout lorsqu’il faut combiner structure HTML, logique JavaScript, rendu visuel et interactions utilisateur.

Act as an expert Front-End Developer and Data Visualization specialist. Write a modern, responsive single-page HTML file that renders an interactive 3D globe using the globe.gl library (and three.js) via CDN, along with Tailwind CSS for styling.

Here are the exact requirements:

1. The Globe: Render a beautiful, dark-themed, highly detailed 3D globe. It should auto-rotate slowly.
2. The Data: Plot the top 10 major world stock exchanges (e.g., NYSE, LSE, Tokyo, Shanghai, Euronext Paris, etc.) using their real latitude and longitude.
3. Market Status Logic: Write JavaScript logic that uses the current UTC time to determine if each market is currently OPEN or CLOSED based on their real-world trading hours.
4. Visual Markers: Represent each exchange on the globe as a glowing, pulsating point. Make the point Green and pulsating if the market is OPEN, and Red and pulsating if the market is CLOSED.
5. Interactivity: When the user clicks on a point:
   • Stop the globe's auto-rotation.
   • Open a sleek, dark-themed HTML pop-up/tooltip floating above the globe displaying the Exchange Name, City, Local Time, and Status (Open/Closed in green/red text).
   • Clicking elsewhere on the globe should close the pop-up and resume rotation.
6. UI/Aesthetics: Give the page a premium, high-end fintech aesthetic (dark mode, glassmorphism for the pop-up, sleek typography).

Output the complete, fully functional HTML, CSS, and JS code in a single file so I can copy-paste it into an index.html file and run it immediately in my browser.

Pourquoi ce prompt était intéressant

Ce que j’aime dans ce prompt, c’est qu’il ne demande pas juste “un globe en 3D”. Il impose en même temps un rendu visuel, une logique métier, des données géographiques et un comportement interactif, ce qui pousse vraiment l’IA à produire quelque chose de proche d’un mini-produit plutôt qu’un simple exemple de code.

Autrement dit, on ne teste pas seulement la capacité de Qwen à écrire du JavaScript. On teste aussi sa capacité à comprendre une intention de design orientée finance, avec une interface qui évoque déjà un tableau de bord premium.

Quelques retouches avec Gemini

Le premier résultat obtenu avec Qwen était déjà très prometteur. On voyait les points, l’animation, l’interaction au clic, et on sentait tout de suite qu’on était très proche d’un rendu spectaculaire.

En revanche, il a fallu effectuer quelques ajustements pour fiabiliser l’affichage et améliorer la mise en scène visuelle. Avec l’aide de Gemini, nous avons donc retouché certains détails techniques et de présentation, notamment sur le rendu du globe, le cadrage initial, la lisibilité des continents et le comportement de la caméra au chargement.

Un rendu bluffant

Le résultat final est franchement bluffant. On obtient un globe 3D élégant, vivant, interactif, avec des points lumineux qui donnent immédiatement une impression de salle des marchés mondiale.

C’est exactement le genre d’expérience qui attire l’œil dès les premières secondes. Et surtout, ce n’est pas qu’un gadget visuel : derrière cette animation, on peut déjà imaginer un véritable usage produit pour suivre les grandes places financières de manière intuitive.

Et maintenant ?

C’est probablement la partie la plus intéressante de ce Prompt Tuesday #11. Le rendu est suffisamment convaincant pour me donner envie d’aller plus loin que le simple article de blog.

Je vais essayer d’intégrer cette idée plus tard dans Linkeum, dans la partie Finance. Avec une vraie couche de données et quelques raffinements supplémentaires, ce globe interactif pourrait devenir un excellent élément “effet wahou” pour les utilisateurs.