d3.js / live
Activate the "Code" button in the header to view the html file and edit. Select example files from the sidebar to get started with interactive demos.
d3.js / live is an open-source, in progress experiment.
This tool is built using React and Redux. The code block is created with react-codemirror, built on top of the awesome
CodeMirror project. Other dependencies (and big props!) can be found on the github repo.
This is the D3.js version of the code editing tool used with threejs.live. Just like three.js, I've been working with D3 for a few years and have found that the best educational resource is the set of example files created by Mike Bostock and other members of the community. This site is built mostly off of Mike Bostock's gists, but there are a good deal of other examples borrowed from bl.ocks.
I made this site for two main reasons. For one, while the robust set of example files are inspiring, it's difficult to sift through them all. This site looks to curate the examples to a simpler set with the bare necessities. Also, I've found that the best method for learning the elegant/obscure D3 API is through interaction, so this site adds the ability to edit the file in-session. Users can modify example files without having to clone the repo and run them locally.
There are more substantial tools out there like Block Builder, so have a look at that if you'd like to create your own blocks. Also, if you'd like to add gists to the site, please submit a PR by editing this file. Thanks!