• Opening:
  • who are we?
  • important info: syllabus, office hours, grades, etc
• Intro to Data Viz
  • Why visualization?

Instructor of Record: Adriana Picoral (she/her/hers)

Office: Gould-Simpson 829

Email: adrianaps@arizona.edu

TA: Tanner Finken (finkent@arizona.edu)

We will take full advantage of the in-person format, that means you will be working with your classmates during class. Take 5 minutes to get to know someone near you.

• Course website: adrianapicoral.com/csc-444-fall2022
  • Syllabus
  • Course Schedule
• Course D2L: d2l.arizona.edu/d2l/le/content/1195142
  • Grades
• Office hours:
  • Mo 3:15-4:45pm and Tu 3:30-5:00pm (Gould-Simpson 829)
  • Schedule at calendly.com/adrianapicoral/office-hours-csc or drop in (I prioritize scheduled students)

Required readings will be available on D2L.

No required textbook, but recommended:

• Visualization Analysis and Design by Munzner (ISBN 978-1466508910)
• Interactive Visualization for the Web by Murray (ISBN 978-1466508910)

Both are available in digital form from UA library

Recommended reference for JavaScript at large:

• https://eloquentjavascript.net/
• http://speakingjs.com/

You should:

• Come to class prepared and ready to participate
• Write clean, correct, documented (with attribution), and tested code
• Contact me (or your advisor) if you need any accommodations
• Discuss problems at a high level with your classmates

Don’t:

• Steal code or copyrighted materials
• Violate department/univeristy policies (academic integrity)

• We will engage in discussions, not debates. The purpose is not to win an argument, but to hear many points of view and explore many options and solutions.
• Everyone is encouraged to participate. You may be asked to share what you think, or I may ask for comments from those who haven’t spoken. It is always OK to “pass” when you are asked to share a comment.
• No one or two individuals should dominate a discussion. If you have already voiced your ideas, let others have an opportunity. When you speak, be brief and to the point.

• Refrain from side conversations when someone is sharing with the group. Pay attention to the person speaking. If you think you will forget an idea that comes to mind, write it down.
• Test assumptions and inferences. This ensures that we make decisions with valid

Anything else we should add to the list?

With a partner, access the syllabus and find:

• The breakdown of grades in this course
• What is the expected timeline for grading? (how many days after deadline should grades be posted)
• How many days do you have to dispute a grade?

What other questions do you have?

• Attendance is not mandatory
• You should come to class, lots of hands on time and and opportunities for you to try (and fail) at implementing things
• Best discussion medium? Discord? D2L?

We will be using Gradescope for assignment submission in this course. Go on D2L and check the link for the first assignment.

Computer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectively. Visualization is suitable when there is a need to augment human capabilities rather than replace people with computational decision-making methods.

– Munzner, Tamara. Visualization Analysis and Design (AK Peters Visualization Series)

Discuss with a partner:

• Why do you think the “people” part of visualization is important?
• What are other important aspects of visualization?

Visualization has a long history of presenting data to make a point to a target audience.

Nightingale Rose Diagram: In March 1855 the Sanitary Commission visited the hospital where Nurse Florence Nightingale worked, resulting in a clean up of the hospital’s drinking water and ventilation. Nightingale collected data on deaths before and after the intervention, revealing its impact.

W. E. B. Du Bois’s Data Portraits: Created visual representation of data showing the diversity and breadth of the black presence in America.

Frank Anscombe, “Graphs in Statistical Analysis”

• Access github.com/picoral/csc-444-data to look at the data (presented in two formats)

• With a partner, try to make sense of the data (using any technology you want). HINT: run descriptive stats, and then try some simple visualization

• Share your work with the group

We will be using web technologies to build visualizations in this course:

• HTML
• CSS
• SVG
• JavaScript (d3.js)

• All users need is a web browser (no need to install anything locally)
• Lots of JavaScript libraries that allow custom visualizations and adding interactivity

• Backbone of developing for the web
• Markup language

DEMO

• Cascading Styling Sheets

DEMO: http://www.csszengarden.com/

• Scalable Vector Graphics
• Raster vs. Vector

DEMO: https://commons.wikimedia.org/wiki/File:Ghostscript_Tiger.svg

• Allows for interactivity
• Libraries with pre-written functions (D3.js)