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.