Useful Resources
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
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
-
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.
Visualization Blogs and Discussion
- Nighingale, The Journal of the Data Visualization Society
- Data Stories podcast
- Visual Cinnamon (Nadieh Bremer)
- Shirley Wu
- Chartable, from Datawrapper
- /r/dataisbeautiful
- Information is Beautiful
- Flowing Data
- The Functional Art, Alberto Cairo
- Storytelling with Data
- Edward Tufte: Ask E.T. Forum
- Visual Business Intelligence by Stephen Few
- Statistical Modeling, Causal Inference, and Social Science
- Visual Complexity