Reading 22B: D3 (not 3D)

by Mike Gleicher on April 20, 2015

Reading Due: I would like you to do some of the reading before class on April 30, but I understand that there is another reading (and the design challenge) already due then. So, have your initial posting on or before Friday May 1st.

Canvas Discussion: Reading 22B on Canvas

There is my explanation of why we’re not really “teaching D3” in class (that was written before I really new what this class way). It might give you a sense of what you’re up against if you choose to learn D3. In class, we’re going to focus on learning “about” D3 (why it is the way it is, not necessarily how to use it).

The D3 paper is an important starting point. It’s the “academic document” that tries to explain why D3 is what it is, and why it’s a good idea. It’s a weird mix of an academic CS paper, with lots of specific implementation details (which are less common in academic CS papers). The paper really is the best way to get the rationale and the key ideas, you just have to skip over a lot of acronyms and buzz-words.

If you want to understand what D3 can do, there is a huge gallery of examples. Although, the most interesting examples are where it gets used in practice – many of the visualizations you seen in the web browser (that are of the form that D3 can do well) are done with D3

D3 is part of a long line of tools that Jeff Heer (and his students/collaborators) have built. Some of the best ways to understand “why” D3 is what it is is to see what didn’t work (as well). Protovis (the thing that came before D3) is, ironically, a better idea for a class (since it was designed to make simple things simple). It just doesn’t let you get much beyond doing the basic stuff. The Protovis paper is interesting since it provides a set of abstractions that seem to be good ones for building (or thinking about) visualizations.

If you actually want to learn to use D3…

On the D3 web page, there is a huge list of tutorials.

The O’Reilly Book “Interactive Data Visualization for the Web” by Scott Murray is available on line for free.

http://chimera.labs.oreilly.com/books/1230000000345/index.html

This is more of a “here’s how to use D3” book (which might be what you want), but its decent for that. It has an overview of the underlying technologies that you need to know. But Chapter 2 can give you a sense of what D3 is roughly about.

The reading/discussion:

I’d like everyone to try to read the D3 paper. If your eyes glaze over in parts, that’s to be expected. You should be able to get something about the general ideas. Based on that, you might want to either get some more general sense of what’s going on (from Chapter 2 of the D3 book or the D3 web page) – or you might want to dig in and look at some of the tutorials. Given the range of people in the class, different people will look at this at different levels. And everyone should definitely take some time to play with examples.

Based on what you’ve read, seen on the web, heard in class, … I’d like you to think about / discuss the following 3 things:

  1. What is D3 good for? When would you want to use it? When would you not want to use it?
  2. Why is D3 good for the things it’s good for? Why is it so successful?
  3. How would you go about figuring it out? If we had looked at it earlier in the semester would you have tried it yourself?

In your initial posting, say what you tried to read. If you’re stumped, ask questions! At least try to get at the three discussion topics above.

Hopefully, in the discussion, you can get to the heart of those discussion topics. Also, some of the more CS oriented people can hopefully decode some of the things in the readings. If you find particularly nifty demos, say so!

Print Friendly, PDF & Email

Previous post:

Next post: