Jump to main content - accesskey 2

Data Art project sponsors

Data Art with BBC Backstage

Flared Music

  • Brian Eno relations Musical relations for Brian Eno
  • Radial layout Radial layout

Flared music lets you visually research relationships between musicians and bands using the Musicbrainz database an online community resource that the BBC is working with to collate music information.The project uses a tree structure to display the results of search terms that you enter into it as a kind of musical family tree. For example submitting The Rolling Stones will grow a tree starting from the initial search term to show the individual band members such as Mick Jagger and Ronnie Wood, collaborators such as Billy Preston, and other information including wives and girlfriends. Further connections between individual members of the band fan out, as the search gets deeper. We can see for example that Ronnie Wood was involved with the Jeff Beck group who themselves had connections with Rod Stewart, Jon Lord and The Yardbirds.

If you would like to comment or feed back on this visualisation please do so on the blog.

For developers Flared Music is an example of how to write a visualisation application in Actionscript 3 using a BBC data API and the Prefuse Flare visualisation library. We have provided the commented source code for this project below and access to the data so you can develop your own versions of Flared Music. Please let us know what you do with this material on the blog!

How to use it

Flared music is available immediately for use, either dive straight in or follow the instructions below. You must have Adobe Flash player installed to use the project, it can be downloaded here.

Launch Flared music //

Instructions //

  • Launch the application using the red button above.
  • Type an artist's name in the search box, and press enter, to see a tree graph of their musical relationships.
  • Move around the screen by click-dragging the left mouse button (MAC click and drag).
  • Move around the screen by click-dragging the left mouse button (MAC press and hold down the mouse and drag).
  • Zoom in and out using the mouse wheel (Mac hold down the control key on the keyboard and press the mouse).
  • Use the command key to represent the data either as concentric circles, or with more space between branches.

How it was Built //

This visualisation was built using the BBC Music API, and the Actionscript visualisation library Flare. The source code for the project can be downloaded here.

To begin, set up an Actionscript development environment using FlashDevelop, Flex or Flash, see the Coding Resources for more details. The next step is to download and add the Flare library to the 'src' folder of the source code download alongside 'flared_music.as'. Once you've unzipped the file you want the 'flare' package folder, which is located in the 'flare/src' folder.

If you're using Flash we've included 'flared_music.fla' which simply sets the classpath and the Document class. To use FlashDevelop or Flex Builder create an 'Actionscript' project with 'flared_music.as' as the main file and 'src' as the main source folder.

Getting the data

Everything in Flared Music revolves around the GUID, or Global Unique Identifier, which is a code given to every artist in both the BBC Music and Musicbrainz systems. Queries are made to two APIs, one at Musicbrainz that holds the relationship information, and one at the BBC that holds artist information and pictures. See http://musicbrainz.org/doc/XML_Web_Service and http://www.bbc.co.uk/music/developers#api.

To query these databases, we make URL requests using the AS3 URLLoader class, with the GUID artist reference:

private function get_bbc(guid:String):void
{  
    //form api request using guid         
    var urlrequest:URLRequest=new URLRequest("http://www.bbc.co.uk/music/artists/"+guid+".xml");    
    bbc_urlloader.load(urlrequest);           
} 

The part of the returned XML from the BBC of interest looks like this:

<image>
<src>
http://www.bbc.co.uk/music/images/artists/542x305/a7409219-a681-4072-adb2-5285106ce6f2.jpg
</src>
</image>

From the Musicbrainz site, a request such as this:

http://musicbrainz.org/ws/1/artist/ff95eb47-41c4-4f7f-a104-cdc30f02e872/?type=xml&inc=artist-rels

returns this within the XML:

<artist id="ff95eb47-41c4-4f7f-a104-cdc30f02e872" type="Person">
<name>Brian Eno</name>
<sort-name>Eno, Brian</sort-name>
<life-span begin="1948-05-15"/>
<relation-list target-type="Artist">
<relation type="Sibling" target="796dea98-57f0-4c92-8dce-990bdbc4510a" begin="" end="">
<artist id="796dea98-57f0-4c92-8dce-990bdbc4510a" type="Person">
<name>Roger Eno</name>
<sort-name>Eno, Roger</sort-name>
</artist>
</relation>
<relation type="Collaboration" target="b4d1ee4e-b46c-450f-8851-f1cdf5241662" begin="" end="">
<artist id="b4d1ee4e-b46c-450f-8851-f1cdf5241662" type="Group">
<name>Harmonia & Eno '76</name>
<sort-name>Harmonia & Eno '76</sort-name>
</artist>
</relation>
<relation type="Collaboration" target="55687de8-f392-44d6-92c4-6b260ed464b4" begin="" end="">
<artist id="55687de8-f392-44d6-92c4-6b260ed464b4" type="Group">
<name>Brian Eno & Robert Wyatt</name>
<sort-name>Eno, Brian & Wyatt, Robert</sort-name>
</artist>
</relation>

As you can see, from one artist GUID we can find a picture of the artist, if it exists, and a number of other related artist GUIDs. The crawl() function sets up a loop that repeats this process over and over to build up a network of related GUIDs to display. Because we are using two sites, requesting XML at different rates, and because the request-return procedure can take an unspecified time, we use a number of queues to manage the lookups:

private var guids_visited:Array; //keep track of which guids have had their relations found
private var rels_queue:Array; //queue of guids to have their relations found
private var bbc_queue:Array; //queue of guids to have their picture found on bbc

When the list of BBC lookups is empty, we make another relationship request, which then typically adds a handful of GUIDs to the BBC queue. We also maintain a list of GUIDs visited, so that the crawl cycle does not get stuck going round and round in an endless loop.

See the BBC Music and Musicbrainz API documentation for full details of other kinds of queries you can construct if you want to modify the way Flared Music works, and have it visualise different aspects of the data.

Visualising the Data

The Flare library has a very nice high-level interface, meaning that we only have to create a small number of objects, and Flare does pretty much everything by itself. Internally, Flare uses a graph data structure consisting of data nodes with links between them. This is ideal for us as that is the nature of our relationship data. We therefore map artists to the data nodes, and relationships to the links. A node is given an artists name, an image if it exists, its GUID, and a list of other nodes it relates to. This all occurs in the addNode() function:

Key to this process is the node_hash dictionary, which keeps track of which Flare node as associated to each GUID. This allows the links to be added to existing nodes when a new node is created. A Flare data node is represented with the NodeSprite class, which extends an AS3 Sprite class, and so something like an image can just be added as a child in the standard way.

The Flare visualisation is setup by the visualise() function at the start of the program. This initialises two alternative styles of layout - force directed and a radial tree - and also text labels that pick up the name data field we add to each node.

private function visualize(data:Data):void
{
    vis = new Visualization(data);
    vis.bounds = new Rectangle(0, 0, stageWidth, stageHeight);
    vis.x = 0;
    vis.y = 0;
    addChild(vis);
     
     //labels
    var labeler:Labeler=new Labeler("data.name");
    var format:TextFormat = new TextFormat();
    format.font = "Verdana";
    format.color = 0xf0f0f0;
    format.size = 12;
    format.align=TextFormatAlign.CENTER;  
    labeler.textFormat=format;
    labeler.xOffset=30;
    labeler.yOffset=10;
    vis.operators.add(labeler);
        
    //setup radial         
    radialTreeLayout=new RadialTreeLayout(200,false,false);   

    //setup force
    forceDirectedLayout=new ForceDirectedLayout();     
       forceDirectedLayout.defaultSpringLength=200;
       forceDirectedLayout.defaultSpringTension=0.0;
       forceDirectedLayout.defaultParticleMass=3;
    vis.operators.add(forceDirectedLayout);  
    vis.continuousUpdates=false;
    
    vis_state="radial";
        
}

Adding Interaction

All aspects of the interaction including panning, zooming and changing the visualisation layout, have been programmed using the standard AS3 Mouse and Keyboard event listeners.