This class is about exploring complexity and innovation through the lens of advanced interactive data visualization. Understanding how to co-evolve complex ecosystems and how to allow for distributed organizing to happen demands a thorough understanding of data visualization techniques. The course builds on basic knowledge in calculus and software development. It builds the basics for developing smart interactive web-based healthcare data displays.

• Lecture: Visualization Analysis & Design
• Practice: Data Visualization with Python and JavaScript

• D3.js: D3 in Depth, D3.js in Action, Interactive Data Visualization for the Web
• Python: Practical Data Science with Python, Python Data Analysis

The course closely follows the main reading, which offers vast additional material online:

• General Resource for the book: https://www.cs.ubc.ca/~tmm/vadbook/
• Undergraduate Course at UBC: https://www.students.cs.ubc.ca/~cs-436v/22Jan/)
• Video Sessions on YouTube: https://www.youtube.com/watch?v=1GhZisgc6DI&list=PLT4XLHmqHJBdB24LAQPk_PV7wrwpJFh5a

• https://www.bogotobogo.com/python/IPython/iPython_Jupyter_Notebook_with_Embedded_D3.php, https://github.com/PyGoogle/PyD3
• https://mpld3.github.io/

• As part of the course you need to prepare an individual data visualization project based on publicly available healthcare dataset.
• The form of delivery is a two-tier architecture with a backend emitting fhir-compliant json and a frontend using d3.js to visualize and interact on the data.

• ...focus on very specific user group and their core job to get done. Understand or imagine every little detail.
• ...think about the ways your user needs to receive, transform and send data. Try to automate or simplify their lives.
• ...optimize on all little details and behaviour in your frontend. Make it a joy to use the app.
• ...use an iterative and cloud-enabled development process. Make it easy to build everywhere, again and again.

• ...try to make the app targeted at too many users and too many of their tasks. One user with one task is enough.
• ...use a visualization framework other than D3.js. High-level frameworks (Plotly, Charts,js, etc.) do not allow for enough customization. You can use frameworks like React, Vue or Svelte for state management though.
• ...submit a jupyter notebook. Build a Backend and have it produce a good selection of data for you to use in the frontend
• ...use an exotic or complicated build processes. I will try to automatically get data from Github Codespaces. If your app does not automatically build there, I cannot look at it.

• Lecture: 30min
• Hands-on: 90-150min
• Project Presentation/Feedback (in 4 Sessions): 60min

• Introductory Example using Python Matplotlib
• Review on Progress Board and Discussion

• Project Ideation

• Introductory Example using Matplotlib (Recreating Progressboard V 0.1)

• Why Visualization Analysis and Design? (Slides 2-15)
• Framework for Visualization Analysis and Design (Slides 16-39)

• Data Types in Visualization and their implementation in Python (Slides 39-93)
• Theory and Research Findings on Visualization

• Project Setup with HTML, CSS, and JavaScript (D3.js)
• Can we get to this?! https://ourworldindata.org/health-meta#health-returns-to-healthcare-investment
• Joint ideation on visualization and technologies used

• Understanding the need and a framework for validation
• Application to own project
• Preliminary planning of iterations, definition of roadmap

• Producing interactivity in prototyping: https://kapernikov.com/ipywidgets-with-matplotlib/
• Setting up your Web App and transferring your data

Slides: https://www.cs.ubc.ca/~tmm/talks/vad/VAD-2021.pdf (pp. 39-121)

• Get clarity about Domain, Users, and their Problems
• Specify and Prioritize User Problems
• Build simple "social" prototypes to facilitate communication and avoid spending useless time implementing "something": https://www.interaction-design.org/literature/article/design-thinking-get-started-with-prototyping

• Share an initial picture and a message for your project (1 min / per Project)

• Tabular Data

• Networked Data

• A Basic Barchart:
  • Charts
  • Scales
  • Axes
  • Selections and Joins

Slides: https://www.cs.ubc.ca/~tmm/talks/vad/VAD-2021.pdf (pp. 122-177)