Class Meetings
- Mon, Oct 1 – Lecture:Implementation
- Wed, Oct 3 – ICE: Dear Data
- Fri, Oct 5 – No Class (DC1Help Office Hours)
Week Deadlines
- Reading: Week 5 – Implementation (due Monday – preferably before class)
- Quiz 05: 5: Implementation (due Tuesday)
- Online Discussion 05: Implementation (first post due Wednesday)
- Seek and Find 05: How did they do That? (due Friday)
- Design Challenge: DC1:Drafts (due Friday)
This past week, we learned about encodings – the visual building blocks from which we assemble visualizations. This week we’ll switch gears a bit.
The Frist Design Challenge is in full swing. After submitting your Sketches (due Friday, Sep 28), you will hopefully take some time and give your classmates feedback on their sketches. Either way, you need to turn in a “draft” of your assignment for Friday, October 5.
On Monday we’ll have a lecture on implementation where we talk about some of the ways we might actually create visualizations. One goal is to avoid talking about any specific tool too much – and instead try to develop a general sense of what the options are, and how we might choose.
The readings are about a specific tool: D3. It’s a Javascript library that web developers use to create things for the web. If you’re not a web developer, its not obviously a useful thing to do. But it is so pervasive, that I want everyone to know a little about it. If you want to know more about it, we’ll have an optional tutorial session on a Friday in a few weeks.
On Wednesday, we’ll have another in-class design exercise. With even more designing (well, re-designing). The exercise is based on the book “Dear Data.” (you don’t need to look at the book beforehand).
There is no class on Friday. However, I will hold an extra office hour during the class time slot (11-noon) to talk to people who need help with DC1, want to discuss visualization, or anything else.
You may want to look at this week’s learning goals Learning Goals 5: Week 5 – Implementation.
Readings (due Mon, Oct 1 – preferably before class, but its not urgent)
It’s difficult to know what readings to recommend about implementation stuff, because everyone needs something different. For a lot of people learning about why D3 is the way it is isn’t that important, since you probably won’t use it. That said, I think it’s worth learning something about D3 even if you aren’t going to use since it’s an important tool that lots of people use, and it has some interesting ideas. But it’s hard to learn D3, since you need to know all the stuff it’s built on, and it’s hard to learn about D3 because most things try to teach you to use it…
Note: this week’s reading is fairly light – the next few weeks have more reading. You might want to read ahead of bit. Or use the time to work on DC1.
- 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).
- 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.
- 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.
- On the D3 web page, there is a huge list of tutorials. I don’t know which ones are good or not.
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.
If you don’t think D3 is for you (and it might not be), you should still learn a little about it. you can look at 2-4 above, but don’t delve too deep. Instead, read something about some tool or toolkit that you are more likely to use.
Optional
If you want to know what comes after D3…
- Arvind Satyanarayan, Dominik Moritz, Kanit Wongsuphasawat, Jeffrey Heer. “Vega-Lite: A Grammar of Interactive Graphics” IEEE Trans. Visualization & Comp. Graphics (Proc. InfoVis ’16), 2017
The Vega Lite web page
has a number of other documents and ways to learn about Vega Lite.