How do I use this prompt?

Copy the prompt block, paste it into Claude, ChatGPT, Cursor, or any other AI assistant. Replace the bracketed sections with what you want to build. The AI will output a complete HTML file you can paste at arcadelab.ai/publish.

Do I need an account to publish what the AI builds?

No. ArcadeLab uses Creator Codes (like ROCKET-WOLF-COMET-73) instead of email and password. First time you publish, ArcadeLab generates a code for you automatically.

What if the AI's output doesn't work?

Paste the error or describe what's broken back to the AI and ask it to fix. The loop usually takes one or two iterations. ArcadeLab shows a live preview before you publish, so you'll see what's wrong before going live.

What's a good reference for interactive visualization quality?

Distill.pub explorables, Bret Victor's explainers, Nicky Case's visual stories, and 3Blue1Brown's animated math are the canonical examples. On ArcadeLab specifically, the double-slit experiment demo at arcadelab.ai/play/light-wave-or-particle-ultraviper34 is a good in-house reference.

Should I use D3 or raw canvas?

D3 is great for charts, scales, axes, and dataset-driven visualizations. Raw canvas (2D or WebGL) is better for simulations, particle systems, or anything performance-sensitive. The prompt is library-flexible — let the AI pick based on what you're illustrating.

How do I embed data without network requests?

Inline the data as a JavaScript constant at the top of your file. For small to medium datasets (a few thousand rows), this is fine and keeps the file self-contained. Larger datasets should be pre-aggregated before embedding.

🔬~8 min from prompt to published URL

How do I prompt Claude or ChatGPT to make an interactive visualization?

Interactive visualizations and explorables are a renaissance shape of web content — Bret Victor explorables, Nicky Case explainers, Distill.pub articles, science demos. AI assistants are remarkably good at producing these when prompted well. The prompt below asks for one, with an option to use D3 if the visualization needs charting.

Build a single-file HTML interactive visualization in the spirit of Distill.pub explorables and Bret Victor explainers — interactive, educational, visually beautiful.

Use the 2D canvas API or D3.js (or both). If using D3, add "libraries: d3" to the header (don't include the D3 CDN script — ArcadeLab loads it).

Requirements:
- All JavaScript and CSS inline; no external files
- File under 500KB
- Works at any viewport size (responsive)
- No network calls — embed any data inline as JavaScript constants or generate procedurally
- Polished visual design: thoughtful color palette, clear typography, smooth animations
- The interaction should reveal something the static image can't

Add this ARCADELAB header at the very top:

<!--ARCADELAB
title: [Your Visualization Title]
description: [One short sentence about what it shows]
libraries: [omit, or "d3" if you're using D3]
emoji: [📊 🔬 ⚛️ 🌌 🧬 or similar]
color: [color matching your viz: blue, purple, teal, gold...]
-->

The visualization should illustrate: [DESCRIBE THE CONCEPT — what idea, what controls, what should the viewer come away understanding?]

For inspiration on quality bar, look at: https://arcadelab.ai/play/light-wave-or-particle-ultraviper34 (an interactive double-slit experiment, single HTML file, no frameworks).

Output the complete HTML file. After, tell me: "Copy the code, then go to arcadelab.ai/publish and paste it."

Notes: Best for: physics simulations, math toys, biology models, data visualizations, animated explainers. Reference our double-slit experiment demo (arcadelab.ai/play/light-wave-or-particle-ultraviper34) as a quality bar — that level of polish is achievable with the right prompt.

Ready to publish? Paste your HTML file and get a URL.

🚀Publish your thing

Other prompts