Civic Impact through Data Visualization

May 24th, 2015

Formerly

@clearspandex

Formerly

@clearspandex

+

Currently

@clearspandex

Jonathan DinuVP of Academic Excellence, Galvanize

jonathan@galvanize.it@clearspandex

The Power of Data Visualization

@EdwardTufte

Graphical Excellence

“Excellence in statistical graphics consist of complex ideas communicated with clarity, precision, and

efficiency.”

-- Edward R. Tufte

@EdwardTufte

• The Power of Data Visualization

• Your Role as a Data Scientist

• Basics of Visual Theory

• The Data Visualization Process

• Narrative Structure

Outline

http://dashingdemo.herokuapp.com/sample

Dashboarding (BI)

http://www.facebookstories.com/stories/2200/data-visualization-photo-sharing-explosions

Data Art

http://blogs.kqed.org/lowdown/2013/11/12/traffic-waves

Explaining Complexity (through Simulation)

Eric Fischer, @enf

Tourists

Locals

https://www.flickr.com/photos/walkingsf/sets/72157624209158632/

Data Viz as Data Science

Communication

“Your best insight is only as good as your ability to communicate it to others.”

-- Jonathan Dinu

@clearspandex

Visual Encodings

Friday, July 18, 14

“Data graphics visually display measured quantities by means of the combined use of points, lines, a coordinate

system, numbers, symbols, words, shading, and color.”

-- Edward R. Tufte

Gestalt Principles

http://emeeks.github.io/gestaltdataviz/section1.html

Similarity Proximity

http://emeeks.github.io/gestaltdataviz/section1.html

http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html

Deconstructing a Data Visualization

HTML5 Canvas, SVG

D3.js, Processing, Python

Rickshaw, Vega

Chartio, ExcelAbstractions

@clearspandex

D3

Friday, July 18, 14

@clearspandex

Friday, July 18, 14

D3

@clearspandex

LIVE CODE

Process

COMPUTER SCIENCE INFOVISAND HCIGRAPHIC DESIGNMATHEMATICS, STATISTICS,

AND DATA MINING

acquire parse filter mine represent refine interact

Source: Ben Fry -- “Computational Information Design”

Iterative Process

COMPUTER SCIENCE INFOVISAND HCIGRAPHIC DESIGNMATHEMATICS, STATISTICS,

AND DATA MINING

acquire parse filter mine represent refine interact

Source: Ben Fry -- “Computational Information Design”

Process

COMPUTER SCIENCE INFOVISAND HCIGRAPHIC DESIGNMATHEMATICS, STATISTICS,

AND DATA MINING

acquire parse filter mine represent refine interact

Source: Ben Fry -- “Computational Information Design”

Exploratory Explanatory

http://mbtaviz.github.io/

Friday, July 18, 14

http://extremepresentation.typepad.com/blog/2006/09/choosing_a_good.html

http://map.datacanvas.org/

• Which chart type would you use to visualize air quality over time?

• Which chart would you use to compare the reading of a given location to other locations in the same city?

• Which chart would you use to represent the historic distribution of temperature for each hour of the day

• Which chart would you use to visualize how air quality, dust,

and UV all relate and change over time?

Exercise

Air Quality

Temperature

Noise

LIVE CODE

http://visualizations.manassra.com/syria

Data Narrative (Author Driven)

Data Narrative (Reader Driven)

Friday, July 18, 14

http://sanfrancisco.crimespotting.org/

• What are the narrative structures of each of the previous

two visualizations?

• What techniques does the author use to achieve this effect?

• What is the story being told?

• Anything that could be improved?

Exercise

Friday, July 18, 14

Friday, July 18, 14

Data Narrative (Reader Driven)

http://www.antievictionmappingproject.net/ellis.html

• What are the narrative structures of each of the previous

two visualizations?

• What techniques does the author use to achieve this effect?

• What is the story being told?

• Anything that could be improved?

Exercise

Civic Impact

Engagement(http://pulse.media.mit.edu/)

Empowerment

(https://recovers.org/)

(http://www.southbendvoices.com/)

• Talk to your partner about 3 potential “thesis” questions

• For each, come up with 2 exploratory questions

• Sketch a visualization that explores each thesis question

Exercise

Questions?

Thank You!

Jonathan Dinu

http://hopelessoptimism.com@clearspandex

Extra Slides

SVG

Selection Data

world_cup.tsv

Data Binding

SVG

Selection Data

world_cup.tsv

{ date: 27-5-1934 attendance: 25000 }

{ date: 27-5-1934 attendance: 16000 }

{ date: 31-5-1934 attendance: 23000 }

{ date: 31-5-1934 attendance: 12000 }

Data Binding

SVG

Selection Data

world_cup.tsv

{ date: 27-5-1934 attendance: 25000 }<circle></circle>

<circle></circle>

<circle></circle>

<circle></circle>

{ date: 27-5-1934 attendance: 16000 }

{ date: 31-5-1934 attendance: 23000 }

{ date: 31-5-1934 attendance: 12000 }

Data Binding

SVG

Selection Data

world_cup.tsv

{ date: 27-5-1934 attendance: 25000 }<circle></circle>

<circle></circle>

<circle></circle>

<circle></circle>

{ date: 27-5-1934 attendance: 16000 }

{ date: 31-5-1934 attendance: 23000 }

{ date: 31-5-1934 attendance: 12000 }

… …

Data Binding