Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript,...
Transcript of Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript,...
![Page 1: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/1.jpg)
Data VisualizationCS444/544
Instructor: Carlos ScheideggerTA: Nathan Sema
Course website: http://cscheid.net/courses/spr15/cs444
Piazza: https://piazza.com/arizona/spring2015/csc444544/home
email: [email protected]
Office Hours: Tuesdays, 9-11:30AM, GS734otherwise by appointment only
![Page 2: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/2.jpg)
Three main themes• Mechanics: how do I build a visualization?
• Javascript, CSS, HTML, d3
• Principles: why should I build it in this way?
• mathematical and perceptual arguments
• Techniques: how do I turn principles and mechanics into an actual visualization?
• algorithms, software libraries
![Page 3: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/3.jpg)
Assessment• One small assignment per week, 50% weight
• ~2 hours per assignment
• One midterm, 20% weight
• hour-long
• One final project, 30% weight
• as much work as all assignments combined. CS444/544 distinction: want to write a paper?
• Class participation, 10% weight
• piazza counts
![Page 4: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/4.jpg)
Grading• Performance grade:
• ≥90%: A, ≥75%: B, ≥60%: C, ≥40%: D, <40%: F
• Curve grade:
• ≥15%: A, ≥30%: B, ≥45%: C, ≥60: D, <40%: F
• Your final grade is the best of either curve of performance grades
![Page 5: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/5.jpg)
Plagiarism and Academic Conduct Policy
• Unless I state otherwise, you are allowed to use any open source library you want in your projects, provided that you give it credit.
• Most assignments will be small
• If you pass off someone else’s work as yours, that’s plagiarism.
• The penalty for plagiarism always includes a referral to the college, and ranges from an automatic zero in the assignment to an automatic F in the course to expulsion from the university.
• Don’t do it.
![Page 6: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/6.jpg)
Textbook• No required textbook, but you won’t regret buying
Munzner’s “Visualization Analysis and Design”
• All required reading material will be given in lecture notes, webpages, and research papers
http://www.amazon.com/Visualization-Analysis-Design-AK-Peters/dp/1466508914
![Page 7: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/7.jpg)
Important Vis Books• William Cleveland, The Elements of Graphing Data,
Visualizing Data
• John W. Tukey, Exploratory Data Analysis
• Jacques Bertin, Semiology of Graphics
• Edward Tufte, The Visual Display of Quantitative Information, Visual Explanations, Envisioning Information
• Colin Ware, Information Visualization
• Come take a look at them during office hours if you’re curious; they’re not cheap :(
![Page 8: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/8.jpg)
Mechanics• Writing programs: we will use the web technology
stack
• Javascript, SVG, CSS, HTML, d3
![Page 9: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/9.jpg)
http://bit.ly/1swfb5p http://i.imgur.com/wR3ZxfB.jpg
![Page 12: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/12.jpg)
It’s easy to talk to a server
It’s ubiquitous
apple.com
arstechnica.com
nanocubes.net
Good reasons to choose the web stack:
It’s fast!
![Page 13: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/13.jpg)
![Page 14: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/14.jpg)
Principles
Building a visualization is fundamentally about tradeoffs. Principles help us understand these
tradeoffs, and make informed decisions
![Page 15: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/15.jpg)
Pre-attentive Processing
Examples from Christopher Healey’s excellent resource http://www.csc.ncsu.edu/faculty/healey/PP/
![Page 16: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/16.jpg)
http://www.csc.ncsu.edu/faculty/healey/PP/
![Page 17: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/17.jpg)
http://www.csc.ncsu.edu/faculty/healey/PP/
![Page 18: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/18.jpg)
Change Blindness
(photosensitive epilepsy? please look away.)
![Page 19: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/19.jpg)
http://www.csc.ncsu.edu/faculty/healey/PP/
![Page 20: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/20.jpg)
Respect the math in the data
Not everything you can do with data makes sense
![Page 21: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/21.jpg)
http://viz.wtf/post/107440754050/how-payday-loans-add-up#notes
![Page 22: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/22.jpg)
http://viz.wtf/post/107998162170/6-7-gender-neutral#notes
![Page 24: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/24.jpg)
![Page 25: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/25.jpg)
Techniques
How do we turn the mechanics and principles into an actual, working visualization?
![Page 27: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/27.jpg)
Treemaps
demo: GrandPerspective
![Page 28: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/28.jpg)
![Page 29: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/29.jpg)
A tour of visualization and visual thinking
http://cscheid.net/courses/spr14/cs444/lectures/week1.html
![Page 30: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/30.jpg)
![Page 31: Data Visualization - cscheid.net 1.pdfData Visualization CS444/544 Instructor: ... • Javascript, CSS, HTML, d3 ... The Elements of Graphing Data, Visualizing Data](https://reader033.fdocuments.us/reader033/viewer/2022051205/5af2b0767f8b9aa91690ab19/html5/thumbnails/31.jpg)
CS 444/544 Summary• 4 weeks of mechanics, 5 weeks of principles, 6
weeks of techniques
• ~1 small assignment a week, 1 midterm, 1 project
Course website: http://cscheid.net/courses/spr15/cs444
Today’s lecture: http://cscheid.net/courses/spr15/cs444/lectures/week1.html