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 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 Due in 2 weeks 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”.
NO CLASS NEXT WEEK :(
Recap…
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!
JOHN’S BUTTON SOLUTION
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!
JOHN’S BOUNCING BALL SOLUTION
Today… Data Types Data Mapping
QUESTION… How do you design a data visualization?
WHAT IS A DATA VISUALIZATION? • A mapping of data attributes to visual attributes • What are data attributes? • What are visual attributes?
DATA
DATA DEFINITION A typical dataset in visualization consists of n records • (r 1 , r 2 , r 3 , … , r n ) • Each record r i consists of m (m >=1) observations or variables • (v 1 , v 2 , v 3 , … , v m ) • 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: • r i = (iv 1 , iv 2 , iv 3 , … , iv mi , dv 1 , dv 2 , dv 3 , … , dv md ) • where m = m i + m d •
DATA TYPE TAXONOMY • 1-D linear data types include: textual documents, • 2-D program source code, and • 3-D alphabetical lists of names which are • Temporal all organized in a sequential manner. • Multi-dimensional • Tree • Network The Eyes Have It, Shneiderman 1996
DATA TYPE TAXONOMY Attribute • 1-D • 2-D • 3-D • Temporal • Multi-dimensional • Tree • Network The Eyes Have It, Shneiderman 1996
DATA TYPE TAXONOMY • 1-D • 2-D • 3-D • Temporal Item • Multi-dimensional • Tree • Network The Eyes Have It, Shneiderman 1996
DATA TYPE TAXONOMY • 1-D • 2-D • 3-D • Temporal Cell • Multi-dimensional • Tree • Network The Eyes Have It, Shneiderman 1996
DATA TYPE TAXONOMY • 1-D real-world objects such as molecules, the human body, and buildings have • 2-D items with volume and some • 3-D potentially complex relationship with • Temporal other items. • Multi-dimensional • Tree • Network The Eyes Have It, Shneiderman 1996
DATA TYPE TAXONOMY • 1-D time lines are widely used and vital enough for medical records, project • 2-D management, or historical • 3-D presentations to create a data type • Temporal that is separate from 1-dimensional • Multi-dimensional data. • Tree • Network The Eyes Have It, Shneiderman 1996
DATA TYPE TAXONOMY • 1-D • 2-D • 3-D • Temporal • Multi-dimensional • Tree • Network The Eyes Have It, Shneiderman 1996
DATA TYPE TAXONOMY • 1-D • 2-D 4 or more dimensions • 3-D • Temporal • Multi-dimensional • Tree • Network The Eyes Have It, Shneiderman 1996
DATA TYPE TAXONOMY • 1-D • 2-D • 3-D • Temporal • Multi-dimensional • Tree • Network The Eyes Have It, Shneiderman 1996
DATA TYPE TAXONOMY • 1-D • 2-D • 3-D • Temporal • Multi-dimensional • Tree • Network The Eyes Have It, Shneiderman 1996
IS THIS COMPLETE?
QUESTIONS RELATED TO THIS?
DATA ATTRIBUTES
BASIC DATA ATTRIBUTES Def: A set of not-ordered and non- • Nominal numeric values • Ordinal • Scale / Quantitative For example: • Interval Categorical (finite) data • • {apple, orange, pear} • Ratio • {red, green, blue} Arbitrary (infinite) data • • {“1 Brookings Dr. St. Louis, MO”, “45 Wall St. New York NY”, …} • {“John Smith”, “Jane Doe”, …}
BASIC DATA ATTRIBUTES Def: A tuple (an ordered set) • Nominal • Ordinal For example: • Scale / Quantitative • Numeric • Interval • <2, 4, 6, 8> • Ratio • Binary • <0, 1> • Non-numeric • <G, PG, PG-13, R>
BASIC DATA ATTRIBUTES Def: A numeric range • Nominal • Ordinal • Interval • Scale / Quantitative Ordered numeric elements on a • scale that can be mathematically • Interval manipulated, but cannot be compared as ratios • Ratio 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 •
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
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.) •
ANY QUESTIONS?
Recommend
More recommend
