Data Visualization Explained (Part 5): Visualizing Time-Series Data in Python (Matplotlib, Plotly, and Altair)

in my information visualization collection. See the next:

It’s time to begin constructing your personal information visualizations. On this article, I’ll stroll via the method of visualizing time-series information in Python intimately. If in case you have not learn the earlier articles in my information visualization collection, I strongly advocate reading at least the previous article for a review of Python.

Over the course of coding visualizations in Python, I’ll give attention to three Python packages: Matplotlib, Plotly, and Altair. One strategy to studying these would possibly contain writing 1-2 articles per package deal, every one delving into the chosen package deal intimately. Whereas this can be a legitimate strategy, the main target of my collection shouldn’t be on any specific library; it’s concerning the information visualization course of itself. These packages are merely instruments—a method to an finish.

In consequence, I’ll construction this text and those to observe every round a selected kind of information visualization, and I’ll talk about easy methods to implement that visualization in every of the listed packages to make sure you have a breadth of approaches obtainable to you.

First up: a definition for time-series information.

What Is Time-Sequence Information?

Formally, time-series information entails a variable that could be a operate of time. In easy phrases, this simply means some information that adjustments over time.

For instance, a public firm’s inventory worth during the last ten years is time-series information. In the event you’d want a extra scientific instance, take into account the climate. A graph depicting the every day temperature of your favourite metropolis over the course of the yr is a graph that depicts time-series information.

Time-series information is a superb start line for information visualization for just a few causes:

• It’s an especially widespread and helpful kind of information. There’s fairly a bit of data that’s depending on time, and understanding it offers significant perception into the topic of curiosity going ahead.
• There are tried and true strategies to visualise time-series information successfully, as you’ll see under. Grasp these, and also you’ll be in fine condition.
• As in contrast with another sorts of information, time-series visualizations are pretty intuitive to people and align with our notion of time. This makes it simpler to give attention to the fundamental components of visualization design when beginning out, as an alternative of getting slowed down in making an attempt to make sense of very complicated information.

Let’s begin by having a look at completely different visualization strategies on a conceptual degree.

How Is Time-Sequence Information Visualized?

The usual for time-series visualization is the famed line chart:

This chart typically places time on the x-axis, and the variable that adjustments with time on the y-axis. This offers a view that seem like “transferring ahead,” in step with people’ linear notion of time.

Although the road chart is the usual, there are different, associated potentialities.

A number of Line Chart

This strategy is a direct extension of a singular line chart and shows a number of associated time collection on the identical plot, permitting comparability between teams or classes (e.g., gross sales by area):

Space Chart

Functionally, an space chart is sort of precisely the identical as a line chart, however the space underneath the road is stuffed in. It emphasizes the magnitude of change:

Stacked Space Chart

Technically, the stacked space chart is the analogue to the a number of line chart, however it’s a bit trickier to learn. Particularly, the full is cumulative, with the baseline for every stacked line beginning on the one under it. As an example, at 2023 within the chart under, “Ages 25-64” represents about 4 billion individuals, since we begin counting the place “Ages 15-24” ends.

Bar Chart (Vertical or Horizontal)

Lastly, in some instances, a bar chart can also be applicable for time-series visualization. This strategy is beneficial when you want to present discrete time intervals—comparable to month-to-month sum or yearly common of some metric—somewhat than steady information. That stated, I cannot be coding bar charts on this article.

Now, let’s get to truly constructing these visualizations. In every of the examples under, I’ll stroll via the code in a selected visualization library for establishing line charts and space charts. I’ve linked the data here and encourage you to observe alongside. To internalize these strategies, it’s essential to apply utilizing them your self.

Coding Time-Sequence Visualizations in Matplotlib

import pandas as pd
import matplotlib.pyplot as plt

# Load information
df = pd.read_csv('sales_data.csv')
df['Date'] = pd.to_datetime(df['Date'])

# Instance 1: Easy Line Chart
fig1, ax1 = plt.subplots(figsize=(10, 6))
ax1.plot(df['Date'], df['Product A Sales'], linewidth=2)
ax1.set_xlabel('Date')
ax1.set_ylabel('Gross sales')
ax1.set_title('Product A Gross sales Over Time')
ax1.grid(True, alpha=0.3)
plt.tight_layout()
# Show with: fig1

# Instance 2: A number of Line Chart
fig2, ax2 = plt.subplots(figsize=(10, 6))
ax2.plot(df['Date'], df['Product A Sales'], label='Product A', linewidth=2)
ax2.plot(df['Date'], df['Product B Sales'], label='Product B', linewidth=2)
ax2.plot(df['Date'], df['Product C Sales'], label='Product C', linewidth=2)
ax2.set_xlabel('Date')
ax2.set_ylabel('Gross sales')
ax2.set_title('Gross sales Comparability - All Merchandise')
ax2.legend()
ax2.grid(True, alpha=0.3)
plt.tight_layout()
# Show with: fig2

# Instance 3: Space Chart
fig3, ax3 = plt.subplots(figsize=(10, 6))
ax3.fill_between(df['Date'], df['Product A Sales'], alpha=0.4)
ax3.plot(df['Date'], df['Product A Sales'], linewidth=2)
ax3.set_xlabel('Date')
ax3.set_ylabel('Gross sales')
ax3.set_title('Product A Gross sales - Space Chart')
ax3.grid(True, alpha=0.3)
plt.tight_layout()
# Show with: fig3

# Instance 4: Stacked Space Chart
fig4, ax4 = plt.subplots(figsize=(10, 6))
ax4.stackplot(df['Date'], df['Product A Sales'], df['Product B Sales'], df['Product C Sales'],
              labels=['Product A', 'Product B', 'Product C'], alpha=0.7)
ax4.set_xlabel('Date')
ax4.set_ylabel('Gross sales')
ax4.set_title('Complete Gross sales - Stacked Space Chart')
ax4.legend(loc='higher left')
ax4.grid(True, alpha=0.3)
plt.tight_layout()
# Show with: fig4

Operating this code produces the next 4 visualizations:

Let’s break the code down step-by-step to make sure you perceive what is occurring:

1. First, we load the info into pandas as a CSV file and make sure the date is correctly represented as a datetime object.
2. Matplotlib constructions charts inside the Determine object, which represents the complete Canvas. This may be accessed straight utilizing plt.determine, however having a number of variables utilizing plt.subplots is extra intuitive for a number of visualizations. Each name to plt.subplots defines a brand new, separate Determine (canvas).
3. The road fig1, ax1 = plt.subplots(figsize=(10, 6)) defines the primary subplot; fig1 represents the canvas, however ax1 represents the precise plotting space inside it and is the variable the place you’ll make most adjustments.
4. Matplotlib has completely different features for various charts. The plot operate plots 2-D factors after which connects them to assemble a line chart. That is what we specify within the line ax1.plot(df['Date'], df['Product A Sales'], linewidth=2).
5. The remaining strains are primarily aesthetic features that do precisely what their names counsel: labeling axes, including gridlines, and specifying structure.
6. For the a number of line chart, the code is exactly the identical, besides we name plot thrice: one for every set of x-y factors that we need to graph to point out all of the merchandise.
7. The space chart is sort of similar to the road chart, aside from the addition of ax3.fill_between(df['Date'], df['Product A Sales'], alpha=0.4), which tells Matplotlib to shade the realm under the road.
8. The stacked space chart, against this, requires us to make use of the stacked_plot operate, which takes in all three information arrays we need to plot without delay. The remaining aesthetic code, nonetheless, is similar.

Attempt programming these your self in your favourite IDE or in a Jupyter pocket book. What patterns do you see? Which chart do you like probably the most?

Additionally, do not forget that you do not want to memorize this syntax, particularly in case you are new to programming information visualizations or new to Python basically. Concentrate on making an attempt to know what is occurring on a conceptual degree; you possibly can all the time search for the actual syntax and plug your information in as wanted.

This may maintain true for the remaining two examples as properly.

Coding Time-Sequence Visualizations in Plotly

Right here is the code to generate the identical visualizations as above, this time in Plotly’s fashion:

import pandas as pd
import plotly.graph_objects as go

# Load information
df = pd.read_csv('sales_data.csv')
df['Date'] = pd.to_datetime(df['Date'])

# Instance 1: Easy Line Chart
fig1 = go.Determine()
fig1.add_trace(go.Scatter(x=df['Date'], y=df['Product A Sales'], mode='strains', title='Product A'))
fig1.update_layout(
    title='Product A Gross sales Over Time',
    xaxis_title='Date',
    yaxis_title='Gross sales',
    template='plotly_white'
)
# Show with: fig1

# Instance 2: A number of Line Chart
fig2 = go.Determine()
fig2.add_trace(go.Scatter(x=df['Date'], y=df['Product A Sales'], mode='strains', title='Product A'))
fig2.add_trace(go.Scatter(x=df['Date'], y=df['Product B Sales'], mode='strains', title='Product B'))
fig2.add_trace(go.Scatter(x=df['Date'], y=df['Product C Sales'], mode='strains', title='Product C'))
fig2.update_layout(
    title='Gross sales Comparability - All Merchandise',
    xaxis_title='Date',
    yaxis_title='Gross sales',
    template='plotly_white'
)
# Show with: fig2

# Instance 3: Space Chart
fig3 = go.Determine()
fig3.add_trace(go.Scatter(
    x=df['Date'], y=df['Product A Sales'],
    mode='strains',
    title='Product A',
    fill='tozeroy'
))
fig3.update_layout(
    title='Product A Gross sales - Space Chart',
    xaxis_title='Date',
    yaxis_title='Gross sales',
    template='plotly_white'
)
# Show with: fig3

# Instance 4: Stacked Space Chart
fig4 = go.Determine()
fig4.add_trace(go.Scatter(
    x=df['Date'], y=df['Product A Sales'],
    mode='strains',
    title='Product A',
    stackgroup='one'
))
fig4.add_trace(go.Scatter(
    x=df['Date'], y=df['Product B Sales'],
    mode='strains',
    title='Product B',
    stackgroup='one'
))
fig4.add_trace(go.Scatter(
    x=df['Date'], y=df['Product C Sales'],
    mode='strains',
    title='Product C',
    stackgroup='one'
))
fig4.update_layout(
    title='Complete Gross sales - Stacked Space Chart',
    xaxis_title='Date',
    yaxis_title='Gross sales',
    template='plotly_white'
)
# Show with: fig4

We receive the next 4 visualizations:

Here’s a breakdown of the code:

• Plotly is absolutely unbiased of Matplotlib. It makes use of equally named Determine objects, however doesn’t have any ax objects.
• The Scatter operate with mode “strains” is used to construct a line chart with the required x- and y-axis information. You may consider the add_trace operate as including a brand new part to an current Determine. Thus, for the a number of line chart, we merely name add_trace with the suitable Scatter inputs thrice.
• For labeling and aesthetics in Plotly, use the update_layout operate.
• The world chart is constructed identically to the road chart, with the addition of the non-obligatory argument fill='tozeroy'.
  • Upon first look, this will likely appear to be some obscure shade, however it’s really saying “TO ZERO Y,” specifying to Plotly the realm that needs to be stuffed in.
  • In the event you’re having bother visualizing this, attempt altering the argument to “tozerox” and see what occurs.
• For the stacked space chart, we’d like a unique non-obligatory parameter: stackgroup='one'. Including this to every of the Scatter calls tells Plotly that they’re all to be constructed as a part of the identical stack.

A bonus of Plotly is that by default, all Plotly charts are interactive and include the flexibility to zoom, hover for tooltips, and toggle the legend. (Be aware the photographs above are saved as PNGs, so you’ll need to generate the plots your self with a view to see this.)

Coding Time-Sequence Visualizations in Altair

Let’s end off by producing these 4 visualizations in Altair. Right here is the code:

import pandas as pd
import altair as alt

# Load information
df = pd.read_csv('sales_data.csv')
df['Date'] = pd.to_datetime(df['Date'])

# Instance 1: Easy Line Chart
chart1 = alt.Chart(df).mark_line().encode(
    x='Date:T',
    y='Product A Gross sales:Q'
).properties(
    title='Product A Gross sales Over Time',
    width=700,
    top=400
)
# Show with: chart1

# Instance 2: A number of Line Chart
# Reshape information for Altair
df_melted = df.soften(id_vars='Date', var_name='product', value_name='gross sales')

chart2 = alt.Chart(df_melted).mark_line().encode(
    x='Date:T',
    y='gross sales:Q',
    shade='product:N'
).properties(
    title='Gross sales Comparability - All Merchandise',
    width=700,
    top=400
)
# Show with: chart2

# Instance 3: Space Chart
chart3 = alt.Chart(df).mark_area(opacity=0.7).encode(
    x='Date:T',
    y='Product A Gross sales:Q'
).properties(
    title='Product A Gross sales - Space Chart',
    width=700,
    top=400
)
# Show with: chart3

# Instance 4: Stacked Space Chart
chart4 = alt.Chart(df_melted).mark_area(opacity=0.7).encode(
    x='Date:T',
    y='gross sales:Q',
    shade='product:N'
).properties(
    title='Complete Gross sales - Stacked Space Chart',
    width=700,
    top=400
)
# Show with: chart4

We receive the next charts:

Let’s break down the code:

• Altair has a barely completely different construction from Matplotlib and Plotly. It takes some apply to understand, however when you perceive it, its intuitiveness makes constructing new visualizations easy.
• All the things in Altair revolves across the Chart object, into which you cross in your information. Then, you utilize a mark_ operate to specify what sort of chart you need to construct, and the encoding operate to specify what variables will correspond to what visible components on the chart (e.g., x-axis, y-axis, shade, dimension, and so on.).
• For the road chart, we use the mark_line operate, after which specify that we wish the date on the x-axis and the gross sales on the y-axis.
• The soften operate doesn’t change the info itself, simply its construction. It places the merchandise all right into a single column, a “lengthy format” which is extra amenable to Altair’s visualization mannequin. For more details, check out this helpful article.
• As soon as we rework the info as above, we will construct our a number of line chart just by including a “shade” encoding, as proven within the code. This was made doable as a result of all of the product sorts are actually obtainable in a single column, and we will inform Altair to tell apart them by shade.
• The code for producing space charts showcases the fantastic thing about Altair’s construction. All the things stays the identical—all it is advisable do is change the operate getting used to mark_area!

As you discover different sorts of visualizations by yourself (and in future articles!), Altair’s mannequin for constructing visualizations will turn out to be simpler to implement (and hopefully recognize).

What’s Subsequent?

In future articles, I’ll cowl easy methods to use these libraries to construct extra sorts of visualizations. As you proceed studying, do not forget that the aim of those articles is not to grasp anybody software. That is about studying information visualization holistically, and my hope is that you’ve walked away from this text with a greater understanding of how time-series information is visualized.

As for the code, that consolation comes with time and apply. For now, it is best to be at liberty to take the examples above and regulate them to your personal information as wanted.

Till subsequent time.

References