Figure Object

Understanding the Figure object

Plotly is a fully fledged data visualization system that ships with more than fifty types of charts out of the box (for example, bar charts, scatterplots, and histograms). It supports 2D and 3D visualizations, ternary plots, maps, and more. The available options for customizing almost any aspect of our charts are very detailed and can be overwhelming. This, as they say, is a good problem to have!

We use charts to uncover certain characteristics of our data or the relationships between different datasets. However, pure data visualization would be meaningless if we didn’t know what is being visualized. Imagine a rectangle that has a bunch of dots on it with clear patterns. It would still be meaningless if we didn’t know what the $x$ axis represented, for example. If we have different shapes and colors in a plot, they mean nothing without a legend. Usually, titles and annotations are also needed to give us context around the data we are trying to understand.

Those two groups, data and other supporting elements, which are collectively called layout, are two top-level attributes of Plotly’s Figure object. Each attribute has several subattributes at multiple levels, forming a tree-like structure. There is also the frames attribute, which is mainly used with animations, and it is not as common as the other two that are always present in every chart. We won’t cover it in this chapter.

Overview of attributes

Let’s now explore these attributes and start plotting to get a better understanding of how they fit together within the Figure object.

• data: The different attributes of data and the relationships between them are expressed using graphical/geometrical shapes, for example, circles, rectangles, lines, and more. The graphical attributes of those shapes are used to express various attributes of the data. The relative size, length, and distance between those shapes are how we understand this. Due to their visual and, therefore, intuitive nature, those attributes are easy to understand and don’t require much explanation. The data attribute corresponds to the essence of what we’re trying to understand. The values that need to be provided for the data attribute depend on the chart type. For a scatter plot, for example, we need to provide x and y values. For maps, we need to have lat and lon. Several sets of data can be overlayed on top of each other on the same chart; each one is referred to as a trace. Each chart type can take many other optional values, and many of them will be covered in more detail later on.

• layout: Everything else around the data belongs to this attribute. Elements of the layout attribute are more abstract in nature. They typically use text to inform the user what they are looking at. Many of them are also styling elements, which might not add as much information, but they make the charts easier to understand or conform to certain branding guidelines. There are many attributes that we’ll explore, but the most prominent ones are the title, axis titles, ticks, and legend. These, in turn, have subattributes, such as the font size, location, and more.

It’s much easier to learn by doing, and we can start now by creating our first figure. The graph_objects module is usually imported as go, and we instantiate a figure by calling go.Figure. The working example below shows an empty Figure object and how it is created and displayed: