From Data To Graphics

Data Visualization Nikhil Srivastava, 2015

Nikhil Srivastava

Moringa School

Summer 2015


• What is Data Visualization?

• Thinking and Seeing

• From Data to Graphics

• Principles and Guidelines

• Highcharts and Javascript

• Class Project

introduction

foundation & theory

building blocks

design & critique

construction

Last time …


Bandwidth of Our Senses

Why Vision?


The Software• High-level concepts: objects,

symbols

• Involves working memory

• Slow, sequential, conscious

• Sensory input

• Low-level features: orientation,

shape, color, movement

• Rapid, parallel, automatic

Visual Perception

“Bottom-up”

“Top-down”


Task: Counting

Slow, sequential, conscious

Rapid, parallel, automatic

1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686

1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686


Eye != Camera

http://www.purveslab.net/seeforyourself/index.html


Summary

• Human vision is constrained and imperfect

• Use “pre-attentive” attributes carefully

• Minimize unnecessary visual movement

• Layout and scope as important as

measurement







• Class Project

introduction

foundation & theory

building blocks

design & critique

construction


From Data to Graphics

What kind

of data do

we have?

How can we

represent the

data visually?

How can we

organize this into

a visualization?

Athi River Machakos 139,380

Awasi Kisumu 93,369

Kangundo-Tala Machakos 218,557

Karuri Kiambu 129,934

Kiambu Kiambu 88,869

Kikuyu Kiambu 233,231

Kisumu Kisumu 409,928

Kitale Trans-Nzoia 106,187

Kitui Kitui 155,896

Limuru Kiambu 104,282

Machakos Machakos 150,041

Molo Nakuru 107,806

Mwingi Kitui 83,803

Naivasha Nakuru 181,966

Nakuru Nakuru 307,990

Nandi Hills Trans-Nzoia 73,626

Visual Encoding


What kind

of data do

we have?

How can we

represent the

data visually?

How can we

organize this into

a visualization?


Awasi Kisumu 93,369







Kitui Kitui 155,896



Molo Nakuru 107,806

Mwingi Kitui 83,803





Data as Input


Awasi Kisumu 93,369







Kitui Kitui 155,896



Molo Nakuru 107,806

Mwingi Kitui 83,803




CleanRestructure

ExploreAnalyze

DATA

Visualization Goals


Model and Attribute

item attr_A attr_B … attr_Z

item1 value1_A value1_B …

item2 value2_A value2_B …

… … …

itemN valueN_Z


Data TypesCATEGORICAL ORDINAL NUMERICAL

Interval Ratio

Male / Female

Asia / Africa / Europe

True / False

Small / Med / Large

Low / High

Yes / Maybe / No

Latitude/Longitude

Compass direction

Time (event)

Length

Count

Time (duration)

= = = =

< > < > < >

+ - + -

* /


Data Types: Example

• Which are categorical? (=)

• Which are ordinal? (= < >)

ID Gender Test Score Grade Size Temperature

1 Male 77 C Small 36.5

2 Female 85 B Large 37.2

3 Female 95 A Medium 36.7

4 Male 90 A Large 37.4

• Which are interval? (= < > + -)

• Which are ratio? (= < > + - * /)


Data Type TransformationCATEGORICAL ORDINAL NUMERICAL

Interval Ratio

Male / Female

Asia / Africa / Europe

True / False

Small / Med / Large

Low / High

Yes / Maybe / No

Time

Latitude/Longitude

Compass direction

Time

Length

Count

Binning/Categorizing

Differencing/Normalization


Advanced Data Types

• Networks/Graphs

– Hierarchies/Trees

• Text

• Maps: points, regions, routes


What kind

of data do

we have?

How can we

represent the

data visually?

How can we

organize this into

a visualization?


Awasi Kisumu 93,369







Kitui Kitui 155,896



Molo Nakuru 107,806

Mwingi Kitui 83,803





Class Exercise

• How can I represent 3 and 5 on the

whiteboard?


Visual Encodings

Marks

point

line

area

volume

Channels

position

size

shape

color

angle/tilt


Channel Effectiveness


Channel Effectiveness

“Spatial position is such a good visual

coding of data that the first decision of

visualization design is which variables get

spatial encoding at the expense of others”


Color as a Channel

Categorical Quantitative

Hue Good (6-8 max)

Poor

Value Poor Good

Saturation Poor Okay


What kind

of data do

we have?

How can we

represent the

data visually?

How can we

organize this into

a visualization?


Awasi Kisumu 93,369







Kitui Kitui 155,896



Molo Nakuru 107,806

Mwingi Kitui 83,803





type mark channel data represented

Scatter Plot point position 2 quantitative



Scatter + Hue point position,color

2 quantitative, 1 categorical



Scatter + Size (“Bubble”)

point position,size

3 quantitative


Scatter Plot – Applications

CORRELATION GROUPING OUTLIERS


Scatter Plot – Dangers

OCCLUSION (DENSITY)

OCCLUSION (OVERLAP)

3-D



Line Chart line position(orientation)

2 quantitative



Area Chart area size (length) 2 quantitative


Line Chart – Applications

PATTERN OVER TIME COMPARISON


Line Chart – Dangers

Y SCALING

X SCALING

OVERLOAD



Bar Chart line size (length) 1 categorical,1 quantitative



Histogram line size (length) 1 ordinal/quantitative,1 quantitative (count)


Bar Chart – Applications

COMPARE CATEGORIES DISTRIBUTION


Bar Chart – Dangers

TOO MANY CATEGORIES

POORLY SORTED



Pie Chart area size (angle) 1 quantitative


Pie Chart – Dangers

AREA SCALE SIMILAR AREAS OVERLOAD


Multi-Series Bar Charts

GROUPED BAR CHART

STACKED BAR CHART


Multi-Series Line Charts

MULTIPLE LINE

STACKED AREA CHART


Normalization

NORMALIZED BAR NORMALIZED AREA


Small Multiples Chart


More Charts

Treemap (Hierarchical Data)

Channels: ?

Strengths:

nested relationships

Concerns:

order vs aspect ratio


More Charts

Multi-Level Pie(Hierarchical Data)

Channels: ?

Strengths:

nested relationships

Concerns:

readability


More Charts

Heat Map(Table/Field Data)

Channels: ?

Strengths: pattern/outlier detection

Concerns: ordering/ clustering


More Charts

Choropleth Map(Region Data)

Channels: ?

Strengths:

geography

Concerns:

region size

color spectrum


More Charts

Cartogram(Region Data)

Channels: ?

Strengths: geographic pattern

Concerns: base map knowledge







• Class Project

introduction

foundation & theory

building blocks

design & critique

construction


Highcharts: Review

• Basics

• Hello Chart

• API/Documentation

• Data import/manipulation


Highcharts Cloud

From Data To Graphics

Education

Transcript of From Data To Graphics