Textbooks
No textbooks are required for this class. However, if you would like additional reference material, we recommend the books below:
- Visualization Analysis and Design. Tamara Munzner, CRC Press.
- Interactive Data Visualization for the Web, 2nd Edition. Scott Murray, O’Reilly Press.
- Read Online (sign in with your MIT Kerberos).
- Code examples on GitHub.
Visualization Programming 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.
- Leaflet – A popular open-source mapping library
- VTK – A scientific visualization library (C++ with wrappers for other languages)
Visualization Programming Toolkits
- 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
Web Design and Development
In the second half of the class, we wil create Web-based visualizations Thus, it is important that you familiarize yourself with common Web tools and languages, such as HTML, CSS and JavaScript (JS). JS is especially important since we will be using D3, a data-driven JS library that will enable you to create advanced charts and graphs.
Free crash course by MIT students: web.lab
- Formerly known as 6.148, web.lab is a web programming class and competition that takes place over IAP every January.
- From their website: web.lab lays the foundations for understanding complicated web techologies using the fundamental building blocks of HTML, CSS, and JavaScript. In addition to learning how to build a website, students enrolled in web.lab may also take part in a competition to win prize money and glory. (You should check it out next year!)
- Even though web.lab already took place this year, you can still access their content & videos here: https://weblab.mit.edu/schedule
- We also share some of the most relevant lectures below (from YouTube).
HTML, CSS
- Basics:
- Mozilla Develop Network: HTML, CSS.
- Khan Academy Intro to HTML/CSS
- Code Academy: HTML, CSS
- CSS Zen Garden
- Online crash courses/tutorial videos
- Extras Bootstrap is a popular CSS template framework by Twitter. Sass is easy to learn and a powerful way to write CSS. Compass contains a lot of reusable patterns.
JavaScript
- Fundamental JavaScript ConceptsThere are a number of websites providing JavaScript tutorials such as LinkedIn Learning previously known as Lynda.com, or Udemy courses such as this one.
- Code Academy YouTube tutorials:
- JavaScript in 12 Minutes
- 1-Hour tutorial
- 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
Other JavaScript Frameworks (optional)
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.
Web Development Tools
- Beginner? Start with Sublime Text with Emmet and SublimeLinter/JSHint
- Like IDE and willing to pay? Webstorm is a good option.
- Visual Studio Code is a great free option.
- Dash is great for quick documentation look up in Mac.
- If you like GUIs, you can use Adobe Dreamweaver for free using your MIT ID.
Other Tutorials & Tips
In addition to our workshops, these tutorials could be useful for your projects and future visualization work.
Git & GitHub
- Git Tutorials – Git Official Docs – Visual Git Guide – A Successful Branching Model
- 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). – Or you can use GitHub Desktop.
- 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.
Color Tools
- kuler – Color Palette Generator
- Color Brewer
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++
Datasets
- Data is Plural, a spreadsheet archive of useful/curious public interest datasets curated by Jeremy Singer-Vine (with an accompanying newsletter).
- dataCommons.org
- Civic Data Sets for the Pacific Northwest
- An archive of datasets distributed with the R statistical language
- 30 Places to Find Open Data on the Web – Visual.ly
- Office for National Statistics (UK) – a repository of detailed statistics about Great Britain and Northern Irland
- World Bank Data Catalog
- CDC NCHS Data – CDC’s National Center for Health Statistics Data Access
- Machine Learning Repository – large variety of maintained data sets
Further reading and resources
Visualization Blogs
- Multiple Views
- Flowing Data
- Chartable
- eagereyes
- Lisa Charlotte Rost
- Alberto Cairo
- Visualizing Data
- Nightingale
- Gregor Aisch
- Statistical Modeling, Causal Inference, and Social Science
- Visual Business Intelligence by Stephen Few