Readings05: Implementation

in All Readings

Short version

  1. Watch Dominick Moritz’s Guest Lecture (required) 
  2. Read about some “high-level” visualization toolkit of your choosing (required) 
  3. Look at the D3 paper (or some other thing about D3) (optional) 
  4. Go through the first 32 “chapters” of the UW (the other UW) visualization curriculumn. (required) 
  5. Do some optional reading about something that interests you. (required) 

Note that this “readings” list is part of the reading itself.

Longer version

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 focus on in lecture.

In 2020, I had a guest lecturer for this topic: Prof. Dominik Moritz from CMU. Dominik was a central part of several of the systems/toolkits we’ll learn about. He gave an amazing survey that connected the key ideas from class (abstraction and encodings) to a range of implementation choices.

Remote guest lectures were an upside to online pandemic teaching. This year, you just get to watch the video. (in Kaltura Mediaspace)

Readings are a little tricky, since I want you to learn “about” some tools, not necessarily to learn to use the tools (which is what most documentation is about). Also, I’d rather you learned about tools that are relevant to you (e.g., if you’re a Python programmer, it makes more sense to learn about Python toolkits, not just because you are likely to use them, but also you won’t get caught up in the language).

The learning goal is to see how there is a range of options for visualizations, and to get a sense of how you might choose between them:

  1. Creating things by hand (literally, with pen and paper, but also figuratively, using manual drawing tools like Illustrator)
  2. Standard Interactive Tools (Tableau, Excel, …)
  3. High-Level Visualization (data) toolkits - (Matplotlib, plotly, Bokeh, …)
  4. Low-Level Visualization (graphics) toolkits (D3, Processing, …)
  5. Declaritive Specifications (Vega-Lite, …)

With #4 and #5, I want you to learn about D3 and Vega-Lite because they are useful to help think about the abstractions useful in creating visualizations.

For #1 and #2, there isn’t that much to read. Reading some of the technical papers about Tableau is optional (see optional readings below).

For #3: I’d like you to read over the documentation for some high-level visualization toolkit that you might want to use. I’ll let you pick. If you’re already using something, use this as an opportunity to learn about something new. The goal is not to learn to use this new tool, but to read enough of the basics of the documentation to understand it’s key ideas and abstractions.

If you need some ideas:

  • Plot.ly - high level charting API for Python, R and JavaScript
  • Bokeh - Python Graphing Library that provides high- and low-level control
  • Seaborn - a python library that has lots of useful chart types
  • HighCharts - a commercial (and industrial grade) graphing library. Not free, so you can’t really use it unless you work at a company. But interesting in the “why do people pay for this when there are free alternatives” sense.

You will need to do this reading for the online discussion posting due on Wednesday.

For #4 (low level libraries): In the past, I wanted to students to learn about D3. But increasingly, I see students wanted to work at different levels of abstraction, and D3 itself is a bit too caught in the details of how web browsers work. So learning about D3 is (optional) .

How to learn about D3

I want you to learn about D3 (not necessarily to learn to use D3). Actually using D3 requires being an expert web programmer (see my 2015 rant about how hard it is for students to learn D3). However, it embodies a number of interesting concepts and ideas - and serves as the basis for almost everything else.

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 and JavaScript/Web browser details. It is not a way to learn how to use D3. Read the D3 paper, but don’t worry about the details.

Note: if you want to learn D3, there are lots of resources around the web. My recommendations are out of date.

For #5: I want you to learn about the declarative specification approach. Vega-Lite is one that is very interesting, and is a mature enough system that you can use it for real things.

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 2 “Chapters” of the UW Visualization Curriculum. (UW is the other UW, not us). It is strongly recommend that you watch the video first (its also linked in chapter 1). (Chapter 3 is (optional) , but recommended if you want to really understand or use the tool). Reading the technical paper for Vega-Lite gets at the ideas more directly and is recommended (but optional).

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 want to learn more about Vega-Lite and declarative approaches, read the paper:

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. (optional)