Interactive Balloon Charts with d3-balloon

As explained before, balloon plots can be a good way to compare many observations with lots of variables. I have now created a small extension for d3.js v4 that allows to implement interactive balloon charts quite easily. It is available on GitHub and can be seen live in action for a recent news article about segregation in schools on the WZB website.

Implementing a similar plot is quite simple with d3-balloon when you have a n by m matrix data with n observations and m variables:

// create the balloon plot
var bplot = balloonplot(370, 200)   // create and set size of the plot
    .position(40, 65)               // set the top-left offset
    .transition(transition)         // enable transitions
    .colorScale('y', yColor)        // set the row-wise colors
    .interactionOnElements(['circle', 'x', 'y'])   // enable interactions for mouseover/touch on circles and axes
    .valueTextFmt(function (v) { return Math.round(v * 100) / 100; })   // custom value formatter
    .data(data)                     // pass the 2D data matrix
    .xAxis(d3.axisTop, xLabels)     // enable the X axis and pass the tick labels
    .yAxis(d3.axisRight, yLabels)   // enable the Y axis and pass the tick labels
    .legend('bottom', 3);           // legend below the plot with 3 sample circles

// add it to the SVG canvas
svg.append(bplot)
    .attr("class", "balloon_plot");
bplot.init();   // starts transition

Comments are closed.

Post Navigation