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