Plotly : Display tables and figures side by side! (left, right, up, down)

　This is the third article in a series on writing tables in Plotly! Here is a summary of the previous articles.

• How to draw a table (go.Table)
• Plotly : How to display Table (Figure Factories)
• Display tables and figures side by side! (left, right, up, down) ← This article is here！

　Table and figure factory, and explained the differences between them. In this article, we will summarize how to display a table and a figure together from the same data using "figure factory"!

Display left and right side by side

　You can set the placement to display them side by side on the left or right, so writing a graph is pretty much the same!

　In this example, we will write a table created using create table in figure factory and a line graph using graph object.

　Again, the data we use are LifeExp (life expectancy), pop (population), and gdpPercap (GDP per capita) by region and year.

Creating a Table

　It is easy to write, and can be set by ff.create_table(df) after facilitating the data frame df!

　For more details, please refer to my previous article!

Creating a figure (line chart)

　The way to draw the graph is almost the same, but you need to set the x-axis and y-axis as follows

　We will add an explanation for this later.

xaxis='x2', yaxis='y2'

Layout settings

　So far, we have defined the tables and figures we want to display. And now we are going to configure the layout as update_layout!

fig.update_layout(
    title_text = 'Changes in average life expectancy by region',
    margin = {'t':50, 'b':100},
    xaxis = {'domain': [0, .5]},
    xaxis2 = {'domain': [0.6, 1.],'title':'year'},
    yaxis2 = {'anchor': 'x2', 'title': 'lifeExp'}
)

　One by one, the elements of the above update_layout will be explained.

title_text

This is used to give the overall title of the table/figure. (Not required)

margin

This specifies the distance between margins. 't' : top , 'b' : bottom , 'l' : left , ’ｒ’：right

xaxis

Settings for the x-axis

(In this chart, this is the setting for the x-axis of the table side, which is defined earlier.)

xaxis2, yaxis2

　Settings for the x and y axes

(In this diagram, the settings are for the diagram (line graph) side, which is defined later, so when setting up the graph, the xaxis and yaxis are specified as x2 and y2 to distinguish them from the axes in the table.)

domain

　The "area" to be placed is set. Set the whole area as 0 ~ 1

　In the example above, the horizontal axis direction from 0~0.5 represents the table on the xaxis side, and 0.6~1.0 represents the figure on the xaxis2 side.

title

Axis labels (the title (text) of each axis).

Sample code

import plotly.graph_objs as go
import plotly.express as px
import plotly.figure_factory as ff
# Data preparation
df = px.data.gapminder()
df= df.groupby(['continent','year']).mean().reset_index().drop('iso_num',axis=1)
df = df.round(1) # To the fourth decimal place

fig = ff.create_table(df,height_constant=20)

# Add graph data
for continent in df['continent'].unique():
    df_plot = df[df['continent']==continent]
    fig.add_trace(
        go.Scatter(
            x = df_plot['year'],
            y = df_plot['lifeExp'],
            name = continent,
            xaxis='x2', yaxis='y2'
        )
    )

fig.update_layout(
    title_text = '地域別の平均寿命の推移',
    margin = {'t':50, 'b':100},
    xaxis = {'domain': [0, .5]},
    xaxis2 = {'domain': [0.6, 1.],'title':'year'},
    yaxis2 = {'anchor': 'x2', 'title': 'lifeExp'}
)

fig.show()

Display up and down side by side

　So far, I have summarized how to display them side by side, but the main part of setting up the left-right split is the domain setting for each axis in update_layout. If you can keep this in mind, you can easily arrange the data in other ways, so as an example, let's use the above code as a base to arrange the data up and down!

　If I change only part of the update_layout, I can change the display.

fig.update_layout(
    title_text = '地域別の平均寿命の推移',
    margin = {'t':50, 'b':100},
    yaxis = {'domain': [0, .5]},
    yaxis2 = {'domain': [0.6, 1.],'title':'lifeExp'},
    xaxis2 = {'anchor': 'y2', 'title': 'year'}
)

　If you look closely, you can see that the top three lines (margin) are unchanged, but the x and y values have been switched in the axis setting section. This is really the only change I made, but if you actually draw a graph, you can see the top and bottom lines lined up as shown below! It's that easy!

　By being aware of this domain setting, you can make the table a little larger, or the graph a little larger, instead of displaying the two charts in the same size. You'll also be able to make detailed settings like that!

Translated with www.DeepL.com/Translator (free version)

Sample code

import plotly.graph_objs as go
import plotly.express as px
import plotly.figure_factory as ff  
# Data preparation
df = px.data.gapminder()
df= df.groupby(['continent','year']).mean().reset_index().drop('iso_num',axis=1)
df = df.round(1) # To the fourth decimal place.

fig = ff.create_table(df,height_constant=20)

# Add graph data
for continent in df['continent'].unique():
    df_plot = df[df['continent']==continent]
    fig.add_trace(
        go.Scatter(
            x = df_plot['year'],
            y = df_plot['lifeExp'],
            name = continent,
            xaxis='x2', yaxis='y2'
        )
    )

fig.update_layout(
    title_text = '地域別の平均寿命の推移',
    margin = {'t':50, 'b':100},
    yaxis = {'domain': [0, .5]},
    yaxis2 = {'domain': [0.6, 1.],'title':'lifeExp'},
    xaxis2 = {'anchor': 'y2', 'title': 'year'}
)

fig.show()

References

• https://plotly.com/python/figure-factory-subplots/