Skip to content

Without coordinates & noop channel

Certain chart types have neither measures nor dimensions on the axes such as treemaps and bubble charts. This is a case when the noop channel comes in handy for grouping and stacking elements in these kinds of charts.

To get to a treemap, we have to detach all dimensions and the measure from the axes and put two of them on the size channel, whereas the other dimension is still on the color channel.

Info - How to setup Vizzu

In HTML, create a placeholder element that will contain the rendered chart.

<html>
 <body>
  <div id="myVizzu">
  </div>
 </body>
</html>

In JavaScript, initialize and configure the chart:

import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@0.15/dist/vizzu.min.js'
import data from 'https://lib.vizzuhq.com/0.15/assets/data/music_data.js'

let chart = new Vizzu('myVizzu')

await chart.initializing

chart.animate({
    data: data,
    config: {
        channels: {
            y: {
                set: ['Popularity', 'Kinds']
            },
            x: {
                set: ['Genres']
            },
            color: {
                set: ['Kinds']
            },
            label: {
                set: ['Popularity']
            },
        },
    }
})

chart.animate({
    config: {
        channels: {
            y: {
                set: null
            },
            x: {
                set: null
            },
            size: {
                attach: ['Genres', 'Popularity']
            }
        }
    }
})

Getting from a treemap to a bubble chart is simply by changing the geometry to circle. This bubble chart is stacked by the Kinds dimension that is on the size channel - this is why the bubbles are in separate, small groups.

chart.animate({
    config: {
        geometry: 'circle'
    }
})

In order to show all bubbles as one group, we use the noop (no operations) channel for the Genres dimension. The noop channel enables us to have a dimension on the chart, that doesn’t affect any parameter of the elements, only their count.

chart.animate({
    config: {
        channels: {
            size: {
                detach: ['Genres']
            },
            noop: {
                set: ['Genres']
            }
        }
    }
})