I've received a lots of great comments and e-mails about the music recommendations demo I posted a week or so ago. But a number of you mentioned that the recommendations were a little funny. Questions and observations so far:

• Theivery Corporation is the center of the universe! Every album ever released is 3 or fewer hops away from a Theivery Corporation album.
• Why is every album I search for related to Beck? or Moby? or Neil Young? Though I'll point out, the man has been in almost every band that's ever released an album. Seriously, that album by the Back Street Boys and Young is one of my favorites!
• How is this tool useful if the only related albums to my search are by the same artist?

Right. So ... There's a lesson here:

There's always a little bit of "magic" in a mashup.

The music recommendations demo gets album relationships from Amazon.com's E-commerce API. Similarity is based on buying patterns, which apparently lead to some unexpected or disappointing results. So I decided to try out an alternative.

I worked up a quick mashup using the Audioscrobbler (Last.fm) API for Artist-to-Artist recommendations. Audioscrobbler uses the listening patterns of it's users to determine relationships. Unfortunately, the images served up with this API aren't especially useful in identifying artists, especially when scaled down. So this demo is currently text-only. If you're interested, the demo could be extended to grab an album image from Amazon.com. I tried this and bailed out quickly because it added a lot of latency to the addition of new nodes, but you may be able to cut this down using an image cache.

So give it a try.

Oh, one more thing! These demos don't work so well in ie7. This isn't an issue with the JSViz 0.3.1 API. I'll fix the demos when I have some spare time. Thanks for all the feedback. It's useful in driving this project.

Comments (4) | Tags: force directed graph javascript jsviz layout projects visualization

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:

Click here to use this example application...

A Note on Aesthetics

Continue reading "Modeling Music Recommendations in JavaScript with JSViz" »

Comments (21) | Tags: force directed graph javascript jsviz layout projects tutorial visualization

Part of my upcoming talk at The Ajax Experience is, of course, about graph-based data visualizations using JSViz. I've worked up a couple of tutorials using the new JSViz 0.3.1 and I'm sharing abbrieviated versions of them here. Conference attendees should find these posts useful as a recap and additional reference for coding your own apps.

In this first tutorial, we'll introduce the JSViz 0.3.1 API by modeling the contents of an XML file. The model will render in HTML or SVG if it's available. Of course you can take a look at what we're building before we get started:

Screenshot of SVG | Screenshot of HTML | "Live" Example | Hide

Continue reading "Tutorial: Building a Force Directed Graph from XML" »

Comments (6) | TrackBacks (2) | Tags: force directed graph javascript jsviz layout projects tutorial visualization

JSViz 0.3.1 is now available. This release includes many enhancements to Force Directed Graphs and a new, simpler API. A new Tree Graph implementation will be available shortly.

So let's see it in action!

Tomorrow I'll post a tutorial on how to make this demo:

Show Demo

What about the source?

The source is available under a Creative Commons Attribution License. Here are the source files for browsing. I'll provide a single file distribution shortly.

DataGraph.js	Defines the nodes and relationships in our model..
ParticleModel.js	The physical model used to position particles.
Particle.js
Magnet.js	An attractive or repulsive force between particles.
Spring.js	A spring force between particles.
Timer.js	The animation timer.
EventHandler.js	An event handler factory.
HTMLGraphView.js	A view of the model constructed with HTML.
SVGGraphView.js	A view of the model constructed with SVG.
RungeKuttaIntegrator.js	Performs fast and accurate approximation of differential equations.
Control.js	A simple template for event handlers in your user interface.

Comments (6) | Tags: force directed graph javascript jsviz layout projects visualization

In this tutorial, you'll learn how to integrate JavaScript Force Directed and Tree graphs into your web page or application using:

• HTML and CSS
• JavaScript with the DOM
• or JavaScript with SVG

Click here to see what we're building...

Continue reading "Tutorial: Creating Animated Graphs with JavaScript and JSViz" »

Comments (5) | Tags: force directed jsviz projects tree graphs