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
Recent Comments