Storytelling with Tables Part 1: Tables with Plotly | by Darío Weitz | Dec, 2022
When to use tables and how to create an effective one
If you are (or want to be) a data scientist, you will need to develop several skills including the ability to understand your data and be able to communicate it appropriately to your audience.
Of course, the best way to communicate your story is using charts or graphs, but sometimes it’s better to use a table.
A table is “an arrangement of information or data, typically in rows and columns, or possibly in a more complex structure. Tables differ significantly in variety, structure, flexibility, notation, representation, and use” [1].
A well-designed table should have: 1) an accurate and concise title; 2) column headers; 3) row labels; 4) footnotes; 5) a source line.
It is convenient to use tables when:
- You need to display specific values with their exact representation;
- You need to show many numerical values in a relatively small area;
- You want to compare or contrast several numerical values;
- You want to compare or contrast values between related items;
- Both individual and summary values (total or partial) should be included. Intermediate or underlying values can be shown;
- The values shown involve multiple units of measurement;
- Data should communicate quantitative information but not trends;
- Different people in the audience need or seek different information. Different people may look for their information in different places in the table;
- To show the presence or absence of specific items;
- You consider that a table may be the most accurate and precise way to display the data.
Keep in mind that:
- When you include numerical values in tables always align them to the right to allow comparison of their magnitudes. If you align to the center or the left, the visual effort is multiplied to the hilt;
- If you use decimals, equalize the number of decimals and place them to the right; always use the appropriate and significant number of decimals;
- Add separators: commas, periods, or spaces as thousands separators;
- One or two numbers do not require graphs or tables. Display them in text mode;
- Tables do not necessarily need to be monotonous. Different colors, fonts, border styles, different number formats, and even icons can be used (with discretion) to make reading arid numbers more pleasant;
- We read tables: tables interact with our verbal system;
- Tables require more processing time than charts. There is a clear sequence: 1. Reading; 2. Processing; 3. Reflection time. This sequence could be different for each member of the audience.
Tables with Plotly
Plotly Express, an object-oriented interface to figure creation, is a high-level wrapper for Plotly.py that includes functions to plot standard 2D & 3D charts and choropleth maps. It provides numerous beautiful charts for free.
import plotly.express as px
But, if you want to plot styled tables, it is advisable to import a group of classes named graph objects. This module contains a hierarchy of Python classes. For example, the following indicated Figure is a primary class. This class has a data attribute and a layout attribute. The data attribute has more than 40 objects, each one refers to a specific type of graph (trace) with its corresponding parameters. On the other hand, the layout attribute specifies the properties of the figure as a whole (title, axes, legends, annotations, etc.).
import plotly.graph_objects as go
fig = go.Figure()
You can create a table in Plotly using the Table method. In its most basic variant, the procedure is to use fig.add_trace(), go.Table, and two parameters: header and cells. The former, as its name indicates, corresponds to the header of the table (the first row) whilst cells corresponds to the values, numerical or non-numerical, that we want to show the audience.
import plotly.graph_objects as go
your_path = your_path
#.....................................................................
# Table 1: Basic Tablefig1 = go.Figure()
fig1.add_trace(
go.Table(
header = dict(values=['Numeric 1',' Numeric 2', 'Non-Numeric']),
cells = dict(values=[[1,2, 3],[4, 5, 6], ['A','B','C']])
)
)
fig1.write_image(your_path + 'Table1.png')
fig1.show()
You can obtain the same table with a more concise coding:
# Table 2: Same data, concise codingfig2 =go.Figure(data=[go.Table(header=dict(values=['Numeric 1',' Numeric 2', 'Non-Numeric']),
cells= dict(values=[[1,2,3],[4,5,6],['A','B','C']]))
]
)
fig2.write_image(your_path + 'Table2.png')
fig2.show()
As a Pandas DataFrame is like a table with rows and columns, drawing a table with data from a dataset is straightforward. We used, for the table shown in Fig. 3, a public domain dataset: Global Ethanol Production by Country or Region (Million Gallons). Data Source: Renewable Fuels Association (RFA) (ethanolrfa.org/statistics/annual-ethanol-production). Last updated June 2021.
import pandas as pd
import plotly.express as px
import plotly.graph_objects as godf_wrld_et = pd.read_csv(your_path + 'world_ethanol.csv',
index_col = False, sep = ';', engine = 'python',
header = 0, skipfooter = 3)
fig3 = go.Figure(data=[go.Table(
header = dict(values=list(df_wrld_et.columns),
fill_color=px.colors.qualitative.Plotly[2],
align='left'),
cells = dict(values=df_wrld_et.transpose().values.tolist(),
fill_color=px.colors.qualitative.Plotly[7],
align='left'))
])
fig3.write_image(your_path + 'Table3.png')
fig3.show()
We used df_wrld_et.columns to get the names of the table columns for the header and df_wrld_et.transpose().values.tolist()for the cell values. Of course, there are several ways to select rows and columns from a Pandas Data Frame like using loc, iloc, or just selecting specific fields. There are thousands of tutorials on the subject.
We began to embellish our table by changing the pallet using the Plotly Express module px.colors.qualitative which contains built-in color sequences like Pastel2:
## Table 4: color pallete Pastel2fig4 = go.Figure(data=[go.Table(
header = dict(values=list(df_wrld_et.columns),
fill_color=px.colors.qualitative.Pastel2[1],
line_color='darkslategray',
align='left'),
cells = dict(values=df_wrld_et.transpose().values.tolist(),
fill_color=px.colors.qualitative.Pastel2[3],
align='left'))
])
fig4.write_image(your_path + 'Table4.png')
fig4.show()
Next, we established the border color by typing line_color=’darkslategray’ and aligned the first (non-numeric) column to a center position while the numeric columns are aligned right as previously suggested.
## Table 5: align right, include border color
aligns = ['center','right', 'right','right','right', 'right', 'right']fig5 = go.Figure(data=[go.Table(
header = dict(values=list(df_wrld_et.columns),
fill_color=px.colors.qualitative.Pastel2[1],
line_color='darkslategray',
align= aligns),
cells = dict(values=df_wrld_et.transpose().values.tolist(),
fill_color=px.colors.qualitative.Pastel2[3],
line_color='darkslategray',
align= aligns))
])
fig5.write_image(your_path + 'Table5.png')
fig5.show()
Now it is much simpler to compare numerical values.
It’s time for a title and a footnote and/or a source line because our table must stand alone, so it can be copied and pasted.
aligns = ['center','right', 'right','right','right', 'right', 'right']fig6 = go.Figure(data=[go.Table(
header = dict(values=list(df_wrld_et.columns),
fill_color=px.colors.qualitative.Pastel2[1],
line_color='darkslategray',
align= aligns),
cells = dict(values=df_wrld_et.transpose().values.tolist(),
fill_color=px.colors.qualitative.Pastel2[3],
line_color='darkslategray',
align= aligns))
])
fig6.update_layout(title = "World Bioethanol Production (MGPY) ",
title_font_size = 20, title_x = 0.5)
fig6.add_annotation(x=1, y=-0.01,
text="Source: Renewable Fuels Association (2021)",
showarrow=False,
font_size = 15, font_color = 'blue')
fig6.write_image(your_path + 'Table6.png')
fig6.show()
As a final embellishment, we alternated the background color of odd-numbered rows and even-numbered rows as indicated below:
rowEvenColor = px.colors.qualitative.Pastel2[3]
rowOddColor = px.colors.qualitative.Pastel2[5]aligns = ['center','right', 'right','right','right', 'right', 'right']
fig7 = go.Figure(data=[go.Table(
header = dict(values=list(df_wrld_et.columns),
fill_color=px.colors.qualitative.Pastel2[1],
line_color='darkslategray',
align= aligns),
cells = dict(values=df_wrld_et.transpose().values.tolist(),
fill_color=[[rowOddColor,rowEvenColor]*7],
line_color='darkslategray',
align= aligns))
])
fig7.update_layout(title = "World Bioethanol Production (MGPY) ",
title_font_size = 20, title_x = 0.5)
fig7.add_annotation(x=1, y=-0.01,
text="Source: Renewable Fuels Association (2021)",
showarrow=False,
font_size = 15, font_color = 'blue')
fig7.write_image(your_path + 'Table7.png')
fig7.show()
Conclusions
Our consumption of information has multiplied exponentially due to two factors: 1- more and more information is being produced (social networks, mobile devices, etc.) and 2- it is becoming easier and easier for us to access this information, especially through the Internet and the Web.
Initially, we have isolated information: Pure Data. The ability to leverage and extend raw information is intimately linked to our expertise to exploit it and transform it into something more than pure data.
Data visualization is the usual way to transform information into data and communicate it to an appropriate audience.
But data visualization is not the only way to tell a story. In many instances, a table is the best tool because our brains are also trained to receive and analyze tabular data.
In this first article in the series, we defined what tables are, when it is convenient to use them, and which are the important things to keep in mind when using them. Finally, we indicated how to create tables with Plotly Graph Objects.
When to use tables and how to create an effective one
If you are (or want to be) a data scientist, you will need to develop several skills including the ability to understand your data and be able to communicate it appropriately to your audience.
Of course, the best way to communicate your story is using charts or graphs, but sometimes it’s better to use a table.
A table is “an arrangement of information or data, typically in rows and columns, or possibly in a more complex structure. Tables differ significantly in variety, structure, flexibility, notation, representation, and use” [1].
A well-designed table should have: 1) an accurate and concise title; 2) column headers; 3) row labels; 4) footnotes; 5) a source line.
It is convenient to use tables when:
- You need to display specific values with their exact representation;
- You need to show many numerical values in a relatively small area;
- You want to compare or contrast several numerical values;
- You want to compare or contrast values between related items;
- Both individual and summary values (total or partial) should be included. Intermediate or underlying values can be shown;
- The values shown involve multiple units of measurement;
- Data should communicate quantitative information but not trends;
- Different people in the audience need or seek different information. Different people may look for their information in different places in the table;
- To show the presence or absence of specific items;
- You consider that a table may be the most accurate and precise way to display the data.
Keep in mind that:
- When you include numerical values in tables always align them to the right to allow comparison of their magnitudes. If you align to the center or the left, the visual effort is multiplied to the hilt;
- If you use decimals, equalize the number of decimals and place them to the right; always use the appropriate and significant number of decimals;
- Add separators: commas, periods, or spaces as thousands separators;
- One or two numbers do not require graphs or tables. Display them in text mode;
- Tables do not necessarily need to be monotonous. Different colors, fonts, border styles, different number formats, and even icons can be used (with discretion) to make reading arid numbers more pleasant;
- We read tables: tables interact with our verbal system;
- Tables require more processing time than charts. There is a clear sequence: 1. Reading; 2. Processing; 3. Reflection time. This sequence could be different for each member of the audience.
Tables with Plotly
Plotly Express, an object-oriented interface to figure creation, is a high-level wrapper for Plotly.py that includes functions to plot standard 2D & 3D charts and choropleth maps. It provides numerous beautiful charts for free.
import plotly.express as px
But, if you want to plot styled tables, it is advisable to import a group of classes named graph objects. This module contains a hierarchy of Python classes. For example, the following indicated Figure is a primary class. This class has a data attribute and a layout attribute. The data attribute has more than 40 objects, each one refers to a specific type of graph (trace) with its corresponding parameters. On the other hand, the layout attribute specifies the properties of the figure as a whole (title, axes, legends, annotations, etc.).
import plotly.graph_objects as go
fig = go.Figure()
You can create a table in Plotly using the Table method. In its most basic variant, the procedure is to use fig.add_trace(), go.Table, and two parameters: header and cells. The former, as its name indicates, corresponds to the header of the table (the first row) whilst cells corresponds to the values, numerical or non-numerical, that we want to show the audience.
import plotly.graph_objects as go
your_path = your_path
#.....................................................................
# Table 1: Basic Tablefig1 = go.Figure()
fig1.add_trace(
go.Table(
header = dict(values=['Numeric 1',' Numeric 2', 'Non-Numeric']),
cells = dict(values=[[1,2, 3],[4, 5, 6], ['A','B','C']])
)
)
fig1.write_image(your_path + 'Table1.png')
fig1.show()
You can obtain the same table with a more concise coding:
# Table 2: Same data, concise codingfig2 =go.Figure(data=[go.Table(header=dict(values=['Numeric 1',' Numeric 2', 'Non-Numeric']),
cells= dict(values=[[1,2,3],[4,5,6],['A','B','C']]))
]
)
fig2.write_image(your_path + 'Table2.png')
fig2.show()
As a Pandas DataFrame is like a table with rows and columns, drawing a table with data from a dataset is straightforward. We used, for the table shown in Fig. 3, a public domain dataset: Global Ethanol Production by Country or Region (Million Gallons). Data Source: Renewable Fuels Association (RFA) (ethanolrfa.org/statistics/annual-ethanol-production). Last updated June 2021.
import pandas as pd
import plotly.express as px
import plotly.graph_objects as godf_wrld_et = pd.read_csv(your_path + 'world_ethanol.csv',
index_col = False, sep = ';', engine = 'python',
header = 0, skipfooter = 3)
fig3 = go.Figure(data=[go.Table(
header = dict(values=list(df_wrld_et.columns),
fill_color=px.colors.qualitative.Plotly[2],
align='left'),
cells = dict(values=df_wrld_et.transpose().values.tolist(),
fill_color=px.colors.qualitative.Plotly[7],
align='left'))
])
fig3.write_image(your_path + 'Table3.png')
fig3.show()
We used df_wrld_et.columns to get the names of the table columns for the header and df_wrld_et.transpose().values.tolist()for the cell values. Of course, there are several ways to select rows and columns from a Pandas Data Frame like using loc, iloc, or just selecting specific fields. There are thousands of tutorials on the subject.
We began to embellish our table by changing the pallet using the Plotly Express module px.colors.qualitative which contains built-in color sequences like Pastel2:
## Table 4: color pallete Pastel2fig4 = go.Figure(data=[go.Table(
header = dict(values=list(df_wrld_et.columns),
fill_color=px.colors.qualitative.Pastel2[1],
line_color='darkslategray',
align='left'),
cells = dict(values=df_wrld_et.transpose().values.tolist(),
fill_color=px.colors.qualitative.Pastel2[3],
align='left'))
])
fig4.write_image(your_path + 'Table4.png')
fig4.show()
Next, we established the border color by typing line_color=’darkslategray’ and aligned the first (non-numeric) column to a center position while the numeric columns are aligned right as previously suggested.
## Table 5: align right, include border color
aligns = ['center','right', 'right','right','right', 'right', 'right']fig5 = go.Figure(data=[go.Table(
header = dict(values=list(df_wrld_et.columns),
fill_color=px.colors.qualitative.Pastel2[1],
line_color='darkslategray',
align= aligns),
cells = dict(values=df_wrld_et.transpose().values.tolist(),
fill_color=px.colors.qualitative.Pastel2[3],
line_color='darkslategray',
align= aligns))
])
fig5.write_image(your_path + 'Table5.png')
fig5.show()
Now it is much simpler to compare numerical values.
It’s time for a title and a footnote and/or a source line because our table must stand alone, so it can be copied and pasted.
aligns = ['center','right', 'right','right','right', 'right', 'right']fig6 = go.Figure(data=[go.Table(
header = dict(values=list(df_wrld_et.columns),
fill_color=px.colors.qualitative.Pastel2[1],
line_color='darkslategray',
align= aligns),
cells = dict(values=df_wrld_et.transpose().values.tolist(),
fill_color=px.colors.qualitative.Pastel2[3],
line_color='darkslategray',
align= aligns))
])
fig6.update_layout(title = "World Bioethanol Production (MGPY) ",
title_font_size = 20, title_x = 0.5)
fig6.add_annotation(x=1, y=-0.01,
text="Source: Renewable Fuels Association (2021)",
showarrow=False,
font_size = 15, font_color = 'blue')
fig6.write_image(your_path + 'Table6.png')
fig6.show()
As a final embellishment, we alternated the background color of odd-numbered rows and even-numbered rows as indicated below:
rowEvenColor = px.colors.qualitative.Pastel2[3]
rowOddColor = px.colors.qualitative.Pastel2[5]aligns = ['center','right', 'right','right','right', 'right', 'right']
fig7 = go.Figure(data=[go.Table(
header = dict(values=list(df_wrld_et.columns),
fill_color=px.colors.qualitative.Pastel2[1],
line_color='darkslategray',
align= aligns),
cells = dict(values=df_wrld_et.transpose().values.tolist(),
fill_color=[[rowOddColor,rowEvenColor]*7],
line_color='darkslategray',
align= aligns))
])
fig7.update_layout(title = "World Bioethanol Production (MGPY) ",
title_font_size = 20, title_x = 0.5)
fig7.add_annotation(x=1, y=-0.01,
text="Source: Renewable Fuels Association (2021)",
showarrow=False,
font_size = 15, font_color = 'blue')
fig7.write_image(your_path + 'Table7.png')
fig7.show()
Conclusions
Our consumption of information has multiplied exponentially due to two factors: 1- more and more information is being produced (social networks, mobile devices, etc.) and 2- it is becoming easier and easier for us to access this information, especially through the Internet and the Web.
Initially, we have isolated information: Pure Data. The ability to leverage and extend raw information is intimately linked to our expertise to exploit it and transform it into something more than pure data.
Data visualization is the usual way to transform information into data and communicate it to an appropriate audience.
But data visualization is not the only way to tell a story. In many instances, a table is the best tool because our brains are also trained to receive and analyze tabular data.
In this first article in the series, we defined what tables are, when it is convenient to use them, and which are the important things to keep in mind when using them. Finally, we indicated how to create tables with Plotly Graph Objects.
Denial of responsibility! Techno Blender is an automatic aggregator of the all world’s media. In each content, the hyperlink to the primary source is specified. All trademarks belong to their rightful owners, all materials to their authors. If you are the owner of the content and do not want us to publish your materials, please contact us by email – [email protected]. The content will be deleted within 24 hours.