interactive data visualization … in...

24
Interactive Data Visualization … In Practice CogSci 121 - HCI Programming Studio

Upload: others

Post on 01-Jul-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

Interactive Data Visualization … In Practice

CogSci 121 - HCI Programming Studio

Page 2: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

InteractiveVisualizations

http://gapminder.com Rosling,H.andZhang,Z.HealthadvocacywithGapminderanimatedstatistics.JournalofEpidemiologyandGlobalHealth1,1(2011),11–14.

http://www.youtube.com/watch?v=g9nvLqLM9Y0

Page 3: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

GapMinderD3Demo

3

https://bost.ocks.org/mike/nations/ http://romsson.github.io/dragit/example/nations.html

Page 4: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

GapminderWorldDemo

http://www.gapminder.org/world

Page 5: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

DELPHI Data?

Page 6: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

DELPHIData e-Platform to Leverage

Multilevel Personal Health Information

NSF 1237174, Information &

Intelligent Systems

Kevin Patrick, Chaitan Baru, Ted Chan, Sanjoy Dasgupta, Claudiu Farcas, William Griswold, Jeannie Huang, Yannis Katsis, Lucila Ohno-Machado, Yannis Papakonstantinou, Fredric Raab

Page 7: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

Multiple sources of health data

7

SANDAG

Medical Records Personal Health Data(weigh-ins, run info, …)

Genomic Data

Environmental Data(pollution, noise, greenspace, …)

Public Health DataMicrobiome Data

Page 8: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

…of different types

PersonalMedical Data

Behavioral &Social Data

EnvironmentalData

Multiple sources of health data

Physical activity Sleep Social Networks Stress Diet

Medical Records Genomic Pharmaceutical BMI

Food & Grocery Pollutants Transportation Crime & Incivilities

Page 9: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

Providing health care & population health requires reasoning across these layers

Physical activity Sleep Social Networks Stress Diet

Medical Records Genomic Pharmaceutical BMI

Food & Grocery Pollutants Transportation Crime & Incivilities

PersonalMedical Data

Behavioral &Social Data

EnvironmentalData

Diabetes Management

Asthma Care

Obesity tracking for public health

Page 10: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

10

Page 11: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

11

Page 12: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

DELPHI Data Exploration Tool

12

Page 13: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

COGS 121 - 2015

Page 14: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

Team Thundercats AirData

● Air Pollution

● CitiSense Data

● Interactive visualization of data collected by CitiSense sensors

http://airdata.herokuapp.com

Page 15: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

LifeFitness PlotSD

● Demographic-related risks in San Diego

● Crimes data, leading cause of death, HHS data,

● Visualization of personal risks in San Diego county based on age and gender

http://lifefitness.herokuapp.com

Page 16: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

Extension-1● Financial

Crisis Analysis

● Zillow Data

● A visualization of US housing market data from 2004 to 2014 (various cities)http://crisis-in-your-city.herokuapp.com

Page 17: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

Siete● San Diego

Regional Crimes

● Crimes Data

● Visualization of the most common crimes in particular areas (ZIP codes)http://siete2.herokuapp.com

Page 18: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

Team Wayde Castillo MyGreat

● Education, Occupation, Marital status

● San Diego Health & Human Services Agency Data

● A tool aimed to assist families and young professionals in making informed decisions about moving to San Diego!

http://mygreat.herokuapp.com

Page 19: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

Team Nove

● Moving to San Diego

● Zillow Data

● Finding the best area in SD in terms of schools, budget and type of house

http://teamnove.herokuapp.com

Page 20: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

DTOXX

● DUI

● Various sources of DUI Data

● Interactive visualization to inform about DUI and Ridesharing

http://dtoxx1.herokuapp.com/about

Page 21: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

TinyElephants PureRun

● Air Pollution and Running

● CitiSense Data

● Show pollution data around suggested running paths

http://purerun.herokuapp.com

Page 22: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

PiedPiper● House Market

● Zillow Data + HHS Data

● Visualization of SD regions with comparisons of age, housing costs, density, marital datahttp://cogs121-piedpiper.herokuapp.com

Page 23: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

Next Steps• Amy Fox and Linda Weber (IBM Design)

• Technical Discussions (required), Fri 4/17-Troubleshooting with Assignment 2 -Quiz on Week 4 Content

• Readings (required) - Johnson (Designing With the Mind in Mind) - Chapter 13, 14 - Meirelles (Design for information: an introduction to the histories, theories, and the best practices behind effective information visualizations) - Introduction + Chapter 1

• Next Week:-Rapid Prototyping and Wireframing - Assignment 3

Page 24: Interactive Data Visualization … In Practicecogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w4_thu.pdf · DELPHI Data e-Platform to Leverage Multilevel Personal Health Information

The BIG IdeaAmy Fox and Linda Weber