Last.fm Listening history bar chart

A visualization of the Last.fm listening history using a bar chart. The implementation is based on a code example by Scott Murray from his book ‘Interactive Data Visualization‘, which can also be found as a tutorial on his website alignedleft.com.

This script uses the Last.fm API JavaScript library by Felix Bruns, and the D3.js JavaScript library for SVG by Michael Bostock.

Listing 1 : creating a bar chart with D3.js

/**
 * Creates a bar chart from an array of data.
 * @param {Array} data
 * @param {Array} labels
 * @param {Number} width
 * @param {Number} height
 * @param {Number} padding
 * @returns {undefined}
 */
barchart = function (data, labels, width, height, padding) {
    var w = width || 500;
    var h = height || 100;
    var barPadding = padding || 1;
    var max = 0;
    data.forEach(function (value) {
        if (Number(max) < Number(value)) max = Number(value);
    });
    
    var svg = d3.select("#chart")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
    
    svg.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
            return i * (w / data.length);
        })
        .attr("y", function(d) {
            return (h - normalize(d, max, h / 2)) - h / 2;
        })
        .attr("width", w / data.length - barPadding)
        .attr("height", function(d) {
            return normalize(d, max, h / 2);
        })
        .attr("fill", function(d) {
            return "rgb(0, 0, " + normalize(d, max, 255) + ")";
        });
    
    svg.selectAll("text")
        .data(labels)
        .enter()
        .append("text")
        .text(function(d, i) {
            return '' + d + ' (' + data[i] + ')';
        })
        .attr("x", function(d, i) {
            return i * (w / data.length) + 5;
        })
        .attr("y", function(d) {
            return h / 2 + 15;
        })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "black")
        .attr("transform", function (d, i) {
            return "rotate(90," + (i * (w / data.length) + 5) + "," + (h / 2 + 15) + ")";
        });
    
    return;
};

normalize = function (value, max, range) {
    return Math.round((value * range) / max);
};

Listing 2 : loading the data.

$(document).ready(function() {
    $("#user").html('User [' + ACTIVE_USER + '] - Listening History');
    LAST_FM.library.getArtists({
       user : ACTIVE_USER 
    },{
        success : function (data) {
            data.artists.artist.forEach(function (a) {
                if (DEBUG) console.log (a.name + ' was played ' + a.playcount + ' times by ' + ACTIVE_USER);
                DATASET.push(a.playcount);
                ARTISTS.push(a.name);
            });
            
            barchart (DATASET, ARTISTS, WIDTH, HEIGHT, PADDING);
        },
        error   : function (data) {}
    });
});

The resulting visualization is shown in figure 1.

Last.fm Listening History - soundsuggest

Figure 1 : Last.fm Listening History – soundsuggest

Advertisements

One response to “Last.fm Listening history bar chart

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s