D3.js JavaScript library: chord diagram example

Example project using the D3.js JavaScript library: using a chord diagram to visualize relationships between items (artists) in user profiles.

Introduction

Visualizations for web applications can be built using scalable vector graphics (SVG). SVG is an XML-based language to describe two-dimensional graphics [1]. It is supported by most of the latest versions of most popular browsers, including Amaya, Chrome, Firefox, Internet Explorer 9, Opera and Safari [2], [3].

In this document we will look at a JavaScript implementation of an interactive SVG-based visualization. First we will discuss the D3 library by Michael Bostock; next we will look at a chord diagram implementation using this library. We will conclude with some final thoughts.

D3.js

D3.js is a JavaScript library that uses the W3C standards HTML, SVG and CSS to build data-driven documents [4]. There are various tutorials explaining the basics on how to use this library. For example Scott Murray has a good tutorial for beginners [5].

In short, to get started you’ll need to include the library in your web page and have some sort of data source. From there it is up to the developer what kind of visualization he/she wants to create.

On the D3 website there are many examples that can help you to get off the mark. In this document we will use one of these examples to build a custom visualization.

Example: chord diagrams

The chord diagram used for this example is based on an implementation by Michael Bostock [6], which is in its turn based on Martin Krzywinski’s Circos [7]. Michael Bostock has written documentation for building chord diagrams which can be found on the wiki pages of his GitHub account [8].

Data

The context for the visualization is a collaborative filtering recommender system for artists. So the data that is being visualized consists out of artists and users having one or more of these artists in their profile.

For our example the data will be static. The data is represented by a matrix in which the rows and columns represent artists and the entries in the matrix give us the number of users that have both artist at row i and column j in their profile – see Listing 1.

Listing 1 : matrix representation of the data and a d3 command to transform the data for the visualization

var matrix5x5 = [
    [0, 5, 7, 2, 0],
    [5, 0, 3, 4, 1],
    [7, 3, 0, 6, 3],
    [2, 4, 6, 0, 8],
    [0, 1, 3, 8, 0]
];

Implementing the visualization

SVG element

First the SVG element is defined, as shown in Listing 2.

Listing 2 : creating a new SVG element

var width = 550;
var height = 550;
var svg = d3.select("#chart")
     .append("svg")
     .attr("width", width)
     .attr("height", height)
     .append("g")
     .attr("transform","translate(" + width / 2 + "," + height / 2 + ")");

D3 Chord diagram function

To make the chord diagram, we need to define an annulet with an inner and outer radius relative to the size of the canvas. Next we define a new chord layout and add the matrix to this chord layout. Then we add a new element to the SVG for each artist that corresponds to an area on that annulet. The code for this part is shown in Listing 3.

Listing 3 : defining an annulet and for each artist an area on that annulet

var range5 = ["#000000", "#33585e", "#957244", "#F26223", "#155420"];
var fill = d3.scale.ordinal()
       .domain(d3.range(range5.length))
       .range(range5);
var innerRadius = Math.min(width, height) * .41;
var outerRadius = innerRadius * 1.1;
var chord = d3.layout.chord()
       .padding(.05)
       .sortSubgroups(d3.descending)
       .matrix(matrix5x5);

svg.append("g")
       .selectAll("path")
       .data(chord.groups)
       .enter().append("path")
       .style("fill", function(d) {
            return fill(d.index);
       })
       .style("stroke", function(d) {
            return fill(d.index);
       })
      .attr("d", d3.svg.arc()
           .innerRadius(innerRadius)
           .outerRadius(outerRadius))
      .on("mouseover", fade(.1))
      .on("mouseout", fade(1));

To hide some of the diagram showing only relevant parts when hovering one of the artists, we’ve added a mouseover and mouseout event to the diagram, changing the opacity of the relevant elements. The source code of this function is listed in Listing 4.

Listing 4 : changing the opacity of certain elements in the diagram

function fade(opacity) {
    return function(g, i) {
        svg.selectAll("g.chord path")
            .filter(function(d) {
                return d.source.index != i && d.target.index != i;
            })
            .transition()
            .style("opacity", opacity);
    };
}

Creating chords

Finally we have to connect each source and target through a chord. This is shown in Listing 5.

Listing 5 : connecting artist sources and targets

svg.append("g")
    .attr("class", "chord")
    .selectAll("path")
    .data(chord.chords)
    .enter().append("path")
    .style("fill", function(d) {
        return fill(d.target.index);
    })
    .attr("d", d3.svg.chord().radius(innerRadius))
    .style("opacity", 1);

Result

The resulting visualization of the script can be seen in Figure 1. Figure 2 shows the effect of the mouseover function when hovering over one of the sources.

Figure 1 : the resulting data visualization

Figure 2 : selecting an artist emphasizes the connectivity with other artists: most users who have Deftones in their profile also have Cloudkicker in their profile.

Final thoughts

Combining SVG with JavaScript enables us to create interactive and visually pleasing visualizations. SVG is a W3C standard making it a good choice for web applications. The D3 JavaScript library offers some interesting functionality that can be adapted and customized.

The source code for this example project can be found and downloaded here.

References

[1] World Wide Web Consortium (W3C), “Scalable Vector Graphics (SVG) 1.1 (Second Edition),” World Wide Web Consortium (W3C), 16 August 2011. [Online]. Available: http://www.w3.org/TR/SVG/. [Accessed 26 December 2012].

[2] World Wide Web Consortium (W3C), “Implementations – SVG,” World Wide Web Consortium (W3C), 12 August 2010. [Online]. Available: http://www.w3.org/Graphics/SVG/WG/wiki/Implementations. [Accessed 26 December 2012].

[3] Microsoft, “SVG – Internet Explorer 9 Guide for Developers,” Microsoft, 2012. [Online]. Available: http://msdn.microsoft.com/en-us/ie/hh410107.aspx. [Accessed 26 December 2012].

[4] M. Bostock, “D3.js – Data-Driven Documents,” D3, 2012. [Online]. Available: http://d3js.org/. [Accessed 26 December 2012].

[5] S. Murray, “D3 Tutorials — Scott Murray — alignedleft,” Scott Murray, 2012. [Online]. Available: http://alignedleft.com/tutorials/d3/. [Accessed 26 December 2012].

[6] M. Bostock, “Chord Diagram,” 13 December 2012. [Online]. Available: http://bl.ocks.org/4062006. [Accessed 26 December 2012].

[7] M. Krzywinski, “Introduction to Circos, Features and Uses,” Circos, 2012. [Online]. Available: http://circos.ca/. [Accessed 26 December 2012].

[8] M. Bostock, “Chord Layout – mbostock/d3 Wiki,” D3, April 2012. [Online]. Available: https://github.com/mbostock/d3/wiki/Chord-Layout. [Accessed 26 December 2012].

Advertisement