Data Visualization Nikhil Srivastava, 2015

Nikhil Srivastava

Moringa School

Summer 2015

Data Visualization Nikhil Srivastava, 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

Class Summary

Data Visualization Nikhil Srivastava, 2015

Data Visualization is:

• Useful

– Answers questions

– Reduces workload

Data Visualization Nikhil Srivastava, 2015

Data Visualization is:

• Useful

• Important

– Understand structure

– Resolve ambiguity

– Locate outliers

Data Visualization Nikhil Srivastava, 2015

Data Visualization is:

• Useful

• Important

– Design decisions affect interpretation

Data Visualization Nikhil Srivastava, 2015

Data Visualization is:

• Useful

• Important

• Powerful

– Communicate

– Teach

– Inspire

Data Visualization Nikhil Srivastava, 2015

Data Visualization is:

• Useful

• Important

• Powerful

• Relevant

Data Visualization Nikhil Srivastava, 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

Data Visualization Nikhil Srivastava, 2015

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”

Data Visualization Nikhil Srivastava, 2015

Eye != Camera

Data Visualization Nikhil Srivastava, 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

Data Visualization Nikhil Srivastava, 2015

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

Data Visualization Nikhil Srivastava, 2015

Data TypesCATEGORICAL 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

= = = =

<  > < > < >

+ - + -

* /

Data Visualization Nikhil Srivastava, 2015

Channel Effectiveness

Data Visualization Nikhil Srivastava, 2015

Chart TypesSCATTER LINE

BAR PIE

Data Visualization Nikhil Srivastava, 2015

More Chart Types

• Stacked/Grouped Charts

• Treemap

• Multi-level Pie

• Heat Map

• Choropleth/Cartogram

Data Visualization Nikhil Srivastava, 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

Data Visualization Nikhil Srivastava, 2015

Design Principles

Data Visualization Nikhil Srivastava, 2015

Design Principles

• Integrity

– Tell the truth with data

• Effectiveness

– Achieve visualization objectives

• Aesthetics

– Be compelling, vivid, beautiful

Data Visualization Nikhil Srivastava, 2015

Examples

Data Visualization Nikhil Srivastava, 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

Data Visualization Nikhil Srivastava, 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

Data Visualization Nikhil Srivastava, 2015

The Ebb and Flow of Movies

NY Times, 2008

Advanced Visualizations

Data Visualization Nikhil Srivastava, 2015

Word Cloud - “Data Visualization” Wikipedia PageWordle

Data Visualization Nikhil Srivastava, 2015

ZIPScribbleRobert Kosara, 2006 

Data Visualization Nikhil Srivastava, 2015

Twitter NetworksPJ Lamberson, 2012

Data Visualization Nikhil Srivastava, 2015

Blogs

• Infosthetics.com

• Visualizing.org

• FlowingData.com

Data Visualization Nikhil Srivastava, 2015

Class Website

• Send me your final projects!

• Will be updated with future classes

Data Visualization Nikhil Srivastava, 2015

Nikhil Srivastava

Moringa School

Summer 2015