This document provides an overview of guidelines and technologies for data visualization, including Flash, Processing, d3.js, and HTML/DOM. It discusses the backgrounds and uses of Processing and d3.js, with d3.js bringing a jQuery-style approach to DOM manipulation and baked in transitions. Examples and homework assignments are provided for students to get hands-on experience with Processing and d3.js.

1. MAS.500 - Software Module - Rahul Bhargava
Visualization 2014.12.10

2. Topics
❖ Guidelines
❖ d3.js
❖ HTML & the DOM
❖ Processing

3. Guidelines

4. Technologies
❖ Flash used to be a big deal, and many installations still
use it
❖ Processing got a huge following by targeting artists and
designers (non-coders) and focusing on outputs
❖ d3.js has grown huge
❖ TONS of other libraries

5. Strategies
❖ don’t write what you don’t have to
❖ spend a lot of time sketching
❖ choose your tech based on our medium of display

6. d3.js

7. Background
❖ Mike Bostock from the NYT
❖ bringing jQuery-style approach to dom manipulation
❖ transitions baked in
❖ low-level library for creative viz

8. HTML & the DOM
❖ Web Inspector Demo

9. Use
❖ data pipeline model
❖ process demo
❖ jsFiddle demo and homework example
❖ What We Watch walkthrough

10. Processing

11. Background
❖ Ben Fry and Casey Reas in Madea’s old group here
❖ comes from a lineage of “design playground” tools (with
domain-specific languages)
❖ took off with designers and artists in trendy schools
❖ copious documentation and examples

12. Use
❖ draw-loop model
❖ tech demo and homework example

13. Homework
❖ bit.ly/mas500f14