# Axes, title, tooltip¶

To build a chart with ipyvizzu, you have to add data series to the channels.

Note: From this point on there are ipyvizzu code snippets in the notebook cells within the Tutorial that you can run to see how they work.

Note: As you can see, at the end of the first cell (and all the other cells except for the last one), we create a snapshot of the last phase of the chart created within the cell with the chart.store() method. Then, at the beginning of the next cell, we use the same snapshot to start the animation. Although this is NOT necessary when using ipyvizzu, it is added to ensure that no matter which notebook cell you run, the animation will start from the phase it should be. For example, without this, if you rerun the 2nd cell after the whole notebook has been run, then ipyvizzu will try to animate from the end of the last phase to the end of the 2nd cell.

The first step is to create a simple column chart, adding one of the dimensions from the data set we added in the previous chapter (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.

Note: The data used in this tutorial is available here. You can read more about the available types of data in the Adding data chapter.

In [1]:
from ipyvizzu import Chart, Data, Config

chart = Chart()

data = Data.from_json("./music_data.json")

chart.animate(data)

chart.animate(
Config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}})
)

chart.animate(
Config({"channels": {"y": {"set": ["Popularity", "Genres"]}, "x": {"set": None}}})
)

chart.animate(
Config({"channels": {"y": {"detach": "Popularity"}, "x": {"attach": "Popularity"}}})
)

snapshot1 = chart.store()


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.

Note: Add the following code to log the actual configuration of the chart in the browser console.

In [2]:
from ipyvizzu import ChartProperty

chart.log(ChartProperty.CONFIG)


Setting the chart title with the title command.

In [3]:
chart.animate(snapshot1)

chart.animate(Config({"title": "My first chart"}))

snapshot2 = chart.store()


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.

In [4]:
chart.animate(snapshot2)

chart.feature("tooltip", True)


Next chapter: Geometry ----- Previous chapter: Adding data ----- Back to the Table of contents
{"extraction_info": {"found_math": true, "script_math_tex": 0, "script_math_asciimath": 0, "math_annotations": 0, "math_alttext": 0, "mathml": 0, "mathjax_tag": 0, "mathjax_inline_tex": 0, "mathjax_display_tex": 0, "mathjax_asciimath": 1, "img_math": 0, "codecogs_latex": 0, "wp_latex": 0, "mimetex.cgi": 0, "/images/math/codecogs": 0, "mathtex.cgi": 0, "katex": 0, "math-container": 0, "wp-katex-eq": 0, "align": 0, "equation": 0, "x-ck12": 0, "texerror": 0, "math_score": 0.28646981716156006, "perplexity": 1484.6088908494505}, "config": {"markdown_headings": true, "markdown_code": true, "boilerplate_config": {"ratio_threshold": 0.18, "absolute_threshold": 10, "end_threshold": 15, "enable": false}, "remove_buttons": true, "remove_image_figures": true, "remove_link_clusters": true, "table_config": {"min_rows": 2, "min_cols": 3, "format": "plain"}, "remove_chinese": true, "remove_edit_buttons": true, "extract_latex": true}, "warc_path": "s3://commoncrawl/crawl-data/CC-MAIN-2022-40/segments/1664030334942.88/warc/CC-MAIN-20220926211042-20220927001042-00679.warc.gz"}