Advanced Interactive Data Visualization Studio
CLASS DETAILS
CUNY Graduate Center | Fall 2020
6:30 to 8:30pm | Tuesdays
Aucher Serr ([email protected])
Office Hours By Appointment via Calendly Link
GC Commons Websites: https://datavisstudiof2020.commons.gc.cuny.edu/
DESCRIPTION
This course will offer students the opportunity to develop a professional level data visualization project of their choice. This course will be a supervised studio-style class, with the goal of helping students push forward their own design and development practice. As such, the course will support students through the process of concept development, design iteration, technical implementation, critique, and refinement. Students will pursue their individual interests while working in the context of a hands-on studio environment where they will interact and share ideas with peers. Ultimately, the goal is for each student to finish the semester with an interactive data visualization project they feel proud of.
COURSE GOALS
Throughout this course, students will be supported in:
- Creating a state-of-the-art data visualization project
- Expanding their fluency in industry-level technical and design tools
- Developing their own research, design, and development practices
- Honing their ability to professionally communicate their vision to clients/stakeholders/partners
- Establishing themselves as active and engaged members of the data visualization community, as well as responsible producers and consumers of data visualization
- Taking ownership of their own learning and ongoing, never-ending, development
COURSE STRUCTURE
This course will be heavily student-led and directed. Roughly one half of each class session will be devoted to student-led content (syncing with working groups, sharing lessons from observable prototypes, and leading ‘knowledge shares’). The second half of each session will consist of more structured content designed to give students the fundamental concepts and tools they need to push their own work forward.
Working Groups
At the beginning of the semester students will be divided into small ‘working groups’ (of 3-4 students). Each class will begin with students checking in with their group and sharing with each other where they currently are in their project development. This is an opportunity for students to share their new discoveries/challenges with each other and to learn from each others’ processes. It also is intended to provide substantive peer feedback throughout the entire semester to allow for meaningful project iterations.
Knowledge Shares
Each student will also be responsible for at least one ‘knowledge share’ session throughout the semester. Each of these is an opportunity to dive deeper into a topic that you are interested and to share that back with the class. I have assembled a list of starter topics for students to chose from here, but students are also welcome (and encouraged) to come with their own ideas for what they feel will be valuable for themselves and the class. You can read more about the expectations for these on the Knowledge Share page.
Observable Prototypes
For each of the first six weeks, students are expected to create a quick interactive prototype ‘sketch’ using Observable notebooks. These are designed to be fast, quick, and rough and are intended to get students more comfortable with rapid prototyping. You can read more about what these mean on the Prototyping page.
GRADE BREAKDOWN
10% – Participation, Attendance, and Collaboration
10% – Student-led ‘Knowledge Share‘
20% – 4 Rapid Observable Prototypes (out of 6 opportunities)
20% – Design Process and Visual Communication
40% – Final Interactive Data Visualization Project + Reflection/Write-up
CLASS SCHEDULE
| Date | Topic | Session Type |
|---|---|---|
| Sep 1, 2020 | Topic: 1. Introduction 2. Course Motivation and Goals Readings Due: 1. Interneting is Hard – Webpage basics (HTML and CSS) 2. Debugging in Chrome 3. JavaScript Functions (arrow functions and expressions) – 4. Different JS Data Types (make sure you know the difference between objects, arrays, and strings) – 5. D3 Selections and Data Joins Assignments Due: n/a | 💻 Technical |
| Sep 8, 2020 | Topic: 🗒 Concept Ideation Workshop Observables Notebooks Q/A Readings Due: 1. Raw Data is an Oxymoron – Chapter 8 ‘Data Bite Man: The Work of Sustaining a Long-Term Study’ Assignments Due: 1. ⚡️ Observable Prototype #1 2. 💎 Project Ideation: start brainstorming directions for your project. This includes thinking about your topic, intended audience, potential datasources, etc.. You don’t have to have your topic completely decided yet, but please come to class prepared with enough material to begin a concept ideation workshop. 3. Sign up for your ‘knowledge share’ session here. | 🗒 Workshop |
| Sep 15, 2020 | Topic: Discussion — Data Visualization for Whom? Modern Application Builds Overview Package Managers (NPM, Yarn) Transpilers (Babel, Browserify) Code Bundlers (Webpack, Parcel, Rollup) Code Formatters/Linters (Prettier, Eslint) Readings Due: 1. WABE: Du Bois’ Data Portraits Tell A Story About Black Life In Georgia And Beyond (+ watch the video) 2. How W.E.B Du Bois Used Data Visualization to Create an Effective Argument Assignments Due: 1. ⚡️ Observable Prototype #2 | 💻 Technical |
| Sep 22, 2020 | Topic: UX Framework Concepts – ‘Componentization’, Reactivity, HTML templating, state management, etc. A high-level look at libraries such as React, Vue, Svelte, and Angular. Readings Due: 1. A Deeper Understanding of Sequence in Narrative Visualization Assignments Due: 1. ⚡️ Observable Prototype #3 2. 💎 Project Brief: Find an effective way to communicate where you currently are in your project. What is your proposed topic? What are your current unknowns? What datasources are you planning to use? Was is helpful context/inspiration to help convey your vision? This deliverable can take the form of (a) a pitch deck, (b) mood board, (c) mind map, (d) written prospectus, (e) any other form you feel effectively communicates your plan. | 💻 Technical |
| Sep 29, 2020 | — No Class — | —- |
| Oct 6, 2020 | Topic: Design Systems D3 – Framework Strategies In Class Demo – React-D3 Readings Due: 1. Atomic Design by Brad Frost (Chapters 1 and 2) Assignments Due: 1. ⚡️ Observable Prototype #4 2. Pick a tutorial from the ones below (or another you find) and come to class with questions that came up from it. (Note: each of these represents a different learning type, select one that works for you) – React-tutorial — tic-tac-toe game – React Documentation – step-by-step guide – freeCodeCamp on YouTube – learn ReactJS course – Codecademy – learn react | 💻 Technical |
| Oct 13, 2020 | Topic: 🗒 Design/Visual Ideation Workshop Readings Due: 1. Continue, Pivot, or Put it Down 2. Choosing Fonts for your Data Visualization 3. [optional] Responsive grids and how to actually use them 4. [optional] Grid Layout Design Assignments Due: 1. ⚡️ Observable Prototype #5 2. 💎 Project Visual Directions: bring some artifacts to communicate your visual/graphical direction and inspiration for your project. Ideally bring at least 3 distinct directions. Depending on where you are in this project, this can range from moodboards and wireframes, to mockups and initial prototypes, but be prepared to share and re-evaluate your choices. | 🗒 Workshop |
| Oct 20, 2020 | Topic: Advanced Animations and SVG Deep Dive Readings Due: 1. SVG Animations by Sarah Drasner : – Chapter 5 (p 45 – 61): ‘UI/UX Animations with No External Libraries’ – Chapter 6 (p 63 – 76): ‘Animating Data Visualization’ – Chapter 17 (p 201 – 211): ‘Designing, Prototyping, and Animation in Component Libraries’ Assignments Due: 1. ⚡️ Observable Prototype #6 2. 💎 Project Visual Proposal: consolidate your thoughts and feedback from the workshops into a polished design deck to communicate your project plan. | 💻 Technical |
| Oct 27, 2020 | Topic: Discussion: Responsibility as DV Practitioners Rapid Design Pitches Readings Due: 1. Don’t Change the Subject 2. Data Feminism: The Numbers Don’t Speak for Themselves Assignments Due: — 💎ongoing work on your project 💎—- | 💻 Technical |
| Nov 3, 2020 | Topic: praxis workshop // studio time Assignments Due: — 💎ongoing work on your project 💎—- | 🗒 Workshop |
| Nov 10, 2020 | Topic: 👀 Critique I 1/2 Assignments Due: — 💎ongoing work on your project 💎—- | 👀 Critique |
| Nov 17, 2020 | Topic: 👀 Critique I 2/2 Assignments Due: — 💎ongoing work on your project 💎—- | 👀 Critique |
| Nov 24, 2020 | Topic: praxis workshop // studio time Assignments Due: — 💎ongoing work on your project 💎—- | 🗒 Workshop |
| Dec 1, 2020 | Topic: 👀 Guest Critique 1/2 Assignments Due: — 💎ongoing work on your project 💎—- | 👀 Critique |
| Dec 8, 2020 | Topic: 👀 Guest Critique II 2/2 Assignments Due: — 💎ongoing work on your project 💎—- | 👀 Critique |
| Dec 15, 2020 | Final Presentations 💎 FINAL PROJECT DUE💎 | 🎉 Presentations |
ATTENDANCE (and VIDEO CONFERENCING) POLICIES
Students are encouraged to attend every class session online (over zoom) since much of the course is very hands-on. Technical portions of the course will be recorded and available for students after the class. Critique sessions, workshops, and discussions, on the other hand, will not be recorded to allow for more open conversations. If you foresee online class participation being a problem for you, please contact me as early as possible in the semester.
This semester is tricky due to our online medium. Ideally, this type of studio class would be offered in person with a lot of hands-on engagement, as that really is the value of a course like this. However, as this course will need to be online, students are encouraged (but not required) to participate with their video cameras turned on to allow for as much engagement and collaboration as possible.
CREATING A PRODUCTIVE SPACE (aka CODE OF CONDUCT)
This course is designed to be an inclusive environment, dedicated to empowering students to explore these new technical skills, regardless of gender, gender identity and expression, sexual orientation, ability, physical appearance, body size, race, ethnicity, age, religion, socioeconomic status, caste, creed, political affiliation, or preferred programming language(s). We will not tolerate harassment of members in any form.
Everyone is able to get more out of the course when people feel comfortable. Since we are learning in a technical setting, we suggest a few specifications about what this could mean.
ACCESSIBILITY
It is Graduate Center and CUNY policy to provide appropriate accommodations to students with disabilities. Any student with a disability who may need accommodations in this class is advised to speak directly to the manager of Student Disability Services, located in Student Affairs, room 7301, or call 212-817-7400 as early in the semester as possible. All discussions will remain confidential.
