Data Visualization (CIS/DSC 468)

Transcription

1 Data Visualization (CIS/DSC 468) Data & Tasks Dr. David Koop

2 Programmatic SVG Example Draw a horizontal bar chart - var a = [6, 2, 6, 10, 7, 18, 0, 17, 20, 6]; Steps: - Programmatically create SVG - Create individual rectangle for each item Possible solution: - GrdBjE 2

3 Nesting Example Sum all numbers less than 15 in each "row" (subarray) - var arr = [[9, 18, 11], [15, 17, 14], [11, 16, 1]]; 3

4 Nesting Example Sum all numbers less than 15 in each "row" (subarray) - var arr = [[9, 18, 11], [15, 17, 14], [11, 16, 1]]; Potential solution: - arr.map(function(a) { return a.filter(function(d) { return d < 15; }).reduce(function(s,d) { return s+d; }); }) 4

5 Computer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectively. 5

6 Data What is this data? Semantics: real-world meaning of the data Type: structural or mathematical interpretation Both often require metadata - Sometimes we can infer some of this information - Line between data and metadata isn t always clear 6

7 Items & Attributes attribute Field item 22 7

8 Items (Nodes) & Links Item Links [Bostock, 2011] 8

9 Positions and Grids Position Grid 9

10 Assignment 1 ~dkoop/cis468/assignment1.html Use HTML, CSS, SVG, and JavaScript Part 3 will take longer Due next Friday (Feb. 10) Questions? 10

11 Dataset Types Dataset Types Tables Networks Fields (Continuous) Geometry (Spatial) Attributes (columns) Grid of positions Items (rows) Cell containing value Link Node (item) Cell Attributes (columns) Position Multidimensional Table Trees Value in cell Value in cell [Munzner (ill. Maguire), 2014] 11

12 Tables attribute Field item cell 12

13 Table Visualizations economy (mpg) cylinders displacement (cc) power (hp) power (hp) weight (lb) weight (lb) 5,000 5,000 4,500 4,500 4,000 4, mph (s) 0-60 mph (s) year 82 year ,500 3,500 3,000 3,000 2,500 2, ,000 2, [M. Bostock, 2011] 13

14 Networks Why networks instead of graphs? Tables can represent networks - Many-many relationships - Also can be stored as specific graph databases or files 14

15 Networks Danny Holten & Jarke J. van Wijk / Force-Directed [Holten & van Wijk, 2009] 15

16 Networks not bundled and bundled using (b) FDEB with inverse-linear model, [Holten & van Wijk, 2009] 16

17 Fields Scalar Fields Vector Fields Tensor Fields Each point in space has an associated... 17

18 Fields Scalar Fields Vector Fields Tensor Fields (Order-0 Tensor Fields) (Order-1 Tensor Fields) (Order-2+) Each point in space has an associated s 0 4 v v 1 v Scalar Vector Tensor

19 Fields Difference between continuous and discrete values Examples: temperature, pressure, density Grids necessary to sample continuous data: uniform rectilinear structured unstructured [Weiskopf, Machiraju, Möller] Interpolation: how to show values between the sampled points in ways that do not mislead 18

20 Spatial Data Example: MRI [via Levine, 2014] 19

21 SciVis [Google Image Search for "scientific visualization", 2017] 20

22 InfoVis [Google Image Search for "information visualization", 2017] 21

23 Scivis and Infovis Two subfields of visualization Scivis deals with data where the spatial position is given with data - Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing, volume rendering, vector field vis In Infovis, the data has no set spatial representation, designer chooses how to visually represent data Also: black background vs. white background!! (via A. Lex) 22

24 Sets & Lists [Daniels, 23

25 Attribute Types Attribute Types Categorical Ordered Ordinal Quantitative Ordering Direction Sequential Diverging Cyclic [Munzner (ill. Maguire), 2014] 24

26 Categorial, Ordinal, and Quantitative 1 = Quantitative 23 2 ordinal = Nominal 3 = Ordinal quantitative categorical 25

27 Categorial, Ordinal, and Quantitative 1 = Quantitative 24 2 ordinal = Nominal 3 = Ordinal quantitative categorical 26