6.894: Interactive Data Visualization (Spring 2019)

Textbooks

No textbooks are required for this class. However, if you would like additional reference material, we recommend the books below:

Tools

Visualization Toolkits

A variety of useful toolkits have been designed to help support information visualization applications. Some include support for the full visualization pipeline from data to interactive graphics, while others focus only on a subset, typically graphics and interaction.

D3 - A JavaScript library for data-driven DOM manipulation, interaction and animation. Includes utilities for visualization techniques and SVG generation.
Vega - A declarative language for representing visualizations. Vega will parse a visualization specification to produce a JavaScript-based visualization, using either HTML Canvas or SVG rendering. Vega is particularly useful for creating programs that produce visualizations as output.
Vega-Lite - A high-level visualization grammar that compiles concise specifications to full Vega specifications.
Processing or p5.js - A popular Java-like graphics and interaction language and IDE. Processing has a strong user community with many examples. p5.js is a sister project for JavaScript.
HTML/JavaScript/XML - use standard web technologies to build the visualization. You may use libraries such as jQuery and the Google Maps API to help build your visualization.
Leaflet – a popular open-source mapping library
VTK - A scientific visualization library (C++ with wrappers for other languages)

Visualization Systems

Tableau for Students - get a free Tableau license as a student
Tableau Public - a free version of Tableau which publishes to the web
Voyager and Polestar – web-based data exploration tools from UW's Interactive Data Lab
Lyra - an interactive visualization design environment
GGplot2 - a graphics language for R
GGobi - classic system for visualizations of multivariate data

Network Analysis Tools

Gephi - an interactive graph analysis application
NodeXL - a graph analysis plug-in for Excel
GUESS - a combined visual/scripting interface for graph analysis
Pajek - another popular network analysis tool
NetworkX - graph analysis library for Python
SNAP - graph analysis library for C++

Color Tools

kuler - Color Palette Generator
Color Brewer

Web Development Tools

Beginner? Start with Sublime Text with Emmet and SublimeLinter/JSHint
Like IDE and willing to pay? Webstorm is a good option.
Dash is great for quick documentation look up in Mac.

JavaScript Frameworks

Vue.js and svelte have a shallower learning curve than React or Angular, and are likely more than sufficient for the assignments and final project in this class.

Tutorials & Tips

In addition to our workshops, these tutorials could be useful for your projects and future visualization work.

HTML, CSS

Basics:
- Mozilla Develop Network (HTML, CSS).
- CSS Zen Garden
Extras
- Sass is easy to learn and a powerful way to write CSS.
- Compass contains a lot of reusable patterns.
- Twitter Bootstrap is a popular template.

Javascript

Fundamental JavaScript Concepts
- A series of interactive JavaScript Tutorials
- Mozilla Developer Network
- JavaScript Garden is a good reference to language quirks and gotchas.
- Eloquent Javascript – free online book by Marijn Haverbeke
- A re-introduction to JavaScript (JS Tutorial) on Mozilla Developer Network
- JavaScript: The Good Parts – Douglas Crockford (See also his YUI videos)
- Learning JavaScript Design Patterns by Addy Osmani
Debugging:
- Learn to use the Webkit Inspector (or Firebug if you’re a firefox fan.)
  - Learn useful short keys– the basic one is cmd+shift+I for opening inspector. Then you can learn more by clicking the gear button on the bottom right and see the shortcuts tab
- use JSHint to avoid syntactic bugs
Addy Osmani's list of good JavaScript style guide
Learn JS Data, a series of Observable notebooks about the basics of manipulating data using JavaScript in the browser.
egghead.io has a fantastic set of video tutorials about a variety of JavaScript frameworks.
Javascript utility libraries like Lodash (An arguably better fork of underscore) – make sure to use them only if needed. Sometimes d3 helpers are enough.
- a lodash tutorial
Need an in-memory database for your vis prototype? - try datavore or crossfilter
Syntax alternatives: TypeScript

Git & Github

Git Tutorials
Github
- Use Github's issue tracker, so you can refer to issues in your commit messages using # followed by issue no.
- Working in a team? Use Github's Pull Request so you can do code review.
  - Pull Request Workflows by Patrick Cozzi
- Extras
  - Interactive Rebase
  - Need to merge multiple repos (e.g. using datavore in another project)? Use git subtree and DO NOT use git submodule.
GUI
- Using git with command line is generally fast but using SourceTree is easier for reviewing your code before committing or committing a part of your changes and reduce chances that you will run a wrong command (such as push wrong branch to master).
More Tips
- Atomic Commit is a good practice.
- Stash is useful when you have unfinished messy things and need to switch branches to work on something else.

Datasets

6.894 : Interactive Data Visualization