Funnel charts in Python using Plotly

Funnel Charts are often used to represent data in different stages of a business process. It’s an important mechanism in Business Intelligence to identify potential problem areas of a process. For example, it’s used to observe the revenue or loss in a sales process for each stage.

In this post, we’ll learn how to plot a funnel chart using a numerical dataset.

We are going to use a sample dataset from a dummy E-commerce firm’s social media campaign. The funnel chart will represent the flow of new users at different stages of the campaign.

These are the five stages of user flow:

1. Link Visit : When a user clicks on the campaign link
2. Sign-up : When a user creates an account
3. Selection : When a user adds a product to the cart
4. Purchase : When a user buys a product
5. Review : When a user reviews a purchased product

Here is the table (dataset) containing values (number of users) for all the intermediate phases.

Let’s represent the data in Python lists.

import plotly.plotly as py
import plotly.graph_objs as go

from __future__ import division

# campaign data
phases = ['Visit', 'Sign-up', 'Selection', 'Purchase', 'Review']
values = [13873, 10553, 5443, 3703, 1708]

colors = ['rgb(32,155,160)', 'rgb(253,93,124)', 'rgb(28,119,139)', 'rgb(182,231,235)', 'rgb(35,154,160)']

We will use Plotly shapes to draw the sections of a funnel. Each funnel section will be represented by a Quadrilateral (4 sided polygon).

A section will be a Rectangle if it has value equal to its next phase-value, or it’ll be a Isosceles Trapezoid (Isosceles Trapezium in British English) if its value is unequal to the next phase’s value.

We are using a fixed width for the plot and the section (phase) having the maximum users (value). All other sections will be drawn according to their values relative to the maximum value.

n_phase = len(phases)

# the fixed width for the plot
plot_width = 400

# height of a section and difference between sections 
section_h = 100
section_d = 10

# multiply factor to calculate the width of other sections
unit_width = plot_width / max(values)

# width for all the sections (phases)
phase_w = [int(value * unit_width) for value in values]

Each section will have a height of 100px and there will be a difference of 10px in successive sections.

To draw a section, we are going to use SVG paths.

height = section_h * n_phase + section_d * (n_phase-1)

shapes = []

label_y = []

for i in range(n_phase):
        if (i == n_phase-1):
                points = [phase_w[i]/2, height, phase_w[i]/2, height - section_h]
        else:
                points = [phase_w[i]/2, height, phase_w[i+1]/2, height - section_h]

        path = 'M {0} {1} L {2} {3} L -{2} {3} L -{0} {1} Z'.format(*points)

        shape = {
                'type': 'path',
                'path': path,
                'fillcolor': colors[i],
                'line': {
                    'width': 1,
                    'color': colors[i]
                }
        }
        shapes.append(shape)
        
        # Y-axis location for this section's details (phase name and value)
        label_y.append(height - (section_h / 2))

        height = height - (section_h + section_d)

We will use text mode to draw the name of phase and its value.

# For phase names
label_trace = go.Scatter(
    x=[-350]*n_phase,
    y=label_y,
    mode='text',
    text=phases,
    textfont=dict(
        color='rgb(200,200,200)',
        size=15
    )
)

# For phase values
value_trace = go.Scatter(
    x=[350]*n_phase,
    y=label_y,
    mode='text',
    text=values,
    textfont=dict(
        color='rgb(200,200,200)',
        size=15
    )
)

We will style the plot by changing the background color of the plot and the plot paper, hiding the legend and tick labels, and removing the zeroline.

data = [label_trace, value_trace]

layout = go.Layout(
    title='Funnel Chart',
    shapes=shapes,
    height=560,
    width=800,
    showlegend=False,
    paper_bgcolor='rgba(44,58,71,1)',
    plot_bgcolor='rgba(44,58,71,1)',
    xaxis=dict(
        showticklabels=False,
        zeroline=False,
    ),
    yaxis=dict(
        showticklabels=False,
        zeroline=False
    )
)

fig = go.Figure(data=data, layout=layout)
py.plot(fig)

We can observe that the number of users is decreasing at each stage.

At the end of the funnel, we can see that 1,708 users have reviewed their purchase. The E-commerce firm can analyze their reviews and work on creating a better experience for them in future.

That’s an example use case of funnel charts, you can create them to monitor your business processes.