A javascript library to build bubble chart using d3 and d3plus
Test BubbleChart online with JSFiddle
- Simple bubble chart
- Timeline
- Event Handler
- Simple Gauge chart
- Wave Gauge chart
- Liquid Gauge chart
- Bubble Tree
- Motion Bubble
Below is quick example how to use :
Download the latest version library and include it in your html.
<script src="js/jquery.js"></script>
<script src="js/d3.min.js"></script>
<script src="js/d3plus.min.js"></script>
<script src="js/bubbles-chart.js"></script>
<link href="css/bubbles-chart.css" rel="stylesheet">Add a container in your html :
...
<div id="bubbles-chart"></div>This code build a simple bubble chart
...
var viz = new BubbleChart({
container: "#bubbles-chart",
label: "label",
size: "size"
});
viz.data(data);The available configuration options from a bubble chart:
Type: String
Container where the list will build.
Type: Array|String
The json attribute name that determines the label of the bubble.
Type: Array
The json attribute name that determines the size of the bubble.
Type: String
Default: false
The json attribute name that determines the time of the chart. Define the timeline.
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.
Type: String
Default: #ddd
Text default color over a white background.
Type: Function
{Object} d: the bubble data.
Default: false
Return a number between 0 and 1. Calculates the percentage of the bubble to fill.
var vizData = [{
"label": "Data1",
"size": 2065724632,
"count":50
},
//...
{
"label": "Data3",
"size": 48130171902,
"count": 20
}];
var viz = new BubbleChart({
container: "#bubbles-chart",
label: "label",
size: "size",
percentage: function(d) {
//Return a number between 0 and 1
return d.count / 100;
}
});
//do something
viz.data(data);Type: Object
Visualization text and number formater
var viz = new BubbleChart({
container: "#bubbles-chart",
label: "label",
size: "size",
format: {
text: function (text, key) {
return d3plus.string.title(text);
},
number: function (number, data) {
return d3plus.number.format(number)
}
}
});Type: Function
{Object} d: the bubble data.
Bubble tooltip builder.
var viz = new BubbleChart({
container: "#bubbles-chart",
label: "label",
size: "size",
tooltip: function (d) {
return [{
"value": d.att1,
"name": "Attr1:"
}, {
"value": d.attr2,
"name": "Attr2:"
}
]
}
});The available functions to interact with the bubble chart:
Type: Function
{Array}data: the visualization data.
Sets the data associated with your visualization.
var vizData = [{
"label": "Data1",
"size": 2065724632,
}, {
"label": "Data2",
"size": 141765766652,
}, {
"label": "Data3",
"size": 48130171902,
}];
...
var viz = new BubbleChart({
container: "#bubbles-chart",
label: "label",
size: "size"
});
//do someting
...
//setting data
viz.data(vizData);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.
var viz = new BubbleChart({...});
viz.on("mouseenter", function(d) {
//do someting
console.log("mouseenter", d);
});
viz.on("mouseover", function(d) {
//do someting
console.log("mouseover", d);
});
viz.on("mouseout", function(d) {
//do someting
console.log("mouseout", d);
});
viz.on("click", function(d) {
//do someting
console.log("mouseclick", d);
});
//setting data
viz.data(vizData);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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent