SLIDE 1
H517 Visualization Design, Analysis, & Evaluation
Khairi Reda | redak@iu.edu School of Informa5cs & Compu5ng, IUPUI
H517 Visualization Design, Analysis, & Evaluation Week 2: - - PowerPoint PPT Presentation
H517 Visualization Design, Analysis, & Evaluation Week 2: - - PowerPoint PPT Presentation
H517 Visualization Design, Analysis, & Evaluation Week 2: Intro to HTML, JavaScript, and D3 Khairi Reda | redak@iu.edu School of Informa5cs & Compu5ng, IUPUI Last week Why use vision to analyze information? 1 . Vision is the highest
SLIDE 2
SLIDE 3
Why use vision to analyze information?
- 1. Vision is the highest bandwidth channel into our brain
- 2. Cogni5on is limited. Percep5on beats cogni5on
- 3. Working memory is limited; external representa5ons
expand our memory
- 4. Visuals are an integral part of our culture
SLIDE 4
SLIDE 5
Charles Menard. Napoleon’s 1812 campaign to Moscow
SLIDE 6
0" 5" 10" 15" 20" 25" 30" 1978" 1979" 1980" 1981" 1982" 1983" 1984" 1985"
Miles"per"gallon"
SLIDE 7
Based on reporting by the Guardian (https://www.theguardian.com/technology/blog/2008/jan/21/liesdamnliesandstevejobs) Via Miriah Meyer
SLIDE 8
US smart phone marketshare
Slide by Miriah Meyer
SLIDE 9
Last week
Principles of Visual Integrity Use detailed and clear labeling to defeat graphical distor5ons “The representa5on of numbers, as physically measured on the surface of the graphic itself, should be directly propor5onal to the numerical quan55es represented” Maximize data-ink ra5o Avoid chartjunk*
* Visual embellishment can in some cases improve memorability and engagement with the visualization
SLIDE 10
This week
Intro to HTML, JavaScript, and D3
SLIDE 11
D3: Data-Driven Documents
SLIDE 12
The D3 stack
HTML SVG
Hypertext markup language Scalable Vector graphics
JavaScript D3
SLIDE 13
HTML example
SLIDE 14
SVG
X Y (200,100)
SLIDE 15
SVG
SLIDE 16
SVG: a bar chart
SLIDE 17
Chrome Web Server
https://tinyurl.com/y9k9hc44
1) Download extension from: 2) Create folder (e.g., on Desktop) 3) Choose folder from extension 4) Open URL
SLIDE 18
Exercise:
Create a bar chart in SVG to visualize the following dataset:
Use the following SVG elements:
<rect x=“” y=“” width=“” height=“”/> <line x1=“” x2=“” y1=“” y2=“” /> <text x=“” y=“”>Label here</text>
cats 45 dogs 21 iguanas 102
Pets animals from a neighborhood survey:
SLIDE 19
Exercise 2:
Repeat the previous exercise. Instead of “hardcoding” the a_ributes of SVG elements, adjust them programma5cally using JavaScript
For loop to iterate through dataset Pets dataset as an array Adjust “height” attribute Get a reference to a “rect” element
SLIDE 20
Exercise 3:
Repeat the previous exercise. Instead of using pure JavaScript, use D3 selec5ons
selection and data binding selection and data binding
SLIDE 21
http://vis.ninja/teaching/2018/H517/d3-excercises/