CS 3891.01 / 5891.01 - Data Visualization

Overview Syllabus Schedule Assignments Project Resources

Resources

JavaScript

Speaking JavaScript: if you are new to JavaScript, then this is a great resource. It is comprehensive, yet accessible. In particular I recommend the following:
- Basic JavaScript: this should get you up to speed on the language. If you are well-versed with Python, then the transition to JavaScript should not be too bad, it is largely learning new syntax of familiar concepts.
- Scope and Closures: as part of this chapter, pay particular attention to scope, and closures. Closures frequently arise in D3, in ways you may not realize!
- Functions: you should get familiar with the different types of functions in JavaScript, namely function declarations and function expressions. The latter are of particular importance, as they permit us to define anonymous functions, which we will use frequently with D3.
- Arrays: we will frequently use Arrays, so you should get acquainted with the basics, e.g. construction, access, slicing. There are also a number of Array methods that you will find useful: map, filter, forEach, indexOf, amongst others.

SVG

Although D3 might have a bit of a learning curve, at the end of the day, all we are doing is drawing a bunch of simple shapes . So, it is critical to understand what we may draw. We will use Scalable Vector Graphics, commonly referred by its acronym SVG, for programming graphics:

SVG elements: rect, circle, line, text, amongst others. path is quite powerful, but also quite complicated; we will use D3 to emit path elements.
Perhaps one of the most important SVG elements is group. Group elements are extremely useful in spatially organizing elements, and ultimately, allow us to think of a visualization design as a hierarchy, e.g. from a main plot, to child plots, down to graphical marks.
For all elements, you should be familiar with their attributes, which control how elements are drawn. These consist of position, color (stroke and fill), opacity, stroke thickness, as well as the numerous options for formatting text. Attribute syntax is largely shared across elements when applicable, but there is some variation.

D3

We will cover D3 in detail as part of the course. But for reference, there are a collection of excellent notebooks that discuss D3 (link). Here are some of my favorites:

Joining data with elements
Working with Arrays in D3: range, shuffle, extent, sum, cross
Styling Axes
Working with Color
Color Schemes
Working with d3-shape

Observable notebooks

User Manual: excellent resource for understanding the ins and outs of Observable notebooks. In particular, you may want to start with the following quick reads:
- Five-minute Introduction
- Introduction to HTML: in many ways, Observable hides the nitty-gritty details of HTML, so that you can more directly, and concisely, program for the web.
- How Observable Runs: it is good to know how Observable processes the cells that you define in your notebook.
- Introduction to Views: the ease of use in creating, and using, user interface elements is a great feature of Observable. In particular, check out this collection of inputs, super nice!

Data Sources

Misc

Markdown syntax