H517 Visualization Design, Analysis, & Evaluation

KhairiReda|redak@iu.eduSchoolofInforma5cs&Compu5ng,IUPUI

Week 2: Intro to HTML, JavaScript, and D3

Last week…

Why use vision to analyze information?

1.Visionisthehighestbandwidthchannelintoourbrain

2.Cogni5onislimited.Percep5onbeatscogni5on

3.Workingmemoryislimited;externalrepresenta5onsexpandourmemory

4.Visualsareanintegralpartofourculture

CharlesMenard.Napoleon’s1812campaigntoMoscow

0"

5"

10"

15"

20"

25"

30"

1978" 1979" 1980" 1981" 1982" 1983" 1984" 1985"

Miles"per"gallon"

Based on reporting by the Guardian (https://www.theguardian.com/technology/blog/2008/jan/21/liesdamnliesandstevejobs) Via Miriah Meyer

USsmartphonemarketshare

Slide by Miriah Meyer

Last weekPrinciplesofVisualIntegrity

Usedetailedandclearlabelingtodefeatgraphicaldistor5ons

“Therepresenta5onofnumbers,asphysicallymeasuredonthesurfaceofthegraphicitself,shouldbedirectlypropor5onaltothenumericalquan55esrepresented”

Maximizedata-inkra5o

Avoidchartjunk*

* Visual embellishment can in some cases improve memorability and engagement with the visualization

This weekIntrotoHTML,JavaScript,andD3

D3: Data-Driven Documents

The D3 stack

HTML SVG

Hypertext markup language Scalable Vector graphics

JavaScript

D3

HTML example

SVG

X

Y

(200,100)

SVG

SVG: a bar chart

Chrome Web Server

https://tinyurl.com/y9k9hc441) Download extension from: 2) Create folder (e.g., on Desktop)

3) Choose folder from extension

4) Open URL

Exercise:CreateabarchartinSVGtovisualizethefollowingdataset:

UsethefollowingSVGelements:

<rect x=“” y=“” width=“” height=“”/>

<line x1=“” x2=“” y1=“” y2=“” />

<text x=“” y=“”>Label here</text>

cats 45

dogs 21

iguanas 102

Petsanimalsfromaneighborhoodsurvey:

Exercise 2:Repeatthepreviousexercise.Insteadof“hardcoding”thea_ributesofSVGelements,adjustthemprogramma5callyusingJavaScript

For loop to iterate through dataset

Pets dataset as an array

Adjust “height” attribute

Get a reference to a “rect” element

Exercise 3:Repeatthepreviousexercise.InsteadofusingpureJavaScript,useD3selec5ons

selection and data binding

selection and data binding

http://vis.ninja/teaching/2018/H517/d3-excercises/

Exercise 4:LoadingaCSVfileandvisualizingthedata