1. Information Visualization - Week 01
Introduction
Information Visualization - Week 01
version 0.1

2. Introduction Introductions
What do you want to learn in a course in InfoVis?
What kind of experience do you have with
Graphic Design or Aesthetics?
Computer skills? HTML, CSS, JavaScript?
Experience with other computer tools, visualization software, such as Tableau, Adobe Illustrator, d3, other?
Experience with data? Text files, such as tab- or comma- delimited; .xml or .json files. Perhaps some experience with SQL?

3. What is “information visualization”?
Compare some visual + data examples:
Who’s the audience for this image?
What is the task? (Why create it?)
What kind of data might be used in the graphic?
Do you think it’s a static or dynamic/interactive visualization?
How many stories are being told thru the image?
Did you learn something new from the image?
What types of symbols or visual elements do you see?
Information Graphic
Source USNavy

4. InfoVis Why/when a visualization be useful?
To present something [situate the idea in the viewers’ minds]
To explain something [to teach, or persuade]
To help discover something new
To help predict something [statistical analysis]
Provide access to the data source [encourage truthworthiness]
Enable interactivity and learning by letting the end-user interact with the symbolic representations of the data … to engage in a kind of conversation … to think in a visual language.

5. InfoVis: design and data
From static design (information graphic) to exploratory data analysis to data visualization … if the end-user can pursue further action in his/her life or task after engaging with data, then the static data have transformed into an informative experience.

6. InfoVis: tools
Design tools: useful in graphic design, info graphics, creating SVG
Accounting tools that create bar charts, pie charts, etc. These are technically “exploratory data analysis” or charting tools, such as Raphael.js
Statistical tools with some graphing capabilities: R, Stata
Programming tools with libraries, such as Python, SAS, SPSS, Vega, Polestar, seaborne, matplotlib, IBM Visualization Designer
Scripting tools for the Web for interactive visualization: d3.js

7. In-class activity
You’ve been asked to design a static graphic comparing the number of widgets sold over a 10 month period.
Draw a graph of your own that shows links between a bunch of individual words. (For instance, what rationale do you have for linking one word to another?)
Sketch a wireframe of a webpage that includes a placeholder for a web-based infovis.
Suggestions: for #1 - try a bar chart; #2 - force-directed graph

8. Aesthetics and Data?
There’s no right or wrong answer, but there are trends. How do you think you’d balance graphic design with understanding the data?
Pretty designs tend to keep people’s eye but can obscure what the data are trying to say.
Number-rich designs can make it hard to identify trends in the data and tire the eye.
Data + Task + Audience + Visual Languages + Interactivity …
and remember the beauty of information!