Archive of published articles on May, 2008
Back homeThis is a very nice piece of source code to keep in your personal AJAX toolkit. “Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework.” It’s very easy to use and works in all browsers.
Tag Galaxy is another in a long line of Flickr API visualizations. While I’ve seen several tag based visualizations for Flickr this one is particularly playful. You can move the globe, click on an image, and see more information about the photo. Most of the other tag visualizations for Flickr that I’ve seen when you click on the image to see a larger size, or learn more you leave the visualization and go straight to Flickr. I like that you stay in context with Tag Galaxy to view more. The project was created by Steven Wood of Georg-Simon-Ohm University of Applied Sciences Nuremberg. Nice work.
SocialHistory.js, code enables you to detect which social bookmarking sites your visitors use. How does SocialHistory.js know? By using a cute information leak introduced by CSS. The browser colors visited links differently than non-visited links. All you have to do is load up a whole bunch of URLs for the most popular social bookmarking sites in an iframe and see which of those links are purple and which are blue.
The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the Google AJAX API Loader’s google.load() method, your application has high speed, globaly available access to a growing list of the most popular JavaScript open source libraries including, jQuery, prototype, script.aculo.us, Moo Tools, and dojo.
One can find it on almost all products: the bar code. Everyone knows that the bar code is used to facilitate the cashing and recording of goods in stores. But which information is actually encoded within the bar code? A simple answer to this question can be found at one of the product databases on the Internet, which are basically huge networks of national code databases. Keying in the 8, 12 or 13 digit figures of a bar code into an international code database, returns information on the manufacturer and the country of origin of the product. Moreover, each bar code is assigned to only one product worldwide; but these individual details are hardly visible to the naked eye.
In this tutorial Nettuts takes as they say,”an average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome animation effects.” Very fun AJAX tutorial.
Website: http://nettuts.com/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
DimP is a video player prototype that allows to browse video clips by directly manipulating their content. The way it works is quite simple. First, DimP automatically extracts object motions from the videos and then allows the user to control video playback by scrubbing these objects on their trajectories.
Website: http://www.aviz.fr/dimp/
Image driven scholarship is a lofty goal, however, MIT’s Visualizing Cultures has created a wonderful visual learning space. I spent quite some time tonight going through the site and throughly enjoyed it. As they state, ” Visualizing Cultures was launched at MIT in 2002 to explore the potential of the Web for developing innovative image-driven scholarship and learning. The VC mission is to use new technology and hitherto largely inaccessible visual materials to reconstruct the past as people of the time visualized the world (or imagined it to be). I love the idea and the site, however, the top drop-down menu at the top of the page started to bother me over time. Since this is the main navigation for the site it might be nice if it was a breadcrumb rather than a poppy drop-down. I still like the site very much.
A nice visualization by Akshay Java of network analysis of Twitter. “The following is a graph constructed using contacts from about 25K users. Notice that there is a link connecting two users if either one has the other as a friend and hence it is an undirected graph (of about 250K edges).
UbiGraph is a tool for visualizing dynamic graphs. The basic version is free, and talks to Python, Ruby, PHP, Java, C, C++, C#, Haskell, and OCaml. Version 1.0 is distributed as two separate components. The server application, which renders graphs, is distributed as a compiled binary. The client bindings, which use XMLRPC, are distributed under an open source license. The software uses dynamic, multilevel graph layout for quick convergence of graph layouts. It uses XMLRPC for cross-language and distributed graph support, OpenGL for rendering, and Pthreads for parallelism. The software is also free and easy to use.
This extremely lightweight JavaScript image gallery and slideshow script clocks in under 3kb packed and includes a number of cool features. Recently I was looking for a nice existing script for a client project. I wanted something elegant, simple and lightweight. What I found were a number of scripts built on JavaScript frameworks and a few others that really lacked any appealing interface or were over 30kb. I challenged myself to build a full-featured slideshow gallery under 4kb. Hopefully I will be add a few more features to the script soon and make it a little mode user-friendly.
Website: http://www.leigeber.com/2008/05/ajax-image-gallery-slideshow/
In this visualization each country is represented by a circle that shows the amount of money spent on the military (size of circle) and what fraction of the country’s earnings that uses (colour). In this graphic the data is presented as ellipses on a cylindrical projection. The countries are not named, and the scaling is slightly different, but once you see africa (central collection of small dots) the layout is clear. The usa dominates the upper/left third of the map.
Adobe Flash Player 10, code-named “Astro,” introduces new expressive features and visual performance improvements that allow interactive designers and developers to build the richest and most immersive Web experiences. These new capabilities also empower the community to extend Flash Player and to take creativity and interactivity to a new level.
John Resig has ported the Processing visualization language to JavaScript, using the Canvas element. If you’re into visualizations this is a must have. It took him 7 months to complete, but I for one am very thankful he took the time. I’ve wanted this functionality myself for some time. Thanks John!
Website: http://ejohn.org/blog/processingjs/
The JIT is an advanced JavaScript infovis toolkit that was based on 5 papers regarding different information visualization techniques. The JIT implements advanced features of information visualization like Treemaps (with the slice and dice and squarified methods), an adapted visualization of trees based on the Spacetree, a focus+context technique to lay Hyperbolic Trees, and a radial layout of trees with advanced animations (RGraph).
Website: http://blog.thejit.org/?page_id=14
Asynchronous JavaScript + XML (Ajax) continues to raise user expectations for interactivity and performance, and developers are increasingly treating Ajax as a must-have component of their Web applications. As more code is moved client side and the network model changes, the community is responding by building more tools to address the unique performance challenges of Ajax. Examine toolsets that find and correct performance problems within your Ajax-enriched applications.
Website: http://www.ibm.com/developerworks/web/library/wa-aj-perform/?ca=dgr-lnxw01FasterAjax
This is a New York Times data visualization of all of the categories and prices that make up the U.S. Governments inflation numbers. As they say, “Each month, the Bureau of Labor Statistics gathers 84,000 prices in about 200 categories — like gasoline, bananas, dresses and garbage collection — to form the Consumer Price Index, one measure of inflation.” I found some very compelling data here. Such as the high price of oil is a large factor in rising food prices. The page is worth checking out.
San Francisco is a very windy city. Because I live here I’m always very curious about the wind patterns. Now because of Francis Ludwig along with some code provided by Nick Thompson I have a way to visualize this. As Francis states, “This new visualization scheme was devloped independently by Nick Thompson who has kindly allowed us use of it. While this may initialy appear to be a time-series animation it is instead a dynamic rendering of particle streaklines. Rather than evolving through time the animation is describing the flow of the wind at a given time.”
I spend most of my days and nights in front of the computer screen. Needless to say I listen to countless hours of music. I’m always looking for new music to listen to, and face it, iTunes can only get you so far with it’s rather limited discovery features. Recently, I’ve turned to relational, and visual music discovery engines to find more tunes that related to my current musical tastes.
The basic premiss behind this new breed of music search is that you start by entering a genre, artist, song, or geo-location, and you are returned music that relates to your search term. In most cases the returns are presented as a visualization in order to show the connections between data.
Below you find a list of the sites that I go to when I’m trying to find new music. If you know of any music discovery sites that are not listed please post them in the comments section. Thanks!
Artist Network Visualization
The Artist Network Visualization applet shows the current listening activity of MyStrands users. Every time a user plays a track by a recognizable artist, it will show up on the map as a small circular node (along with the album art of whichever album the track belonged to). The nodes will repel each other away, so that they don’t overlap each other. However, if two or more artists are played consecutively, they will become visibly “linked” and follow each other around the map when clicked and dragged. Watch as networks of artists emerge from our users’ listening behavior.
Audiosurf: Ride Your Music
As the company states, “Audiosurf allows you to experience the intensity and emotion of your songs in real time, in full color, and in 3D. Songs that give you an adrenaline rush are converted into wild roller coaster rides full of color and motion. Songs that calm you down appear as cool colors against a relaxing sky. Audiosurf enhances the experience of your music collection by synchronizing its environment to the events in your songs–the beats, the intense sections, the long pauses followed by a burst of sound, all take on a more vivid meaning. The application builds a highway for any music CD, MP3, iTunes M4A, WMA, or OGG song you choose, so the experience that you have is totally up to you.”
Liveplasma Music Discovery Engine
Liveplasma is a music and movie discovery engine that shows you new music depending on what your interested in. “Data is grouped according to interest, style, epoch and other criteria which suggest that someone will like it. The closer a film or band is to your favorite the greater the chances are that you will like it.
Musicovery – Content Visualization
As a web application designer I’m always looking for new ways to visualize information and content. Musicovery has showed us a different way of visualizing and browsing music. While the menu is a standard set of music categories, the browse interface itself is like a map with your genre of music displayed in a map-like drag enabled environment. You can drag the music map around your genre until you find an interesting artist. Then when you click on their name the artist is repositioned to the center of the map and the music start playing, along with some nice visual effects.
Musiclens – Music Discovery Visualization
There are many search tools for finding new music on the web. Just type in, “artist, genre or title and you’ll find some results. Ho Hum. I’ve been forced to use this same music search paradigm for years. However, there is a new breed of music sites cropping up that will give you new ways to discover new music. “Musiclens enables users to find pieces of music using very vaguely described criteria, such as loudness (perceived volume), mood or purpose. The search or recommendation query can be enhanced or limited by adjusting the ten navigation control sliders”. This site works well and has a great visualization tool.
Music Maps – Who is Listening to What and Where
“The popularity map shows snapshots of current top artist and album charts by geographical location. The Flash-based interactive map works using data from the Gracenote Media Database and shows the latest artist and album lookups in states, regions, countries, and continents around the world.” I like exploring this site as a way to see what the most popular types of music are in different countries. For example, look at the difference in musical tastes between California and Norway. Fun site.
“Podbop is an MP3 concert calendar that helps you discover bands playing in your town, completely powered by the community”. Excellent use of color, oversized text, and a well designed map navigator are highlights of the Podbop start page. The interior uses the same high contrast and highly readable layout. The dark brown and lime green work well together with the white font. The site has a great user experience with inline previews of the band’s mp3’s categorized by date and location.
TuneGlue – Relationship Explorer
TuneGlue is music relationship visualization. The application lets you type in an artist and TuneGlue will return all of the artists it can find related to your search. By clicking on the artist button, and then release, the app will show all of the releases by this artist.
ScreenVader – Algorithmic Music, Images and Video
In many ways this site feels like an exploration. There is no about section or faqs, so when you arrive you’re not really sure what to expect. As I found out, it turned out to be a wonderful visual experience. The site provides several free software packages that allow you to compose algorithmic music, image and video presentations. The results are stunning as you will see from the examples on the site. While it takes a little getting use to, the flash based navigation is fun easy to use. The downloads are available for Mac and PC.
Whitney Music Box – Visual Harmony
A very fluid music visualization based on the film maker John Whitney. As the developer stated, “This weekend I’ve been playing, once again, with the ideas of experimental film pioneer John Whitney, using both graphics and audio. While Whitney was interested in turning musical ideas into motion graphics, I’m doing the inverse – turning one of his key animation ideas back into music. Whitney made a number of films based around the simple idea of harmonic relationships. Above is a visual example of one his ideas that I implemented in Flash.” Make sure you check out all of the variations in the right column. Great project.
The idea of the the social graph was written about by Brad Fitzpatrick where he defined it as “the global mapping of everybody and how they’re related”. This is what TweetWheel does for Twitter. It shows you all of your friends and how they’re connected to each other. The load is a bit slow, however, it’s worth the wait. Nice job to the developers.