library/d3.js
A D3.js Online Editor and Playground with Live SVG
Bind an array to SVG with a D3 data join, add scales and axes, and watch the chart and its transitions update live as you edit, with npm and nothing to install.
import * as d3 from 'd3';
const data = [4, 8, 15, 16, 23, 42];
const x = d3.scaleLinear([0, d3.max(data)], [0, 400]);
d3.select('svg').selectAll('rect')
.data(data)
.join('rect')
.attr('y', (_, i) => i * 24)
.attr('height', 20)
.transition()
.attr('width', x);01 platform
What makes D3 different from a chart library
A chart library gives you a chart. D3 gives you the pieces underneath — data bound to elements, scales that map numbers to pixels, transitions between states — so you build the visualization a chart library can't. The editor is a good place to feel that difference.
-
You bind data to the DOM
D3's data join maps an array to a set of SVG (or HTML) elements and keeps them in sync as the data changes. It is lower-level than a chart type, and it is why D3 can draw things no chart library anticipated.
-
Live SVG on every save
The preview re-runs your code and redraws the SVG, so a changed scale, a new axis or a different transition shows up immediately. You iterate against the picture.
-
The whole toolkit via npm
d3and its modules — scales, shapes, axes, geo, force — resolve from npm through esm.sh, so you have the real library rather than a trimmed subset. -
A real project, not a snippet
Split a visualization across modules, add TypeScript, keep a data file in the tree, and commit with Git — the shape of an actual D3 project.
02 deep dive
The data join, watched live
The data join is the one idea that unlocks D3, and it is far easier to understand by watching it run than by reading about enter, update and exit.
.data().join() is the core. Bind an array with .data(rows) and .join('rect') creates, updates and removes elements to match — one rectangle per data point, kept in step as the array changes.
Attributes are functions of data. .attr('width', d => x(d.value)) sets each element from its datum, so the shape of the drawing follows the shape of the data rather than being hand-placed.
Changes animate. Add .transition() and D3 interpolates from the old state to the new one, so a re-sort or a filter is an animation you can watch — which is exactly what the starter demonstrates.
- bind
- .data(rows)
- reconcile
- .join('rect')
- set
- .attr(name, d => …)
- animate
- .transition()
svg.selectAll('circle')
.data(points, (d) => d.id) // keyed join
.join('circle')
.attr('cx', (d) => x(d.t))
.attr('cy', (d) => y(d.v))
.attr('r', 4);03 features
What ships with a D3 project
Everything below is on the moment you open the D3 editor, which starts with an animated, re-sortable bar chart built from a data join.
-
npm for every D3 module
d3-scale, d3-shape, d3-axis, d3-geo, d3-force and the umbrella
d3package all resolve through esm.sh, so you import exactly the parts a visualization needs. -
Live SVG preview
Full width, split beside the code, in device frames, or its own tab — so a chart can take the space it needs while you tune the scales.
-
TypeScript when you want it
D3 ships types; write
.tsfor autocomplete on scales and selections, stripped on the fast path so it costs nothing at runtime. -
Data files in the tree
Keep a JSON or CSV of your data in the project and load it with d3.json or d3.csv, so the visualization reads real data rather than an inline array.
-
Multi-file visualizations
Split scales, axes and rendering across modules with a file tree and tabs, the way a real D3 project is organized.
-
Git and export
Commit history in the browser through isomorphic-git, and export the project as a zip that runs anywhere, with no lock-in.
04 deep dive
Scales and axes without the guesswork
Most of the work in a D3 chart is mapping data to pixels and drawing the guides that explain it, and both are one function call away.
Scales map data to pixels. d3.scaleLinear, scaleBand, scaleTime and scaleOrdinal turn a data domain into a pixel range, so a value becomes a position or a width without arithmetic you maintain by hand.
Axes draw themselves. d3.axisBottom(scale) renders ticks and labels from a scale, so the guides stay correct when the data or the range changes rather than drifting out of alignment.
Color is a scale too. scaleSequential and scaleOrdinal map data to color the same way position scales map to pixels, so a heatmap or a category palette is declared, not hand-assigned.
- linear
- scaleLinear
- categorical
- scaleBand
- axis
- axisBottom(scale)
- color
- scaleSequential
const y = d3.scaleBand(categories, [0, 300]).padding(0.1);
const x = d3.scaleLinear([0, d3.max(data, d => d.v)], [0, 400]);
svg.append('g').call(d3.axisLeft(y));05 workflow
From an array to an animated bar chart
No install, no bundler, no dev server — the whole loop from a plain array to a chart that animates when the data changes.
- new project → D3
- created chart.js · d3 resolved via esm.sh
- add a linear x-scale + axis
- svg redrawn · bars sized from data
- sort data, add .transition()
- bars animate to the new order
- git commit -m "sortable bar chart"
- [main 2f9b7a1] sortable bar chart · 2 files
-
Nothing to set up
No webpack, no dev server, no local d3 install — the chart redraws the moment you save, as real SVG.
-
The same loop on a tablet
D3 runs client-side, so an iPad renders the SVG the same way a laptop does, with nothing installed.
-
Share by link
Send a live preview URL and the recipient sees the chart animate, not a static export of it.
06 ecosystem
D3 beside the rest of the toolkit
D3 is one of many things the editor runs — the same tab compiles a framework, runs a language and renders data-driven SVG, per file.
07 languages
What the editor runs beside D3
A D3 visualization sits beside everything else the editor compiles in the browser, renders natively, or executes on demand.
Compiled in your browser11
Zero build step. Transform runs on a Web Worker, so typing never blocks.
- JSX
- TSX
- TypeScript
- Vue SFC
- Svelte
- Angular (JIT)
- SolidJS
- SCSS
- Sass
- Less
- Pug
Rendered natively8
Straight to the live preview, no transform in the way.
- HTML
- CSS
- JavaScript
- JSON
- Markdown
- Jupyter (.ipynb)
- SVG
- YAML
Executed on demand22
70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.
- Python
- Java
- C
- C++
- C#
- Go
- Rust
- Ruby
- PHP
- Kotlin
- Swift
- Lua
- Scala
- Perl
- Haskell
- Elixir
- Dart
- R
- Julia
- SQLite
- Bash
- PowerShell
08 questions
D3.js in the browser — common questions
Do I need a build step or local install for D3?
No. d3 and its individual modules resolve from npm through esm.sh into a native import map, so import * as d3 from 'd3' works with no webpack, no dev server and no node_modules. Opening the editor is the whole setup.
Does the SVG update live as I edit?
Yes. The editor re-runs your code on save and redraws the SVG, so a changed scale, a new axis or a different transition appears immediately — the feedback loop that makes tuning a chart quick.
Can I import individual D3 modules?
Yes. The umbrella d3 package and the individual modules — d3-scale, d3-shape, d3-axis, d3-geo, d3-force — all resolve through the npm panel, so you import exactly the parts a visualization needs.
Can I load my own data from a file?
Yes. Keep a JSON or CSV in the project tree and load it with d3.json or d3.csv, so the visualization reads real data rather than an inline array, the same as it would in a deployed project.
Does it work with TypeScript?
Yes. D3 ships type definitions, so writing .ts gives you autocomplete on scales and selections and type-checking in the editor, with the types stripped on the same fast pass that compiles the code.
Is this better for custom visuals than a chart library?
For anything beyond standard chart types, yes — D3 binds data to elements you control, so you draw exactly what the data needs. For a quick standard chart, a higher-level library like Chart.js is less code; D3 is the tool when the chart does not exist yet.
Can I split a visualization across files?
Yes. Projects are multi-file, so scales, axes and rendering can live in separate modules with a file tree and tabs, and the whole thing commits with Git — the way a real D3 project is organized.
Do I need to install anything to use XCODX Studio?
No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.
Where is my code stored?
In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.
Is XCODX Studio free?
Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.
Can I use XCODX on a tablet or Chromebook?
Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.
Can I export a project or move it to my own machine?
Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.
Nothing to install
Open the D3.js editor now
A data-bound, animating chart on screen in under a minute — live SVG, the full D3 toolkit via npm, with no account wall and nothing to install.