Week 6: Networks, Stories, Vis in the Newsroom Tamara Munzner - - PowerPoint PPT Presentation

▶
week 6 networks stories vis in the newsroom
SMART_READER_LITE
LIVE PREVIEW

Week 6: Networks, Stories, Vis in the Newsroom Tamara Munzner - - PowerPoint PPT Presentation

Jan 11, 2024 240 likes •449 views

Week 6: Networks, Stories, Vis in the Newsroom Tamara Munzner Department of Computer Science University of British Columbia JRNL 520H, Special Topics in Contemporary Journalism: Data Visualization Week 6: 18 October 2016

slide-1
SLIDE 1

http://www.cs.ubc.ca/~tmm/courses/journ16

Week 6: 
 Networks, Stories, Vis in the Newsroom

Tamara Munzner Department of Computer Science University of British Columbia

JRNL 520H, Special Topics in Contemporary Journalism: Data Visualization Week 6: 18 October 2016

slide-2
SLIDE 2

News

  • Assignment 3, 4, 4-solo marks out

–Assign 4: 90% pair mark, 10% solo mark for proposal

  • Assign 4 pair: min 74.8, avg 84.2, max 100
  • Assign 4 solo: min 50, avg 89.7, max 100 (5% of Assign 6 grade weight)

–Assign 3

  • min 83.8, avg 93.6, max 100
  • things to watch out for

–diverging vs sequential colormaps –line charts vs bar charts (continuous vs discrete data) –absolute counts vs relative percentages –highlighting/emphasis vs filtering out completely

  • does your interaction make sense? does it help somebody?

–please submit packaged workbooks (twbx) not plain workbooks (twb)

2

slide-3
SLIDE 3

Schedule

  • today: office hours12:30-1:30pm, Tamara & Caitlin
  • next week:

–Tamara on travel Sat Oct 22 - Sat Oct 29

  • at

VIS conference in Baltimore, likely extremely slow with email

–Caitlin here

  • Tue Oct 25 9:30-12:30, 1:30-4:30 in Sing Tao bldg room 313, drop by for help/discussion
  • available by email throughout the week
  • two weeks:

–project 6 due Tue Nov 1 9am

3

slide-4
SLIDE 4

Today

  • stories
  • networks
  • (break)
  • vis in the news
  • beyond this class
  • individual meetings on final project

4

slide-5
SLIDE 5

Assignment 6

  • find dataset, visualize it, and write story about it

–you’ve now had practice in

  • effective visual encoding: space, color
  • finding the story within a dataset
  • wrangling
  • linking up and partitioning into multiple views
  • you’re encouraged to consult with us if you get stuck!

–is your idea viable/newsworthy? –how can you do what you want inside Tableau? –is your visual encoding well justified?

  • you’re encouraged to post story publicly (but not required)

–note you can embed vis within web page with Tableau Public

5

slide-6
SLIDE 6

Last Time

6

slide-7
SLIDE 7

Last Time: Rules of Thumb

  • No unjustified 3D
  • Resolution over immersion
  • Overview first, zoom and filter, details on demand
  • Responsiveness is required
  • Function first, form next

7

slide-8
SLIDE 8

Demos 1 & 2: Wrangling Tutorial, Simple Survey

  • Credit: Caitlin Havlak
  • Wrangling Lessons

–first row for headers (right menu over source in –Tableau data interpeter –manual Excel/GoogleDoc cleaning

  • Big Ideas

–reshaping data: from wide to tall –joins: inner, left, right, outer –pivots: one observation per row, no cross-tabulation

8

slide-9
SLIDE 9

Stories

9

slide-10
SLIDE 10

Networks

10

slide-11
SLIDE 11

11

Encode Arrange Express Separate Order Align Use Manipulate Facet Reduce Change Select Navigate Juxtapose Partition Superimpose Filter Aggregate Embed

How? Encode Manipulate Facet

Map Color Motion Size, Angle, Curvature, ...

Hue Saturation Luminance

Shape

Direction, Rate, Frequency, ...

from categorical and ordered attributes

slide-12
SLIDE 12

12

Arrange networks and trees

Node–Link Diagrams Enclosure Adjacency Matrix

TREES NETWORKS

Connection Marks

TREES NETWORKS

Derived Table

TREES NETWORKS

Containment Marks

slide-13
SLIDE 13

Idiom: force-directed placement

  • visual encoding

–link connection marks, node point marks

  • considerations

–spatial position: no meaning directly encoded

  • left free to minimize crossings

–proximity semantics?

  • sometimes meaningful
  • sometimes arbitrary, artifact of layout algorithm
  • tension with length

– long edges more visually salient than short

  • tasks

–explore topology; locate paths, clusters

  • scalability

–node/edge density E < 4N

13

http://mbostock.github.com/d3/ex/force.html

slide-14
SLIDE 14

Idiom: adjacency matrix view

  • data: network

–transform into same data/encoding as heatmap

  • derived data: table from network

–1 quant attrib

  • weighted edge between nodes

–2 categ attribs: node list x 2

  • visual encoding

–cell shows presence/absence of edge

  • scalability

–1K nodes, 1M edges

14

[NodeTrix: a Hybrid Visualization of Social Networks. Henry, Fekete, and McGuffin. IEEE TVCG (Proc. InfoVis) 13(6):1302-1309, 2007.] [Points of view: Networks. Gehlenborg and

  • Wong. Nature Methods 9:115.]
slide-15
SLIDE 15

Connection vs. adjacency comparison

  • adjacency matrix strengths

–predictability, scalability, supports reordering –some topology tasks trainable

  • node-link diagram strengths

–topology understanding, path tracing –intuitive, no training needed

  • empirical study

–node-link best for small networks –matrix best for large networks

  • if tasks don’t involve topological structure!

15

[On the readability of graphs using node-link and matrix-based representations: a controlled experiment and statistical analysis. Ghoniem, Fekete, and Castagliola. Information Visualization 4:2 (2005), 114–135.]

http://www.michaelmcguffin.com/courses/vis/patternsInAdjacencyMatrix.png

slide-16
SLIDE 16

Idiom: radial node-link tree

  • data

–tree

  • encoding

–link connection marks –point node marks –radial axis orientation

  • angular proximity: siblings
  • distance from center: depth in tree
  • tasks

–understanding topology, following paths

  • scalability

–1K - 10K nodes

16

http://mbostock.github.com/d3/ex/tree.html

!"#$ "%"&'()*+ *&,+($#

  • .

. & / $ # " ( ) 1 $ 2 & , + ( $ # 2 / , % ) ( ' 3 ( # , * ( , # $ 4 ) $ # " # * 5 ) * " & 2 & , + ( $ # 6$#.$78.$ . # " 9 5 :$(;$$%%$++2$%(#"&)(' <)%=>)+("%*$ 6 " ? @ & / ; 6 ) % 2 , ( 35/#($+(A"(5+ 39"%%)%.B#$$ / 9 ( ) ) C " ( ) / %

  • +

9 $ * ( D " ( ) / : " % = $ # "%)0"($ 7"+)%. @ , % * ( ) / % 3 $ E , $ % * $ ) % ( $ # 9 / & " ( $

  • ##"'F%($#9/&"(/#

2/&/#F%($#9/&"(/# >"($F%($#9/&"(/# F%($#9/&"(/# 6 " ( # ) ? F % ( $ # 9 / & " ( / # G,0H$#F%($#9/&"(/# I H J $ * ( F % ( $ # 9 / & " ( / # A/)%(F%($#9/&"(/# D $ * ( " % . & $ F % ( $ # 9 / & " ( / # F3*5$8,&"H&$ A"#"&&$& A " , + $ 3*5$8,&$# 3$E,$%*$ B#"%+)()/% B#"%+)()/%$# B # " % + ) ( ) / % 7 1 $ % ( B ; $ $ % 8"(" */%1$#($#+ 2/%1$#($#+ > $ & ) ) ( $ 8 B $ ? ( 2 / % 1 $ # ( $ # K#"956<2/%1$#($# F>"("2/%1$#($# L3IG2/%1$#($# > " ( " @ ) $ & 8 >"("3*5$0" >"("3$( >"("3/,#*$ >"("B"H&$ >"("M()& 8)+9&"' >)#('39#)($ < ) % $ 3 9 # ) ( $ D$*(39#)($ B$?(39#)($ !$? @&"#$N)+ 95'+)*+ > # " . @ / # * $ K # " 1 ) ( ' @ / # * $ F @ / # * $ G : / 8 ' @ / # * $ A " # ( ) * & $ 3)0,&"()/% 3 9 # ) % . 39#)%.@/#*$ E,$#'

  • ..#$."($7?9#$++)/%
  • %

8

  • #)(50$()*
  • 1$#".$

: ) % " # ' 7 ? 9 # $ + + ) / % 2/09"#)+/% 2 / 9 / + ) ( $ 7 ? 9 # $ + + ) / % 2 / , % ( >"($M()& >)+()%*( 7?9#$++)/% 7 ? 9 # $ + + ) / % F ( $ # " ( / # @ % FO F+- <)($#"& 6"(*5 6 " ? ) , 0$(5/8+ "88 "%8 "1$#".$ */,%( 8)+()%*( 8 ) 1 $ E O% .( .($ )OO )+" & ( &($ " ? 0)% 0/8 0,& %$E % / ( /# /#8$#H' # " % . $ + $ & $ * ( +(88$1 + , H +,0 ,98"($ 1"#)"%*$ ;5$#$ ?/# P 6)%)0,0 G/( I# Q,$#' D " % . $ 3(#)%.M()& 3,0 N " # ) " H & $ N"#)"%*$ R / # +*"&$ F3*"&$6"9 < ) % $ " # 3 * " & $ < / . 3 * " & $ I # 8 ) % " & 3 * " & $ Q,"%()&$3*"&$ Q,"%()("()1$3*"&$ D//(3*"&$ 3*"&$ 3*"&$B'9$ B)0$3*"&$ ,()&

  • ##"'+

2/&/#+ >"($+ > ) + 9 & " ' + @)&($# K$/0$(#' 5$"9 @ ) H / % " * * ) 4 $ " 9 4 $ " 9 G / 8 $ F71"&,"H&$ F A # $ 8 ) * " ( $ FN"&,$A#/?' 0"(5 >$%+$6"(#)? F6"(#)? 39"#+$6"(#)? 6"(5+ I # ) $ % ( " ( ) / % 9"&$(($ 2 / & / # A " & $ ( ( $ A"&$(($ 3 5 " 9 $ A " & $ ( ( $ 3)C$A"&$(($ A#/9$#(' 35"9$+ 3/#( 3 ( " ( + 3 ( # ) % . + 1)+ "?)+

  • ?$+
  • ?

) +

  • ?)+K#)8<)%$
  • ?)+<"H$&

2 " # ( $ + ) " %

  • ?

$ + * / % ( # / & +

  • %

* 5 / # 2 / % ( # / & 2&)*=2/%(#/& 2 / % ( # / & 2 / % ( # / & < ) + ( >#".2/%(#/& 7 ? 9 " % 8 2 / % ( # / & 4 / 1 $ # 2 / % ( # / & F 2 / % ( # / & A " % S / / 2 / % ( # / & 3$&$*()/%2/%(#/& B / / & ( ) 9 2 / % ( # / & 8"(" >"(" >"("<)+( >"("39#)($ 78.$39#)($ G/8$39#)($ #$%8$#

  • #

# / ; B ' 9 $ 78.$D$%8$#$# FD$%8$#$# 35"9$D$%8$#$# 3*"&$:)%8)%. B # $ $ B#$$:,)&8$# $ 1 $ % ( + > " ( " 7 1 $ % ( 3$&$*()/%71$%( B / / & ( ) 9 7 1 $ % ( N ) + , " & ) C " ( ) / % 7 1 $ % ( &$.$%8 <$.$%8 <$.$%8F($0 < $ . $ % 8 D " % . $ /9$#"(/# 8)+(/#()/% :)O/*"&>)+(/#()/% >)+(/#()/% @)+5$'$>)+(/#()/% $%*/8$# 2/&/#7%*/8$# 7%*/8$# A#/9$#('7%*/8$# 35"9$7%*/8$# 3 ) C $ 7 % * / 8 $ # T & ( $ # @ ) + 5 $ ' $ B # $ $ @ ) & ( $ # K # " 9 5 > ) + ( " % * $ @ ) & ( $ # N)+)H)&)('@)&($# FI9$#"(/# &"H$& < " H $ & $ # D"8)"&<"H$&$# 3 ( " * = $ 8

  • #

$ " < " H $ & $ # &"'/,(

  • ?)+<"'/,(

:,%8&$878.$D/,($# 2)#*&$<"'/,( 2)#*&$A"*=)%.<"'/,( >$%8#/.#"0<"'/,( @/#*$>)#$*($8<"'/,( F*)*&$B#$$<"'/,( F%8$%($8B#$$<"'/,( < " ' / , ( G/8$<)%=B#$$<"'/,( A ) $ < " ' / , ( D " 8 ) " & B # $ $ < " ' / , ( D"%8/0<"'/,( 3("*=$8-#$"<"'/,( B#$$6"9<"'/,( I9$#"(/# I9$#"(/#<)+( I 9 $ # " ( / # 3 $ E , $ % * $ I 9 $ # " ( / # 3 ; ) ( * 5 3 / # ( I 9 $ # " ( / # N)+,"&)C"()/%

slide-17
SLIDE 17

Idiom: treemap

  • data

–tree –1 quant attrib at leaf nodes

  • encoding

–area containment marks for hierarchical structure –rectilinear orientation –size encodes quant attrib

  • tasks

–query attribute at leaf nodes

  • scalability

–1M leaf nodes

17

http://tulip.labri.fr/Documentation/3_7/userHandbook/html/ch06.html

slide-18
SLIDE 18

Link marks: Connection and containment

  • marks as links (vs. nodes)

–common case in network drawing –1D case: connection

  • ex: all node-link diagrams
  • emphasizes topology, path tracing
  • networks and trees

–2D case: containment

  • ex: all treemap variants
  • emphasizes attribute values at leaves (size coding)
  • only trees

18

Node–Link Diagram Treemap

[Elastic Hierarchies: Combining Treemaps and Node-Link

  • Diagrams. Dong, McGuffin, and Chignell. Proc. InfoVis

2005, p. 57-64.]

Containment Connection

slide-19
SLIDE 19

Tree drawing idioms comparison

  • data shown

– link relationships – tree depth – sibling order

  • design choices

– connection vs containment link marks – rectilinear vs radial layout – spatial position channels

  • considerations

– redundant? arbitrary? – information density?

  • avoid wasting space

19

[Quantifying the Space-Efficiency of 2D Graphical Representations of

  • Trees. McGuffin and Robert. Information

Visualization 9:2 (2010), 115–140.]