INFORMATION VISUALIZATION Alvitta Ottley Washington University in - - PowerPoint PPT Presentation

▶
information visualization
SMART_READER_LITE
LIVE PREVIEW

INFORMATION VISUALIZATION Alvitta Ottley Washington University in - - PowerPoint PPT Presentation

Aug 21, 2022 309 likes •674 views

CSE 557A | Sep 14, 2016 INFORMATION VISUALIZATION Alvitta Ottley Washington University in St. Louis CSE 557A: INFORMATION VISUALIZATION 1 Assignment 1: Bar and Line Chart Due: 09-28-2016, 11:59pm (midnight) In this assignment, you will be

slide-1
SLIDE 1

INFORMATION VISUALIZATION

Alvitta Ottley Washington University in St. Louis CSE 557A | Sep 14, 2016

slide-2
SLIDE 2

CSE 557A: INFORMATION VISUALIZATION 1 Assignment 1: Bar and Line Chart Due: 09-28-2016, 11:59pm (midnight) In this assignment, you will be using Processing to draw a bar chart and a line chart. This is your first assignment with Processing and you will be learning the basics of Processing such as, handling mouse events, basic intersection detection, and keeping track of the state of the

  • visualization. You will be required to display a visualization based on input data, and there

are a few concepts that you need to explore: (1) reading and parsing data; (2) mouse hovering for highlighting visual elements. Basic Requirements:

  • 1. You will be given a simple comma delimited file (CSV) called “data.csv”. This file will have

the following properties:

  • a. It has two columns, the first column contains categorical (ordinal) data, and the

second column contains quantitative data.

  • b. The first row has labels for each column.
  • c. There are around 10 rows of data.
  • 2. In Processing, do the following:
  • a. Parse the CSV file and read in the data
  • b. The canvas should display the data in the CSV file as a bar chart as default. The bar

chart should display each data item as a bar. c. The axes need to be labeled using the labels from the first row of the CSV file. The X- axis should display the categorical data and the Y-axis should display the as “(Apple, 12)”, showing both x be “cut off”.

Due in 2 weeks

slide-3
SLIDE 3

NO CLASS NEXT WEEK :(

slide-4
SLIDE 4

Recap…

slide-5
SLIDE 5
slide-6
SLIDE 6

IN-CLASS EXERCISE: DRAW A BUTTON

  • Draw a button (size and location unspecified)
  • Choose a color for your button
  • Choose some text to be placed on your button
  • Clicking the button should change the color of your button. A subsequent click

should revert the color to the previous one.

  • Clicking outside of the button should do nothing.
  • Creativity encouraged!
slide-7
SLIDE 7

JOHN’S BUTTON SOLUTION

slide-8
SLIDE 8

IN-CLASS EXERCISE: BOUNCING BALL

  • Draw a ball (size and initial location unspecified)
  • Choose a color for your ball
  • Your ball should appear to be bouncing (directionality and speed unspecified)
  • Your ball should not leave the canvas while bouncing
  • Creativity encouraged!
slide-9
SLIDE 9

JOHN’S BOUNCING BALL SOLUTION

slide-10
SLIDE 10

Today…

Data Types Data Mapping

slide-11
SLIDE 11

QUESTION…

How do you design a data visualization?

slide-12
SLIDE 12

WHAT IS A DATA VISUALIZATION?

  • A mapping of data attributes to visual attributes
  • What are data attributes?
  • What are visual attributes?
slide-13
SLIDE 13

DATA

slide-14
SLIDE 14

DATA DEFINITION

  • A typical dataset in visualization consists of n records
  • (r1, r2, r3, … , rn)
  • Each record ri consists of m (m >=1) observations or variables
  • (v1, v2, v3, … , vm)
  • A variable may be either independent or dependent
  • Independent variable (iv) is not controlled or affected by another variable
  • For example, time in a time-series dataset
  • Dependent variable (dv) is affected by a variation in one or more associated

independent variables

  • For example, temperature in a region
  • Formal definition:
  • ri = (iv1, iv2, iv3, … , ivmi , dv1, dv2, dv3, … , dvmd)
  • where m = mi + md
slide-15
SLIDE 15

DATA TYPE TAXONOMY

  • 1-D
  • 2-D
  • 3-D
  • Temporal
  • Multi-dimensional
  • Tree
  • Network

The Eyes Have It, Shneiderman 1996

linear data types include: textual documents, program source code, and alphabetical lists of names which are all organized in a sequential manner.

slide-16
SLIDE 16

DATA TYPE TAXONOMY

  • 1-D
  • 2-D
  • 3-D
  • Temporal
  • Multi-dimensional
  • Tree
  • Network

The Eyes Have It, Shneiderman 1996 Attribute

slide-17
SLIDE 17

DATA TYPE TAXONOMY

  • 1-D
  • 2-D
  • 3-D
  • Temporal
  • Multi-dimensional
  • Tree
  • Network

The Eyes Have It, Shneiderman 1996 Item

slide-18
SLIDE 18

DATA TYPE TAXONOMY

  • 1-D
  • 2-D
  • 3-D
  • Temporal
  • Multi-dimensional
  • Tree
  • Network

The Eyes Have It, Shneiderman 1996 Cell

slide-19
SLIDE 19

DATA TYPE TAXONOMY

  • 1-D
  • 2-D
  • 3-D
  • Temporal
  • Multi-dimensional
  • Tree
  • Network

The Eyes Have It, Shneiderman 1996

real-world objects such as molecules, the human body, and buildings have items with volume and some potentially complex relationship with

  • ther items.
slide-20
SLIDE 20

DATA TYPE TAXONOMY

  • 1-D
  • 2-D
  • 3-D
  • Temporal
  • Multi-dimensional
  • Tree
  • Network

The Eyes Have It, Shneiderman 1996

time lines are widely used and vital enough for medical records, project management, or historical presentations to create a data type that is separate from 1-dimensional data.

slide-21
SLIDE 21

DATA TYPE TAXONOMY

  • 1-D
  • 2-D
  • 3-D
  • Temporal
  • Multi-dimensional
  • Tree
  • Network

The Eyes Have It, Shneiderman 1996

slide-22
SLIDE 22

DATA TYPE TAXONOMY

  • 1-D
  • 2-D
  • 3-D
  • Temporal
  • Multi-dimensional
  • Tree
  • Network

The Eyes Have It, Shneiderman 1996

4 or more dimensions

slide-23
SLIDE 23

DATA TYPE TAXONOMY

  • 1-D
  • 2-D
  • 3-D
  • Temporal
  • Multi-dimensional
  • Tree
  • Network

The Eyes Have It, Shneiderman 1996

slide-24
SLIDE 24

DATA TYPE TAXONOMY

  • 1-D
  • 2-D
  • 3-D
  • Temporal
  • Multi-dimensional
  • Tree
  • Network

The Eyes Have It, Shneiderman 1996

slide-25
SLIDE 25

IS THIS COMPLETE?

slide-26
SLIDE 26

QUESTIONS RELATED TO THIS?

slide-27
SLIDE 27

DATA ATTRIBUTES

slide-28
SLIDE 28

BASIC DATA ATTRIBUTES

  • Nominal
  • Ordinal
  • Scale / Quantitative
  • Interval
  • Ratio

Def: A set of not-ordered and non- numeric values For example:

  • Categorical (finite) data
  • {apple, orange, pear}
  • {red, green, blue}
  • Arbitrary (infinite) data
  • {“1 Brookings Dr. St. Louis, MO”,

“45 Wall St. New York NY”, …}

  • {“John Smith”, “Jane Doe”, …}
slide-29
SLIDE 29

BASIC DATA ATTRIBUTES

  • Nominal
  • Ordinal
  • Scale / Quantitative
  • Interval
  • Ratio

Def: A tuple (an ordered set) For example:

  • Numeric
  • <2, 4, 6, 8>
  • Binary
  • <0, 1>
  • Non-numeric
  • <G, PG, PG-13, R>
slide-30
SLIDE 30

BASIC DATA ATTRIBUTES

  • Nominal
  • Ordinal
  • Scale / Quantitative
  • Interval
  • Ratio

Def: A numeric range

  • Interval
  • Ordered numeric elements on a

scale that can be mathematically manipulated, but cannot be compared as ratios

  • For example: date, current time

(Sept 14, 2010 cannot be described as a ratio of Jan 1, 2011)

  • Ratio
  • where there exists an “absolute

zero”

  • For example: height, weight
slide-31
SLIDE 31

BASIC DATA ATTRIBUTES (FORMAL)

  • Nominal (N)

{…}

  • Ordinal (O)

<…>

  • Scale / Quantitative (Q)

[…]

  • Q → O
  • [0, 100] → <F, D, C, B, A>
  • O → N
  • <F, D, C, B, A> → {C, B, F, D, A}
  • N → O (??)
  • {John, Mike, Bob} → <Bob, John, Mike>
  • {red, green, blue} → <blue, green, red>??
  • O → Q (??)
  • Hashing?
  • Bob + John = ??

Readings in Information Visualization: Using Vision To Think. Card, Mackinglay, Schneiderman, 1999

slide-32
SLIDE 32

OPERATIONS ON BASIC DATA ATTRIBUTES

  • What are the operations that we can perform on these data types?
  • Nominal (N)
  • = and ≠
  • Ordinal (O)
  • >, <, ≥, ≤
  • Scale / Quantitative (Q)
  • everything else (+, -, *, /, etc.)
slide-33
SLIDE 33

ANY QUESTIONS?

slide-34
SLIDE 34