Frontiers of

Computational Journalism
Columbia Journalism School
Week 7: Visualization
October 23, 2015

CS

Data

Reporting

CS

Data

CS

CS

CS

Reporting

CS

Data

CS

Eects

Filtering

CS

Reporting

visualization most commonly

here

User

Topic links in Gdel, Escher, Bach

Visualization allows people to ofoad cognition to the

perceptual system, using carefully designed images as a
form of external memory.

The human visual system is a very high-bandwidth
channel to the brain, with a signicant amount of
processing occurring in parallel and at the pre-conscious
level.

- Tamara Munzner

Pop-out effects

Visual Comparisons
length

size

orientation

color

...plus number, shape, relative motion, and much more

Basic idea of visualization:

Turn something you want to nd
into something you can see
without thinking about it

clusters

outliers

extents

correlations

Editorial choice in visualization

Data
o what data is chosen, what omitted, which sources

Visual representation
o encoding from data to picture

Annotations
o highlighting, text, notes

Interactivity
o order of presentation, what user can alter

Designing Visualizations

Some basic principles

Visual hierarchy
Color
Typography
Whitespace
Sketching


Visual Hierarchy


First rule of color:
Use only 2 or 3 colors

Use color to show meaning

It's not just decoration

Argentina Germany GOAL!


First rule of typography:
Keep it simple
you have a better idea
Helvetica or Arial unless
But font size is an important element of visual
hierarchy


Whitespace
Use empty space as a design element

Visual Metaphor

Images can mean something

Sketching
The way to make a good visualization is to try lots of
ideas quickly.

Draw the user in

User wont explore deeply if they dont learn something
immediately.

What does the user learn in
1 second
5 seconds
1 minute
5 minutes

Near and far view

 Near and Far view

Far view: big picture

 Near view: personal story

Misleading visualizations

Visualization isnt objective, but that doesnt mean you cant mislead.
(Is this graph misleading?)

Another misleading graph.

Interaction Design

How does the

user know what
to do? Tell
them!

How do you know if your design is

good?

Usability tesDng
Metrics tell you if there is a problem, but they dont tell you
why.

There is no subsDtute for watching your users interact with your
work.

Basic technique is think aloud. Ask the user to say what they
are thinking while they use your story.

Visualizing big data:

Don't show all the data

Don't show all the data

1. Filter: do not display all objects

Don't show all the data

1. Filter: do not display all objects
2. Summarize: combine multiple objects

Don't show all the data

1. Filter: do not display all objects
2. Summarize: combine multiple objects
3. Categorize: replace groups of similar objects with
concepts