h517 visualization design, analysis, &...
TRANSCRIPT
![Page 1: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/1.jpg)
H517 Visualization Design, Analysis, & Evaluation
KhairiReda|[email protected]&Compu5ng,IUPUI
Week 2: Intro to HTML, JavaScript, and D3
![Page 2: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/2.jpg)
Last week…
![Page 3: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/3.jpg)
Why use vision to analyze information?
1.Visionisthehighestbandwidthchannelintoourbrain
2.Cogni5onislimited.Percep5onbeatscogni5on
3.Workingmemoryislimited;externalrepresenta5onsexpandourmemory
4.Visualsareanintegralpartofourculture
![Page 4: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/4.jpg)
![Page 5: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/5.jpg)
CharlesMenard.Napoleon’s1812campaigntoMoscow
![Page 6: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/6.jpg)
0"
5"
10"
15"
20"
25"
30"
1978" 1979" 1980" 1981" 1982" 1983" 1984" 1985"
Miles"per"gallon"
![Page 7: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/7.jpg)
Based on reporting by the Guardian (https://www.theguardian.com/technology/blog/2008/jan/21/liesdamnliesandstevejobs) Via Miriah Meyer
![Page 8: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/8.jpg)
USsmartphonemarketshare
Slide by Miriah Meyer
![Page 9: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/9.jpg)
Last weekPrinciplesofVisualIntegrity
Usedetailedandclearlabelingtodefeatgraphicaldistor5ons
“Therepresenta5onofnumbers,asphysicallymeasuredonthesurfaceofthegraphicitself,shouldbedirectlypropor5onaltothenumericalquan55esrepresented”
Maximizedata-inkra5o
Avoidchartjunk*
* Visual embellishment can in some cases improve memorability and engagement with the visualization
![Page 10: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/10.jpg)
This weekIntrotoHTML,JavaScript,andD3
![Page 12: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/12.jpg)
The D3 stack
HTML SVG
Hypertext markup language Scalable Vector graphics
JavaScript
D3
![Page 13: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/13.jpg)
HTML example
![Page 14: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/14.jpg)
SVG
X
Y
(200,100)
![Page 15: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/15.jpg)
SVG
![Page 16: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/16.jpg)
SVG: a bar chart
![Page 17: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/17.jpg)
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
![Page 18: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/18.jpg)
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:
![Page 19: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/19.jpg)
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
![Page 20: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/20.jpg)
Exercise 3:Repeatthepreviousexercise.InsteadofusingpureJavaScript,useD3selec5ons
selection and data binding
selection and data binding
![Page 21: H517 Visualization Design, Analysis, & Evaluationkhreda.com/teaching/2018/H517/slides/w02_d3_intro.pdf · memorability and engagement with the visualization. This week Intro to HTML,](https://reader035.vdocument.in/reader035/viewer/2022063015/5fd1ba53d304816c00409971/html5/thumbnails/21.jpg)
http://vis.ninja/teaching/2018/H517/d3-excercises/
Exercise 4:LoadingaCSVfileandvisualizingthedata