Skip to content
d3.js extension for interactive balloon plots
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.

d3-balloon.js – A d3.js extension for interactive balloon plots in the Web

April/Mai 2017, Markus Konrad / Berlin Social Science Center

d3-balloon.js is an extension for d3.js v4 for interactive balloon plots that look like these:

balloon plot example

balloon plot example with mouseover

You can also have a look at a live example with random data here:

This plot has been created with the following simple code:

// create the balloon plot
var bplot = balloonplot(370, 200)
    .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
    .attr("class", "balloon_plot");
bplot.init();   // starts transition

Notice: It only works with d3.js version 4.x, not with version 3.x!

You can’t perform that action at this time.