Can a data visualization really fit in one file?

Yes, for most cases. The chart code, the styling, and a few thousand rows of data fit comfortably in a single HTML file. Only very large datasets push past the practical limit.

Where does the data go if I cannot fetch it?

Inline. Embed the dataset directly in the JavaScript as an array or object. The file then carries its own data and works without any network access.

Which library is best for a single-file visualization?

D3 for bespoke and interactive charts, p5.js for generative or animated graphics, or plain canvas and SVG for simple charts. ArcadeLab injects D3 and p5.js from a CDN when you list them in the header.

How big can the file be?

ArcadeLab accepts single HTML files up to 500KB. Chart code is small; the data is what grows. If a dataset is too large, summarize or sample it before embedding.

Can I embed the visualization in an article?

Yes. Once it has its own URL, embed it with an iframe in a blog post, report, or documentation page. It stays sandboxed and self-contained.

📈May 15, 2026

How do I publish a single-file data visualization?

💡

Quick answer

A single-file data visualization holds the chart code, the styling, and the dataset all in one HTML file. Embed the data directly in the JavaScript so it needs no network access, draw with D3, p5.js, or plain canvas, and paste the file at arcadelab.ai/publish for a permanent URL — no build step, no signup.

A good chart deserves a URL, not a screenshot. Publishing a data visualization as a single self-contained HTML file keeps it interactive, keeps it shareable, and keeps the whole thing in one place. The one question worth thinking about up front is where the data lives.

What is a single-file data visualization?

It is one HTML document that contains everything: the markup, the CSS, the charting JavaScript, and the data itself. Open the file and the visualization runs. There is no separate data file to load and no server to call — which is exactly what makes it easy to publish and safe to sandbox.

Where does the data live if there are no network calls?

Inline, inside the file. Instead of fetching a CSV or JSON file, embed the dataset directly in the JavaScript as an array of values. Published visualizations run in a sandbox with no network access, so a fetch call would fail — but inline data never has to travel anywhere. Ask your AI assistant to "embed this data as a JavaScript array" and the file becomes self-sufficient.

Which library should I use?

D3 is the workhorse for custom, interactive charts. p5.js suits animated or generative visualizations. For a plain bar or line chart, the canvas and SVG APIs need no library at all. List D3 or p5.js in the ARCADELAB header and ArcadeLab injects it from a CDN — you do not add a script tag. For the D3-specific path, see how to share a D3 visualization without a build step.

How do I publish the visualization?

Test the file in a browser, then paste it at arcadelab.ai/publish for a permanent URL. There is no signup and no build step. The result is a page you can link directly or embed with an iframe wherever the chart belongs.

How do I keep the file under the size limit?

Chart code is small; data is what grows. If a dataset pushes the file past 500KB, sample it, round long decimals, or aggregate to the level the chart actually shows. A visualization rarely needs every raw row — it needs the shape of the data, and the shape compresses well.

Have a visualization ready? Publish it at arcadelab.ai/publish.

Library hub

📊D3.js (data visualization) on ArcadeLab

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

🚀Publish your thing

What is a single-file data visualization?

Where does the data live if there are no network calls?

Which library should I use?

How do I publish the visualization?

How do I keep the file under the size limit?

Related guides