Creative Possibilities in Data Visualization
and Networked Art




Diego Maranan
dmaranan@upou.edu.ph
Faculty of Informati...
Overview




www.slideshare.net/diegomaranan/sst-sem2-2009
Visualizing Data:
Making Sense of an Information-Rich World
  THIS IS AN
ADVERTISEMENT



                                ...
A quick backgrounder on me
Growing up, I wanted either to compose film music or study the cosmos. In
   college, I became ...
IN TER R UP T
     T HI S
   TA L      K
        AT
     ANY
      T IM E
      (I don't mind)
What data visualization is
             Examples: 1
       General Features
             Examples: 2
                  Cav...
What data visualization is
             Examples: 1
       General Features
             Examples: 2
                  Cav...
data visualization is
a particular way of doing
       information design
“   Information design tells a story with pictures.
    It can tell “how many?” “when?” or “where?”
    It can show trends...
“   Clear
    It makes complex information easier to
    understand.
    Compelling
    Visuals grab people’s attention.
 ...
What data visualization is
             Examples: 1
       General Features
             Examples: 2
                  Cav...
The US news media dedicates a
disproportionate amount of attention
     to stories about the US and Iraq.

               ...
In 2006, only the US, the UK, and Israel did not support “an
   immediate cessation of hostilities in the Middle East.”
  ...
Details of each
                                      demonstration are
                                      filed on Goo...
The US is the leading an economic
                      superpower.

                                    The names of US
 ...
An interactive and
                                              “subjective history
                                     ...
Every community defines a
concept in its own way.




UP Open University. quot;What is Multimedia?quot;
MMS100: Introducti...
Someone                                                                                                             How th...
Users can construct
                                         their own maps by
                                         pl...
The world is
increasingly connected.
                          “This visualization [...] using
                          P...
What data visualization is
             Examples: 1
       General Features
             Examples: 2
                  Cav...
HOW A VISUALIZATION
    FACILITATES LEARNING
                 Simplifies

      MAKING SENSE OF KNOWLEDGE DOMAINS
    CHAR...
USER INTERACTIVITY
    Interactive

    PERMITS GRADUAL DISCLOSURE
    GOOD FOR UNCOVERING COMPLEXITY
    USERS ARE IN CON...
WHAT THEY REVEAL
    Very large or very small values

    Unexpected relationships

    Unusual statistical
    distributi...
DATA SOURCES
    Uses (or could use) data that
    changes over time

    USER-GENERATED CONTENT
    SYSTEMS THAT CONTINUO...
TOOLS USED TO AUTHOR
    THEM
    Desktop publishing programs
    MS WORD, MS EXCEL, OPEN OFFICE


    Image editing and l...
Can represent data that
         changes over time
Draws reader in through the
  power of design: “It must
             be...
What data visualization is
             Examples: 1
       General Features
             Examples: 2
                  Cav...
The Internet
on Jan 16, 2005
www.opte.org
My facebook network
generated using http://nexus.ludios.net


                  Social Networks (1)




                  ...
Subgroups in my network

      Social Networks: Linking
nodes
            connecting
            subgroups



orphaned
nodes and
subgroups
Open Source Dance
     http://www.slideshare.net/diegomaranan/open-source-dance-presentation/




Building dance communiti...
Visualizing Philippine
                Cinema
http://www.slideshare.net/diegomaranan/proposal-for-a-portal-to-philippine-c...
The Apology Project
http://sites.google.com/site/diegomarananprojects/todo/on-hold/The-Apology-Project




               ...
ANOTHER
ADVERTISEMENT




           Open Source Dance
          The Apology Project
Visualizing Philippine Cinema
       ...
What data visualization is
             Examples: 1
       General Features
             Examples: 2
                  Cav...
Visualizing data is
 not an unproblematic activity.
Methods used

  IN GENERATING AND COLLECTING DATA,
IN CHOOSING APPROPRIATE VISUAL ELEMENTS,
   OR IN DISSEMINATING A VISUA...
Data visualization assumes the presence of
●


    data
    Broad strokes might miss important details
●


    (which is w...
But work in data visualization can be
 an interdisciplinary activity, where
               experts

                IN DES...
Visualizing data is
 not an unproblematic activity.

But that's OK.
What data visualization is
             Examples: 1
       General Features
             Examples: 2
                  Cav...
(Visualizing Noli)
(Hans Rosling)
(Chris Jordan)




                     Thanks to Ed Maranan for helping me out with this
Tons of examples on www.visualcomplexity.com and
             processing.org/exhibition
Collaboration and Productivity, Onboarding,
●


    Training
    Archiving
●



    Basic Education
●



    Raising the c...
When you want to say something radically
 different, or when you uncover information
 that is potentially dangerous to the...
What data visualization is
             Examples: 1
       General Features
             Examples: 2
                  Cav...
1) Join the Information Design for Social Change email list.
  groups.google.com/group/disenyo
2) Try it yourself. Graph y...
Recap
Visualizing Data:
Making Sense of an Information-Rich World
 LAST REMINDER!




                                          ...
“Good art renders the invisible, visible.”
Upcoming SlideShare
Loading in...5
×

Creative Possibilities in Data Visualization and Networked Art

1,514

Published on

This version I gave during the Science, Society, and Technology class at University of the Philippines Diliman, is taken from the original lecture I gave at UP Open University: http://www.slideshare.net/diegomaranan/20080718mms100lecturecolloquiumpresentation

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,514
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
65
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Creative Possibilities in Data Visualization and Networked Art

  1. 1. Creative Possibilities in Data Visualization and Networked Art 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-Noncom 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 ow represent, are identified and referenced clearly, and are used only to illustrat Non-copyrighted portions of this presentation are licensed under a Creative Commons Attribution-Noncomm
  2. 2. Overview www.slideshare.net/diegomaranan/sst-sem2-2009
  3. 3. Visualizing Data: Making Sense of an Information-Rich World THIS IS AN ADVERTISEMENT 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.
  4. 4. 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
  5. 5. IN TER R UP T T HI S TA L K AT ANY T IM E (I don't mind)
  6. 6. What data visualization is Examples: 1 General Features Examples: 2 Caveats Examples: 3 Now what?
  7. 7. What data visualization is Examples: 1 General Features Examples: 2 Caveats Examples: 3 Now what?
  8. 8. data visualization is a particular way of doing information design
  9. 9. “ 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.
  10. 10. “ 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.
  11. 11. What data visualization is Examples: 1 General Features Examples: 2 Caveats Examples: 3 Now what?
  12. 12. 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.
  13. 13. 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.
  14. 14. 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.
  15. 15. 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/
  16. 16. 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.
  17. 17. 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.
  18. 18. Someone How they blogging felt 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.
  19. 19. 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 Powerful interests are connected the petroleum industry, through complex networks of various think tanks, and Greenpeace. Exxon Secrets. Exxonsecrets.org. Retrieved July 14, 2008, from the US government. influence that significantly affect US http://www.exxonsecrets.org/maps.php. public policy around climate change.
  20. 20. 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=.
  21. 21. What data visualization is Examples: 1 General Features Examples: 2 Caveats Examples: 3 Now what?
  22. 22. HOW A VISUALIZATION FACILITATES LEARNING 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
  23. 23. 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
  24. 24. WHAT THEY REVEAL Very large or very small values Unexpected relationships Unusual statistical distributions `
  25. 25. DATA SOURCES Uses (or could use) data that changes over time USER-GENERATED CONTENT SYSTEMS THAT CONTINUOUSLY AND AUTOMATICALLY GENERATE DATA Data remains fixed `
  26. 26. 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
  27. 27. 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
  28. 28. What data visualization is Examples: 1 General Features Examples: 2 Caveats Examples: 3 Now what?
  29. 29. The Internet on Jan 16, 2005 www.opte.org
  30. 30. My facebook network generated using http://nexus.ludios.net Social Networks (1) Social networking
  31. 31. Subgroups in my network Social Networks: Linking
  32. 32. nodes connecting subgroups orphaned nodes and subgroups
  33. 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
  34. 34. Visualizing Philippine Cinema http://www.slideshare.net/diegomaranan/proposal-for-a-portal-to-philippine-cinema-using-data- visualization-techniques-presentation/ Facilitating insights into independent cinemas in the Philippines (but can be extended easily to cover global cinemas) using data publicly available on the web and data visualization techniques
  35. 35. The Apology Project http://sites.google.com/site/diegomarananprojects/todo/on-hold/The-Apology-Project A Web 2.0 site for public apologies
  36. 36. ANOTHER ADVERTISEMENT Open Source Dance The Apology Project Visualizing Philippine Cinema Web developers needed!
  37. 37. What data visualization is Examples: 1 General Features Examples: 2 Caveats Examples: 3 Now what?
  38. 38. Visualizing data is not an unproblematic activity.
  39. 39. Methods used IN GENERATING AND COLLECTING DATA, IN CHOOSING APPROPRIATE VISUAL ELEMENTS, OR IN DISSEMINATING A VISUALIZATION can be subject to debate.
  40. 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. 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.
  42. 42. Visualizing data is not an unproblematic activity. But that's OK.
  43. 43. What data visualization is Examples: 1 General Features Examples: 2 Caveats Examples: 3 Now what?
  44. 44. (Visualizing Noli) (Hans Rosling) (Chris Jordan) Thanks to Ed Maranan for helping me out with this
  45. 45. Tons of examples on www.visualcomplexity.com and processing.org/exhibition
  46. 46. 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 ++ ●
  47. 47. 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.
  48. 48. What data visualization is Examples: 1 General Features Examples: 2 Caveats Examples: 3 Now what?
  49. 49. 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
  50. 50. Recap
  51. 51. Visualizing Data: Making Sense of an Information-Rich World LAST REMINDER! 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.
  52. 52. “Good art renders the invisible, visible.”
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×