Share a D3.js chart as a link
A D3.js chart is a web page, so it can live in one HTML file. Load D3 from a CDN, put the data inside the page, upload the file, and send a link that opens the interactive chart in any browser.
D3 charts are interactive in the browser, and that interactivity is what gets lost when you send one. A screenshot drops the tooltips and transitions. A folder of index.html, chart.js and data.csv asks the recipient to run a local server, because browsers block d3.csv() on a file opened from disk.
One HTML file with the data inside it, hosted at a link, avoids both problems.
Put the chart in one file
Create chart.html with this structure:
- ✓<!doctype html> and <meta charset="utf-8"> in the head.
- ✓<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script> to load D3.
- ✓An empty element for the chart, such as <div id="chart"></div>.
- ✓A <script> block after it holding your chart code, pasted from chart.js.
- ✓Any CSS for axes, tooltips or colors in a <style> block in the head.
Move the data inside the page
d3.csv("data.csv") and d3.json("data.json") request a second file. An uploaded page is hosted on its own, so that request fails and the chart stays empty.
For CSV, paste the rows into <script type="text/csv" id="data">…</script> and read them with d3.csvParse(document.getElementById("data").textContent). For JSON, assign the object to a variable: const data = { … }. Both run without any request.
Data that already lives at a public URL which allows cross-origin requests, such as a raw file on GitHub, can stay as a d3.csv() or d3.json() call with the full https:// address.
Upload it and send the link
Drag the .html file onto the FileShare Pro dashboard and copy the link. The chart draws as soon as the page opens. Hover tooltips, zoom, brushing and transitions work as they did locally, and viewers need no account.
If the page shows nothing once hosted, open the browser console. A failed request for a .csv or .json file means a data file was left out. Making an HTML file self-contained covers other local references, and why an AI page works in chat but breaks when hosted covers charts an assistant wrote.
Collect feedback on the chart
Turn on comments and viewers can leave a note on the page after typing a name, which suits a review of a draft chart. The view count shows whether the people you sent it to have opened it.
When the data or design changes, upload the new file over the old one. The link stays the same and the previous version is kept in history: updating a shared link without changing it.
Charts made in Python follow the same path: see sharing a Bokeh or Altair chart.
Frequently asked
Put the chart code, a script tag that loads D3 from a CDN and the data into one HTML file, upload it to a host that serves HTML as a web page, and send the link.
Usually d3.csv() or d3.json() points to a data file that was not uploaded. Put the data inside the page or load it from a full public URL that allows cross-origin requests.
No. Each upload is one file with its own link. Paste the script and the data into the HTML file.
Yes. The page runs the same JavaScript as it did on your computer.
Yes. The free plan hosts up to 50 files of up to 100 MB each, with view counts and comments included. Password-protected links are on Pro.
Drop the file, copy the link — live in seconds, free plan included.
Start sharing free