Вебинар «Интерактивная визуализация данных при...

Preview:

Citation preview

Have a look at the speech by infogr.am co-founder Uldis Leiterts

Human brain process visual information 60,000 times

faster then textual

The New York City metropolitan area is home to the largest Jewish community outside Israel. It is also home to nearly a quarter of the nation's Indian Americans and 15% of all Korean Americans and the largest Asian Indian population in the Western Hemisphere; the largest African American community of any city in the country; and including 6 Chinatowns in the city proper, comprised as of 2008 a population of 659,596 overseas Chinese, the largest outside of Asia. New York City alone, according to the 2010 Census, has now become home to more than one million Asian Americans, greater than the combined totals of San Francisco and Los Angeles. New York contains the highest total Asian population of any U.S. city proper. 6.0% of New York City is of Chinese ethnicity, with about forty percent of them living in the borough of Queens alone. Koreans make up 1.2% of the city's population, and Japanese at 0.3%. Filipinos are the largest southeast Asian ethnic group at 0.8%, followed by Vietnamese who make up only 0.2% of New York City's population. Indians are the largest South Asian group, comprising 2.4% of the city's population, and Bangladeshis and Pakistanis at 0.7% and 0.5%, respectively. / Demographics of New York, Wikipedia

700 000

0

Internal study by DC Thomson

Interactive charts increase reader engagement by over

60%

abcabc Information Classification

Infogr.am use and effect on engagement times

Ave

rage

Dw

ell T

ime

(s)

0

48

95

143

190

Standard Article With Infographic

62.5% Increase

abcabc Information Classification

Perc

enta

ge o

f U

sers

0,00%

25,00%

50,00%

75,00%

100,00%

Baseline 25% of Page 50% of page 75% of page 100% of page

70% Improvement

132% Improvement

238% Improvement

317% Improvement

Page Scroll Depth improvements

abcabc Information Classification

Why engagement is important

Page

s a

user

vis

its

Average time on a page

These clients use custom designed templates created by our designers

How can communicators make use of it?

Use in articlesUse in industry

reportsExplain/instruct

+

Visualize data yourself

BarComparing things

like income?

LineGet some lengthy

data like oil prices?

AreaWant to show contents

of e.g. exports?

MapNeed to show a

country comparison?

MoreChoose yours!

Data Visualization 101

One dimension Two dimensions Three+ dimensions

Bar

LineAreaPie Picto

Scatterplot

Bubble

Comparison Tendency/Relations Comparison/ Relationships

Map

Categories

Valu

e =

leng

th

http://www.nielsen.com/us/en/insights/reports/2015/the-sustainability-imperative.html

Most often the best choice. Good to show differences in values that don’t add up to 100%.

Poor choice for showing time- series data, as the line charts have a smoother representation.

BarComparing things

like income?

100° = 28% 50° =

14%

55° = 15%

55° = 15%100° = 28%

3,6° = 1%

http://www.euronews.com/2015/06/05/live-turkish-parliamentary-election/

http://www.portland-communications.com/publications/the-new-model-corporate-affairs-director/the-rise-of-the-corporate-affairs-director/

Good for showing contrast when two or three components of something differ greatly in size.

Bad choice if you have more than three variables or if their values are similar in size.

PieNeed to show a

country comparison?

1 icon = x

7x 4x

6x

16x

http://www.portland-communications.com/publications/the-new-model-corporate-affairs-director/six-rules-for-crisis-readiness/

Works well with 2-3 groups of people compared and when differences are significant.

A line chart is a better option with more than three groups and when differences are small.

PictoNeed to show a

country comparison?

Time

Valu

e

http://www.politico.com/story/2015/09/donald-trump-popularity-waning-data-213806

Line

Get some lengthy data like oil prices?

Best choice for time-series data and highlighting trends, with not more than three sets per chart.

May be visually misleading when attempting to show data that is not based on time-series.

LineGet some lengthy

data like oil prices?

Time

Valu

e +

valu

e

http://impact.mariestopes.org/results/

Good to show how a certain variable grows/drops relative to others over a period of time.

Careful when choosing between basic and stacked layouts, as they give different impressions.

AreaWant to show contents

of e.g. exports?

Varia

ble

1

Variable 2

https://infogr.am/Scatterplot-sleepenergymood

Good to find out how much one variable depends on other e.g. how strongly does it correlate.

Careful when choosing variables that don’t correlate, as result can be meaningless.

ScatterDetect what is more

profitable

Varia

ble

1

Variable 2

Volume

More 1 More 2

Less 1 More 2

More 1 Less 2

Less 1 Less 2

https://infogr.am/grade-distributions-bubble

https://infogr.am/eczema-bubble-map

The best to understand social, economical, medical, and other scientific relationships.

Make sure your audience can read the chart.

BubbleCompare values and show relationships

http://www.euronews.com/2015/09/16/which-european-countries-offer-the-most-social-benefits-to-migrants/

Heatmap Grouping Points

Compare between max and min values

Group countries according to essential criteria

Compare all the values assigned to particular territories https://www.transparency.it/monitoriamo/

http://www.euronews.com/2015/05/25/who-gets-the-most-public-holidays-in-

the-euhttp://www.politico.com/magazine/story/2015/08/democratic-blues-121561

#InfogramStory

How to make

data go viral?

Data Storytelling

Data

What can you use?

Audience

How can you surprise them?

Message Simplicity

StorySimple Unexpected Concrete Credible Emotional

What to look for in data?

Trends Contrast Outliers

#InfogramStory

Start asking questions. Data will tell you the answers.

Data

What can you use?

Audience

How can you surprise them?

Message Simplicity

StorySimple Unexpected Concrete Credible Emotional

#InfogramStory

Relevance

If a story is not about the hearer, he will not listen.

John Steinbeck, East of Eden

Say what?Know your Message

Who cares?Know your Audience

You need to have both answers before switching on the tool.

Relevance is threefold

The stickiest stories convince rationally, touch emotionally and generate conversations.

Rational Relevance

Emotional Relevance

Social Relevance

Data

What can you use?

Audience

How can you surprise them?

Message Simplicity

StorySimple Unexpected Concrete Credible Emotional

#InfogramStory

Know your audienceTo make a good story you have to put yourself in the shoes of the listener.

All you may

need is a

Simple

Unexpected

Concrete

Credentialed Emotional

Shareable

Story.

Getting your idea across in one sentence. Then using as little data as possible to prove that.

Simple?

https://infogr.am/got-water-3757588?src=web

Simple?

Less is always more.Do:

Simple?

Don't:Less is always more.

https://infogr.am/scottish-social-media-charts?src=web

Unexpected?

Violate people’s expectations.

Be counterintuitive. Use surprise, an emotion whose function is to increase alertness and cause focus. You must systematically keep opening gaps in viewer’s knowledge and then fill those gaps.

Unexpected?

Do:

https://infogr.am/lmyl-economic-impact?src=web

Unexpected?

Don't:

http://infogr.am/Facebook-dominates-social-sharing?src=web

Concrete

Speaking concretely is the only way to ensure our idea means the same thing to everyone.Naturally sticky ideas are full of concrete images because our brains are wired to remember concrete data.

Concrete

Use clear (visual) metaphors

Do:

https://infogr.am/are-you-1-in-200?src=web

Concrete

Don't:…confuse the reader

https://infogr.am/survey-results-70?src=web

Sticky ideas have to carry their own credentials. “Before you vote, ask yourself if you are better off today than you were four years age”.

Always use citations, references, quotes and don’t be afraid of name-dropping.

Credible?

Credible?

Quote. Refer. Repeat.Do:

http://infogr.am/Gas-Safety-Week-1?src=web

Credible?

http://infogr.am/goodbye-yellow-brick-road?src=web

Don't:…forget to source the data

Emotional?There are somewhat five main types of emotion.

Sadness Anger Surprise Fear Joy

*/Steven Handel/

Emotional?

http://infogr.am/Ana-Just-Wants-To-Be-Safe?src=web

Pick from five types of emotions

Do:

Emotional?

Don't:…just report

Sharable

Think of an infographic as a mean to hook readers and drive people back to your site to learn more. Don’t forget about the nature of the social media you are posting on.

Decide what's your purpose for sharing to find the best strategy

Reach more people Boost conversations Generate leads

Make your data driven content go viral

Try to be controversial about the subject and leave some room for conversation

Emphasise and think about the value they will get in return for engaging with your company.

Think about the nature of sharing platform

Best reach achieved with auto-generated thumbnails

The best strategy is to publish the chart or infographic on your site and share the article

Thursdays and Fridays are the best days to post in general

Best image size - 1024 x 512 px or 800 x 800 px

Images on Twitter drive 18% more clicks, 89% more favourites and 150% more retweets

Image takes 23 characters from 140 total characters you have

You can post multiple times a day

Best image size is 1024 x 512 px

More suitable for sharing useful resources and industry news

The links shared on status updates will generate thumbnail images that are maximum 180 by 110 px

Be smart about the infographic title and the meta description you provide just before publishing

Best image size starting from 350 x 350 px

Ability to create “circles” and “hangouts” for more personal communication

The minimal width and height requirements on G+ are 506 by 303 px

If the image is smaller it will be shrinked to a small thumbnail

The perfect dimensions for the full infographic are 426 x 2048 px

#1 for visual content discovery

Short links are often marked as spam and hashtags may even redirect traffic away from your site

Best if an aspect ratio between 2:3 and 3:5 is used

Share infographics with 235 px width minimum

eBook “How to Share Charts & Infographics on Social Media”

Download the eBook

http://marketing.infogr.am/infographics-social-media

#InfogramStory

Thank you!@infogram