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 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

Charles Menard. Napoleon’s 1812 campaign to Moscow

Miles"per"gallon" 30" 25" 20" 15" 10" 5" 0" 1978" 1979" 1980" 1981" 1982" 1983" 1984" 1985"

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

US smart phone marketshare Slide by Miriah Meyer

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

This week Intro to HTML, JavaScript, and D3

D3: Data-Driven Documents

The D3 stack D3 JavaScript HTML SVG Scalable Hypertext markup language Vector graphics

HTML example

SVG X (200,100) Y

SVG

SVG: a bar chart

Chrome Web Server 1) Download extension from: 2) Create folder (e.g., on Desktop) https://tinyurl.com/y9k9hc44 3) Choose folder from extension 4) Open URL

Exercise: Create a bar chart in SVG to visualize the following dataset: Pets animals from a neighborhood survey: cats 45 dogs 21 iguanas 102 Use the following SVG elements: <rect x=“” y=“” width=“” height=“”/> <line x1=“” x2=“” y1=“” y2=“” /> <text x=“” y=“”>Label here</text>

Exercise 2: Repeat the previous exercise. Instead of “hardcoding” the a_ributes of SVG elements, adjust them programma5cally using JavaScript Pets dataset as an array For loop to iterate through dataset Get a reference to a “rect” element Adjust “height” attribute

Exercise 3: Repeat the previous exercise. Instead of using pure JavaScript, use D3 selec5ons selection and data binding selection and data binding

Exercise 4: Loading a CSV file and visualizing the data http://vis.ninja/teaching/2018/H517/d3-excercises/