#14ntcdataviz: DataViz! Tips, Tools, and How-tos for Visualizing Your Data

39 %
61 %
Information about #14ntcdataviz: DataViz! Tips, Tools, and How-tos for Visualizing Your Data

Published on March 13, 2014

Author: annkemery

Source: slideshare.net

Description

Presentation by Ann K. Emery, Johanna Morariu, and Andrew Means at the 2014 Nonprofit Technology Conference in Washington, DC

DataViz! Tips, Tools, and How-tos for Visualizing Your Data #14NTCdataviz @annkemery @meansandrew @j_morariu

#14NTCdataviz Ann K. Emery @annkemery Andrew Means @meansandrew Johanna Morariu @j_morariu

Intro to Dataviz Dataviz Design Process Tools Case Studies

Intro to Dataviz

Human brains are wired to speak and understand spoken language. People have to be taught to read and write. Understanding the written word is not a natural human ability; but human brains do innately process shapes. Dataviz & the Human Brain

graphic design data/statistics Dataviz Skills

Case Studies

Keep it Simple (Stupid!) What I Did Wrong… -Created a non-intuitive visual -Tried to stuff too much into a single visual -Didn’t have a strong story What I Would Do Differently… -Either remove percentages or break each type into a different chart type -Simplify the story

Be Purpose Driven What I thought they wanted A network map of relationships (the data, pure and simple) What they really wanted A list of organizational relationships (the data, reduced to their question) What I learned Be purpose driven, not data or method driven

Focus on the End User The 3 Questions I Always Ask… What do they care about? What do they need to know? What do I want them to do with this information?

Dataviz Design Process

Dataviz Design Process 1 Reduce the clutter2 3 4 Directly label Emphasize key findings with color Summarize your story in the title5 Select your story 6 7 Are you doing it right? Share

Which chart is best for my data? Select your story Choose 1 finding (of many possible options) to highlight 1

Select your story Choose 1 finding (of many possible options) to highlight 1

charts & graphs infographics diagramspictures maps Ready AimFire Select your story Choose 1 finding (of many possible options) to highlight 1

Pie

Histogram

Clustered Bar

Line

Area

Stacked Bar

35% 48% 63% 80% 82% 85% 0% 20% 40% 60% 80% 100% Bar

0% 20% 40% 60% 80% 100% Dot Plot

0 20 40 60 80 100 0 20 40 60 80 100 Scatter Plot

0 20 40 60 80 100 0 20 40 60 80 100 Bubble Chart

Network Map

Geographic Maps

0 20 40 60 80 100 0 20 40 60 80 100 0 20 40 60 80 100 0 20 40 60 80 100 0 20 40 60 80 100 0 20 40 60 80 100 Dashboards

Select your story Choose 1 finding (of many possible options) to highlight 1

Select your story Choose 1 finding (of many possible options) to highlight 1

Select your story Choose 1 finding (of many possible options) to highlight 1

Select your story Choose 1 finding (of many possible options) to highlight 1

1 Reduce the clutter Remove or reduce the border, grid lines, and tick marks 2 0 20 40 60 80 100 0 20 40 60 80 100 0 20 40 60 80 100 0 20 40 60 80 100

Directly label Lose the legend—place details right next to the data 3 DC Maryland Virginia Category 1 Category 2 Category 3

Directly label Lose the legend—place details right next to the data 3 DC Maryland Virginia Category 1 Category 2 Category 3 DC Maryland Virginia Category 1 Category 2 Category 3

1 Emphasize key findings with color Guide the reader’s eye with your action color 4

Emphasize key findings with color Guide the reader’s eye with your action color 4

Summarize your story in the title Add captions or annotations when more details are needed 5

Summarize your story in the title Add captions or annotations when more details are needed 5

Summarize your story in the title Add captions or annotations when more details are needed 5

Summarize your story in the title Add captions or annotations when more details are needed 5

Are you doing it right? The Squint Test 6

Are you doing it right? The Squint Test 6

Are you doing it right? The Significant Other Test 6

Are you doing it right? The Significant Other Test 6

What does this chart mean to you? Are you doing it right? The Significant Other Test 6

No f—king clue. Are you doing it right? The Significant Other Test 6

[grrrrrrrrr] Are you doing it right? The Significant Other Test 6

I know! I’ll follow the Dataviz Design Process! Are you doing it right? The Significant Other Test 6

What does this chart mean to you? Are you doing it right? The Significant Other Test 6

The nonprofit is serving twice as many kids now compared to when they first opened! Are you doing it right? The Significant Other Test 6

Are you doing it right? The Squint Test & Significant Other Test 6

Are you doing it right? The Squint Test & Significant Other Test 6

Twitter Reports Handouts Presentations & Webinars Twitter Master Chart Reports Sharing7

Sharing Reports: Aim for variety 7

Sharing Reports: Aim for variety 7

Sharing Presentations: Show one piece at a time 7

Sharing Presentations: Show one piece at a time 7

Sharing Presentations: Show one piece at a time 7

Sharing Presentations: Show one piece at a time 7

Sharing Presentations: Show one piece at a time 7

Sharing Presentations: Show one piece at a time 7

Sharing Presentations: Show one piece at a time 7

Sharing Presentations: Show one piece at a time 7

Sharing Presentations: Show one piece at a time 7

Sharing Handouts: Emphasize your most important chart 7

Sharing Handouts: Emphasize your most important chart 7

Sharing Twitter: Add photos for context 7

0 20 40 60 80 100 0 20 40 60 80 100 0 20 40 60 80 100 0 20 40 60 80 100 0 20 40 60 80 100 0 20 40 60 80 100 Sharing Dashboards: Group charts thematically 7

Sharing Postcards: Hand-drawn okay 7

Sharing Postcards: Hand-drawn okay 7

Dataviz Design Process 1 Reduce the clutter2 3 4 Directly label Emphasize key findings with color Summarize your story in the title5 Select your story 6 7 Are you doing it right? Share

Before After

1 Select your story Choose 1 finding (of many possible options) to highlight 1 ‘07 ‘08 ‘09 ‘10 ‘11 ‘12 ABC Nonprofit 202 278 410 416 450 470 DEF Nonprofit 100 98 125 178 204 236

Select your story Choose 1 finding (of many possible options) to highlight 1

0 50 100 150 200 250 300 350 400 450 500 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year Number of Youth Served 1 Select your story Choose 1 finding (of many possible options) to highlight 1

0 50 100 150 200 250 300 350 400 450 500 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year Number of Youth Served 1 Reduce the clutter Remove or reduce the border, grid lines, and tick marks 2

0 50 100 150 200 250 300 350 400 450 500 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year Number of Youth Served 1 Reduce the clutter Remove or reduce the border, grid lines, and tick marks 2

0 50 100 150 200 250 300 350 400 450 500 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year Number of Youth Served 1 Reduce the clutter Remove or reduce the border, grid lines, and tick marks 2

'07 '08 '09 '10 '11 '12 Number of Youth Served by Year Number of Youth Served 1 Reduce the clutter Remove or reduce the border, grid lines, and tick marks 2

'07 '08 '09 '10 '11 '12 Number of Youth Served by Year Number of Youth Served 1 Reduce the clutter Remove or reduce the border, grid lines, and tick marks 2

'07 '08 '09 '10 '11 '12 Number of Youth Served by Year Number of Youth Served 1 Reduce the clutter Remove or reduce the border, grid lines, and tick marks 2

'07 '08 '09 '10 '11 '12 Number of Youth Served by Year Number of Youth Served 1 Directly label Lose the legend—place details right next to the data 3

'07 '08 '09 '10 '11 '12 Number of Youth Served by Year 1 Directly label Lose the legend—place details right next to the data 3

202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year 1 Directly label Lose the legend—place details right next to the data 3

202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year 1 Directly label Lose the legend—place details right next to the data 3

202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year 1 Directly label Lose the legend—place details right next to the data 3

1 Directly label Lose the legend—place details right next to the data 3 202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year

1 202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year Emphasize key findings with color Guide the reader’s eye with your action color 4

1 202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year Emphasize key findings with color Guide the reader’s eye with your action color 4

1 202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year Emphasize key findings with color Guide the reader’s eye with your action color 4

1 202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year Emphasize key findings with color Guide the reader’s eye with your action color 4

1 202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year Emphasize key findings with color Guide the reader’s eye with your action color 4

1 202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year Emphasize key findings with color Guide the reader’s eye with your action color 4

1 202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year Emphasize key findings with color Guide the reader’s eye with your action color 4

1 202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year Emphasize key findings with color Guide the reader’s eye with your action color 4

1 202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year Summarize your story in the headline Add captions or annotations when more details are needed 5

1 202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 Number of Youth Served by Year 5 Summarize your story in the headline Add captions or annotations when more details are needed

202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 1 Summarize your story in the headline Add captions or annotations when more details are needed 5

202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 1 ABC Nonprofit has more than doubled its services Summarize your story in the headline Add captions or annotations when more details are needed 5

202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 1 ABC Nonprofit has more than doubled its services Just six years after opening its doors, ABC Nonprofit is serving 470 students each year in the community—more than double the number of students they helped in 2007. Summarize your story in the headline Add captions or annotations when more details are needed 5

202 278 410 416 450 470 '07 '08 '09 '10 '11 '12 1 ABC Nonprofit has more than doubled its services Just six years after opening its doors, ABC Nonprofit is serving 470 students each year in the community—more than double the number of students they helped in 2007. Number of youth served by year, 2007-2012 Summarize your story in the headline Add captions or annotations when more details are needed 5

1 202 278 410 416 450 470 kids helped in 2012 '07 '08 '09 '10 '11 '12 ABC Nonprofit has more than doubled its services Just six years after opening its doors, ABC Nonprofit is serving 470 students each year in the community—more than double the number of students they helped in 2007. Number of youth served by year, 2007-2012 Summarize your story in the headline Add captions or annotations when more details are needed 5

Before After

Before After

Select your story Choose 1 finding (of many possible options) to highlight 1 2009 2010 2011 2012 Newsletters 24 24 18 12 Papers 6 6 4 4 Blog Posts 2 12 18 24 Presentations 4 8 9 8

Select your story Choose 1 finding (of many possible options) to highlight 1

0 5 10 15 20 25 30 2009 2010 2011 2012 # of publications/presentations Newsletters Papers Blog Posts Conference Presentations Select your story Choose 1 finding (of many possible options) to highlight 1

0 5 10 15 20 25 30 2009 2010 2011 2012 # of publications/presentations Newsletters Papers Blog Posts Conference Presentations Reduce the clutter Remove or reduce the border, grid lines, and tick marks 2

0 5 10 15 20 25 30 2009 2010 2011 2012 # of publications/presentations Newsletters Papers Blog Posts Conference Presentations Reduce the clutter Remove or reduce the border, grid lines, and tick marks 2

0 5 10 15 20 25 30 2009 2010 2011 2012 # of publications/presentations Newsletters Papers Blog Posts Conference Presentations Reduce the clutter Remove or reduce the border, grid lines, and tick marks 2

2009 2010 2011 2012 # of publications/presentations Newsletters Papers Blog Posts Conference Presentations Reduce the clutter Remove or reduce the border, grid lines, and tick marks 2

# of publications/presentations Newsletters Papers Blog Posts Conference Presentations Reduce the clutter Remove or reduce the border, grid lines, and tick marks 2

Directly label Lose the legend—place details right next to the data 3 # of publications/presentations Newsletters Papers Blog Posts Conference Presentations

Directly label Lose the legend—place details right next to the data 3 # of publications/presentations

Directly label Lose the legend—place details right next to the data 3 # of publications/presentations Blog posts Newsletters Presentations Papers

Directly label Lose the legend—place details right next to the data 3 24 24 18 12 6 6 4 4 2 12 18 24 4 8 9 8 # of publications/presentations Blog posts Newsletters Presentations Papers

Directly label Lose the legend—place details right next to the data 3 24 12 6 4 2 24 4 8 # of publications/presentations Blog posts Newsletters Presentations Papers

24 12 6 4 2 24 4 8 # of publications/presentations Blog posts Newsletters Presentations Papers Emphasize key findings with color Guide the reader’s eye with your action color 4

24 12 6 4 2 24 4 8 # of publications/presentations Blog posts Newsletters Presentations Papers Emphasize key findings with color Guide the reader’s eye with your action color 4

24 12 6 4 2 24 4 8 # of publications/presentations Blog posts Newsletters Presentations Papers Emphasize key findings with color Guide the reader’s eye with your action color 4

24 12 6 4 2 24 4 8 # of publications/presentations Blog posts Newsletters Presentations Papers Emphasize key findings with color Guide the reader’s eye with your action color 4

24 12 6 4 2 24 4 8 # of publications/presentations Blog posts Newsletters Presentations Papers Emphasize key findings with color Guide the reader’s eye with your action color 4

24 12 6 4 2 24 4 8 # of publications/presentations Blog posts Newsletters Presentations Papers Emphasize key findings with color Guide the reader’s eye with your action color 4

24 12 Newsletters 6 4 Papers 2013 4 8 Presentations # of publications/presentations 24 Blog posts Emphasize key findings with color Guide the reader’s eye with your action color 4 2009 2 Blog posts

24 12 Newsletters 6 4 Papers 2013 4 8 Presentations # of publications/presentations 24 Blog posts 2009 2 Blog posts Summarize your story in the title Add a caption and annotations when more details are needed 5

24 12 Newsletters 6 4 Papers 2013 4 8 Presentations 24 Blog posts 2009 2 Blog posts Summarize your story in the title Add a caption and annotations when more details are needed 5

24 12 Newsletters 6 4 Papers 2013 4 8 Presentations 24 Blog posts 2009 2 Blog posts Summarize your story in the title Add a caption and annotations when more details are needed 5

24 12 Newsletters 6 4 Papers 2013 4 8 Presentations 24 Blog posts 2009 2 Blog posts Summarize your story in the title Add a caption and annotations when more details are needed 5 Our communications strategy now focuses on blogging

Summarize your story in the title Add a caption and annotations when more details are needed 5 24 12 Newsletters 6 4 Papers 2013 4 8 Presentations 24 Blog posts 2009 2 Blog posts Our communications strategy now focuses on blogging Our readers are more receptive to social modes like blogging than passive modes like newsletters. Since 2009, we’ve produced half as many newsletters and put that content and energy into blogging.

Before After

Dataviz Design Process 1 Reduce the clutter2 3 4 Directly label Emphasize key findings with color Summarize your story in the title5 Select your story 6 7 Are you doing it right? Share

Tools

60% 33% 38% 47% 55% 78% 77% 68% 80% 59% 64% 80% 83% 88% 90% 93% 50% 39% 39% 47% 47% 50% 59% 70% Coalition A (n=32) Coalition B (n=29) Coalition C (n=34) Basic Functioning Ability to Learn Allies and Partnerships Champions Coalition Leadership Reputation and Visibility Sustainability Overall Coalition A is doing better than Coalitions B and C Across all seven sections of the Coalition Assessment Tool, Coalition A scored higher than Coalitions B and C. How can the technical assistance providers strengthen Coalitions B and C? Excel Tutorials: annkemery.com/excel

Excel Tutorials: annkemery.com/excel

Pros: -Free -Powerful -Open Source Cons: -Steep learning curve for non-programmers -Need to know what you’re building R

Pros: -Free -Easy to learn Cons: -Data privacy concerns Google Fusion Tables

Pros: -Beautiful -Powerful -Free -Open-source Cons: -Steep learning curve for non-programmers -Need to know what you’re building D3.js

Pros: -Powerful -Beautiful -Easy to Use -Drag & Drop Cons: -Can be cost prohibitive Tableau

Pros: -Powerful -Industry Standard Cons: -Can be cost prohibitive -Steep learning curve -Not always visually appealing ArcGIS

34 states and DC were represented At ABC Foundation’s national convening last month, the attendees represented 34 states and DC. Michigan, Illinois, and Texas were heavily represented, with 91, 47, and 46 attendees each. Maps presentationmagazine.com/editable-maps

Maps presentationmagazine.com/editable-maps

Alaska Hawaii Maps presentationmagazine.com/editable-maps

Social network maps NodeXL tutorial: slideshare.net/j_morariu

Social network maps NodeXL tutorial: slideshare.net/j_morariu

1stepGet NodeXL

2stepOpen NodeXL

3stepImport data

3stepImport data

3stepImport data

4stepVisualize

4stepVisualize

4stepVisualize @j_morariu

Books edwardtufte.com

Blogs storytellingwithdata.com

Twitter twitter.com/annkemery/lists/dataviz @PostGraphics @NYTgraphics @WSJgraphics

thumbsupviz.com & @thumbsupviz Tumblr gallery of great charts

Next Steps

Start Small

Build Capacity & Skills

Use the Right Dataviz Tool

Thank you! Ann K. Emery @annkemery Andrew Means @meansandrew Johanna Morariu @j_morariu

#14ntcdataviz presentations

Add a comment

Related presentations

Related pages

Ann's Blog | Dataviz! Tips, Tools, and How-Tos for ...

Dataviz! Tips, Tools, ... www.nten.org/articles/2014/dataviz-tips-tools-and-how-tos-for-visualizing-your-data. ... #14NTCdataviz: Dataviz! Tips, Tools, ...
Read more

DataViz! - Innovation Network

DataViz! Tips, Tools, and How-tos for Visualizing Your Data #14NTCdataviz Color Color Hex color information and color schemescolorhexa.com Color Oracle ...
Read more

#14ntcdataviz: DataViz! Tips, Tools, and How-tos for ...

#14ntcdataviz: DataViz! Tips, Tools, and How-tos for Visualizing Your Data [Resource Handout]
Read more

#14ntcdataviz: DataViz! Tips, Tools, and How-tos for ...

Home; Documents #14ntcdataviz: DataViz! Tips, Tools, and How-tos for Visualizing Your Data [Resource Handout]
Read more

14NTC Presentation: DataViz! Tips, Tools, and How-tos for ...

14NTC Presentation: DataViz! Tips, Tools, and How-tos for Visualizing Your Data
Read more

Data Visualization Approaches for Program Evaluation (and ...

Data Visualization Approaches for Program Evaluation ... for Visualizing Your Data" (#14ntcdataviz) ... Tips, Tools, and How-tos for Visualizing Your Data ...
Read more

Dataviz | LinkedIn

Big Data & Dataviz! View More View Less. ... Tips, Tools, and How-tos for Visualizing Your ... DataViz! Tips, Tools, and How-tos for Visualizing Your ...
Read more