Jessica Stringham

Music graph

See a demo here!

This program was inspired by wanting a more informative way to visualize music recommendations. Rather than list the recommendations, this lists artists as nodes, and recommendations as edges. When enough of the bands you enter recommend another band, that band is then displayed.

Privacy stuff

Last.fm requires I cache similar artist results for at least a week, so I store your search string, the results, and the time you searched. I don't store anything about you.

Technical Details

Graph Drawing

The graph itself is a force-based graph drawing algorithm implemented in Javascript and the HTML5 canvas. The edges of the canvas repel nodes in order to keep nodes on the screen.

Recommendations

I use the last.fm api to get recommendations of similar artists. Before last.fm, I used tastekid, but last.fm provided more neat things in their API, like similarity scores.

Other Web Development stuff

The JavaScript is supplemented by the jQuery JavaScript library. The awesome tabs were thanks to the jQuery UI library.

The todo list below was generated by a cool little script that saves a To Do list, and can output it in html. I'll make it available once I clean up the code.

The demo is valid HTML5 as of March 26. This page is also valid:

Woo.

I'm in the process of refactoring the JavaScript, and using JSLint to do some quality checks. I hope to make the code available in a git repository or something at some point.

To do

• UI
  • Add band box is in a weird place and looks lame COMPLETED: Mar 20
  • Names should be drawn last so they aren't under nodes
  • Names should be what tastekid thinks they are, not what one types COMPLETED: Mar 13
  • band name should disappear if it's successful - Mar 13 COMPLETED: Mar 19
  • A 'loading bar' or something should appear when AJAX funtimes begin - Mar 13 COMPLETED: Mar 19
  • Make pausing javascript more obvious, and allow folks to let it play for longer. - Mar 14
  • Add interface to change sensitivity - Mar 14 COMPLETED: Mar 14
  • Large ones are too close. Make them spread out more! - Mar 26
  • Selecting a node should highlight "{band} recommendation", - Mar 31
  • Selecting a name from "{band} recommendation" shouldn't update recommendations, so you can select others. Maybe selecting from this box shouldn't activate the node at all. - Mar 31
  • Selecting a node will add a notification to the top. - Apr 07
  • Selecting a recommendation should list what bands recommend it - Apr 07
  • Selected nodes shouldn't be influenced by the forces - Apr 07
  • Hovering over a band in the recommendation thing should activate the node. - Apr 10 COMPLETED: May 08
  • Safari leaves trails of images. - May 08
• Functionality
  • Remove nodes
  • Add nodes that are being recommended COMPLETED: Mar 26
  • Upon clicking a node, list all recommended bands (and make they easily addable COMPLETED: Mar 20
  • Entering the same band again shouldn't work - Mar 13 COMPLETED: Apr 10
  • List all recommended bands somewhere easily accessible - Mar 20 COMPLETED: Mar 26
  • All theme stuff should be pulled out of physics.js - Apr 07
• Extra Cool
  • Be able to add multiple bands at once - Mar 13
  • Map wikipedia articles or something else rather than band recommendations. - Mar 31