Processing Data Visualizations

I’ve seen a lot of interesting data visualizations lately but have struggled to figure out how to visualize my own data.  It seems like there is a vast chasm between creating pie charts in Excel and Hans Rosling’s TED Talks.  The I stumbled upon Processing.

Processing was used to create the genetics simulation I described in an earlier post.  After looking into it some more, I learned that Processing was developed out of a project at MIT’s Media Lab.  It is an object-oriented programming language conceived as a way to sketch out images, animations and interactions with the user.

Examples of of Processing projects include everything from a New York Times data visualization of how articles move through the internet and visually representing data in an annual report to more esoteric and artistic works.

To get started, download the application at http://processing.org and go through some of the tutorials on the site.  There are lots of examples included with the download so you can also open them up and start tweaking and hacking them, if that’s your preferred method of learning.  Once your code is complete, or after you’ve made a minor tweak, click on the play button to open a new window and see it looks.  Once you’ve completed your project, you can export it as an applet, which can be uploaded to a web server, or as an executable file for a Mac, Windows, or Linux computer.

I’ve been through the first half-dozen tutorials and am to the point of making lines and circles dance around.  I can even make the colors and sizes vary based on mouse position.  I have also opened up some of the more advanced examples and started picking away at them to see what I can understand and what I still need to learn more about.  Once I can import data from an external source, it will be really exciting to see the different ways to represent it.

I haven’t had a foreign language learning experience in a while.  I am learning (and re-learning) many valuable lessons as I try to express myself in this new language.  Not surprisingly, I’m finding that I need a balance between instruction (going through the tutorials) and practice / play (experimenting with the code I’m writing or hacking together).  I’m also a bit frustrated by my progress because I can see what can be done by fluent speakers (see examples, above) but am stuck making short, choppy utterances (see my circles and lines, which really aren’t worth sharing.)  I plan to both work my way through the basics (L+1) as well as dabble with some more advanced projects (L+10) to see if I can pull them off.  If not, I’ll know what to learn next.

Fortunately, I have one or two friends who are also learning Processing at the same time.  They are more advanced than me (in programming languages, but I hold the advantage in human languages), but it has been helpful and fun to bounce examples and ideas off of one another.  We plan to begin a wiki to document our progress and questions as they arise — a little like a students notebook where vocabulary and idioms are jotted down so they can be reviewed later.

Watch for more updates as projects get pulled together as well as notes on other ways to visualized data in the near future.

Google Maps for New Student Orientation

After putting student-created videos on Google Maps I’ve been thinking about how a similar process could be used to provide an orientation to the institution and community for new international students.  Some of the teachers at Ohio University are already well on their way to creating such a map.

Videos of some of the popular destinations have been recorded, posted to YouTube, and embedded into the popup balloons on the map.  [Note: Not all of these features will work on the video I have embedded above.  Click on “view larger map” to see the fully-featured version.] Others include other useful information such as websites and phone numbers.  This was all teacher-created, but the opportunity exists to allow student contributions.

This is something we really need to pull together.  Know of a similar example?  Leave a comment.

Getting Started with Google Maps

This is how we added video to maps before Google.

I recently received the following question as a result of my presentation on Locative Media and Other Mashups:

I am currently working with a first grade teacher on a family oral history project and we would like to embed the stories from the families in a map of some sort — meeting 2 or 3 social studies standards with one activity!! I would appreciate some technology pointers from you if you are willing to do that.

I thought I’d share my response here as a brief tutorial tutorial for Google Maps.  If you’ve been on the fence about whether or not to create your own map with Google, I hope this will be enough to convince you to give it a try.

Sounds like you’ve got a really interesting project that would be easy to pull together using Google Maps.

Here’s an example map I created in which student videos describing campus are located on the spot they are describing:

[Because the videos embedded in the map are embedded in this blog post, they are not visible in the balloons.  Click on “View Larger Map” to see the fully-functioning version.]

You could create a similar map with video or audio, pictures, text, or any combination.  To get started, go to http://maps.google.com a sign up for a free Google account, if you don’t already have one.  Then click on “My Maps” and “Create new map.”

When in “edit” mode, you can add pointers to the map and then add whatever you want to appear in the balloon that pops up when you click on the pointer.  To add a pointer, do a search for a location, click on that pointer, and click on “Save to” to choose the map you have created.  It will then appear in your list of pointers when you click back on your map.  Note that it’s easy to wind up with the pointer on your map obscured by the pointer that you found via your search.  Use the checkboxes in the bottom left corner to hide the sets of pointers that you don’t want to see.

If you click on the pointer on your map while in edit mode, you will get several options for the contents of the balloon.  Too add a YouTube video, click on the “Edit HTML” option while editing the balloon and paste in the contents of the “Embed” code on YouTube.  Of course, this assumes that you have uploaded your video to YouTube or have found a video that you want to (and have permission to) use, which is also relatively easy to do.

Once you have finished editing your map, click on “Done.”  You can then click on link to get a URL which you can use to direct people to your map (as I have done, above) or even a code to embed it into another website or blog.  You can even allow multiple Google accounts to contribute to the same map, if that makes sense for your project.

Locative Media And Other Mashups

These are the slides from a presentation I made this morning at the Digital Media in a Social World Conference.  More examples, including some that were generated during the presentation, can be found in the links I tagged using Diigo and Delicious.

I’ve tried to gather as many examples of digital mashups (see Wikipedia definition #2) that, in many cases, use maps or other visual means to represent different sets of data.  Do you have a favorite example that I didn’t include?  Leave it in a comment.  I’d love to see more!

To learn more about the conference, check out the #DMSW hashtag on Twitter.

Google Maps / YouTube Mashup

This is a project of mine from a couple of years ago.  I haven’t mentioned it here before, though, and it’s still worth looking at.

My Google Maps / YouTube Mashup combines these two Web 2.0 technologies by linking student-created YouTube videos to points on a Google Map.  I have maps of Ohio State and the city of Columbus, Ohio (the same map, but viewed at different resolutions, and centered slightly differently) with lots of links to videos created by students at that location.

It took a little work to figure out how to do this, but Google provides lots of help for incorporating maps into your website.  Once I had that figured out, I just had to paste the YouTube info into the bubble that pops up.  If you’d like to try it, feel free to view the source of my page.  I know Google and YouTube have since worked out ways to do these things on their sites, but I’m proud to say I did it first.

Possible extensions could include having students do presentations on their hometown or country and then placing them on a world map or even using a tabbed pop-up bubble to allow viewers to toggle between video, audio, and text transcript.  There are lots of interesting possibilities yet to be explored.