Skip to content

Commit 90bee0b

Browse files
emmanuelleemmanuelle
committed
funnel chart
1 parent b718c8b commit 90bee0b

File tree

1 file changed

+64
-107
lines changed

1 file changed

+64
-107
lines changed

‎notebooks/funnel-charts.md

Lines changed: 64 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,19 @@ jupyter:
88
format_version: '1.1'
99
jupytext_version: 1.1.1
1010
kernelspec:
11-
display_name: Python 2
11+
display_name: Python 3
1212
language: python
13-
name: python2
13+
name: python3
14+
language_info:
15+
codemirror_mode:
16+
name: ipython
17+
version: 3
18+
file_extension: .py
19+
mimetype: text/x-python
20+
name: python
21+
nbconvert_exporter: python
22+
pygments_lexer: ipython3
23+
version: 3.6.7
1424
plotly:
1525
description: How to make funnel charts in Python with Plotly.
1626
display_as: financial
@@ -24,27 +34,16 @@ jupyter:
2434
permalink: python/funnel-charts/
2535
thumbnail: thumbnail/funnel-chart.jpg
2636
title: Python Funnel Charts | plotly
37+
v4upgrade: true
2738
---
2839

29-
#### New to Plotly?
30-
Plotly's Python library is free and open source! [Get started](https://plot.ly/python/getting-started/) by downloading the client and [reading the primer](https://plot.ly/python/getting-started/).
31-
<br>You can set up Plotly to work in [online](https://plot.ly/python/getting-started/#initialization-for-online-plotting) or [offline](https://plot.ly/python/getting-started/#initialization-for-offline-plotting) mode, or in [jupyter notebooks](https://plot.ly/python/getting-started/#start-plotting-online).
32-
<br>We also have a quick-reference [cheatsheet](https://images.plot.ly/plotly-documentation/images/python_cheat_sheet.pdf) (new!) to help you get started!
33-
#### Version Check
34-
Plotly's Python API is updated frequently. Run `pip install plotly --upgrade` to update your Plotly version.
35-
36-
```python
37-
import plotly
38-
plotly.__version__
39-
```
40-
4140
#### Funnel Chart Outline
4241

4342
*Funnel charts* are often used to represent data in different stages of a business process.
4443
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. A funnel chart has multiple *phases* and *values* associated with them. Here is a table that represents a *user flow* funnel for a social media campaign. The column named 'Values' represents the total number of users at that *Phase*.
4544

4645
```python
47-
import plotly.plotly as py
46+
import plotly.graph_objects as go
4847
import plotly.figure_factory as ff
4948

5049
data_table = [['Phases', 'Values'],
@@ -54,24 +53,20 @@ data_table = [['Phases', 'Values'],
5453
['Purchase', 3703],
5554
['Review', 1708]]
5655

57-
table = ff.create_table(data_table)
58-
py.iplot(table)
56+
fig = go.Figure(data=ff.create_table(data_table))
57+
fig.show()
5958
```
6059

6160
#### Basic Funnel Chart
6261

6362
```python
64-
import plotly.plotly as py
65-
from plotly import graph_objs as go
66-
67-
from __future__ import division
68-
6963
# chart stages data
7064
values = [13873, 10553, 5443, 3703, 1708]
7165
phases = ['Visit', 'Sign-up', 'Selection', 'Purchase', 'Review']
7266

7367
# color of each funnel section
74-
colors = ['rgb(32,155,160)', 'rgb(253,93,124)', 'rgb(28,119,139)', 'rgb(182,231,235)', 'rgb(35,154,160)']
68+
colors = ['rgb(32,155,160)', 'rgb(253,93,124)', 'rgb(28,119,139)', 'rgb(182,231,235)',
69+
'rgb(35,154,160)']
7570
```
7671

7772
A funnel section will be drawn using [Plotly shapes](https://plot.ly/python/shapes/), in the shape of a *Rectangle* or *Isosceles Trapezoid* depending on the value of the next phase. The phase having *maximum value* will have the width equal to the plot.
@@ -107,19 +102,15 @@ for i in range(n_phase):
107102
if (i == n_phase-1):
108103
points = [phase_w[i] / 2, height, phase_w[i] / 2, height - section_h]
109104
else:
110-
points = [phase_w[i] / 2, height, phase_w[i+1] / 2, height - section_h]
105+
points = [phase_w[i] / 2, height, phase_w[i + 1] / 2, height - section_h]
111106

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

114-
shape = {
115-
'type': 'path',
116-
'path': path,
117-
'fillcolor': colors[i],
118-
'line': {
119-
'width': 1,
120-
'color': colors[i]
121-
}
122-
}
109+
shape = dict(
110+
type='path',
111+
path=path,
112+
fillcolor=colors[i],
113+
line=dict(width=1, color=colors[i]))
123114
shapes.append(shape)
124115

125116
# Y-axis location for this section's details (text)
@@ -131,8 +122,12 @@ for i in range(n_phase):
131122
To draw the phase names and values, we are using the *text* mode in *scatter* plots. To style the plot, we are changing the background color of the plot and the plot paper, hiding the *legend* and *tick labels*, and removing the *zeroline*.
132123

133124
```python
125+
from plotly import graph_objects as go
126+
127+
fig = go.Figure()
128+
134129
# For phase names
135-
label_trace = go.Scatter(
130+
fig.add_trace(go.Scatter(
136131
x=[-350]*n_phase,
137132
y=label_y,
138133
mode='text',
@@ -141,10 +136,10 @@ label_trace = go.Scatter(
141136
color='rgb(200,200,200)',
142137
size=15
143138
)
144-
)
139+
))
145140

146141
# For phase values
147-
value_trace = go.Scatter(
142+
fig.add_trace(go.Scatter(
148143
x=[350]*n_phase,
149144
y=label_y,
150145
mode='text',
@@ -153,46 +148,44 @@ value_trace = go.Scatter(
153148
color='rgb(200,200,200)',
154149
size=15
155150
)
156-
)
151+
))
157152

158-
data = [label_trace, value_trace]
159-
160-
layout = go.Layout(
153+
fig.update_layout(
161154
title="<b>Funnel Chart</b>",
162155
titlefont=dict(
163156
size=20,
164157
color='rgb(203,203,203)'
165158
),
166-
shapes=shapes,
159+
shapes=shapes, # funnel geometry goes here
167160
height=560,
168161
width=800,
169162
showlegend=False,
170-
paper_bgcolor='rgba(44,58,71,1)',
171-
plot_bgcolor='rgba(44,58,71,1)',
163+
paper_bgcolor='rgba(44, 58, 71, 1)',
164+
plot_bgcolor='rgba(44, 58, 71, 1)',
172165
xaxis=dict(
173166
showticklabels=False,
174167
zeroline=False,
168+
showgrid=False
175169
),
176170
yaxis=dict(
177171
showticklabels=False,
178-
zeroline=False
172+
zeroline=False,
173+
showgrid=False
179174
)
180175
)
181176

182-
fig = go.Figure(data=data, layout=layout)
183-
py.iplot(fig)
177+
fig.show()
184178
```
185179

186180
#### Segmented Funnel Chart
187181
Instead of having a single source of data like the *funnel charts*, the segmented funnel charts have multiple data sources.
188182

189183
```python
190-
import plotly.plotly as py
191-
import plotly.graph_objs as go
192-
193-
from __future__ import division
184+
import plotly.graph_objects as go
194185
import pandas as pd
195186

187+
fig = go.Figure()
188+
196189
# campaign data
197190
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/segment-funnel-dataset.csv')
198191

@@ -264,30 +257,25 @@ for i in range(n_phase):
264257
points = [xl, height, xl + seg_w[j], height, xl + seg_w[j], height - section_h, xl, height - section_h]
265258
path = 'M {0} {1} L {2} {3} L {4} {5} L {6} {7} Z'.format(*points)
266259

267-
shape = {
268-
'type': 'path',
269-
'path': path,
270-
'fillcolor': colors[j],
271-
'line': {
272-
'width': 1,
273-
'color': colors[j]
274-
}
275-
}
260+
shape = dict(
261+
type='path',
262+
path=path,
263+
fillcolor=colors[j],
264+
line=dict(width=1, color=colors[j]))
276265
shapes.append(shape)
277266

278267
# to support hover on shapes
279-
hover_trace = go.Scatter(
268+
fig.add_trace(go.Scatter(
280269
x=[xl + (seg_w[j] / 2)],
281270
y=[height - (section_h / 2)],
282271
mode='markers',
283272
marker=dict(
284-
size=min(seg_w[j]/2, (section_h / 2)),
273+
size=0.1,
285274
color='rgba(255,255,255,1)'
286275
),
287276
text="Segment : %s" % (seg_name),
288277
name="Value : %d" % (df[seg_name][row_name])
289-
)
290-
data.append(hover_trace)
278+
))
291279

292280
xl = xl + seg_w[j]
293281

@@ -298,9 +286,11 @@ for i in range(n_phase):
298286

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

289+
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.
290+
301291
```python
302292
# For phase names
303-
label_trace = go.Scatter(
293+
fig.add_trace(go.Scatter(
304294
x=[-350]*n_phase,
305295
y=label_y,
306296
mode='text',
@@ -309,12 +299,11 @@ label_trace = go.Scatter(
309299
color='rgb(200,200,200)',
310300
size=15
311301
)
312-
)
302+
))
313303

314-
data.append(label_trace)
315304

316305
# For phase values (total)
317-
value_trace = go.Scatter(
306+
fig.add_trace(go.Scatter(
318307
x=[350]*n_phase,
319308
y=label_y,
320309
mode='text',
@@ -323,15 +312,9 @@ value_trace = go.Scatter(
323312
color='rgb(200,200,200)',
324313
size=15
325314
)
326-
)
327-
328-
data.append(value_trace)
329-
```
330-
331-
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.
315+
))
332316

333-
```python
334-
layout = go.Layout(
317+
fig.update_layout(
335318
title="<b>Segmented Funnel Chart</b>",
336319
titlefont=dict(
337320
size=20,
@@ -340,49 +323,23 @@ layout = go.Layout(
340323
hovermode='closest',
341324
shapes=shapes,
342325
showlegend=False,
343-
paper_bgcolor='rgba(44,58,71,1)',
344-
plot_bgcolor='rgba(44,58,71,1)',
326+
paper_bgcolor='rgba(44,58,71, 1)',
327+
plot_bgcolor='rgba(44,58,71, 1)',
345328
xaxis=dict(
346329
showticklabels=False,
347330
zeroline=False,
331+
showgrid=False
348332
),
349333
yaxis=dict(
350334
showticklabels=False,
351-
zeroline=False
335+
zeroline=False,
336+
showgrid=False
352337
)
353338
)
354339

355-
fig = go.Figure(data=data, layout=layout)
356-
py.iplot(fig)
340+
fig.show()
357341
```
358342

359343
#### Reference
360344
See https://plot.ly/python/reference/#layout-shapes for more information!
361345

362-
```python
363-
from IPython.display import display, HTML
364-
365-
display(HTML('<link href="//fonts.googleapis.com/css?family=Open+Sans:600,400,300,200|Inconsolata|Ubuntu+Mono:400,700" rel="stylesheet" type="text/css" />'))
366-
display(HTML('<link rel="stylesheet" type="text/css" href="http://help.plot.ly/documentation/all_static/css/ipython-notebook-custom.css">'))
367-
368-
! pip install --user git+https://github.com/plotly/publisher.git --upgrade
369-
import publisher
370-
publisher.publish(
371-
'funnel-chart.ipynb',
372-
'python/funnel-charts/',
373-
'Funnel Charts | plotly',
374-
'How to make funnel charts in Python with Plotly.',
375-
title = 'Python Funnel Charts | plotly',
376-
name = 'Funnel Charts',
377-
has_thumbnail='true',
378-
thumbnail='thumbnail/funnel-chart.jpg',
379-
language='python',
380-
page_type='example_index',
381-
display_as='financial',
382-
order=4,
383-
ipynb= '~notebook_demo/140')
384-
```
385-
386-
```python
387-
388-
```

0 commit comments

Comments
 (0)