Tag Archives: Processing

TEDxGMP|Visualisation Project

The bigger chunk of this semester’s work will be working on a Senior Production Project. Last semester we (the dynamic web design students) put forth proposals on socially relevant projects that we would like to engage in- on a web-related basis. My partner came up with the idea of creating mad visualisations for TEDx Global Music Project , a non-profit TED sublet that aims to share “songs worth sharing”.

view final project here

It was decided that projessing.js would be used to build the visualizations but for the new-comer who has no idea what I am about to ramble on about here is the story. From the beginning.

TEDx Global Music Project | Proposal: Dynamic Visual Index
Robin Brink &TholoanaPhoshodi (2012)

TED(Technology, Entertainment, Design) is a global set of conferences owned by the private non-profitSapling Foundation, formed to disseminate “Ideas Worth Spreading”. – http://www.wikipedia.org/en/wiki/TED
Since June 2006, the talks have been offered for free viewing online, under Creative Commons license (free to copy, distribute and transmit), through TED.com.

As of November 2011 over 1050 talks are available free online. In June 2011 the viewing figure stood at more than 500 million, reflecting a still growing global audience. – http://www.wikipedia.org/en/wiki/TED

TEDx Global Music Project

“In the spirit of Ideas Worth Spreading, the TEDx Global Music Project will compile and share the best in musical performances from over the 1,700 TED events around the world.”- http://www.tedxhuntsville.com/tedxglobalmusicproject

Video Archive | Existing content
The TEDx Global Music Project site hosts ±200 music performance videos at this time. These videos include such metadata currently: geographic location, performance details, various tags and labels. The metadata available is currently presently limited to these fields. Our project would involve the development and expansion of this metadata-base.

Proposal | Challenges
• How to visualise the TEDx Global Music Project video archive?
• How to present data in meaningful ways?
• How to progress from static representations (linear lists)?
• How to create a meaningful tag taxonomy?

Concept | Audience
Our proposal is to develop an interactive visual index. We aim to present metadata pertaining to the video archive in interesting and meaningful ways. Visual representations of data can be used to provide more immediate and more engaging user experiences. We would like, for instance, to convey the global nature of the GMP by creating a geographical visualisation. Our general goal would be to compile, assess and compare data and then develop appropriate visualisations.

Target audience:
– The TED community, and anyone on the web.

Goals | Concerns
TED aims to foster global communication and cultural exchange. Bearing this in mind our project considers the global scope (diverse internet users).Music is a universal language and it unites people. We want to make a contribution to its dissemination. By assessing and expanding metadata tags, and by developing a visual index – we aim to stimulate new connections and encourage cultural exchange.

Related projects | Competition
‘Videosphere’, a data visualisation by Bestiario offers a spherical representation of a network of TED videos. The visualisation focuses on displaying videos by tag relationships. The video stills are stretched to map the sphere, and just one approach to tag relationships is offered. Our project goals and aesthetics differ considerably. – http://www.bestiario.org/research/videosphere

Skills required
Our project will be developed in Processing. We will at first address a few visualisations engaging with different sets of metadata. Javascript will be used to embed our sketches online. PHP might likely come into play, when sorting metadata from the video database. HTML(5) and CSS will be the building blocks of our website presentation.

Existing code / resources
We are very fortunate to have access to a wealth of resources.
•Online code and visualisation resources:
http://www.openprocessing.org/ [Community]
http://www.learningprocessing.com [Instruction]
http://www.selection.datavisualisation.ch [Inspiration]
• We have also the following books at our disposal:
“Visualising Data”, O’Reilly (2007)
“Processing: A Programming Handbook”, MIT Press (2007)
“Learning Processing”, Morgan Kauffman (2008)
“Processing: Creative Coding and Computational Art”, Friendsof (2007)
“Getting Started with Processing”, O’Reilly (2010)
“Beautiful Visualisations”, O’Reilly (2010)

Useful relationships
We have direct contact with Gareth Pearson, a curator at TEDxStellenbosch.Gareth will facilitate and assist in our interaction with the TEDx Global Music Project.
Amy Robinson, founder of the TEDx Global Music Project, has expressed enthusiasm and support for our proposal stating:“Whoa this is AWESOME!!”

Franchi on infographics

Why this project?…


“One of the most important (and least technical) skills in understanding data is asking good questions. An appropriate question shares an interest you have in the data, tries to convey it to others, and is curiosity-oriented rather than math-oriented. Visualizing data is just like any other type of communication: success is defined by your audience’s ability to pick up on, and be excited about, your insight”
-Ben Fry

The TEDx Global Music Project is an independently organised sublet initiative to the TEDx programme. Like TEDxTalks, which hosts events across borders, devoted to “Ideas worth Spreading; the Global Music Project organises musical events all over the world to disseminate those “Songs worth Sharing”. The GM Project expands on cultural and social interconnectivity through the “universal language” of music. While the TEDxGMP initiative is put forth as generic in a geographical sense, exactly how global is it? What can the disparity between the frequencies of events in a certain location compared to another indicate in international relations? Progressing from linear data representations, the TEDxGMP|Visualization project will use graphical sketches done in Processing to visually answer and communicate with these questions. Through dynamic infographics, the visualization project will make user-end interaction with data more meaningful and engaging.

Why visualize data?

The process of visualizing data begins with the need for easy and accessible statistics (Steele and Lliinsky, 2010). As Processing co-founder Ben Fry (2007) stated in the quote above, the intention of a data visualization is to convey a certain message or point to an audience. Raw data, such as a list or spreadsheet of cars in America for example, blatantly lays out the data for interpretation. Visualizations intend to further such compilations by graphically representing them. By recreating information in graphical and visual forms, patterns are revealed more easily, making the process of interpreting data more efficient and therefore more useful. If such a method in presenting statistical data provides better insight to the user and does so without data overloading them, then an engagement with the data is encouraged. This increases the chances of the message or objective being communicated to audiences.

On a more linguistic note, there exists debate that seeks to set a distinction between “infographics” and data visualizations. While there seems to be no official definition for either, and as the two terms are often used interchangeably, an anonymous user on the debate forum Quora.com, gives a reasonable definition for the two. [He] states:

Information graphics are visual representations of information, data or knowledge often used to support information, strengthen it and present it within a sensitive context. They are specific, context-sensitive and often times hand-crafted. Information graphics are used to tell a story or answer a question.

Data visualizations are visual displays of measured quantities by means of the combined use of a coordination system, points, lines, shapes, digits, letters quantified by visual attributes. They are general, context-free and often times created automatically. Data visualizations are used to let the user find his own story or answer.

Both can be static, animated or interactive.

As per definition above, “infographics” appear to be more subjective. They are barely raw compilations of data but instead are processed graphics that tell a narrative. In inducing an emotional response from audiences, “infographics” work well as they are created to reveal “the bigger picture.” With that said, it would seem advisable that the project be called TEDx GMP | Infographics but given the expansion of our project, that is all-inclusive of Infographics as well as quantity-driven visualizations, the term visualization will be used in its general definition.

Why visualise the TEDx Global Music Project video archive?

American poet, Henry Wadsworth Longfellow deemed music as “the universal language of mankind”. The art of music in this aspect, enhances social and cultural interconnectivity across the globe. Although music should inherit a universal dialect in this regard, everybody is inclined to have different tastes in music. Furthermore, this personal preference determines the music that different individuals listen to. With the variation of genres and individual disposition, a “popular music” order is born. Popular music is that which appeals to the greater audiences (Middleton, 2002). The dissemination of music plays a critical role in determining the popularity of music. A middle-class teenage boy living in South Africa for example, might be more inclined to listen to American hip hop, house and other such pop-culture genres as opposed to teenage boy living in a rural area who might only have access to and therefore more inclined to listen to local/ traditional music. Just as well, the pop-culture genres are more documented because of their popularity and furthermore the pop-culture music genres progress and keep developing in terms of production, accessibility and archiving. In contrast, local/ traditional music stagnates as production, accessibility and archiving it is not as easy as recording a song on a Smartphone and sharing it on youtube- as it happens in the more urbanised societies. If production, accessibility and archiving of music are those important factors that sustain the diversity and universality of music, then initiatives such as the TEDx Global Music Project are the worlds global production libraries. Hosting musical events all over the world and sharing the videos on the web becomes the medium needed to embrace and encourage musical connectivity, internationally. The TEDxGMP| Visualisation project aims to present metadata pertaining the TEDxGMP video archive in interesting and meaningful ways. Visual representations of such data can be used in tracking patterns and following trends that occur in the global music industry. Different interpretations of such data are necessary in solving or being aware of social and cultural issues that are highlighted and exposed by gender/ continental/ genre accordance’s in music. A geographical visualisation for instance, such as one presenting data on a map, will be used by viewers to compare and assess the global nature of not just the GMP but of the global nature of music sharing. Such interactions aim to make new connections, stimulate knowledge sharing and encourage cultural exchange.

Why use Processing programming language?

There exists a number of programming languages that can used for visual representations. These include Raphael, Paper.js and Processing (Grossbart, 2012). The new HTML5 also implements a canvas function that allows for drawing and rendering of graphics on a webpage. Processing was the preferred language to use for the visualisation project as not is built for visual executions but it also allows for interactivity. In addition, it’s open source library allows for free use and modification of existing code. This also means that the visualizations produced in the project, can further be updated and upgraded as the TEDx GMP expands on its video database. The only limitation with Processing is that it does require a java/flash plug-in to execute else the sketchbook won’t run (ibid).


The visualization project begins with a global perspective; a map showcasing scalable ellipses that represent the proportions in numbers of performances per country. A list of the featured countries appears on the side of the map that also includes a horizontal bar representation of the data. For interactivity, when a user hovers over a certain ellipse on the map or over a certain country on the list, the respective illustration on the map/ bar graph is highlighted. This means users can hover over a country on the list and it will be emphasized on the map and vice versa. The next visualisation goes on to a more continental perspective. The six ring-charts represent the six different continents where performances have been held. Each ring on the chart represents a different data category, and within each ring lies proportions matching the data in that category. Ring charts are used to represent the continents as it allows for an addition of multiple rims per ring. This quality becomes useful when attempting to compress representations of an individual factor that contains multiple characteristics, compared to other factors. Once again, the hover function allows the user to get a textual representation of the segment they wave their mouse over. We had the idea of replacing the ellipse on the map with the country-respective ring charts but after an attempt to do so, we found that the programme took longer to load, slowing the responsive interaction down. A tag cloud is used to represent the popularity of certain languages used by performers to avoid adding another bar graph. For the users convenience, the languages on the tag cloud can be arranged by popularity or alphabetical order. On a designers note, a red/grey colour scheme is used as red is the main colour used for the TEDx logo and grey’s neutrality blends the page together.


  1. Anon. “What is the difference between a data visualization and an infographic?”
    Available online:
    Accessed : 18/10/2012</li

  2. Fry, B. 2007. Visualizing Data. USA: O’Reilly Media
  3. Grossbart, Z. (2012). “Web drawing Throwdown: Paper.js vs. Processing.js vs Raphael.”
    Available online:
    Accessed : 18/10/2012
  4. Jacobalonso. (2011) “Why visualize data? We don’t know yet” on Seeing Complexity; Visualizing complex data.
    Available online: http://seeingcomplexity.wordpress.com/2011/03/13/why-visualize-data-we-dont-know-yet/
    Accessed : 18/10/2012
  5. Middleton, R. (1990/2002). Studying Popular Music. Philadelphia: Open University Press. ISBN 0-335-15275-9.
  6. Steel, J. and Lliinsky, N. (2010). “Beautiful Visualizations: Looking at data through eyes of experts”. USA: O’Reilly Media
Tagged , , , ,