Principles And Guidelines

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 …


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

= = = =

< > < > < >

+ - + -

* /


Channel Effectiveness


Scatter Plot – Applications

CORRELATION GROUPING OUTLIERS


Line Chart – Applications

PATTERN OVER TIME COMPARISON


Bar Chart – Applications

COMPARE CATEGORIES DISTRIBUTION


type mark channel data represented

Pie Chart area size (angle) 1 quantitative


Advanced Chart Types

• Stacked/Grouped Charts

• Treemap

• Multi-level Pie

• Heat Map

• Choropleth/Cartogram







• Class Project

introduction

foundation & theory

building blocks

design & critique

construction


From Science to Art

• Design principles*

• Style guidelines*

*dependent on visualization context

and objective (and author)


Design Principles


Design Principles

• Integrity

– Tell the truth with data

• Effectiveness

– Achieve visualization objectives

• Aesthetics

– Be compelling, vivid, beautiful


Integrity

Lie Ratio = size of effect in graphic

size of effect in data


Integrity


Integrity

“show data variation, not design variation”


Effectiveness*

Data/Ink Ratio = ink representing data

total ink

*according to Tufte


Effectiveness* *according to Tufte

avoid “chartjunk”


Avoid Chart Junk


Avoid Chart Junk


Avoid Chart Junk


Avoid Chart Junk


Avoid Chart Junk


Avoid Chart Junk


Effectiveness (Few)

https://speakerdeck.com/cherdarchuk/remove-to-improve-the-data-ink-ratio


Practical Guidelines

• Avoid 3-D charts

• Focus on substance over graphics

• Avoid separate legends and keys

• Make grids/labeling faint

• Avoid unnecessary textures and colors


Color Guidelines

• To label

• To emphasize

• To liven or decorate


Bad Color


Good Color


More Color Guidelines

• Use color only when necessary

• Use saturated colors for data labels, thin

lines, small areas

• Use less saturated colors for large areas,

backgrounds

• Use tools like ColorBrewer


Critique #1


Critique

#2







• Class Project

introduction

foundation & theory

building blocks

design & critique

construction


Data Import and Manipulation

• basic_charts.js







• Class Project

introduction

foundation & theory

building blocks

design & critique

construction


Homework #5 – Due Today

• What is the message of the visualization? What are the user

tasks or questions you are answering?

• What is the exact data source? This should not be a complex

database but only the specific fields and items that will be

included in your final visualization. (Email me a link to the full

data set or a sample.)

• Which visual channels and chart types do you plan on using

in your visualization? Provide a summary or sketch.


Timeline

Today

– Clean, process, restructure data

– Import into Highcharts (JSON or otherwise)

Next Tuesday

– Working draft of visualization

Next Thursday

– Finalize visualization

– Presentations


Office Hours

Monday: 3-9PM

Tuesday: 5-9PM

Thursday: 3-6PM

Education

Principles And Guidelines