🎮ArcadeLab
📊May 13, 2026

How do I share a D3.js visualization without a build step?

💡

Quick answer

Write your D3 visualization as a single HTML file with data inline. Add an ARCADELAB header with libraries: d3. Paste at arcadelab.ai/publish and get a shareable URL. No build, no bundler, no Observable account.

D3 visualizations are a perfect fit for single-file HTML. The library's API works directly against the DOM and SVG, you bring your own data, and the output is a self-contained interactive document. The only friction was always: where do you put it so people can see it without forking a Gist?

What does a minimal D3 viz on ArcadeLab look like?

<!--ARCADELAB
title: Quarterly Revenue
description: Bar chart of quarterly revenue
libraries: d3
emoji: 📊
color: teal
-->
<!DOCTYPE html>
<html>
<body>
  <svg width="640" height="400" id="chart"></svg>
  <script>
    const data = [
      { quarter: 'Q1', value: 30 },
      { quarter: 'Q2', value: 80 },
      { quarter: 'Q3', value: 45 },
      { quarter: 'Q4', value: 60 },
    ];
    const svg = d3.select('#chart');
    const x = d3.scaleBand()
      .domain(data.map(d => d.quarter))
      .range([40, 600]).padding(0.1);
    const y = d3.scaleLinear()
      .domain([0, 100])
      .range([360, 40]);
    svg.selectAll('rect').data(data).join('rect')
      .attr('x', d => x(d.quarter))
      .attr('y', d => y(d.value))
      .attr('width', x.bandwidth())
      .attr('height', d => 360 - y(d.value))
      .attr('fill', '#4dd4c5');
  </script>
</body>
</html>

How do I include data without network requests?

Inline the data as a JavaScript constant. For small to medium datasets (up to a few thousand rows), this is fine and keeps the file self-contained. For larger datasets, you might pre-aggregate the data first.

If you have CSV data, convert it to a JS array of objects before embedding. ArcadeLab's file size limit is 500KB total, so most plain-text datasets fit easily.

Can my D3 viz be interactive?

Yes. All standard D3 patterns work: tooltips on hover, brushing, zooming, animated transitions, scrubbable timelines. The iframe sandbox blocks network requests, not user interaction.

How does this compare to publishing on Observable?

Observable is purpose-built for D3 and has a brilliant notebook UX for development. It also requires an account, and embeds are tied to your notebook's runtime. ArcadeLab is simpler if you just want a permanent, embeddable URL with no Observable account dependency — and if you've generated the viz with an AI, ArcadeLab is the faster path from output to shareable link.

Where can I see an example interactive viz on ArcadeLab?

The double-slit experiment is an interactive physics visualization (built without D3 specifically, but in the same spirit). It demonstrates what a polished single-file viz can look like.

How do I prompt Claude or ChatGPT for a D3 viz on ArcadeLab?

"Make a D3.js visualization as a single self-contained HTML file. Don't include the D3 CDN — ArcadeLab loads it. Put an <!--ARCADELAB> header at the top with libraries: d3. Embed any data inline as a JS constant — no fetch calls, network requests are blocked."

Prompt template

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

Library hub

📊D3.js (data visualization) on ArcadeLab

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

🚀Publish your thing

Related guides