|Posted by kyle on October 17, 2006 12:52 PM||bookmark / share:|
Last week I showed you a tutorial that I put together for The Ajax Experience, where we built a force directed model from the contents of an XML file. Today I'm presenting an example with full source from another tutorial in this talk, where we make a complete, interactive application that models music recommendations using Amazon.com's Similarity API. I'll be covering this example in detail in my talk next week at The AJAX Experience. You may view, download, and modify the source in this example. It's available under a Creative Commons Attribution License.
This application will enable a user to search for music by artist. When the user selects an album, they'll see a graph model reperesenting the album's relationship to similar albums, based on Amazon.com buying history. Here's a screenshot:
A Note on Aesthetics
Sure, album covers are square, but circles work better in 2-dimensional, dynamic graphs because they don't have any corners that might obstruct our view -- I think they look neat, too. Credit for this concept belongs to the authors of MusicMap, who created a similar application in Flash in 2004.
In the tutorial I posted last week, I introduced the JSViz API and demonstrated how to construct a model by implementing a "Loader" to populate a DataGraph and a "NodeHandler" to control the representation of nodes and edges in our model. I've done the same thing here. Here's the source used in this example:
- Amazon.js: Loader and Search interface to Amazon.com E-commerce API.
- HTTP.js: A simple AJAX HTTP client.
Of course, this example also uses the JSViz 0.3.1 API. While I work on a permanent home for project files, you can access them in this post from last week.
Extending This Example
This example provides base functionality that you can use to build a rich, interactive application. You might extend or enhance the application by:
- Providing album details and linking to Amazon.com, ITunes, or other retailer product pages
- Linking to sample audio tracks
- Using node size to convey meaning (ie: Amazon.com SalesRank)
- Handling error conditions, like "no albums found"
- ...or atleast use an Alpha Image Loader filter to support transparent backgrounds in IE