Skip to content


  1. Prototip 2 - Create Beautiful Tooltips With Ease

    This 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.

    Website: http://www.nickstakenburg.com/projects/prototip2/

    No comments - Posted in mHub. -

  2. Tag Galaxy – Flickr Visualization

    image 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.

    Read more

    No comments - Posted in DesignDemo. -

  3. Detect the Social Sites Your Visitors Use

    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.

    Website: http://azarask.in/blog/post/socialhistoryjs/

    No comments - Posted in mHub. -

  4. AJAX Libraries API - Google Code

    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.

    Website: http://code.google.com/apis/ajaxlibs/

    No comments - Posted in mHub. -

  5. Barcode Plantage Visualization – Revealing Bar Code Data

    image

    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.

    Visit the website

    No comments - Posted in Vizlist. -

  6. How to Load In and Animate Content with jQuery

    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/

    No comments - Posted in mHub. -

  7. DimP - A Direct Manipulation Video Player

    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/

    No comments - Posted in mHub. -

  8. Visualizing Cultures – Image Driven Scholarship

    image 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.

    Read more

    No comments - Posted in DesignDemo. -

  9. Twitter Social Network Analysis

    image

    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).

    Visit the website

    No comments - Posted in Vizlist. -

  10. UbiGraph – Dynamic Graph Visualization Software

    image 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.

    Read more

    No comments - Posted in DesignDemo. -

  11. 3kb Ajax Image Gallery and Slideshow

    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/

    No comments - Posted in mHub. -

  12. Visualization of Global Military Spending

    image

    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.

    Visit the website

    No comments - Posted in Vizlist. -

  13. Adobe launched Flash Player 10 Public Beta

    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.

    Website: http://labs.adobe.com/wiki/index.php/Astro

    No comments - Posted in mHub. -

  14. Processing.js

    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/

    No comments - Posted in mHub. -

  15. JavaScript Information Visualization Toolkit (JIT)

    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

    No comments - Posted in mHub. -

  16. Ajax Performance Analysis

    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

    No comments - Posted in mHub. -

  17. All of Inflation’s Little Parts

    image

    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.

    Visit the website

    No comments - Posted in Vizlist. -

  18. Real-Time San Francisco Bay Wind Pattern

    image 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.”

    Read more

    No comments - Posted in DesignDemo. -

  19. Relational Music Discovery

    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.

    Artist Network Visualization

    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.”

    Audiosurf: Ride Your Music

    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.

    Liveplasma Music Discovery Engine

    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.

    Musicovery - Content Visualization

    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.

    Musiclens - Music Discovery Visualization

    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.

    Music Maps

    Podbop – Mp3 Concert Calendar

    “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.

    Podbop - Mp3 Concert Calendar

    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.

    TuneGlue - Relationship Explorero

    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.

    MScreenVader - Algorithmic Music, Images and Video

    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.

    Whitney Music Box - Visual Harmony

    No comments - Posted in Writing. -

  20. TweetWheel – Twitter Social Graph

    image

    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.

    Visit the website

    No comments - Posted in Vizlist. -

  21. New Search Visualizations Paradigms

    I really like to search the web. I search because I’m curious. I search because I need specific information. When I need to find something specific I still go to Google. When I’m curious, and searching for entertainment sake I go to visual, faceted, and relational search engines. There are many ways to search the web these days that are not just liner. Today searches can now be based on context, color, relationship, and even child safe content.

    The following is a list of some of the best examples of visual search engines. My comments are now moderated, however, if you have search that you think should be included in this list please leave a comment. Also, if you have a spot on criticisms or relevant information about any app that was posted I also value your comment. Thanks to the developers of these searches for a new way to see what’s out there on the inter-web.

    Etsy’s Color Product Search Visualization
    While I’ve seen several color based searches they are usually for images. Etsy has created a color based search for products which gives you results based on colors you select in their easy to navigate color grid. To use the search just mouse over the color grid and click on the color. Then click the item to get a closer look and some more details. If you are interested in this item and want to find out more just click the item title. From there you can purchase the selected item.

    Etsy's Color Product Search Visualization

    Faceted Search by Moritz Stefaner
    Project Search v1 by Moritz Stefaner is a a flash demo of a faceted search application for architectural projects. I find this form of search very useful for drilling down into a subject. The project has great interaction design.

    Faceted Search by Moritz Stefaner

    Grokker – Relational Search Visualization

    Relational search engines help you find more of the information you are looking for faster than with a traditional liner meta search. Grokker does a good job at relational search by federating content from Yahoo and Wikipedia. The results page has two main views which are a list view and a map view. The list view is interesting because it shows you a collapsable / expandable outline view of the categories, and a detail view. It also give you some tools to narrow your search such as a date slider, view by either Yahoo, Wikipedia or both, by keyword within the outline, and finally, by domain. The map view gives you the same tools with an expanded visualization map of the results and relationships. Very fun, easy to use, and great for discovering related results.

    Grokker - Relational Search Visualization

    Kart00 – Visual Search
    Kartoo is a meta search engine which presents its results on a map. To try it enter your request and click on the “OK” button. As soon as you launch a search, Kartoo analyses your request, questions the most relevant engines, selects the best sites and places them on a map. In this map, the found sites are represented by more or less important size pages, depending on their relevance. When you move the pointer over these pages, the concerned keywords are illuminated and a brief description of the site appears on the left side of the screen. A series of keywords appears. You can refine your search by clicking subjects. To go to the next map, click on the “map nb x” button.

    kartOO

    oSkope – Visual Search
    If you frequent websites like Amazon, YouTube, flickr and eBay you probably love the mass of content that you can see at sites like these. As a designer I tire of “sameness” in ways to browse websites. With the exception of flickr the only way to browse the content on these sites is the all to common linear list view. oSkope gives you another. As they say on their website, “oSkope is a search assistant with a highly intuitive visual interface. oSkope lets you browse quickly through a large number of images a preview information with minimal paging. Selected items can be saved by registered users.” In many of my test searches I found the information or product I was looking for much more quickly than on the websites themselves. While I can save individual products in a folder I also wish I could save searches. The product is still in beta, however, it is a very fun, intuitive and functional way to search the selected websites. Thanks to the developers and designers.

    oSkope - Visual Search

    Quintura Search Visualization
    Quintura is a tag cloud based visual search engine. After your initial search you’re presented with a two pane screen. On the left is grouping of tags that are related to your search term. On the right are standard liner search results. From an interaction standpoint I think the combination works well. In one screen I get readable results and suggested related search terms. You can also embed your search term cloud on your own website.

    Quintura Search Visualization

    Quintura Kids – Child Friendly Search Visualization
    If you have children you know that many search engines retrieve sites you may not want them to see. If you’re a kid you know how boring most search engines can be. “Quintura, Inc. is the next-generation web search company that was launched with a mission to make Web search easier and faster by adding context or meaning to keywords and visualizing search. The patent-pending technology of Quintura is based on over a decade of the founders’ innovative research and development in the area of neural network and artificial intelligence”. Quintura also has a wonderful search for standard use, and a women’s version is planned soon. So far I love both versions that are public.

    Quintura Kids - Child Friendly Search Visualization

    Searchme – Visual Search Engine

    Searchme is new search visualization which lets you see the webpage before you surf there. The idea is pretty neat. As you start to enter a search term you are shown a list of categories that are associated with that term. You can either choose a category, or search all categories. The results are shown in “coverflow” paradigm. You can still sort by category, or just click though the “coverflow” of all of the pages. I love the idea and the execution, however, from a user interface perspective there are a few interactions that would help the UI a great deal. For example, a full screen mode would make seeing the webpages much more useful. Even with a 30 inch Apple HD monitor the pages are a little hard to read. If searchme added a high-rez full screen mode or a way to magnify the page images it would give me a way to see the page relevance to my search. One step beyond that would be to show the highlighted search term(s) on each page as it flew by. Props out to the developers/designers! In my opinion it just needs a little UX love and then we could have a real winner.

    Searchme - Visual Search Engine

    Snap – Search Visualization
    Recently new forms of search visualization have been on the rise. Snap is a great example of a new way to view search results. The applications allows you to view an image of the page your about to visit before you go there. The site is broken into two panes one with the search results and the other with a screenshot of the page. In the screenshot pane you can choose three different sizes of screenshots. You can view the site with either a new window or in the larger left pane. As a visual person I found it to be a fun way to browse search results.

    Snap - Search Visualization

    TouchGraph Google Browser
    The TouchGraph Google Browser reveals the network of connectivity between websites, as reported by Google’s database of related sites. Use this free Java application to explore the connections between realted website.

    TouchGraph

    No comments - Posted in Writing. -

  22. Improve Form Usability With Auto Messages

    This tutorial explains how to improve form usability adding an auto message which appears and disappears with a nice fade-in and fade-out effect when an user select a field.

    Website: http://woork.blogspot.com/2008/04/improve-form-usability-with-auto.html

    No comments - Posted in mHub. -

  23. Worldometers – World Statistics in Real Time

    image There is a current trend in visualizations to show trends, and statistics to let us all know what is going in the world we live in, and I for one applaud it. Worldometers shows real time numbers created by an, “algorithm that processes the latest and most accurate statistical data available together with its estimated progression to compute the current millisecond number to be displayed on each counter based on the specific time set on each visitor’s computer clock.” Var cool. The most interesting thing about this site is the disparagy in the statistics. For example, the difference in energy produced this year (3,950,168,504) and the amount of solar energy striking the earth this year (908,355,014,564). BTW, these change every millisecond so by the time the post was finished the numbers had gone up significantly. This site reminds me of a large lED sign that was up in NYC for some time that showed the U.S. National Debt. Every time I walked past it made me think. This site does the same thing. Check it out and think about the numbers you see.

    Read more

    No comments - Posted in DesignDemo. -