Data Visualization (CIS 468)

Transcription

1 Data Visualization (CIS 468) D3 + Marks & Channels Dr. David Koop

2 Tasks 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 Identify Compare Summarize Paths Spatial Data Shape What? Why? How? [Munzner (ill. Maguire), 2014] 2

3 Analyze: Discovery 3

4 Analyze: Present [M. Stefaner, 2013] 4

5 Analyze: Enjoy [Wattenberg, 2005, 5

6 Annotate [S. Lu, 2017] 6

7 Record 7

8 Derive exports imports trade balance trade balance = exports imports Original Data Derived Data [Munzner (ill. Maguire), 2014] 8

9 Search Location known Location unknown Target known Lookup Locate Target unknown Browse Explore What does a user know? Lookup: check bearings Locate: find on a map Browse: what s nearby Explore: where to go (patterns) [Munzner (ill. Maguire), 2014] 9

10 Query Identify Compare Summarize Number of targets: One, Some (Often 2), or All Identify: characteristics or references Compare: similarities and differences Summarize: overview of everything [Munzner (ill. Maguire), 2014] 10

11 Quiz Tuesday, October 2 Only part of class Format: - Multiple Choice - Short Answer (multi-part) Material: - Ch. 1-3, 5 - HTML, CSS, SVG, JavaScript, D3 Examples: - Given dataset, which attributes are categorical, ordered, quantitative? - What does the following expression evaluate to? [[1,2],[5,2]].map(d => d.reduce((s,t) => s+t)) 11

12 d3.js Overview Examples Documentation Source Data-Driven Documents D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3 s emphasis on web standards gives you the full capabilities of See more examples. modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. 12

13 D3 Data Joins Two groups: data and visual elements Three parts of the join between them: enter, update, and exit enter: s.enter(), update: s, exit: s.exit() Enter Update Exit Data Visual Elements 13

14 More D3 Original Slide Format: - Observable Notebook:

15 D3 v4+ vs. v3 v4+ breaks a lot of v3 code v4+ is more modular, can build libraries that include only the parts you care about - Why worry about this? Result is that there is a flat namespace now - d3.scale.linear => d3.scalelinear More important change: selections are immutable now - Used to be that enter() modified the selection to include any appended items - Use merge to explicitly merge the enter and update selections - s.enter().append("rect").merge(s) 15

16 D3 v3 Selections var circlebinding = svg.selectall("circle").data(data); circlebinding.style("fill", "blue"); // UPDATE circlebinding.enter().append("circle") // ENTER; modifies UPDATE!.style("fill", "green"); circlebinding // ENTER + UPDATE.style("stroke", "black"); 16

17 D3 v4 Selections var circlebinding = svg.selectall("circle").data(data); circlebinding.style("fill", "blue"); // UPDATE circlebinding.enter().append("circle") // ENTER; modifies UPDATE!.style("fill", "green");.merge(circlebinding) // ENTER + UPDATE.style("stroke", "black"); 17

18 Merge Merge creates a new selection that includes the items from both selections If you want to update all elements (including those just added via enter), use merge! 18

19 Transitions Nested transitions (those that "hang off" of a parent transition) follow immediately after the parent transition In v3, they had to be delayed accordingly 19

20 Visual Encoding 20

21 Visual Encoding How should we visualize this data? Name Region Population Life Expectancy Income China East Asia & Pacific India South Asia United States America Indonesia East Asia & Pacific Brazil America Pakistan South Asia Bangladesh South Asia Nigeria Sub-Saharan Africa Japan East Asia & Pacific Mexico America Philippines East Asia & Pacific Vietnam East Asia & Pacific Germany Europe & Central Asia Ethiopia Sub-Saharan Africa Turkey Europe & Central Asia

22 Potential Solution Bubbles FACTS TEACH ABOUT HOW TO USE Share! " # $ English years Color World Regions Select Search... Afghanistan Life expectancy Albania Algeria Andorra Angola Antigua and Barbuda Size Population, total Zoom 100% OPTIONS EXPAND PRESENT [Gapminder, Wealth & Health of Nations] 22

23 Another Solution Bubbles FACTS TEACH ABOUT HOW TO USE Share! " # $ English Size: Population, total Color World Regions Select Search... Afghanistan Albania Algeria Andorra Angola Antigua and Barbuda Argentina Armenia Australia Size Population, total OPTIONS EXPAND PRESENT [Gapminder, Wealth & Health of Nations] 23

24 What about change over years? 24

25 Another Solution showing trends over time Bubbles FACTS TEACH ABOUT HOW TO USE Share! " # $ English Income per person (GDP/capita, PPP$ inflation-adjusted) DATA DO United S Color World Regions 32k Russia 16k China Nigeria Show Search... Hide all shapes except: United States Russia Nigeria China Afghanistan Albania Algeria Andorra RESET FIND OPTIONS EXPAND PRESENT [Gapminder, Wealth & Health of Nations] 25

26 Visual Encoding How do we encode data visually? - Marks are the basic graphical elements in a visualization - Channels are ways to control the appearance of the marks Marks classified by dimensionality: Points Lines Areas Also can have surfaces, volumes Think of marks as a mathematical definition, or if familiar with tools like Adobe Illustrator or Inkscape, the path & point definitions 26

27 Visual Channels Position Color Horizontal Vertical Both Shape Tilt Size Length Area Volume [Munzner (ill. Maguire), 2014] 27