bubble-chart

A javascript library to build bubble chart using d3 and d3plus

Examples

Test BubbleChart online with JSFiddle

• Simple bubble chart
• Timeline
• Event Handler
• Simple Gauge chart
• Wave Gauge chart
• Liquid Gauge chart
• Bubble Tree
• Motion Bubble

Usage

Below is quick example how to use :

Download the latest version library and include it in your html.

<scriptsrc="js/jquery.js"></script><scriptsrc="js/d3.min.js"></script><scriptsrc="js/d3plus.min.js"></script><scriptsrc="js/bubbles-chart.js"></script><linkhref="css/bubbles-chart.css" rel="stylesheet">

Add a container in your html :

...
<divid="bubbles-chart"></div>

This code build a simple bubble chart

...
varviz=newBubbleChart({container: "#bubbles-chart",label: "label",size: "size"});viz.data(data);

Options

The available configuration options from a bubble chart:

options.container

Type: String

Container where the list will build.

options.label

Type: Array|String

The json attribute name that determines the label of the bubble.

options.size

Type: Array

The json attribute name that determines the size of the bubble.

options[time]

Type: String

Default: false

The json attribute name that determines the time of the chart. Define the timeline.

options[type]

Type: String

Default: none

Determine the type of fill of the bubble, when percentage filling function is used. The types available are:

• none : simple flat fill.
• wave : wave like fill.
• liquid : animate wave fill.
• tree: orbital bubbles (bubble tree).
• motion: animate bubbles.

options[defaultColor]

Type: String

Default: #ddd

Text default color over a white background.

options[percentage(d)]

Type: Function

• {Object} d: the bubble data.

Default: false

Return a number between 0 and 1. Calculates the percentage of the bubble to fill.

varvizData=[{"label": "Data1","size": 2065724632,"count":50},//...{"label": "Data3","size": 48130171902,"count": 20}];varviz=newBubbleChart({container: "#bubbles-chart",label: "label",size: "size",percentage: function(d){//Return a number between 0 and 1returnd.count/100;}});//do somethingviz.data(data);

options[format]

Type: Object

Visualization text and number formater

varviz=newBubbleChart({container: "#bubbles-chart",label: "label",size: "size",format: {text: function(text,key){returnd3plus.string.title(text);},number: function(number,data){returnd3plus.number.format(number)}}});

options[tooltip(d)]

Type: Function

• {Object} d: the bubble data.

Bubble tooltip builder.

varviz=newBubbleChart({container: "#bubbles-chart",label: "label",size: "size",tooltip: function(d){return[{"value": d.att1,"name": "Attr1:"},{"value": d.attr2,"name": "Attr2:"}]}});

Functions

The available functions to interact with the bubble chart:

BubbleChart.data(data)

Type: Function

• {Array}data: the visualization data.

Sets the data associated with your visualization.

varvizData=[{"label": "Data1","size": 2065724632,},{"label": "Data2","size": 141765766652,},{"label": "Data3","size": 48130171902,}];
...
varviz=newBubbleChart({container: "#bubbles-chart",label: "label",size: "size"});//do someting
...
//setting dataviz.data(vizData);

BubbleChart.on(event, handler)

Type: Function

• {String}event: the name of the event.
• {Function}handler: handler function.

The events available are:

• mouseenter : triggered when the mouse enter into the bubble.
• mouseover : triggered when the mouser is over the bubble.
• mouseout : triggered when the mouse left the bubble.
• click : triggered when the bubble clicked.

varviz=newBubbleChart({...});viz.on("mouseenter",function(d){//do sometingconsole.log("mouseenter",d);});viz.on("mouseover",function(d){//do sometingconsole.log("mouseover",d);});viz.on("mouseout",function(d){//do sometingconsole.log("mouseout",d);});viz.on("click",function(d){//do sometingconsole.log("mouseclick",d);});//setting dataviz.data(vizData);

Want to contribute?

If you've found a bug or have a great idea for new feature let me know by [adding your suggestion] (http://github.com/mbaez/bubbles-chart/issues/new) to issues list.