Data Visualization Concepts, Strategies, Examples and Tools

#dcdataviz Dave Leonard, Phase2 Technology
Friday, April 22, 2011

Welcome everyone, and thanks for coming out this evening.

I haven’t had the pleasure of meeting many of you, so I’d like to start off by introducing
myself so that you have an idea of where I’m coming from.

What I Do
Solutions Architect at Phase2 working on large-scale Drupal implementations

• Requirements Elicitation • User Exp and Info Arch • Customer Training
• Drupal Consulting • Content Migration Planning • Break Stuff (QA)

#dcdataviz

My formal education was in biological engineering, but I’ve always had an interest in
information technology.

My first job out of school was working at a DNA lab helping to build custom software used
for automated sample tracking and profile extraction.

My current job primarily involves eliciting requirements, driving stakeholder consensus,
exposing risks and dependencies, defining the nature of user interactions, laying the
groundwork for information architecture, and generally laying the tracks out in front of our
developers so that they can proceed unencumbered.

What I Don’t Do
Write code
Act pretentious

#dcdataviz

I’m not a developer, but I have a natural curiosity and want to know how things work on a
conceptual level.

I’m here to talk about things I’ve learned, trends I’m seeing, and experiences I’ve had.

My goal is to make sure that everyone here leaves with something tangible that they can use,
or a perspective that helps them think about things a different way.

Why We’re Here
Data visualization concepts, strategies, examples and tools (primarily open-source)

#dcdataviz

The Challenge
Massive amounts of data becoming available, how do we make sense of it all?

Semantic Web Open Government and Other Better Methods (i.e. APIs)
Transparency Initiatives

#dcdataviz

Data vs Display
“What” variables were measured vs “how” you visually represent them

#dcdataviz

Types of Data
Quantitative and qualitative

#dcdataviz Data vs Display

Quantitative
Data
Precise, standardized numerical measurements

3.75 mph average 98° 17’ 15” N, 45° 10’ 6” W 9.85 mi traveled
speed


Qualitative Data
Categorical data with varying degrees of precision

40% of Arlington residents are 60% of Arlington residents 87% of DC residents
satisfied with their living vote Democrat are US Citizens
situation


Using
Qualitative Data
Establish a quantifiable spectrum for collection and presentation
On a 1 - 10 scale, how satisfied are you with living in Arlington?

(1 = not satisfied, 5 = somewhat satisfied, 10 = extremely satisfied)


Display
“How” dimensions are visually represented (other than text)

Width Position (x,y,z) Color* Icons

Length Radius Opacity Shapes


Data + Display
Mapping data dimensions to visual representations intuitively

#dcdataviz

FATA: Inside Pakistan’s Tribal Regions
http://preparedness.interaction.org/

#dcdataviz Data + Display

Degree of Satisfaction = Bar Color
Number of Respondents = Bar Width

FATA: Inside Pakistan’s Tribal Regions

#dcdataviz Data + Display

Number of Drone Strikes ➔ Radius + Opacity
Pakistani Support for Drone Strikes ➔ Saturation
President who Ordered Drone Strikes ➔ Color

Visual Noise
Excessive visual stimuli that distract from the intended purpose

#dcdataviz

“
The most important consideration when
designing for efficiency is that every bit of visual content will
make it take longer to find any particular element in the
visualization.
- Noah Iliinsky, excerpted from “Beautiful Visualization: How To Make it Efficient”
http://is.gd/Qc1BWF

#dcdataviz Visual Noise

Don’t blame your data, blame your design.

“
You’re showing me a lot, but what are you
trying to say?
- Your Brain, excerpted from “Why Should I Care About What I’m Looking At?”



Here’s a resume that was done as an infographic. Pretty cool idea, right?

Apologies in advance to Michael, because I’m going to pick on him a bit.

What are we trying to prove here? Maybe this is unintentionally revealing?


Is this Noise?

Depends on the context of the audience and how the content is delivered.

If you are already in a particular station, you probably see a “you are here” symbol on the
map.

You are being exposed to this because you need to ﬁgure out where you are going, thus the
risk of losing the reader’s attention is relatively low.

Zoom in on a region

This map emphasizes the different lines as well as the stations on each line. Also important
are the zones crossed, which are shown subtly as alternating gray and white regions.

An interactive version would allow for reduction of clutter. Thinks like bicycle parking and
car ports would only be toggled on by those who need that information.

Presentations
Demonstrative vs investigative visualizations

Less User More User
Time Time
Demonstrative Investigative

#dcdataviz

Demonstrative
AUTHOR dictates your conclusions

#dcdataviz

#dcdataviz Demonstrative Presentations

Daily Media Diet - Wired Magazine
http://is.gd/IrRoHZ

#dcdataviz Demonstrative Presentations

Demonstrations can be interactive in a literal sense, in that you can touch/feel/use them.

Euclidian solid geometry visualization shown in Tufte’s “Beautiful Evidence”

Investigative
Empowering YOU to draw your own conclusions

#dcdataviz

#dcdataviz Investigative Presentations

Akamai Real-Time Global Network Traffic Monitor
http://is.gd/1Oueyq

Author doesn’t have a speciﬁc conclusion in mind beforehand (except maybe “there are a lot
more attacks than you think there are) since this is real-time data.

You draw your own conclusions from it...for example “it looks like recent network attacks are
most concentrated on the eastern seaboard.”

#dcdataviz Investigative Presentations

Pave The Way
Compelling demonstration spurs investigation

#dcdataviz

How do you cater to the average attention span while still allowing those who are interested
to really dive deep?

#dcdataviz Pave The Way

Tools Used
amCharts - Flash and Javascript/HTML5 charts, NOT open source

#dcdataviz Pave The Way

Here are some screenshots from a chart editing UI that someone like myself might use to
work with a client to design a chart to be implemented.

Open Source
Effective presentations built using freely-available, collaborative code

#dcdataviz

Mapping
Using open source tools

#dcdataviz

#dcdataviz Open Source Mapping

Pandemic Preparedness map for joint project of InterAction and USAID, showing public health
programs in vulnerable areas.


Map created by Development Seed, an open source development company that focuses on
building communication and visualization tools.

We work with Development Seed on several projects. I worked closely with them on the World
Food Programme’s main site, wfp.org.


Aid Projects in Haiti

Tools
MapBox, TileMill, and Tilestream

Highlighted Features:
• Attractive, custom tile designs
• Cloud-based storage/delivery of tiles
• iPad compatibility for offline viewing
Learn More:
• http://www.mapbox.com
• http://www.developmentseed.com


MapBox provides a suite of open source tools and services for creating and using custom
maps in the cloud.

TileMill leverages OpenLayers, Carto, and Mapnik (C++ based mapping application toolkit)

At Phase2, I worked on a data visualization project with a high-proﬁle federal agency that
utilized MapBox and OpenLayers to display state-speciﬁc data related to job creation
stemming from the Recovery Act legislation.

We automatically generated the locations of blog posts using natural language processing and
semantic tagging provided by a freely-available service called Open Calais, provided by
Thomson Reuters.

More MapBox

#dcdataviz


Map from Japanearthquakerecovery.org, a project of the Business Civic Leadership Center.

Uses open data from USGS and tile designs built with TileMill, an open-source map tile
design studio.

#dcdataviz More MapBox

Charting

#dcdataviz

Candlestick Chart

#dcdataviz Open Source Charting

Tools
jqPlot - A plotting and charting plugin for the jQuery Javascript framework

Highlighted Features: Candlestick Chart Code Sample:
• Tool tip support
• Drag and drop of data points in UI
• Computed trend lines
Learn More:
• http://is.gd/G3qXxT

#dcdataviz Open Source Charting

This is a visualization tool that we’re considering using for an upcoming project for a client in
the ﬁnancial services industry.

Trending

#dcdataviz

#dcdataviz Open Source Trending

Tools Used
flot - jQuery-based Javascript library

Highlighted Features: Learn More:
• Drupal integration via Flot module http://code.google.com/p/flot

• Interactive charts with tooltip Development Seed Blog Post
support http://is.gd/LvYXsM

• Panning and zooming capabilities

#dcdataviz Open Source Trending

Timelines

#dcdataviz

Timeplot - SIMILE Project

#dcdataviz Open Source Timelines

During World War 1, it became more difficult for people from Europe to emigrate.

After World War 1, more restrictive legislation on immigration was put into place, which kept
immigration levels lower moving forward.

They reached their lowest point during the Great Depression.

Tools Used
Timeplot - DHTML/AJAX-based widget for plotting time series and overlay time-
based events over them
Highlighted Features: Code Sample:
• Timelines
• Graphing
• Layering of event timelines with data
trending

Learn More:
• http://www.simile-widgets.org/
timeplot/

#dcdataviz Open Source Timelines

Infographics

#dcdataviz

#dcdataviz Open Source Infographics

This is a guy who took a trip Zlatibor, a mountain in Serbia.

http://www.brankovukelic.com/post/849444944/zlatibor-breathgiving-infographics

Inkscape - one of the leading open source SVG graphics editors

Wrap-Up

#dcdataviz

Takeaways
• Know your audience and be realistic about their attention span.
• Plan your presentation, THEN figure out what tools you need to execute it.
• Attractive visuals are useless without clearly-defined and executed goals
• An abundance of highly-capable, open-source tools is available for you to use and
improve.

#dcdataviz

Thank You!
Thanks to all who attended, and to these organizations who made this possible:

#dcdataviz

Data Visualization Concepts, Strategies, Examples and Tools

Recommandé

Recommandé

Contenu connexe

Similaire à Data Visualization Concepts, Strategies, Examples and Tools

Similaire à Data Visualization Concepts, Strategies, Examples and Tools (16)

Dernier

Dernier (20)

Data Visualization Concepts, Strategies, Examples and Tools

Notes de l'éditeur