Vizzu is a free, open-source Javascript/C++ library utilizing a generic dataviz engine that generates many types of charts and seamlessly animates between them. It can be used to create static charts but more importantly it is designed for building animated data stories and interactive explorers as Vizzu enables showing different perspectives of the data that the viewers can easily follow due to the animation.
ipyvizzu is a jupyter notebook integration for the vizzu project. ipyvizzu works only in the jupyter notebook environment.
The examples bellow are copied from the vizzu tutorial. You can read more information from there.
import ipyvizzu
data = ipyvizzu.Data()
data.add_serie("Foo", ['Alice', 'Bob', 'Ted'])
data.add_serie("Bar", [15, 32, 12])
data.add_serie("Baz", [5, 2, 2])
chart = ipyvizzu.Chart()
chart.set_data(data)
chart.animate(x="Foo", y="Bar", color="Foo")
chart.animate(geometry="circle")
chart.animate(x="Foo", y="Baz", color="Foo")
chart.animate(geometry="rectangle")
chart.show()
Vizzu currently supports two types of data series: dimensions and measures. Dimensions slice the data cube Vizzu uses, whereas measures are values within the cube.
Dimensions are categorical series that can contain strings and numbers, but both will be treated as strings. Temporal data such as dates or timestamps should also be added as dimensions. Vizzu will draw the elements on the chart in the order they are provided in the data set by default. Thus we suggest adding temporal data in a sorted format from oldest to newest.
Measure in the current beta phase can only be numerical. Adding data
There are multiple ways you can add data to Vizzu:
Elements with a missing value should contain the number zero. null, undefined and empty cells will result in an error. In case of dimensions, add '' as a value to have a category without a name.
In the first two cases, data has to be in first normal form. Here is an example of that:
| Genres | Types | Popularity |
|---|---|---|
| Pop | Hard | 114 |
| Rock | Hard | 96 |
| Jazz | Hard | 78 |
| Metal | Hard | 52 |
| Pop | Smooth | 56 |
| Rock | Smooth | 36 |
| Jazz | Smooth | 174 |
| Metal | Smooth | 121 |
| Pop | Experimental | 127 |
| Rock | Experimental | 83 |
| Jazz | Experimental | 94 |
| Metal | Experimental | 58 |
In the type parameter, you can set if a series is a dimension or a measure. Adding the type parameter is optional. If omitted, Vizzu will automatically select the type depending on the first element of the values array using the typeof operator. If all items are numbers, it will be declared as a measure, in any other case, a dimension.
Data specified by series:
import ipyvizzu
data_series = ipyvizzu.Data()
data_series.add_serie(
"Genres",
["Pop", "Rock", "Jazz", "Metal",
"Pop", "Rock", "Jazz", "Metal",
"Pop", "Rock", "Jazz", "Metal"],
type="dimension"
)
data_series.add_serie(
"Types",
["Hard", "Hard", "Hard", "Hard",
"Smooth", "Smooth", "Smooth", "Smooth",
"Experimental", "Experimental", "Experimental", "Experimental"],
type="dimension"
)
data_series.add_serie(
"Popularity",
[114, 96, 78, 52, 56, 36, 174, 121, 127, 83, 94, 58],
type="measure"
)
Data specified by records:
import ipyvizzu
data_records = ipyvizzu.Data()
data_records.add_serie('Genres', type='dimension')
data_records.add_serie('Types', type='dimension')
data_records.add_serie('Popularity', type='measure')
records = [
['Pop', 'Hard', 114],
['Rock', 'Hard', 96],
['Jazz', 'Hard', 78],
['Metal', 'Hard', 52],
['Pop', 'Smooth', 56],
['Rock', 'Smooth', 36],
['Jazz', 'Smooth', 174],
['Metal', 'Smooth', 121],
['Pop', 'Experimental', 127],
['Rock', 'Experimental', 83],
['Jazz', 'Experimental', 94],
['Metal', 'Experimental', 58],
]
result = map(data_records.add_record, records)
Data cube
import ipyvizzu
data_cube = ipyvizzu.Data()
data_cube.add_dimension('Genres', [ 'Pop', 'Rock', 'Jazz', 'Metal'])
data_cube.add_dimension('Types', [ 'Hard', 'Smooth', 'Experimental' ])
data_cube.add_measure(
'Popularity',
[
[114, 96, 78, 52],
[56, 36, 174, 121],
[127, 83, 94, 58],
]
)
To build a chart with Vizzu, you have to add data series to the channels.
The first step is to create a simple column chart, adding one of the dimensions (Genre) to the x-axis and the measure (Popularity) to the y-axis using the set property.
In the next step, the chart is rearranged by putting both series on the y-axis using once again the set property, resulting in a single column chart. Vizzu automatically animates between the initial state and this one.
Or instead of set, you can use attach and detach to add or remove series to/from the channels.
Using attach & detach makes it easier to build your animated charts step-by-step, however you either have to keep in mind what you had on which channel in the previous step or add the following code to access the actual configuration of the chart.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"y": {"set": ["Popularity", "Genres"]}, "x": {"set": None}}})
chart.set_config({"channels": {"y": {"detach": "Popularity"}, "x": {"attach": "Popularity"}}})
chart.show()
Setting the chart title with the title command.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.animate(title="My first chart")
chart.show()
Switching on the tooltips that appear on the chart elements when the user hovers over them with their mouse by adding the (tooltip, true) parameters to the chart.feature method.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_feature("tooltip", True)
chart.show()
In Vizzu you can set the geometric elements used to represent your data by the geometry property within the config object.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"geometry": "area"})
chart.set_config({"geometry": "line"})
chart.set_config({"geometry": "circle"})
chart.set_config({"geometry": "rectangle"})
chart.show()
Besides the x-axis and the y-axis, there are five more channels in Vizzu you can use to visualize your data. Similarly to the axes you can put any number of dimensions and/or one measure to a channel. In the following example the four most commonly used channels are shown. The fifth, noop channel is introduced later in the Without coordinates & noop channel chapter.
Data on the label channel will be written on the markers on the chart. Vizzu automatically determines the best way to position these labels, but you can set them differently with the style object introduced in the Color palette & fonts chapter.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.show()
The lightness channel sets the lightness of the markers. In this case the same measure (Popularity) is added to it that is on the y-axis, meaning that columns’ height and lightness represent the same values. The legend for the lightness channel is turned on using the legend property.
Note: This is an example when we explicitly instruct Vizzu to show the legend. By default Vizzu automatically shows/hides the legend when it's necessary. You can also turn it off with the legend : null command or set back to automatic mode with legend : 'auto'.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({
"channels": {
"lightness": {"attach": ["Popularity"]}
},
"legend": "lightness"
})
chart.show()
The color channel sets the color of the markers. The same dimension (Genres) is put on it that is on the x-axis resulting in each bar having a different color. If a measure is put on the color channel, a color range will be used.
Note: The value on the lightness channel is removed in this step as it doesn’t make sense to use it together with the color channel in this case.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({
"channels": {
"color": {"attach": ["Genres"]}
},
"legend": "color"
})
chart.show()
The size channel sets the size of the markers if the geometry is circle - where size sets the radius of the circles - or line - where size determines line width. It is ignored when using rectangle or area geometry. This is why we change the geometry to circle in the example.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({
"channels": {
"size": {"set": ["Popularity"]}
},
"geometry": "circle"
})
chart.show()
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.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_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.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({
"channels": {
"x": {"set": ["Genres", "Types"]},
"color": {"attach": ["Types"]},
},
})
chart.set_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.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_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.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({
"channels": {
"y": {"attach": ["Types"]},
"color": {"attach": ["Types"]},
},
})
chart.set_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.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({
"channels": {
"y": {"attach": ["Types"]},
"color": {"attach": ["Types"]},
},
})
chart.set_config({
"channels": {
"y": {"detach": ["Types"]},
"x": {"attach": ["Types"]},
},
})
chart.set_config({
"channels": {
"y": {"attach": ["Types"]},
"x": {"detach": ["Types"]},
},
})
chart.show()
Vizzu provides multiple options to sort data. By default, the data is sorted by the order it is added to Vizzu. This is why we suggest to add temporal data such as dates in chronological order - from oldest to newest.
You can also sort the elements by value, which will provide you with an ascending order.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres"]}})
chart.set_config({
"sort": "byValue",
})
chart.show()
If you want descending order instead, you have to set the reverse parameter to true. When used without setting the sorting to byValue, the elements will be in the opposite order than they are in the data set added to Vizzu.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres"]}})
chart.set_config({
"sort": "byValue",
"reverse": True,
})
chart.show()
This is how to switch back to the default sorting
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres"]}})
chart.set_config({
"sort": "byValue",
"reverse": True,
})
chart.set_config({
"sort": "none",
"reverse": False,
})
chart.show()
When you have more than one dimension on a channel, their order determines how the elements are grouped.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres"]}})
chart.set_config({
"channels": {
"y": {"detach": ["Types"]},
"x": {"set": ["Genres", "Types"]},
}
})
chart.show()
When switching the order of dimensions on the x-axis Vizzu will rearrange the elements according to this new logic.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres"]}})
chart.set_config({
"channels": {
"y": {"detach": ["Types"]},
"x": {"set": ["Genres", "Types"]},
}
})
chart.set_config({
"channels": {
"x": {"set": ["Types", "Genres"]},
}
})
chart.show()
Vizzu offers different options to align your chart elements and to set the range of values shown on the axes. Alignment can be used to create charts like a stream chart where the elements are vertically centered . A good example for using range is when you fix the y-axis so that it would not adapt to the data being shown.
Centered alignment. The effect of this parameter depends on the orientation of the chart. For example, on a column chart, elements will be vertically centered, whereas on a bar chart, horizontally.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres", "Types"]}})
chart.set_config({
"align": "center",
})
chart.show()
Stretched alignment. This way the elements will proportionally fill the entire plot area, effectively showing proportions in stacked charts. This is why the scale will also switch from values to percentages when used.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres", "Types"]}})
chart.set_config({
"align": "center",
})
chart.set_config({
"align": "stretch",
})
chart.show()
Getting back to the default alignment
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres", "Types"]}})
chart.set_config({
"align": "center",
})
chart.set_config({
"align": "none",
})
chart.show()
You can set the range of an axis by setting the minimum and maximum values of it. Both parameters are optional so that you can set only one of those, and you either set specific values or a relative value by adding the % sign. In this example, we set the range of the y-axis in a way that the max value is 150% of the biggest element’s value.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres", "Types"]}})
chart.set_config({
"channels": {
"y": {
"range": {
"max": "150%"
}
}
}
})
chart.show()
You can also set the range for an axis with a dimension on it. You can even use this feature to filter certain elements, just like in the following example.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres", "Types"]}})
chart.set_config({
"channels": {
"y": {
"range": {
"max": "150%"
}
}
}
})
chart.set_config({
"channels": {
"x": {
"range": {
"min": -2,
"max": 3,
}
}
}
})
chart.show()
Ranges have certain defaults depending on the chart's configuration, based on common data viz guidelines because we wanted to make it easy for you to create sleek charts. For example, in the cartesian coordinate system, the range will be automatically set to the max:110% for an axis with a measure on it. Polar coordinates work differently, as you can see for yourself in the Orientation, split & polar chapter.
Whenever you want to set your ranges back to the default value, just set them to ‘auto’.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres", "Types"]}})
chart.set_config({
"channels": {
"y": {
"range": {
"max": "150%"
}
}
}
})
chart.set_config({
"channels": {
"x": {
"range": {
"min": -2,
"max": 3,
}
}
}
})
chart.set_config({
"channels": {
"y": {
"range": {
"max": "auto"
}
},
"x": {
"range": {
"min": "auto",
"max": "auto",
}
}
}
})
chart.show()
These features basically mean that you add or remove an additional dimension to/from an axis or another channel. As you can see below, there are some important things to keep in mind when you use them.
Let’s stack together the elements by putting the Genres dimension from the x-axis to the y-axis. At the end of this phase, there are chart elements with the same color stacked on top of each other, which is something you would want to avoid.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres"]}})
chart.set_config({
"channels": {
"y": {
"attach": ["Genres"],
},
"x": {
"set": None
}
}
})
chart.show()
By taking the Genres off of the y-axis, only one chart element remains for every color, and Vizzu automatically calculates and shows the aggregate value of the elements.
Note: Instead of taking the unwanted dimension down from the chart, Genres could have been added to the lightness channel to differentiate the chart elements.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres"]}})
chart.set_config({
"channels": {
"y": {
"attach": ["Genres"],
},
"x": {
"set": None
}
}
})
chart.set_config({
"channels": {
"y": {
"detach": ["Genres"],
},
}
})
chart.show()
To drill-down, the same dimension is put back on the y-axis, which results in a state that we suggest you to only use temporarily when in transition.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres"]}})
chart.set_config({
"channels": {
"y": {
"attach": ["Genres"],
},
"x": {
"set": None
}
}
})
chart.set_config({
"channels": {
"y": {
"detach": ["Genres"],
},
}
})
chart.set_config({
"channels": {
"y": {
"attach": ["Genres"],
},
}
})
chart.show()
We group the elements by putting once again the Genres dimension on the x-axis.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres"]}})
chart.set_config({
"channels": {
"y": {
"attach": ["Genres"],
},
"x": {
"set": None,
}
}
})
chart.set_config({
"channels": {
"y": {
"detach": ["Genres"],
},
}
})
chart.set_config({
"channels": {
"y": {
"attach": ["Genres"],
},
}
})
chart.set_config({
"channels": {
"y": {
"detach": ["Genres"],
},
"x": {
"set": ["Genres"],
}
}
})
chart.show()
Now that you are familiar with the basic logic and operation of Vizzu, let's dive in with some more advanced features that you can use to create animated data stories and show the data from different perspectives.
Switching orientation means that you put a measure from one axis to the other to see the data from a different perspective. This is once again a state you should only use temporarily.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": ["Popularity", "Types"]}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres"]}})
chart.set_config({
"channels": {
"y": {
"detach": ["Popularity"],
},
"x": {
"attach": ["Popularity"],
}
}
})
chart.show()
By turning the split parameter on, you can see stacked elements side-by-side, which enables the comparison of the components.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": ["Popularity", "Types"]}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres"]}})
chart.set_config({
"channels": {
"y": {
"detach": ["Popularity"],
},
"x": {
"attach": ["Popularity"],
}
}
})
chart.set_config({
"split": True,
})
chart.show()
Merging the components by turning the split parameter off
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": ["Popularity", "Types"]}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres"]}})
chart.set_config({
"channels": {
"y": {
"detach": ["Popularity"],
},
"x": {
"attach": ["Popularity"],
}
}
})
chart.set_config({
"split": True,
})
chart.set_config({
"split": False,
})
chart.show()
We aggregate the data by removing the Genres dimension from the x-axis
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": ["Popularity", "Types"]}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres"]}})
chart.set_config({
"channels": {
"y": {
"detach": ["Popularity"],
},
"x": {
"attach": ["Popularity"],
}
}
})
chart.set_config({
"channels": {
"x": {
"detach": ["Genres"],
}
}
})
chart.show()
Switching from cartesian coordinates to polar. When doing so, it is worth setting the axis range on the axis with the dimension so that the viewers can easily compare the values shown. If you want to return to the default cartesian coordinates, just set the coordSystem parameter to ‘cartesian’.
Note: The range of the x-axis is automatically set to max:133% as this is the standard way to show radial charts.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": ["Popularity", "Types"]}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres"]}})
chart.set_config({
"channels": {
"y": {
"detach": ["Popularity"],
},
"x": {
"attach": ["Popularity"],
}
}
})
chart.set_config({
"channels": {
"y": {
"range": {
"min": "-30%",
},
},
},
"coordSystem": "polar",
})
chart.show()
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.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": ["Popularity", "Types"]}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres"]}})
chart.set_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.
import ipyvizzu
data = ipyvizzu.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 = ipyvizzu.Chart()
chart.set_data(data)
chart.set_config({"channels": {"y": {"set": ["Popularity", "Types"]}, "x": {"set": "Genres"}}})
chart.set_config({"channels": {"label": {"attach": ["Popularity"]}}})
chart.set_config({"color": {"set": ["Genres"]}})
chart.set_config({
"channels": {
"y": {
"set": None,
},
"x": {
"set": None,
},
"size": {
"attach": ["Genres", "Popularity"],
}
}
})
chart.set_config({
"geometry": "circle",
})
chart.show()