What prompts make a good interactive visualization?

Prompting for an interactive visualization is its own skill. The instructions that matter are different from the ones a game needs — and getting them right means the difference between a publishable file and one that breaks the moment it leaves the chat.

Why visualization prompts differ from game prompts

A game is built around a mechanic: the prompt describes how the player acts and what happens. A visualization is built around data: the prompt describes what the data is, what relationship it should reveal, and what the reader can adjust to explore it. Same single-file format, different center of gravity. For the game side, see what prompts make a good browser game.

What should a visualization prompt include?

• The format: a single self-contained HTML file, all code inline
• The data: what it represents, and the actual values if you have them
• The relationship the chart should make visible
• The control: what the reader changes — a slider, a toggle, a dragged point
• The constraint: embed data inline, no fetch, resizes to the window

An example prompt that works

Make a single-file HTML interactive visualization. Put
all HTML, CSS, and JavaScript in one file with nothing external.

Visualize how a population grows over time under different birth rates.
Show a line chart that redraws as the reader drags a slider for the
birth rate.

Requirements:
- Embed the data directly in the JavaScript as an array. Do not fetch it.
- Use SVG or the canvas API; if you use a library, use D3.
- Make the chart resize to fit the window.
- Label the axes and the slider clearly.
- Keep the whole file under 500KB.

The interactive visualization prompt template on ArcadeLab is a ready-made version you can copy and adapt.

How do I prompt for the data?

If you have real data, paste it and say "embed this inline as a JavaScript array." If you do not, ask the assistant to generate a realistic sample so the visualization has something to draw. Either way, the instruction that prevents the most bugs is the explicit one: do not fetch a data file.

How do I iterate on a visualization?

Treat the first result as a draft and refine one thing at a time: the axis labels, the color scale, the slider range, the redraw smoothness. Specific, narrow follow-ups keep a working chart working. When it reads clearly, paste the file at arcadelab.ai/publish for a URL.

Built a visualization? Publish it at arcadelab.ai/publish.