This is a step-by-step series of examples of D3 code, designed to slowly walk you into using D3. For people familiar to D3, it may seem like an odd order, but it's designed to try and put off learning the 'strange' parts of D3 as long as possible. A working knowledge of Javascript is essential to understand these slides, and it helps if you've spent at least a little time with creative coding or visual coding before.
Each example here has a description of the particular part of D3 that we're trying to explain. There is also a live D3 visualization. Below the fold, there are two code blocks. One is the D3 code being used for the visualization, and the other contains the `data` variable, which becomes essential in later lessons.
For each example on the site, there is a button. This will open up a live version of the example on the CodePen site, where you can manipulate the code and see your changes reflected in real-time. There is also a button that will download a single HTML file containing the code for the current example.
These examples were originally generated for use in a workshop given at the Frank-Ratche Studio for Creative Inquiry at Carnegie Mellon on October 28th, 2016. Additional background and material is available in the slides, which are available on SlideShare. The code used to generate this website has been released as open source under the MIT license and is available on Github for review and suggestions.