CSE412: Intro to Data Visualization

Useful Resources

This page contains a list of useful resources for visualization authoring, visualization design, exploratory data analysis, and so on. If you know of additional resources that would be helpful to include on this page, please email the course staff at cse412-staff@cs.

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 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)

Other Visualization Tools

Tableau for Students - get a free Tableau license as a student
GGplot2 - a graphics language for R
Altair - Jupyter-friendly Python API for Vega-Lite
Seaborn - Python library with nice defaults, built on top of matplotlib

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
SNAP - graph analysis library for C++

Color Tools

Web Development Tools

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
- 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
- Learning JavaScript Design Patterns by Addy Osmani
Debugging:
- Learn to use developer tools in your browser, such as Chrome DevTools or Firefox Developer Tools.
- Use eslint to avoid syntactic bugs.
JavaScript Application Frameworks
- React - Popular application framework
- Vue.js - More lightweight application framework
- Svelte - Newer framework with reactive variable support
Need an in-memory database for your vis prototype? - try Arquero, Falcon, 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 number.
- Working in a team? Use GitHub's Pull Request so you can do code review.
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.