API proposal for a simple force-directed bubble chart library

readme.md

Force-directed Bubble Charts

Proposal for a simple force-directed bubble chart library. The visualization would show a set of bubbles which try to move towards a (definable) center of gravity. The library would try to render the bubbles using whatever technology is supported by the client (canvas, svg, flash).

var items = [
   { amount: 12345.67, label: "Foo", id: "foo", color: "#345" }, 
   /* ... */
];

var bc = new BubbleChart({
    container: '#bubblechart',
    data: items,
    radius: function(item) { return Math.sqrt(item.amount)*0.1; },
    color: function(item) { return item.color; },
    click: function(evt) { console.log('you clicked ' + evt.target.bubble.item.label); }
});
 

During runtime, bubbles can be added or removed.

bc.addItems([ /* some more items */ ]);  
bc.removeItems(['foo']);  // items will be recognized by id

If the source data objects are be changed during runtime, you can tell the library to update the bubbles (sizes, colors, etc). It will animate the transition between the states.

bc.updateItems();
bc.updateItems({ duration: 300 });  // adjust animation duration