Visualizing Data: Making Sense of an Information-Rich World

Visualizing Data: Making Sense of an Information-Rich World

Diego Maranandmaranan@upou.edu.ph Faculty of Information and Communication Studies UP Open University

Visualization of del.icio.us tags is courtesy of kaeru on Flickr.com and is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.0 Generic license. I assert that any use of copyrighted images in this presentation constitutes acceptable use because they are low-resolution copies, do not limit in any way the copyright owners to sell the images or

products they represent, are identified and referenced clearly, and are used only to illustrate arguments central to this presentation.Non-copyrighted portions of this presentation are licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Philippines License.

MMS 100, 1st Semester, 2008

Objectives

Use examples to demonstrate the usefulnessand effectiveness of visualizations

MODEL FOR YOUR PROJECTS?

THEN

Outline considerations in creating visualizations

CLASSIFY VISUALIZATIONS

PRESENT A SIMPLIFIED OVERVIEW OF CREATING VISUALIZATIONS

HIGHLIGHT SOME SOPHISTICATED NON-WEB 2.0 VISUALIZATION TOOLS

THEN

Visualize some data from Noli Me Tangere

BASED ON A STATISTICAL ANALYSIS PRESENTED BY BENEDICT ANDERSON'S WHY COUNTING COUNTS (ADMU PRESS, 2008)

FINALLY

Suggest discussion topics and activities

Prologue: Information Design

“ Information design tells a story with pictures.

It can tell “how many?” “when?” or “where?”

It can show trends over time, compare elements or reveal hidden patterns.

It brings form and structure to information.

It is not the same as graphic design, nor is it only about making something aesthetically pleasing.

It is not about branding, style, making a glossy product or something that looks “corporate.”

From John Emerson. (2008, January). Visualizing Information for Advocacy: An Introduction to Information Design. Tactical Technology Collective. Retrieved June 6, 2008, from http://www.tacticaltech.org/infodesign Visualizing Information for Advocacy: An Introduction to Information Design is licensed under a Commons Attribution-Share Alike 3.0 License.

“

”

Clear

It makes complex information easier to understand.

Compelling

Visuals grab people’s attention.

Convincing

People who might not be persuaded by raw numbers or statistics may be more likely to understand and believe what they see in a chart or graphic.

Good data visualizations:

PRODUCTS OF GOOD INFORMATION DESIGN

Examples

The US news media dedicates a disproportionate amount of attention

to stories about the US and Iraq.

Alisa Miller. (2007). Why we* know less than ever about the world, TED2008. Monterey, California.

Retrieved July 11, 2008, from www.ted.com/index.php/talks/alisa_miller_shares_the_news_about_the_news.html.

* “we” = “Americans”, of course.

The world map redrawn according to the number of seconds US network and cable news organizations devoted to news items for each country in February 2007.

Only the US, the UK, and Israel do not support “an immediate cessation of hostilities in the Middle East.”

Belfast Telegraph (2006, July), reproduced by John Emerson in Visualizing Information for Advocacy: An Introduction to Information Design. (2008, January). Tactical

Technology Collective.

Between August and September 2007, over 60 demonstrations were staged

across Myanmar in response to oppressive state policies.

Alternative ASEAN Network on Burma. Map of demonstrations August-September 2007 - ALTSEAN Burma. ALTSEAN-BURMA. Retrieved July 15, 2008, from http://www.altsean.org/Photogalleries/ProtestsMap.php.

Details of each demonstration are filed on Google Maps.

The US is the leading economic superpower.

Froz Gobo. (2007, June 27). Much Better. apostropher.

Retrieved July 14, 2008, from http://www.apostropher.com/blog/archives/003827.html. See also http://strangemaps.wordpress.com/2007/06/10/131-us-states-renamed-for-countries-with-similar-gdps/

The names of US states have been replaced with countries that have similar GDPs.

The Israel-Palestine conflict is long and complex. It is made up of countless

individuals who each have a story to tell.

Just Vision. Timeline. Just Vision. Retrieved July 15, 2008, from http://justvision.org/en/timeline.

An interactive and “subjective history of the Israeli-Palestinian conflict composed of historical and personal events” as recounted by participants of the project.

Every community defines a concept in its own way.

UP Open University. "What is Multimedia?" MMS100: Introduction to Multimedia Studies (1st Semester, 2008). Retrieved July 14, 2008, from http://sites.google.com/a/upou.edu.ph/mms100/course-outline/sfg987srtew4rtf/whatismultimediaresults.

Remember how I asked you to define multimedia in you own words? Recall that I found it interesting how word “communicate” came up, but words like

“people”, “person”, “human”, and “interaction” seldom did.

There's a lot of heartache out there.Golan Levin, Kamal Nigam, & Jonathan Feinberg. (2006, February

14). The Dumpster. Retrieved May 3, 2008, from http://www.tate.org.uk/netart/bvs/thedumpster.htm.

`

When it happened

Someone blogging

about getting dumped

How they felt about it

(Generally, not good)

whoa

Powerful interests are connected through complex networks of

influence that significantly affect US public policy around climate change.

Greenpeace. Exxon Secrets. Exxonsecrets.org. Retrieved July 14, 2008, from http://www.exxonsecrets.org/maps.php.

Users can construct their own maps by placing, removing, and rearranging institutions and individuals associated with claims that anthropogenic climate change is not a cause for concern. The interface allows users to explore for themselves relationships between the petroleum industry, various think tanks, and the US government.

The world is increasingly connected.

Walter Rafelsberger. (2008). Twitter Conversations Map. visualcomplexity.com. Retrieved July 15, 2008, from http://www.visualcomplexity.com/vc/project_details.cfm?id=600&index=600&domain=.

“This visualization [...] using Processing shows the conversations of about 1500 users from the microblogging service Twitter. The arcs [...] link the locations of users who talk to each other. The geocoding was done filtering location info from the users profile pages and looking it up with Geonames.”

Visualizing data is not an unproblematic activity.

Methods used

IN GENERATING AND COLLECTING DATA,

IN CHOOSING APPROPRIATE VISUAL ELEMENTS,

OR IN DISSEMINATING A VISUALIZATION

(SEE THE NOLI EXAMPLE)

can be subject to debate.

But work in data visualization can be an interdisciplinary activity, where experts

IN DESIGN,

IN EDUCATION,

IN SOCIAL SCIENCE,

AND IN TECHNOLOGY

contribute best practices in the spirit of free inquiry, openness, and trust.

Visualizing data is not an unproblematic activity.

But that's OK.

Classifiying visualizations

`

Simplifies

MAKING SENSE OF KNOWLEDGE DOMAINS CHARACTERIZED BY LARGE AMOUNTS OF DATA

Uncovers complexity

CHALLENGING STEOREOTYPES AND “SIMPLISTIC EITHER-ORS”*

Uncovers complexity, but then identifies hidden patterns

CREATING MAJOR SHIFTS IN CONSCIOUSNESS

*Thurlow, C., Lengel, L., & Tomic, A. (2004). Computer Mediated Communication (1st ed., p. 272). Sage Publications Ltd.

How a visualization facilitates learning

`

Interactive

PERMITS GRADUAL DISCLOSUREGOOD FOR UNCOVERING COMPLEXITYUSERS ARE IN CONTROL OF THEIR LEARNINGDESIGN SHOULD IMPLY PROMISE OF NEW DISCOVERIESGENERALLY REQUIRES MORE SOPHISTICATED AUTHORING TOOLSGENERALLY MORE DIFFICULT TO MAKE

Static

INSTANTANEOUS LEARNING GRATIFICATIONSUITABLE FOR SIMPLIFYINGDESIGNER CONTROLS DISCLOSURE OF INFORMATIONMORE CONVENTIONAL AUTHORING TOOLS ARE USUALLY SUFFICIENTGENERALLY EASIER TO MAKE

Degree of user interactivity

`

Requires significant use of integrated text

INCLUDES TEXT-ONLY VISUALIZATIONS, SUCH AS TABULAR DATAMIGHT USE OF TYPEFACE AS A VISUAL ELEMENT

Images are generally sufficient

(OUR TWO EXAMPLES BOTH USE A MAP OF THE EARTH!)

Note: All these visualizations were accompanied by some kind

of non-integrated text.

Does the visualization require extensive use of integrated text?

`

Very large or very small values

Unexpected relationships

Unusual statistical distributions

Many of the examples expose surprising or anomalous data.

`

Desktop publishing programsMS WORD, MS EXCEL, OPEN OFFICE

Image editing and layout softwareADOBE PHOTOSHOP, ADOBE INDESIGN, COREL

Web 2.0 tools aimed for “average” web userGOOGLE MAPS, MINDMAPPING APPLICATIONS

Specialized design tools FLASH, COURSELAB, SOCIAL ACTION

Highly specialized, highly flexible visualization authoring toolsPROCESSING, VVVV, VTK

Tools used to author them

Creating Visualizations:

1. Get data2. Generate visualization3. Distribute

Getting data

Primary sources

A primary source is a document or physical object which was written or created during the time under study.

Examples of primary sources:

LETTERS, MANUSCRIPTS, DIARIES, JOURNALS, NEWSPAPERS, SPEECHES, INTERVIEWS, MEMOIRS, DOCUMENTS PRODUCED BY GOVERNMENT AGENCIES, PHOTOGRAPHS, AUDIO

RECORDINGS, MOVING PICTURES OR VIDEO RECORDINGS, A JOURNAL ARTICLE REPORTING NEW RESEARCH OR FINDINGS.

Examples of where to get primary sources:

unstats.un.org www.filipiniana.net www.census.gov.ph

“

Princeton University Library. Primary vs Secondary Sources. . Retrieved July 18, 2008, from http://www.princeton.edu/~refdesk/primary2.html.

Secondary sources

A secondary source interprets and analyzes primary sources. These sources are one or more steps removed from the event.

Examples of secondary sources:

TEXTBOOKSMAGAZINE ARTICLES

HISTORIESCRITICISMS

COMMENTARIESENCYCLOPEDIAS

Most of the readings in this class are secondary sources.

“

Princeton University Library. Primary vs Secondary Sources. . Retrieved July 18, 2008, from http://www.princeton.edu/~refdesk/primary2.html.

Mine the web for content

PHOTOS: FLICKR, PICASA ALBUMS

VIDEO: YOUTUBE, VIMEO, BLIP.TV

TEXT: SEARCH ENGINE RESULTS ON KEYWORDS

`

Use special tools and data sourcesto extract web user behavior data

RSS FEEDS FROM BLOGS, SOCIAL BOOKMARKING SITES, & OTHER WEB 2.0 APPPLICATIONS

EXTRACT DATA ON USER BEHAVIOR ON SOCIAL NETWORKING SITES USING DEVELOPER APIs

(E.G., FACEBOOK DEVELOPER, FRIENDSTER API)

MONITOR SITE USAGE USING TRACKING TOOLS (E.G., GOOGLE ANALYTICS)

Authoring visualizations

Desktop publishing programsMS WORD, MS EXCEL, OPEN OFFICE

Image editing and layout softwareADOBE PHOTOSHOP, ADOBE INDESIGN, COREL

Web 2.0 tools aimed for “average” web userGOOGLE MAPS, MINDMAPPING APPLICATIONS

Specialized design tools FLASH, COURSELAB, SOCIALACTION Developed at the Human-Computer

Interaction Lab at University of Maryland

Simultaneously presents statisical analysis alongside social network analysis graph1

SNAs can be used to examine power relations2

Screenshot from http://www.cs.umd.edu/hcil/socialaction

[1] Adam Perer, & Ben Shneiderman. (2008). Integrating Statistics and Visualization: Case Studies of Gaining Clarity during Exploratory Data Analysis. In Proceedings of the ACM Conference on Human Factors in Computing Systems. Florence, Italy.

[2] e.g., Padgett, J. F., & Ansell, C. K. (1993). Robust Action and the Rise of the Medici, 1400-1434. American Journal of Sociology, 98(6), 1259.

Highly specialized, highly flexible visualization authoring toolsPROCESSING, VVVV, VTK

Screenshot from http://www.cs.umd.edu/hcil/socialaction SocialAction... in action.

Desktop publishing programsMS WORD, MS EXCEL, OPEN OFFICE

Image editing and layout softwareADOBE PHOTOSHOP, ADOBE INDESIGN, COREL

Web 2.0 tools aimed for “average” web userGOOGLE MAPS, MINDMAPPING APPLICATIONS

Highly specialized, highly flexible visualization authoring toolsPROCESSING, VVVV, VTK

Specialized design tools FLASH, COURSELAB, SOCIALACTION

`

IT'S FREE IT'S FREE AND AND

OPEN SOURCE!OPEN SOURCE!

Book cover of Greenberg, I. (2007). Processing: Creative Coding and Computational Art (1st ed., p. 840). friends of ED.

Distributing visualizations

ELECTRONIC

NON-ELECTRONIC

Visualizing literature: Outlining possible strategies for visualizing Benedict Anderson's statistical analysis of words related to the concept of nationhood in Noli Me Tangere

Thanks to Ed Maranan for helping me out with this

Nacion/es 7 1 3Nacionalidad/es 2 1 1Nacional/es (n.) 1 1Nacional (adj.) 2 2Patria (general) 6 1 3Patria (Spain) 5 3Patria (Filipinas) 12 2Patria (adj.) 1 1Pueblo (local townships) 32 1 8Pueblo (S. Diego town) 53 22 13Pueblo (S. Diego townsfolk) 5 4 1Pueblo (peoples in general) 10 5Pueblo (people of Filipinas) 21 1 4Pueblo (unclear) 4 2

Total Frequency

of Mention

Narrator's Use of

Term

Number of characters using the

term

“These figures show us some important features of Noli Me Tangere and of the society it describes.

Nacion and its derivatives are used rarely, by very few people, and never in reference to the

Philippines. Nacionalismo and nacionalista are spectacularly invisible. We have seen, too, that

patria is used in several senses by different characters, so that it would be quite misleading to

claim that it means only one, very nationalistic thing. [...] In the case of pueblo, almost 75 percent

of the time the word is used either for San Diego or for the townships nearby and around Manila.

In only 17 percent of the cases does it refer to the people of the Philippines. [...] It seems

indisputable that at the time of the Noli's publication in 1887, there was no general used

term in the Philippines[...] covering all the people in the archipelago. It is also absolutely clear that

the only characters in the Noli [...] who use a nationalist vocabulary are the three heroes,

Ibarra, Elias, and Tasio, while the single biggest user is the observing Narrator. All this suggests

that any widespread 'Filipino nationalist consciousness' in the modern sense had not yet

come into existence. Nothing shows this more clearly than the fact that Elias, noblest of them all,

calls himself an indio, not a filipino/Filipino.”

Table 3. Mentions of Nacion andits Derivatives, Patria, and Pueblo in the Noli

Problematicexample

Ibarra says,“España, mi segunda Patria.”Anderson: “Patria = Spain”

Primera Patria = Filipinas( )

Visualizing Anderson's data is not an unproblematic activity.

But that's OK.

For now.

Nacion/es 7 1 3Nacionalidad/es 2 1 1Nacional/es (n.) 1 1Nacional (adj.) 2 2Patria (general) 6 1 3Patria (Spain) 5 3Patria (Filipinas) 12 2Patria (adj.) 1 1Pueblo (local townships) 32 1 8Pueblo (S. Diego town) 53 22 13Pueblo (S. Diego townsfolk) 5 4 1Pueblo (peoples in general) 10 5Pueblo (people of Filipinas) 21 1 4Pueblo (unclear) 4 2

Total Frequency

of Mention

Narrator's Use of

Term

Number of characters using the

term

Nacion/es

Nacionalidad/es

Nacional/es (n.)

Nacional (adj.)

Patria (general)

Patria (Spain)

Patria (Filipinas)

Patria (adj.)

Pueblo (local townships)

Pueblo (S. Diego town)

Pueblo (S. Diego townsfolk)

Pueblo (peoples in general)

Pueblo (people of Filipinas)

|||||||

||

|

||

||||||

|||||

|||||||||||

|

||||||||||||||||||||||||||||||||

|||||||||||||||||||||||||||||||||||||||||||||||||||||

|||||

||||||||||

|||||||||||||||||||||

Nacion/esNacionalidad/es

Nacional/es

Nacional

PatriaPatria

PatriaPatria (adj.)

Pueblo

PuebloPueblo

Pueblo

Pueblo

generalgeneralgenerak

general

generalSpain

FilipinasAdjective

localtownships

SanDiego(the people oi) San Diego

general

Filipinas

Nacion/esNacionalidad/es

Nacional/es

Nacional

PatriaPatria

PatriaPatria (adj.)

Pueblo

PuebloPueblo

Pueblo

Pueblo

generalgeneralgenerak

general

generalSpain

FilipinasAdjective

localtownships

SanDiego(the people of) San Diego

general

Filipinas

SUBJUGATED SOCIETYFILIPINO NATIONIMPERIAL SPAINUNSPECIFIED

Nacion/esNacionalidad/es

Nacional/es

Nacional

PatriaPatria

PatriaPatria (adj.)

Pueblo

PuebloPueblo

Pueblo

Pueblo

###

#

##

##

#

##

#

#

SUBJUGATED SOCIETYFILIPINO NATIONIMPERIAL SPAINUNSPECIFIED

ANDERSON'S THESIS: THEREFORE, “ANY

WIDESPREAD 'FILIPINO NATIONALIST

CONSCIOUSNESS' IN THE MODERN SENSE HAD NOT YET

COME INTO EXISTENCE” AT THE TIME OF NOLI'S

WRITING.

###

#

#

Nacion/esNacionalidad/es

Nacional/es

Nacional

PatriaPatria

PatriaPatria (adj.)

Pueblo

PuebloPueblo

Pueblo

Pueblo

###

#

##

##

#

##

#

#

SUBJUGATED SOCIETYFILIPINO NATIONIMPERIAL SPAINUNSPECIFIED

The chart changes somewhat if you consider that so-called “general” uses of the words patria and nacion and its derivatives were all by

Ibarra, Elias, or the Narrator. This implies “cognizance of a template for a Filipino nation.”

ANDERSON'S THESIS: THEREFORE, “ANY

WIDESPREAD 'FILIPINO NATIONALIST

CONSCIOUSNESS' IN THE MODERN SENSE HAD NOT YET

COME INTO EXISTENCE” AT THE TIME OF NOLI'S

WRITING.

SUBJUGATED SOCIETYFILIPINO NATION

Wrapping up

We looked at

EXAMPLES OF,

CHARACTERISTICS OF,

PROBLEMS THAT ARE PART OF THE DISCIPLINE OF,

AN QUICK OVERVIEW OF WHAT YOU NEED TO DO IF YOU'RE INTERESTED IN,

AN EXAMPLE THAT USES SECONDARY DATA ABOUT NOLI ME TANGERE THAT I USED IN

visualizing data.

More information

www.visualcomplexity.com

www.tacticaltech.org

and the URLs of the examples I gave

Possible discussion topics and activities to do

I mentioned that there could problems in deciding on appropriate methods for

generating or collecting data, as well as problems in choosing appropriate visual elements to use for the visualization. Discuss.

Example 1: What do you think of the black-and-white cows on the cover of your reading, Visualizing Information for Advocacy: An Introduction to Information Design?

Example 2: In your own words, discuss some of the problems I had with visualizing Benedict Anderson's data (i.e., the table showing the number of times certain words

were used in the Noli).

Possible discussion topics and activities to do

Is Benedict Anderson's table a “primary source” or a “secondary source” of data? Why? (There's only one correct answer.)

Possible discussion topics and activities to do

Find some data and visualize it. You could use data related to your multimedia system.

“Good art renders the invisible, visible.”