D3 for R Users
Welcome to D3
Adapted from Build Your Own Graph!
This guide serves as a companion text to Scott Murray’s Interactive Data Visualization for the Web, 2nd edition–henceforth IDVW2–a required text for GR5702. Be sure to get the second edition, which is a comprehensive update to D3 version 4. The first edition uses D3 version 3, which is not compatible. (The current version of D3 is actually v6. However, since differences between v4 and v5/v6 are minimal, unless otherwise indicated in this guide, the code in IDVW2 will work with either.)
We rely on the text heavily but also deviate from it in several ways. IDVW2 is written for graphics designers not data science students so the pain points are somewhat different.
.filter(), arrow functions and template literals, that make coding easier (and more like R!)1 We use different examples, though you are strongly encouraged to study Murray’s code examples in addition to reading the text. Particularly through the first half, we don’t follow the text in order, so always refer to this guide first which will direct you to the pages of the text that you should read.
This is very much a work-in-progress so please submit issues on GitHub to provide feedback and edit or add text by submitting pull requests. (Click the icon at the top of each page to get started. More detailed instructions are available on edav.info. If you would just like to view the source code, click the icon.)
A big hurdle to learning a new language is just getting setup. Often authors forget to mention what your programming environment should look like, what should be open on the screen. I will try not to do that and be as clear as possible so you know where you should be entering the code in the pages that follow. This task is somewhat complicated by the fact that we will be using a variety of workflow options. This section will serve as a reference guide; future sections will link back here as appropriate.
All of our workflows require Google Chrome, so if you don’t have it already, download and install it.
With the DevTools open, your screen will look like this:
The next chapter, Jump in the deep end, employs this workflow.
0.1.2 This book in the Console
If you’re not reading the
Let’s try it out.
Scroll so that both the blue rectangle above and the code chunk below are visible on your screen. Toggle the sidebar, open the Console, and then move the mouse onto the code block so the icon appears. Click on it to copy the code, paste it in the Console, and then press return.
0.1.3 Text editor
This is a very basic local setup in which the same
.html is open both in a text editor (if you don’t want to stray too far from home, use RStudio) and in a web browser (we will use Chrome), each on one half of your screen. The workflow is: make changes to the file in the text editor, save the changes and then refresh the page in the browser to see the updates. Keyboard shortcuts for saving and refreshing (on the Mac, command-s and command-r respectively) are very helpful.
Let’s try an example:
Download a copy of
shapes.html by opening this page and clicking File, Save Page As… Open the file in a text editor of your choice on one half of your screen. On the other half of your screen open the same file in Chrome. As you make changes to the
.html file, save the file and then refresh the browser to see the effects.
Your screen should look like this: