Using Plotly and Dash From RMOTR Notebooks

Last updated: November 15th, 20182018-11-15Project preview

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': 'ccc16bc0-da53-42d6-8882-7016ae0b98a9',
              '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.

Notebooks AI
Notebooks AI Profile20060