Data Visualization (DSC 530/CIS )

Transcription

1 Data Visualization (DSC 530/CIS ) Data Dr. David Koop

2 HTML and CSS HTML: Tags define the boundaries of the structures of the content <em>this is <strong>cool</strong>. What about <u><strong>this?</strong></u></em> HTML id and class attributes identify specific elements CSS: Specifies the style of the content according to selectors em { color: green; } #main-header { color: red; }.important { color: blue; } 2

3 Scalable Vector Graphics (SVG) Vector graphics vs. Raster graphics Raster Vector Drawing primitives: - Lines, Circles, Rects, Ellipses, Text, Polylines, Paths - Work by specifying information about how to draw the shape - Lots more: see MDN Documentation Ordering/Stacking: - SVG Elements are drawn in the order they are specified 3

4 SVG Example <svg id="mysvg" width="300" height="600"> <circle cx="50" cy="50" r="50"/> <rect class="lego" x="150" y="150" width="50" height="20"/> <path id="triangle" d="m L L Z"/> </svg> circle { fill: green; stroke: black; stroke-width: 4px; }.lego { fill: red; stroke: blue; stroke-width: 2px; } #triangle { fill: none; stroke: orange; stroke-width:3px; } 4

5 JavaScript in one slide Interpreted and Dynamically-typed Programming Language Statements end with semi-colons, normal blocking with brackets Variables: var a = 0; Operators: +, -, *, /, [ ] Control Statements: if (<expr>){ } else { }, switch Loops: for, while, do-while Arrays: var a = [1,2,3]; a[99] = 100; console.log(a.length); Functions: function myfunction(a,b) { return a + b; } Objects: var obj; obj.x = 3; obj.y = 5; - Prototypes for instance functions Comments are /* Comment */ or // Single-line Comment 5

6 Important JavaScript Concepts Functional Programming: you can pass functions to functions - Array map/filter/reduce/foreach - ctemps=ftemps.map(function(d){return (d-32)*5.0/9.0;}); Closures: functions keep track of their environments - function makeadder(x) { return function(y) { return x + y; }; } Objects and Properties: - var student = {name: "John Smith", id: " ", class: "Senior", hometown: "Fall River, MA, USA"}; - Properties can be accessed via dot or bracket notation - Objects can also function as associative arrays Function chaining: succinct, avoids intermediate variables in code 6

7 Manipulating the DOM with JavaScript Key global variables: window: Global namespace document: Current document document.getelementbyid( ): Get an element via its id HTML is parsed into an in-memory document (DOM) Can access and modify information stored in the DOM Can add information to the DOM with JavaScript - document.body.appendchild(document.createtextnode("i added text to your webpage.")); 7

8 Example: JavaScript and the DOM MKqbjm Start with no real content, just divs: <div id="firstsection"></div> <div id="secondsection"></div> <div id="finalsection"></div> Programmatically add content: - document.createelement - document.getelementbyid - document.createtextnode - Element.appendChild Introduction Once upon a time... Patriots 8

9 Creating SVG figures via JavaScript SVG elements can be accessed and modified just like HTML elements Create a new SVG programmatically and add it into a page: - var divelt = document.getelementbyid("chart"); var svg = document.createelementns( " "svg"); divelt.appendchild(svg); You can assign attributes: - svg.setattribute("height", 400); svg.setattribute("width", 600); svgcircle.setattribute("r", 50); 9

10 Example: UK Driving Fatalities Start: makeelt function creates an SVG element and can additionally add it to the the DOM 30k 0 Possible Solution: Improvements? 10

11 Interactive Data Visualization by S. Murray Free version available on the Web books/ Representing and drawing with data Chapter 3 has a nice overview of Web technologies with examples Great resource for D3 as well 11

12 Assignment 1 Part 3: New Bedford Average Temperature by Month (2015) ~dkoop/dsc530/assignment1.html HTML, CSS, SVG, and JavaScript Part 3 will likely take significantly more time than the other parts! Start now Turn in a1.html (and a1.css, a1.js) via mycourses Due Friday, February 11:59pm Late Policy 12

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

14 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 14

15 Data 15

16 Data Types Items - An item is an individual discrete entity - e.g. row in a table, node in a network Attributes - An attribute is some specific property that can be measured, observed, or logged - a.k.a. variable, (data) dimension 16

17 Items & Attributes attribute Field item 22 17

18 Data Types Nodes - Synonym for item but in the context of networks (graphs) Links - A link is a relation between two items - e.g. social network friends, computer network links 18

19 Items & Links Item Links [Bostock, 2011] 19

20 Data Types Positions: - A position is a location in space (usually 2D or 3D) - May be subject to projections - e.g. cities on a map, a sampled region in an CT scan Grids: - A grid specifies how data is sampled both geometrically and topologically - e.g. how CT scan data is stored 20

21 Positions and Grids Position Grid 21

22 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] 22

23 Tables attribute Field item cell 23

24 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] 24

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

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

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

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

29 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

30 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 29

31 Spatial Data Example: MRI [slide via Levine, 2014] 30

32 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 31

33 Sets & Lists [Daniels, 32

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

35 Categorial, Ordinal, and Quantitative 1 = Quantitative 23 2 ordinal = Nominal 3 = Ordinal quantitative categorical 34

36 Categorial, Ordinal, and Quantitative 1 = Quantitative 24 2 ordinal = Nominal 3 = Ordinal quantitative categorical 35

37 Sequential and Diverging Data Sequential: homogenous range from a minimum to a maximum - Examples: Land elevations, ocean depths Diverging: can be deconstructed into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example: Map of both land elevation and ocean depth [Rogowitz & Treinish, 1998] 36

38 Cyclic Data [Sunlight intensity, Weber et al., 2001] 37

39 Semantics The type of data does not tell us what the data means or how it should be interpreted Tables have keys/values, fields have independent/dependent vars Flat Tables Multidimensional Fields [Munzner (ill. Maguire), 2014] 38

40 Data Model vs. Conceptual Model Data Model: raw data that has a specific data type (e.g. floats): - Temperature Example: [32.5, 54.0, -17.3] (floats) Conceptual Model: how we think about the data - Includes semantics, reasoning - Temperature Example: Quantitative: [32.50, 54.00, ] [via A. Lex, 2015] 39

41 Data Model vs. Conceptual Model Data Model: raw data that has a specific data type (e.g. floats): - Temperature Example: [32.5, 54.0, -17.3] (floats) Conceptual Model: how we think about the data - Includes semantics, reasoning - Temperature Example: Quantitative: [32.50, 54.00, ] Ordered: [warm, hot, cold] [via A. Lex, 2015] 39

42 Data Model vs. Conceptual Model Data Model: raw data that has a specific data type (e.g. floats): - Temperature Example: [32.5, 54.0, -17.3] (floats) Conceptual Model: how we think about the data - Includes semantics, reasoning - Temperature Example: Quantitative: [32.50, 54.00, ] Ordered: [warm, hot, cold] Categorical: [not burned, burned, not burned] [via A. Lex, 2015] 39

43 Assignment 1 Part 3: New Bedford Average Temperature by Month (2015) ~dkoop/dsc530/assignment1.html HTML, CSS, SVG, and JavaScript Part 3 will likely take significantly more time than the other parts! Start now Turn in a1.html (and possibly a1.css, a1.js) via mycourses Due Friday, February 11:59pm Late Policy 40

44 Tasks Why? Actions Targets Analyze All Data Consume Trends Outliers Features Discover Present Enjoy Produce Annotate Record Derive tag Attributes One Many Distribution Dependency Correlation Similarity Search Extremes Target known Target unknown Location known Location unknown Lookup Locate Browse Explore Network Data Topology Query [Munzner (ill. Maguire), 2014] Identify Compare Summarize Paths Spatial Data Shape What? Why? How? 41

45 Actions: Analyze Consume Exploration Explanation Analyze Consume Discover Present Enjoy Enjoyment Produce Annotation Record Derivation Leads to new directions/ideas Produce Annotate Record Derive tag [Munzner (ill. Maguire), 2014] 42

46 Actions: Search and Query Search based on what a user knows Search - Target Target known Target unknown - Location Location known Lookup Browse Query depends on what data matters - One - Some (Often Two) - All Location unknown Query Locate Explore Identify Compare Summarize [Munzner (ill. Maguire), 2014] 43

47 Targets ALL DATA NETWORK DATA Trends Outliers Features Topology Paths ATTRIBUTES One Many Distribution Dependency Correlation Similarity SPATIAL DATA Shape Extremes [Munzner (ill. Maguire), 2014] 44

48 How do we do visualization? Encode How? Encode Manipulate Facet Manipulate Facet Reduce Arrange Express Separate Map from categorical and ordered attributes Change Juxtapose Filter Order Align Color Hue Saturation Luminance Select Partition Aggregate Size, Angle, Curvature,... Use Navigate Superimpose Embed Shape Motion Direction, Rate, Frequency,... [Munzner (ill. Maguire), 2014] 45

49 Analysis Example SpaceTree TreeJuxtaposer [SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation. Grosjean, Plaisant, and Bederson. Proc. InfoVis 2002, p ] [TreeJuxtaposer: Scalable Tree Comparison Using Focus +Context With Guaranteed Visibility. ACM Trans. on Graphics (Proc. SIGGRAPH) 22: , 2003.] What? Tree Why? Actions Present Locate Identify How? SpaceTree Encode Navigate Select Filter Aggregate Targets Path between two nodes TreeJuxtaposer Encode Navigate Select Arrange [Munzner (ill. Maguire), 2014] 46

50 Analysis Example SpaceTree TreeJuxtaposer [SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation. Grosjean, Plaisant, and Bederson. Proc. InfoVis 2002, p ] [TreeJuxtaposer: Scalable Tree Comparison Using Focus +Context With Guaranteed Visibility. ACM Trans. on Graphics (Proc. SIGGRAPH) 22: , 2003.] What? Tree Why? Actions Present Locate Identify How? SpaceTree Encode Navigate Select Filter Aggregate Targets Path between two nodes TreeJuxtaposer Encode Navigate Select Arrange [Munzner (ill. Maguire), 2014] 46

51 Analysis Example: Derivation Strahler number centrality metric for trees/networks derived quantitative attribute draw top 5K of 500K for good skeleton [Using Strahler numbers for real time visual exploration of huge graphs. Auber. Proc. Intl. Conf. Computer Vision and Graphics, pp , 2002.] Task 1 Task 2 In Tree Out Quantitative attribute on nodes In Tree In Quantitative attribute on nodes Out Filtered Tree Removed unimportant parts What? In Tree Out Quantitative attribute on nodes Why? Derive What? In Tree In Quantitative attribute on nodes Out Filtered Tree Why? How? Summarize Reduce Topology Filter [Munzner (ill. Maguire), 2014] 47