When you add dimensions to the channels, there is a simple rule to keep in mind in the current beta phase of Vizzu. The following example also shows how to group and stack elements of a bar chart.
The rule: When you add a dimension (Type) to a channel (x-axis) with only dimensions on it, Vizzu will fade between the states, as shown here. Thus, you get a grouped bar chart, but the connection between the original state and this one will be unclear for the viewer because of the fading.
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"}, "x": {"set": "Genres"}}}))
chart.animate(Config({"channels": {"label": {"attach": ["Popularity"]}}}))
chart.animate(Config({
"channels": {
"x": {"set": ["Genres", "Types"]},
"color": {"attach": ["Types"]},
},
}))
chart.show()
Let’s get back to the original state by removing the extra dimension - Vizzu will also simply fade 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"}, "x": {"set": "Genres"}}}))
chart.animate(Config({"channels": {"label": {"attach": ["Popularity"]}}}))
chart.animate(Config({
"channels": {
"x": {"set": ["Genres", "Types"]},
"color": {"attach": ["Types"]},
},
}))
chart.animate(Config({
"channels": {
"x": {"detach": ["Types"]},
"color": {"set": None},
},
}))
chart.show()
The right way is to add the new dimension to the same channel where the measure is: the y-axis. However, since doing only this would result in multiple column chart elements with the same color stacked on top of each other, we also add the same dimension (Type) to the color channel.
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"}, "x": {"set": "Genres"}}}))
chart.animate(Config({"channels": {"label": {"attach": ["Popularity"]}}}))
chart.animate(Config({
"channels": {
"y": {"attach": ["Types"]},
"color": {"attach": ["Types"]},
},
}))
chart.show()
By detaching this newly added dimension from the y-axis and attaching it to the x-axis, you get to the same grouped bar chart as in the first step but in a way that is easy to follow for the viewer.
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"}, "x": {"set": "Genres"}}}))
chart.animate(Config({"channels": {"label": {"attach": ["Popularity"]}}}))
chart.animate(Config({
"channels": {
"y": {"attach": ["Types"]},
"color": {"attach": ["Types"]},
},
}))
chart.animate(Config({
"channels": {
"y": {"detach": ["Types"]},
"x": {"attach": ["Types"]},
},
}))
chart.show()
To stack a grouped chart, you just have to do the same thing the other way around: detach the dimension from the x-axis and attach it to the y-axis.
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"}, "x": {"set": "Genres"}}}))
chart.animate(Config({"channels": {"label": {"attach": ["Popularity"]}}}))
chart.animate(Config({
"channels": {
"y": {"attach": ["Types"]},
"color": {"attach": ["Types"]},
},
}))
chart.animate(Config({
"channels": {
"y": {"detach": ["Types"]},
"x": {"attach": ["Types"]},
},
}))
chart.animate(Config({
"channels": {
"y": {"attach": ["Types"]},
"x": {"detach": ["Types"]},
},
}))
chart.show()