Week in Vis 5 Mon, Sep 30-Fri, Oct 4
- Mon, Sep 30 – Implementation
- Wed, Oct 2 – ICE: Glyphs (Paris Apartment)
- Fri, Oct 4 – No Class
- Reading: Week 5 – Implementation (due Mon, Sep 30 – preferably before class)
- Online Discussion 05: Implementation (first post due Tue, Oct 1)
- Design Challenge: DC1: Final Handins (due Wed, Oct 2)
- Quiz 05: Implementation (due Fri, Oct 4)
- Seek and Find 05: Implementation (due Fri, Oct 4)
This week, we’ll talk about how to make visualizations. The readings focus on some very “cutting-edge” CS stuff, but in class we’ll take a more broad view.
Also, Design Challenge 1 (the main part) is due – the last part (peer review) will come out at the end of the week. (you can’t do it until you turn in your designs – we can’t peer critique if we don’t have designs to critique)
Readings for the Week
Reading about implementation is hard: everyone is likely to want to use a different tool, and for any tool, the best documentation is a moving target. What I really want to teach you is not any particular tool, but to give you a sense of what’s available and how you might choose amongst them. That’s what we’ll talk about in lecture.
From other parts of class, you’re (hopefully) already experienced Tableau (an end-user tool). In the past, we’ve taught people about D3 (since it’s what many people use to make visualizations on the web), but actually using D3 requires being an expert web programmer (see my 2015 rant about how hard it is for students to learn D3), and the ideas in D3 are too low-level to be instructive for other things. We’ll talk about the key ideas in class. You won’t be required to learn about D3, but you might want to learn about D3 for projects (especially if you think you’ll want to make web-based visualizations in the future).
For the reading, I want you to learn about a more research oriented tool (Vega-Lite) that is valuable to learn about because it really illustrates the concepts we emphasize in class. The goal is not for you all to become Vega-Lite users (although you might want to), but to see enough about it that you can appreciate its ideas.
The “reading” for Vega-Lite is to do the first 3 “Chapters” of the UW Visualization Curriculum. (UW is the other UW, not us). I strongly recommend that you watch the video first (its also linked in chapter 1).
Vega-Lite can either be used from Python (using a binding library called “Altair”), or directly inside of web pages. There are correspondingly, two versions of the curriculum. If you’re a Python programmer, choose the “Altair” version (you can either download the notebook, or run it online in “Colab”). If you prefer JavaScript or aren’t already a Python expert, use the “Obervable” version. There isn’t really any JavaScript programming involved.
Optional
More on Vega-Lite: If you’re curious, you can also look at the academic paper about Vega-Lite:
- Arvind Satyanarayan, Dominik Moritz, Kanit Wongsuphasawat, Jeffrey Heer. “Vega-Lite: A Grammar of Interactive Graphics” IEEE Trans. Visualization & Comp. Graphics (Proc. InfoVis ’16), 2017
D3: To learn about the ideas of D3, 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. It is not a way to learn how to use D3.
To learn how to use D3, there are countless tutorials around the web. Aditya (the TA) can make current suggestions. All the ones I used to recommend are out of date.
The Future: The Draco system takes Vega-Lite a step farther: automating a lot of the decision making in visualization design by encapsulating design knowledge. See the (award winning) paper.