Skip to content

Bubble chart ​

The bubble chart is a means of representing hierarchically related data, that is, it represents groups of items that themselves may have other items grouped under them.

Parameters ​

In addition to all of the standard parameters the following apply to bubble charts.

dataJSON/Python dict

The data for a bubble chart is unique, with a single dictionary representing the outermost circle, and a list of child nodes, like this:

json
{
  "name": "root",
  "children": [
    {
      "name": "Group A",
      "children": [
        { "name": "Alpha", "value": 50 },
        { "name": "Beta", "value": 30 },
        { "name": "Epsilon", "value": 35 },
        {
          "name": "Subgroup A1",
          "children": [
            { "name": "A1-Node1", "value": 15 },
            { "name": "A1-Node2", "value": 10 }
          ]
        }
      ]
    }
  ]
}
ease_inBoolean

In addition the chart takes an ease_in parameter, with default of false that produces an animation when the chart loads in the browser, and a drag_animations parameter.

Example ​

Following is a relatively complex bubble chart produced with:

html
<bubblechart
  path="data/bubbles.json"
  format="json"
  width=500
  height=500
  colors='deep'
  ease_in = 1
> </bubblechart>

where data/bubbles.json contains a file similar to the JSON shown above. Here are the first few lines:

json
{
      "name": "root",
      "children": [
        {
          "name": "Group A",
          "children": [
            { "name": "Alpha", "value": 50 },
            { "name": "Beta", "value": 30 },
            { "name": "Gamma", "value": 20 },
            { "name": "Delta", "value": 25 },
            { "name": "Epsilon", "value": 35 },
            {
              "name": "Subgroup A1",
              "children": [
                { "name": "A1-Node1", "value": 15 },
                { "name": "A1-Node2", "value": 10 },
                ...

Released under the MIT License. | Privacy Policy