Readings
Suggested readings & references will be shared here with updates posted on Ed.
Reading Documentation
At this point in your growth as a programmer, learning from documentation is one of your most important skills.
I would recommend setting aside an hour or two a week to review course readings.
Lecture material will cover high-level concepts, but can't feasibly cover every method/etc. of libraries like Altair and D3 that you'll need to use.
- Useful Context readings provide helpful context that you may or may not already have that will help you follow along in upcoming lectures.
- Essential Reading is material not covered in lecture, that you will need to read on your own, typically on libraries & languages.
- References & Tools libraries, templates, tools, etc. that may prove useful when working on data visualizations.
Week 6
Good JS Tutorials (in addition to MDN)
JS in VS Code: https://code.visualstudio.com/docs/languages/javascript
A guide to avoiding bundlers/some of the harder parts of JS with the latest features of the web: https://plainvanillaweb.com/index.html
D3 Resources
- D3 in Depth - Free Book on D3 with interactive examples.
- Thinking with Joins - Classic post introducing the key concept of D3. Uses old syntax.
- D3 Graph Gallery - Examples of how to do almost anything in D3.
Week 5
Essential Reading: HTML/CSS Tutorials
If you've never worked with HTML/CSS, it'll be helpful to start with these before class.
HTML & CSS Resources
- MDN is the best reference for HTML elements & CSS properties. Avoid W3Schools and other sites that have outdated information.
- An alternative HTML Element Reference
- HTML/CSS in VS Code
- smolweb, a minimalist subset of HTML
- HTML First, best practices
- Tips on embedding SVG in HTML
More tutorials
CSS Frameworks
- simple "classless" themes that restyle elements directly
- bulma.css a lightweight CSS theme
HTML Templates
Week 4
Narrative Resources
- NPR Training on Ledes: https://training.npr.org/2021/06/03/nut-graf-and-lead-duos-that-point-readers-in-the-right-direction/
- Ideas of Other Article Formats beyond Lede/Nut: https://en.wikipedia.org/wiki/Article_structure.
- Pulitzer-winning long form piece that CAPP Alum Aïcha Camara contributed to: https://chicagomissingpersons.com/who-goes-missing/
Design
- Design for Real Life (free book with lots of good information on design)
- Example Style Guide
Typography
Free font libraries:
Week 3
Additional Resources
- Guidance for picking the right kind of chart: https://www.data-to-viz.com
- More Graphical Integrity Notes: https://jcsites.juniata.edu/faculty/rhodes/ida/graphicalIntRedes.html
- Friends Don't Let Friends... https://github.com/cxli233/FriendsDontLetFriends
- Tufte's Policy Book: https://www.edwardtufte.com/book/data-analysis-for-politics-and-policy/
- A counterpoint to Tufte: https://perthirtysix.com/visualizing-data-is-an-art
Week 2
Useful Context
For more on the science of color from the eye to the screen: https://jamie-wong.com/post/color/
In terms of relevance for this course, if you are going to buy one Tufte book I'd make it The Visual Display of Quantitative Information, with Envisioning Information a runner-up. The others are great as well, and you can often find bundles of all 4-5 together.
Buy direct from Graphics Press: https://www.edwardtufte.com/books/
Tools (from slides)
- Vega Schemes: https://vega.github.io/vega/docs/schemes/
- Contrast/theme exploration: https://schubert-da.github.io/dataviz-palette-tool/
- Theme exploration for cartography: https://colorbrewer2.org/
- Color-theory based theme creator: https://meodai.github.io/poline/
- Theme creator w/ theme sharing: https://coolors.co
- HSL/RGB picker: https://hslpicker.com/
- OKLCH picker & explanation: https://oklch.com/
- Contrast checker: https://webaim.org/resources/contrastchecker/
- Colorblindness MacOS/iOS app: https://michelf.ca/projects/sim-daltonism/ or search "colorblindness" in your browser of choice.
Week 1
Useful Context
If you have never encountered "tidy" data or "grammar of graphics" these two papers by Hadley Wikham provide context that might be useful:
- Tidy Data - https://vita.had.co.nz/papers/tidy-data.html
- A layered grammar of Graphics - https://vita.had.co.nz/papers/layered-grammar.html
Essential Reading
The most important reading for this week will be to begin working your way through the Altair User Guide.
https://altair-viz.github.io/user_guide/data.html
The sections you should read (in the left sidebar):
- Specifying Data (you can stop when you hit 'Generated Data')
- Encodings
- Encodings -> Channels (skim Channel Options)
- Marks (skim a few of the mark guides, including Bar & Point)
- Data Transformations (skim a few, including Regression)
- Layered and Multi-View Charts
- Customizing Visualizations
There is also a tutorial you may find helpful which goes through small examples one at a time:
https://altair-viz.github.io/altair-tutorial/notebooks/01-Cars-Demo.html
Using Altair's Documentation
Once you've read the above you have seen the core ideas of Altair.
The remaining sections of the guide are useful as reference. As you use Altair you will find your way to them as you ask yourself questions like "how do I work with geospatial data" or "how can I combine these axes"?
The other common thing you will use the documentation for is "what arguments can I pass to this?"
For that, use the API Reference and find the class you're working with.
Example:
- Let's say we want to adjust the color scheme, start with https://altair-viz.github.io/user_guide/generated/channels/altair.Color.html
- Note that it can take a scale, and click to https://altair-viz.github.io/user_guide/generated/core/altair.Scale.html#altair.Scale
Documentation vs. LLMs for learning
While using LLMs to learn an interface is allowed, I often have students tell me "I spent an hour trying to figure out why function didn't work and it never existed at all/doesn't exist anymore."
While it may be tempting to learn the API of a library by using ChatGPT instead of the docs, there are a few caveats:
- ChatGPT and other LLMs do not have a sense of what the current interface is, often with libraries like Altair & D3 they will use obsolete APIs that appear often in their training corpus.
- LLMs have a well-known tendency to "hallucinate" APIs that do not exist at all, especially if similar to another library, this can be particularly frustrating.
- Finally, while LLMs may work decently for established libraries like D3 and Altair in many cases, they cannot perform well on newer libraries or private libraries used within companies. There aren't thousands of example projects to learn from.
By using LLMs to learn library interfaces, you are usually choosing to learn how things were as of a few years ago. Becoming overly-reliant on them will limit your ability to work with newer APIs, or APIs internal to your next job.