Advanced data visualization, D3
Today we will get a taste of JavaScript and D3. A JavaScript IDE is not necessary for today's class, but will make things much easier. If you already have a JavaScript IDE set up, you can skip this. Otherwise, here are instructions for getting set up with Atom:
- Download the latest version from atom.io.
- Once open, press the "Install a Package" button and install the "atom-live-server" package.
- Create a new folder for today's project. Then go to File > Add Project Folder and select the folder you just created.
- D3 official website
- D3 gallery
- D3 documentation
- bl.ocks.org - lots of D3 examples. Search Gist for examples or search in Google using the site: operator ("site:bl.ocks.org").
D3 is like ggmap's alter ego. Both of them are founded on the concept of mapping data to aesthetics. However, ggmap approaches things from a highly-abstracted perspective -- the objects you're dealing with are bar charts, scatter plots, maps, etc. In contrast, D3 deals only primitive objects like circles, rectangles and lines.
Like ggmap, D3 is quite modular -- mastering it would take years, but any specific piece you can learn and begin using right away.
Many of the concepts will be familiar:
- The programming style is declarative like R.
- Functions are often chained together, much like the %>% operator.
- Some of the coding concepts that people find most difficult about D3 are selections and joins, concepts you are already familiar with.