10. Making Area Charts#
An area chart is a type of graph that visually represents quantitative data over time or across categories, using filled areas below a line. It’s similar to a line chart, but the area between the line and the x-axis is shaded, emphasizing the magnitude of the data points. This shaded area helps to highlight the volume or cumulative totals of the dataset. Area charts are particularly useful for displaying trends, comparing multiple data series, or showing how a part contributes to a whole over time. They can also be stacked to display multiple datasets, making it easier to compare several categories simultaneously.
🚀 When to use them:
Area charts are useful when you want to show how different segments contribute to a total and how this total changes over time. For example, they are commonly used in financial reports to track revenue sources or in scientific studies to display changes in variables like temperature or population.
⚠️ Be aware:
However, area charts are not always the best choice, especially when precise comparisons between data points are needed. The stacked areas can become hard to differentiate, making it difficult to discern small differences between data series. Additionally, when too many layers or data series are included, the chart can become cluttered, reducing clarity. This can lead to visual distortion, especially when overlapping areas obscure smaller trends or patterns.
Getting ready#
import pandas as pd
data = pd.read_csv('data/data_recipe10.csv')
data.columns = ['Entity', 'Code', 'Year', 'Renewable', 'Nuclear', 'Fossil']
data = data[data.Entity == 'World'].reset_index(drop=True)
data1 = data.melt(id_vars=['Year', 'Entity', 'Code'])
data1.head(3)
Year | Entity | Code | variable | value | |
---|---|---|---|---|---|
0 | 1985 | World | OWID_WRL | Renewable | 2058.0222 |
1 | 1986 | World | OWID_WRL | Renewable | 2091.6704 |
2 | 1987 | World | OWID_WRL | Renewable | 2124.9146 |
data2 = data
data2['year'] = pd.to_datetime(data2['Year'], format='%Y')
data2.head(3)
Entity | Code | Year | Renewable | Nuclear | Fossil | year | |
---|---|---|---|---|---|---|---|
0 | World | OWID_WRL | 1985 | 2058.0222 | 1488.9216 | 6285.4736 | 1985-01-01 |
1 | World | OWID_WRL | 1986 | 2091.6704 | 1594.7357 | 6439.9746 | 1986-01-01 |
2 | World | OWID_WRL | 1987 | 2124.9146 | 1734.7332 | 6757.7617 | 1987-01-01 |
How to do it#
Import the
plotly.express
module aspx
import plotly.express as px
df = data1
Make a minimal area chart by using the function
area
and passing the inputs
x
y
color
fig = px.area(df, x='Year', y='value', color='variable')
fig.show()
Add a title to your chart by passing a string as the input
title
into the functionbar
; and customise the size of the figure by using the inputsheight
andwidth
. Both have to be integers and correspond to the size of the figure in pixels.
fig = px.area(df, x='Year', y='value', color='variable',
height = 500, width = 800,
title = 'Electricity production from fossil fuels, nuclear and renewables, World')
fig.show()
Customise the colors used in the scatter by using the input
color_discrete_sequence
fig = px.area(df, x='Year', y='value', color='variable',
height = 500, width = 800,
color_discrete_sequence= px.colors.qualitative.Prism,
title = 'Electricity production from fossil fuels, nuclear and renewables, World')
fig.show()
fig = px.area(df, x='Year', y='value', color='variable',
height = 500, width = 800,
color_discrete_sequence=['rgb(120,0,100)', 'rgb(30,0,100)','rgb(0,0,0)'],
title = 'Electricity production from fossil fuels, nuclear and renewables, World')
fig.show()
There is more…#
import numpy as np
# new data set for animation
start=10
stop = len(data2)
step = 1
df_animation = pd.DataFrame() # container for df with new data set
for i in np.arange(start, stop, step):
dfa = data2.head(i).copy()
frame = dfa['Year'].values[-1]
dfa['frame']=frame
df_animation = pd.concat([df_animation, dfa])
df_animation.head(3)
Entity | Code | Year | Renewable | Nuclear | Fossil | year | frame | |
---|---|---|---|---|---|---|---|---|
0 | World | OWID_WRL | 1985 | 2058.0222 | 1488.9216 | 6285.4736 | 1985-01-01 | 1994 |
1 | World | OWID_WRL | 1986 | 2091.6704 | 1594.7357 | 6439.9746 | 1986-01-01 | 1994 |
2 | World | OWID_WRL | 1987 | 2124.9146 | 1734.7332 | 6757.7617 | 1987-01-01 | 1994 |
fig = px.area(df_animation, x="year", y=[ 'Renewable'],
height = 500, width = 800,
animation_frame="frame",
color_discrete_sequence=['rgb(120,0,100)', 'rgb(30,0,100)','rgb(0,0,0)'],
title = 'Electricity production from fossil fuels, nuclear and renewables, World')
fig.layout.updatemenus[0].buttons[0]['args'][1]['frame']['redraw'] = True
fig.show()
fig = px.area(df_animation, x="year", y=[ 'Renewable', 'Nuclear', 'Fossil'],
height = 500, width = 800,
animation_frame="frame",
color_discrete_sequence=['rgb(120,0,100)', 'rgb(30,0,100)','rgb(0,0,0)'],
title = 'Electricity production from fossil fuels, nuclear and renewables, World')
fig.layout.updatemenus[0].buttons[0]['args'][1]['frame']['redraw'] = True
fig.show()
Current Animation Limitations and Caveats Animations are designed to work well when each row of input is present across all animation frames, and when categorical values mapped to symbol, color and facet are constant across frames. Animations may be misleading or inconsistent if these constraints are not met. Although Plotly Express supports animation for many chart and map types, smooth inter-frame transitions are today only possible for scatter and bar Plotly Express will not automatically compute the union of all x/y/color ranges, so these must be specified manually to avoid scale jumps across frames
fig = px.line(df_animation, x="year", y=[ 'Renewable', 'Nuclear', 'Fossil', ],
height = 500, width = 800,
animation_frame="frame",
title = 'Electricity production from fossil fuels, nuclear and renewables, World')
fig.layout.updatemenus[0].buttons[0]['args'][1]['frame']['redraw'] = True
fig.show()