This version I gave during a January 2009 Kape + Teknolohiya at the TechnoHub-AyalaTBI, is taken from the original lecture I gave at UP Open University: http://www.slideshare.net/diegomaranan/20080718mms100lecturecolloquiumpresentation
1. Visualizing Data:
Making Sense of an Information-Rich World
Diego Maranan
dmaranan@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.
2. Visualizing Data:
Making Sense of an Information-Rich World
TH I I AN
SS
ADVERTI
SEM EN T
2
Biomodd [LBA ]
Ecology + Gaming +
Diego Maranan
dmaranan@upou.edu.ph Installation Art + Community
`
Faculty of Information and Communication Studies
UP Open University
Interested?
www.biomodd.net
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.
3. A quick backgrounder on me
Growing up, I wanted either to compose film music or study the cosmos. In college, I
became a computer geek who studied contemporary dance.
Art, science, and positive social change have always been important to me.
www.diegomaranan.com/CV
4. IN TER R UP T
T HI S
TA L K
AT
ANY
T IM E
(I don't mind)
5. What data visualization is
Examples: 1 some older examples
General Features so we can make sense of it all
Examples: 2 networks
Caveats
Examples: 3 what's in it for you
Now what?
6. What data visualization is
Examples: 1 some older examples
General Features so we can make sense of it all
Examples: 2 networks
Caveats
Examples: 3 what's in it for you
Now what?
8. “ 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.
9. “ 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.
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.
10. What data visualization is
Examples: 1 some older examples
General Features so we can make sense of it all
Examples: 2 networks
Caveats
Examples: 3 what's in it for you
Now what?
11. The US news media dedicates a
disproportionate amount of attention to
stories about the US and Iraq.
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.
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_abou
t_the_news.html. * “we” = “Americans”, of course.
12. In 2006, only the US, the UK, and Israel did 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.
13. Details of each
demonstration are
filed on Google
Maps.
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.p
hp.
Between August and September 2007,
over 60 demonstrations were staged
across Myanmar in response to oppressive
state policies.
14. The US is the leading an economic
superpower.
The names of US
states have been
replaced with
countries that have
similar GDPs.
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/
15. An interactive and
“subjective history of
the Israeli-
Palestinian conflict
composed of
historical and
personal events” as
recounted by
participants of the
project.
Just Vision. Timeline. Just Vision. Retrieved July 15,
2008, from http://justvision.org/en/timeline.
The Israel-Palestine conflict is long and complex.
It is made up of countless individuals who
each have a story to tell.
16. Every community defines a
concept in its own way.
UP Open University. quot;What is Multimedia?quot;
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.
17. Someone How they felt
blogging about it
about getting
dumped (Generally, not good)
`
When it
happened
whoa
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.
18. 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,
Powerful interests are connected through various think tanks, and
complex networks of influence that the US government.
significantly affect US public policy Greenpeace. Exxon Secrets. Exxonsecrets.org.
around climate change.
Retrieved July 14, 2008, from
http://www.exxonsecrets.org/maps.php.
19. The world is
increasingly connected.
“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.”
Walter Rafelsberger. (2008). Twitter Conversations
Map. visualcomplexity.com. Retrieved July 15, 2008,
from
http://www.visualcomplexity.com/vc/project_details.cf
m?id=600&index=600&domain=.
20. What data visualization is
Examples: 1 some older examples
General Features so we can make sense of it all
Examples: 2 networks
Caveats
Examples: 3 what's in it for you
Now what?
21. USER INTERACTIVITY
Interactive
PERMITS GRADUAL DISCLOSURE
GOOD FOR UNCOVERING COMPLEXITY
USERS ARE IN CONTROL OF THEIR LEARNING
DESIGN SHOULD IMPLY PROMISE OF NEW DISCOVERIES
GENERALLY REQUIRES MORE SOPHISTICATED AUTHORING
TOOLS
GENERALLY MORE DIFFICULT TO MAKE
Non-interactive
INSTANTANEOUS LEARNING GRATIFICATION
SUITABLE FOR SIMPLIFYING
DESIGNER CONTROLS DISCLOSURE OF INFORMATION
MORE CONVENTIONAL AUTHORING TOOLS ARE USUALLY
` SUFFICIENT
GENERALLY EASIER TO MAKE
22. WHAT THEY REVEAL
Very large or very small values
Unexpected relationships
Unusual statistical distributions
`
23. DATA SOURCES
Data changes over time
USER-GENERATED CONTENT
SYSTEMS THAT CONTINUOUSLY AND AUTOMATICALLY
GENERATE DATA
Data remains fixed
`
24. TOOLS USED TO AUTHOR
THEM
Desktop publishing programs
MS WORD, MS EXCEL, OPEN OFFICE
Image editing and layout
software
ADOBE PHOTOSHOP, ADOBE INDESIGN, COREL
Web 2.0 tools aimed for
“average” web user
GOOGLE MAPS, MANY EYES
Specialized design tools
FLASH, COURSELAB, SOCIAL ACTION
`
Highly specialized, highly flexible
visualization authoring tools
PROCESSING, VVVV, VTK
25. Can represent data that
changes over time
Draws reader in through the
power of design: “It must be
important”
Interactivity supports user-
centered learning
Mapping Glovalization Project
http://qed.princeton.edu/main/MG
26. What data visualization is
Examples: 1 some older examples
General Features so we can make sense of it all
Examples: 2 networks
Caveats
Examples: 3 what's in it for you
Now what?
30. nodes
connecting
subgroups
orphaned
nodes and
subgroups
31. 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
Social network analysis
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.
33. Open Source Dance
http://www.slideshare.net/diegomaranan/open-source-dance-presentation/
Building dance communities through sharing Creative Commons-licensed choreography and tracking the flow of
choreographic ideas across dance communities
36. AN OTH ER
ADVERTI
SEM EN T
Open Source Dance
The Apology Project
Visualizing Philippine Cinema
Web developers needed!
37. What data visualization is
Examples: 1 some older examples
General Features so we can make sense of it all
Examples: 2 networks
Caveats
Examples: 3 what's in it for you
Now what?
39. Methods used
IN GENERATING AND COLLECTING DATA,
IN CHOOSING APPROPRIATE VISUAL ELEMENTS,
OR IN DISSEMINATING A VISUALIZATION
can be subject to debate.
40. Data visualization assumes the presence of data
●
Broad strokes might miss important details (which
●
is why interactivity is important)
All the visual cleverness might eventually become
●
tiring. (“I'm skeptical of shapes.”)
41. 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.
43. What data visualization is
Examples: 1 some older examples
General Features so we can make sense of it all
Examples: 2 networks
Caveats
Examples: 3 what's in it for you
Now what?
44. Tons of examples on www.visualcomplexity.com and processing.org/exhibition
45. Collaboration and Productivity, Onboarding, Training
●
Archiving
●
Basic Education
●
Raising the cool factor of your web presence
●
Maximing your investment on the web presence by
●
understanding user behavior on your website
Grassroots advocacy, activism, information
●
campaigns
Personal use: Coping with information overload
●
++
●
46. When you want to say something radically different,
or when you uncover information that is potentially
dangerous to the status quo,
say what you want to say in the most aesthetically
stunning, quantitatively sound way possible.
47. What data visualization is
Examples: 1 some older examples
General Features so we can make sense of it all
Examples: 2 networks
Caveats
Examples: 3 what's in it for you
Now what?
48. 1) Join the Information Design for Social Change email list.
groups.google.com/group/disenyo
2) Try it yourself. Graph your social network on Facebook on
www.nexus.ludios.net. Or try out Many Eyes:
www.manyeyes.alphaworks.ibm.com/manyeyes
3) Read up more about it on the Web:
www.delicious.com/dmaranan/visualization
4) Read books and journal articles about data visualization:
wednesdaysmnlove.blogspot.com/2008/10/list-of-
readings.html
5) Go to a school that teaches you more about it.
Look for buzzwords like Aesthetic Technologies,
Computational Aesthetics, Computational Design, Information
Design