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. Since the same dimensions are used in both cases Vizzu will be able to animate between these states.
from ipyvizzu import Chart, Data, Config
data = Data()
data.add_dimension('Genres', [ 'Pop', 'Rock', 'Jazz', 'Metal'])
data.add_dimension('Types', [ 'Hard', 'Smooth', 'Experimental' ])
data.add_measure(
'Popularity',
[
[114, 96, 78, 52],
[56, 36, 174, 121],
[127, 83, 94, 58],
]
)
chart = Chart()
chart.animate(data)
chart.animate(Config({"channels": {"y": {"set": ["Popularity", "Types"]}, "x": {"set": "Genres"}}}))
chart.animate(Config({"channels": {"label": {"attach": ["Popularity"]}}}))
chart.animate(Config({"color": {"set": ["Genres"]}}))
chart.animate(Config({
"channels": {
"y": {
"set": None,
},
"x": {
"set": None,
},
"size": {
"attach": ["Genres", "Popularity"],
}
}
}))
chart.show()
Getting from a treemap to a bubble chart is simply by changing the geometry to circle. This bubble chart is stacked by the Type dimension that is on the size channel - this is why the bubbles are in separate, small groups.
from ipyvizzu import Chart, Data, Config
data = Data()
data.add_dimension('Genres', [ 'Pop', 'Rock', 'Jazz', 'Metal'])
data.add_dimension('Types', [ 'Hard', 'Smooth', 'Experimental' ])
data.add_measure(
'Popularity',
[
[114, 96, 78, 52],
[56, 36, 174, 121],
[127, 83, 94, 58],
]
)
chart = Chart()
chart.animate(data)
chart.animate(Config({"channels": {"y": {"set": ["Popularity", "Types"]}, "x": {"set": "Genres"}}}))
chart.animate(Config({"channels": {"label": {"attach": ["Popularity"]}}}))
chart.animate(Config({"color": {"set": ["Genres"]}}))
chart.animate(Config({
"channels": {
"y": {
"set": None,
},
"x": {
"set": None,
},
"size": {
"attach": ["Genres", "Popularity"],
}
}
}))
chart.animate(Config({
"geometry": "circle",
}))
chart.show()