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)