Visualizing Complex Systems CMPM 290A, F2017 Angus Forbes - - PowerPoint PPT Presentation

▶
visualizing complex systems
SMART_READER_LITE
LIVE PREVIEW

Visualizing Complex Systems CMPM 290A, F2017 Angus Forbes - - PowerPoint PPT Presentation

Apr 14, 2023 287 likes •791 views

Visualizing Complex Systems CMPM 290A, F2017 Angus Forbes angus@ucsc.edu creativecoding.soe.ucsc.edu github.com/CreativeCodingLab About Me - New asst. professor in UCSCs Computational Media Department - Teaching courses on data

slide-1
SLIDE 1

Visualizing Complex Systems

CMPM 290A, F2017 Angus Forbes

angus@ucsc.edu creativecoding.soe.ucsc.edu github.com/CreativeCodingLab

slide-2
SLIDE 2

About Me

  • New asst. professor in UCSC’s

Computational Media Department

  • Teaching courses on data visualization

and computer graphics

slide-3
SLIDE 3

Research Interests

Main areas:

  • Visualization & Visual Analytics
  • Computer Graphics
  • VR / AR
  • New Media Arts

Also:

  • Applied ML, Digital humanities, HCI,

Network science, Data sonification, etc.

slide-4
SLIDE 4

Research Communities

  • ACM SIGGRAPH 2018 Arts Papers Chair
  • IEEE VIS Organizing committee member

for 2013-2017

  • IEEE VIS Arts Program, General Chair,

2013-2017

  • ACM/EG Computational Aesthetics

Papers Chair 2016; Arts Chair 2015

  • Also contribute to ISEA, VR, NIME,

ICMC, CHI, UIST, and others

slide-5
SLIDE 5

Recent Research Projects

  • Focus on novel ways to represent and

analyze dynamic, complex networks

  • Collaborate with scientists to design

visualization tools to make it easier to reason about their data

  • Enormous and essential opportunity for

creative, computational researchers and artists to investigate issues related to “big data”

slide-6
SLIDE 6

Dynamic Influence Networks

slide-7
SLIDE 7

NeuroCave

slide-8
SLIDE 8

Annotating Complex Natural Language Phenomena

slide-9
SLIDE 9

Creative Research

  • New forms of representation and

interaction

  • AR / VR, Deep Learning
  • Design thinking / Graphic design /

Interactive design

slide-10
SLIDE 10

Inviso

slide-11
SLIDE 11

Deep Illumination

slide-12
SLIDE 12

Computational Art

  • Using computational media to create

interactive artworks

  • Visualizing archives, cultural datasets
  • Algorithmic, generative graphics
slide-13
SLIDE 13

Fluid Automata

slide-14
SLIDE 14

Macondo

slide-15
SLIDE 15

Poetry Chains

slide-16
SLIDE 16

Video Granular Synthesis

slide-17
SLIDE 17

Riverwalk

slide-18
SLIDE 18

Creative and Critical Visualization

https://creativecoding.soe.ucsc.edu https://github.com/CreativeCodingLab http://angusforbes.com http://visap.uic.edu/2017

slide-19
SLIDE 19

What is this class about?

Information Visualization

Effective ways to interact with and represent different types of data – often involves designing new techniques that can be applied in many contexts

Visual Analytics

Effective use of visual interfaces to solve complex problems - often involves a combination of techniques specific to a particular industry or domain

slide-20
SLIDE 20

Viegas and Wattenberg, 2012

“Wind Map”

slide-21
SLIDE 21

Holten, 2006 “Hierarchical Edge

Bundling”

slide-22
SLIDE 22

Riche and Dwyer, 2012 “Compact

Rectangular Euler Diagrams”

slide-23
SLIDE 23

Shneiderman, 1992 “Treemaps”

slide-24
SLIDE 24

Dang & Forbes, 2017 “Cactus Tree”

slide-25
SLIDE 25

Partl et al., 2014 “ConTour”

slide-26
SLIDE 26

Kamaleswaran et al., 2016

“PhysioEx”

slide-27
SLIDE 27

Zhao et al., 2016 “PivotSlice”

slide-28
SLIDE 28

Dang & Forbes, 2017 “BioLinker”

slide-29
SLIDE 29

(Interactive) Infographics

  • Generally static or have a limited set of

interactions

  • Often highlight particular elements to

encode a specific narrative

  • Normally utilize a minimalist palette in
  • rder to help viewer focus on important

concepts

slide-30
SLIDE 30

Minard, 1869 “Napoleon's 1812

Invasion of Russia”

slide-31
SLIDE 31

Nightengale, 1858 “Diagram of the

Causes of Mortality in the Army...”

slide-32
SLIDE 32

Parlapiano & Sanger-Katz, 2016

“Shifts in Power”

slide-33
SLIDE 33

What will you learn?

Science

Data science: Extracting insight from data, especially “big data” Scientific method: Observation, data collection, hypothesizing, experimenting, testing, analyzing, communcating

Engineering

Coding + software development, D3.js, Javascript, working in teams

slide-34
SLIDE 34

What will you learn?

Visualization

  • How to creatively and effectively choose visual

encodings (color, shape, motion, etc.) for different types of data (tabular, network, textual, geographic, temporal, etc.);

  • How to develop tools to support a range of

visualization tasks (analysis, annotation, exploration, comparison, etc.);

  • How to think of visualization projects in terms
  • f the larger context of the needs and goals of

the intended audience

slide-35
SLIDE 35

How will you learn?

Projects & Presentations

P1, “Quantified Self” – Test out different visual techniques for a (relatively) straightforward dataset - Individual project P2, “Integrated Datasets” – Explore how to integrate multiple techniques to find relationships between data from multiple datasets – Group project P3, “Unsolved Problems” – Develop new techniques to represent complex data to solve complex problems – Group project

slide-36
SLIDE 36

How will you learn?

Assignments & Quizzes

Read textbook and articles + study contemporary programming techniques for information visualization

Participation

Learn from and teach each other; make sure you understand the material; find ways to make the material meaningful to you

slide-37
SLIDE 37

Project 1

For this assignment, creativity more important than accuracy... Grading like a diving or gymnastics competition – difficulty and originality of dive or routine is taken into consideration...

slide-38
SLIDE 38

Project 1

Ideas for how to think of an interesting data set to collect:

  • Find something meaningful that: piques

your curiosity, that constantly annoys you, that amuses you, that you tend to notice

  • What is a special skill or set of

experiences unique to you? What thoughts or perspectives do you have that are not shared by everyone?

slide-39
SLIDE 39
  • S. Posavec & G. Lupi, 2015 “Dear

Data”

slide-40
SLIDE 40

Giorgia Lupi, 2015 “Dear Data”

slide-41
SLIDE 41
  • G. Lupi, 2015 “Dear Data”
slide-42
SLIDE 42
  • S. Posavec, 2015 “Dear Data”
slide-43
SLIDE 43
  • S. Posavec, 2015 “Dear Data”
slide-44
SLIDE 44
  • N. Felton, 2009
slide-45
SLIDE 45
  • N. Felton, 2010
slide-46
SLIDE 46

Homework for Tuesday, 10/10

  • Read chapter 1 & 2 of “Network

Science,” by Albert-László Barabási http://barabasi.com/networksciencebook/

slide-47
SLIDE 47

Homework for Tuesday, 10/10

  • Go through chapters 1 through 13 of

“Interactive Data Visualization for the Web, 2nd Edition,” by Scott Murray http:// proquest.safaribooksonline.com.oca.ucsc. edu/book/databases/business- intelligence/9781491921296

slide-48
SLIDE 48

Homework for Tuesday, 10/10

  • Collect data for Project 1, be prepared

to present hand-drawn “Dear Data”-style data visualization

  • Set up D3.js environment and pick one

example of your choice from bl.ocks.org to explain in class 10/10

slide-49
SLIDE 49

Project 1, due Tuesday, 10/17

Details to be provided soon, but basically:

  • Iterate on hand-drawn data

visualizations

  • Create an interactive version in D3.js
slide-50
SLIDE 50

Slack channel

Main form of class communication: ucsc-creativecoding.slack.com