You can run this code interactively by just forking this project, use the FORK button on your right 👉

This project shows a quick overview of Plotly and Dash, two amazing visualization products. We'll start with "pure" Python Plotly. Part 2 (2. Intro to Dash on the right nav in your screen 👉) introduces Dash.

Let's get started!

Plotly is a free and open source visualization library for Python. In contrast to other Python viz libraries like for example matplotlib or seaborn, Plotly charts are interactive (javascript based).

RMOTR Notebooks supports Plotly out of the box, you can just import it and use it, both in your Lab (notebooks) and also in the public project view (to share your beautiful visualizations with the world). Let's start by building a quick chart (Plotly's version of "hello world"):

In [1]:

import plotly
import plotly.graph_objs as go

In [2]:

plotly.offline.init_notebook_mode(connected=True)

In [3]:

plotly.offline.iplot({
    "data": [go.Scatter(x=[1, 2, 3, 4], y=[4, 3, 2, 1])],
    "layout": go.Layout(title="hello world")
})

As you can see, plotting with Plotly is simple and the results are both beautiful and useful.

Plotly simplifies the process by using a consistent JSON API. Our previous example is simple, we're just passing a dictionary to plotly.offline.iplot. For more flexibility you can use Figures and Layouts. Same example using those:

In [4]:

trace1 = go.Scatter(x=[1, 2, 3, 4], y=[4, 3, 2, 1])
                                               
data = [trace1]
layout=go.Layout(title="Hello World", xaxis={'title':'X Axis'}, yaxis={'title':'Y Axis'})
figure=go.Figure(data=data, layout=layout)

plotly.offline.iplot(figure)

As you can see, both Figure and Layout provide the "structure" of the plot. The actual blue line that you see is a go.Scatter object. Plotly supports multiple types of charts (all under graph_objs). And they can be highly customized:

In [5]:

trace1 = go.Scatter(x=[1, 2, 3, 4], y=[4, 3, 2, 1], marker={'color': 'red', 'symbol': 104, 'size': 10}, 
                    mode="markers+lines",  text=['Four', 'Three', 'Two', 'One'], name='1st Trace')
                                               
data = [trace1]
layout=go.Layout(title="Hello World", xaxis={'title':'X Axis'}, yaxis={'title':'Y Axis'})
figure=go.Figure(data=data, layout=layout)

plotly.offline.iplot(figure)

Plotly's Figure JSON Object:

In [6]:

figure

Out[6]:

Figure({
    'data': [{'marker': {'color': 'red', 'size': 10, 'symbol': 104},
              'mode': 'markers+lines',
              'name': '1st Trace',
              'text': [Four, Three, Two, One],
              'type': 'scatter',
              'uid': '7f28bd30-b8db-453e-bc66-36974e82436c',
              'x': [1, 2, 3, 4],
              'y': [4, 3, 2, 1]}],
    'layout': {'title': 'Hello World', 'xaxis': {'title': 'X Axis'}, 'yaxis': {'title': 'Y Axis'}}
})

A more interesting example¶

We're going to use Cryptowatch API to get price information of Bitcoin and plot it using both an OHLC chart and a Candlestick chart:

In [7]:

# defined in utils.py, fork the project to see it in detail
from utils import get_historic_price

In [8]:

btc = get_historic_price('btc', after='2018-01-01', period='daily')

In [9]:

btc.head()

Out[9]:

	OpenPrice	HighPrice	LowPrice	ClosePrice	Volume	NA
CloseTime
2018-01-03	13374.0	15500.000	12795.0	14723.096	56060.395	792707650.0
2018-01-04	14716.0	15428.831	14500.0	15149.000	38314.300	572628740.0
2018-01-05	15140.0	15422.158	14060.0	15160.000	46461.140	685610300.0
2018-01-06	15159.0	17105.000	14725.0	16911.000	54038.530	864648900.0
2018-01-07	16912.0	17252.000	16251.0	17165.000	29561.055	494613700.0

With our BTC dataframe, we can now build the Ohlc chart:

In [10]:

trace = go.Ohlc(
    x=btc.index,
    open=btc['OpenPrice'],
    high=btc['HighPrice'],
    low=btc['LowPrice'],
    close=btc['ClosePrice'])
data = [trace]

In [11]:

plotly.offline.iplot(data)

To create a Candlestick, we'll just swap the graph object we use to Candlestick. I'll use a smaller dataset (prices starting in May) so you can appreciate better how the candles are drawn:

In [12]:

df = btc.loc['2018-05':]

In [13]:

trace = go.Candlestick(
    x=df.index,
    open=df['OpenPrice'],
    high=df['HighPrice'],
    low=df['LowPrice'],
    close=df['ClosePrice'])
data = [trace]
plotly.offline.iplot(data)

Final thoughts and more resources¶

As you can see, plotly combines an extremely simple API with beautiful and powerful visualizations. There are A LOT more charts for you to take a look at.

If you want to learn more, you can use both the User Guide and the Graph objects reference.

Next...¶

Navigate now to 2. Intro to Dash (using the navbar on the right 👉) to see a quick intro to Dash, Plotly's new flagship product.

Santiago BasultoSantiago Basulto

Using Plotly and Dash From RMOTR Notebooks

A more interesting example¶

Final thoughts and more resources¶

Next...¶