Reading 11 and Assignment 11: D3

by Mike Gleicher on March 21, 2017

Due: Initial Reading and Posting, Monday April 3, Additional Postings by April 7, discussions close April 14.

Hand-in: Canvas (link)

D3 is a toolkit that is used to make visualizations for the web. It’s not an easy thing to learn since it requires you to be familiar with a lot of web programming stuff and idioms before you even start.

3/25 update: because the coming weeks will have design challenges (Design Challenge 2)  going on, I realize I should adjust the expectations for readings and discussions a bit. Also, based on feedback, I will stop splitting readings and discussion assignment postings. 

New requirements:

It’s not something that we can really teach you to use in this class – but I want to teach you about it. What each person will take away from this is different, but hopefully, everyone will learn something – even if it’s just to appreciate the people who have gotten good with D3.

Let me list off some readings, and then explain the assignment

  1. To start, read my 2015 rant about why you may or may not want to learn D3. It’s a little out of date (we use Javascript in some other classes now, so I have more experience helping students learn it).
  2. 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.
  3. On the D3 web page, there is a huge list of tutorials. I don’t know which ones are good or not.
  4. 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. I don’t know if its better or worse than other tutorials. 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. Chapter 3 gives a brief tour of the web technologies – it tries to cram an entire class on Javascript programming into a subsection.
  5. 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. The examples on the gallery page are nice because they show the source code.

How do I make this work for everyone? I don’t know. Lot’s of people’s eyes will glaze over when we get to any detail. Some of you will want to dive in and tinker, and others would need a lot of background before doing anything.

So, what I’d like you to do…

  1. For Monday’s posting: read #1 (the rant) and chapter 2 of #4, then start to try to read the D3 paper. Depending on your background, you might not get too far before you’re totally lost. But: you can ask questions (since someone in your discussion group is likely to have more background)
  2. In the posting due Monday 4/3: Describe what you think D3 is for – why do the people who like it like it? Where does it get used? Why? What are the concepts in it that make it so great? Also, ask questions where you got stuck. Probably somewhere in the D3 paper, you will have gotten lost, or there will be some concept (or list of concepts/terms) that you don’t know. Ask. Hopefully, someone will answer. If not, I’ll get a sense of where people get stuck with this.
  3. Over the course of the week… play with some of the demos #5. Post links to interesting ones you find. Try to find ones where the code is given and/or explained. Get a sense of what people do with D3 (answer: a lot).
  4. In class on Wednesday, April 5, we’ll play with some D3 demos and experiment with changing them to see what’s inside them. Bring your laptop so you can play along. Even if you can’t program using D3, you might learn enough to be able to read an example and change it to suit your needs.
  5. Look at some of the tutorials (maybe not as much if you’re not a programmer) – see if any look particularly good. (you might also look through some of the book #4)
  6. For your postings/discussion: discuss your experience learning about D3. Maybe the questions where you got stuck will be answered. Maybe you’ll get some ideas about the underylying technologies even if you can’t write D3 programs yourself. Maybe you’ll see some cool thing someone did with D3. Maybe you’ll be inspired to learn to program in Javascript this summer. Write 3-4 more postings, hopefully in conversation with others.
  7. If you have more of a CS background, you might actually be able to try to use D3. Are there tutorials that seem particularly useful? What did you try to do?

There’s a required posting and 3-4 (minimum) additional postings to put on the Canvas discussion (link coming soon).  additional discussion is recommended – we aren’t going to force you to discuss, but discussion is a good way to learn and help others learn (and possibly improve your grade).

Even if you never write anything using D3 yourself, you will most certainly use things created with it, and probably be around others who are using it. So, having some appreciation for it is useful.

 

Previous post:

Next post: