Interactive plots with plotly

   |   

A recurrent limitation of visualization tools like matplotlib or seaborn is that they produce only static plots. Once the plot is displayed on a jupyther notebook, a html page or other supports, you cannot zoom in/out or read the values of the data points for example, without modifying the original code. One option would be be to develop your own code for interactive plots. Another option is to use an existing tool.

Plotly is an online/offline analytics and data visualization tool that enables to generate interactive plots. In the offline mode, you can use the API, without having to register. Plotly has free libraries for Python, R, MATLAB, Perl, Julia, Arduino, and REST. There is also a Chrome app, available here.

I will not go into details about what is or is not possible with plotly (you can check their website for that!). Instead, I will show you how to start and a few examples of interactive plots to be embedded in Jupyther Notebooks and in html pages. I might update this post later on, after learning more about the really cool stuffs that plotly can deliver.

##1. plotpy in a Jupyther notebook

#1.1. Installation

First thing first, the installation of the Plotly’s package. It is as easy as:

$ sudo pip install plotly

1.2. Interactive plots in Jupyther notebook

Let’s dive in, and generate our first interactive plot in a jupyther notebook.

####1.2.1. Exemple 1: scatter plot of a single dataset in a Jupyther notebook

from plotly.offline import init_notebook_mode, iplot
from plotly.graph_objs import *
init_notebook_mode()
#Generate some data
data_x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
data_y = [13, 13.2, 11.3, 12, 8.4, 9, 9.5, 6.5, 6.8, 4.3, 3.2, 2.8, 1.1, 0]
iplot([Scatter(x=data_x, y=data_y)])
view raw pyplot02.py hosted with ❤ by GitHub

####1.2.2. Exemple 2: scatter plot of 2 datasets in a Jupyther notebook

from plotly.offline import init_notebook_mode, iplot
from plotly.graph_objs import *
init_notebook_mode()
trace0 = Scatter(
x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
y = [13, 13.2, 11.3, 12, 8.4, 9, 9.5, 6.5, 6.8, 4.3, 3.2, 2.8, 1.1, 0]
)
trace1 = Scatter(
x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
y = [1, 1.3, 13, 16, 12.5, 11, 11.5, 8.5, 8.8, 6.3, 5.2, 4.8, 3.1, 2]
)
data = Data([trace0, trace1])
iplot(data, filename = 'basic-line')
view raw pyplot03.py hosted with ❤ by GitHub

####1.2.3. Exemple 3: BAR plot in a Jupyther notebook

from plotly.offline import init_notebook_mode, iplot
from plotly.graph_objs import *
init_notebook_mode()
trace1 = Bar(
x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
y = [13, 13.2, 11.3, 12, 8.4, 9, 9.5, 6.5, 6.8, 4.3, 3.2, 2.8, 1.1, 0]
)
data = [trace1]
iplot(data, filename='bar-plot')
view raw pyplot04.py hosted with ❤ by GitHub

###2. pyplot in html using javascript

  • (1) In the header of the html page, we call plotly javascript file

    <header>
    <script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js">
    </script>
    </header>
    view raw plotly05.html hosted with ❤ by GitHub

  • (2) we create a <div> in which to display the plot:

    <div id="show_plot" style="width:600px; height:250px;"> </div>
    view raw plotly06.html hosted with ❤ by GitHub

  • (3) Finally, we generate the plot

<script>
myplot = document.getElementById('show_plot');
Plotly.plot( myplot, [{
x: [1, 2, 3, 4, 5],
y: [1, 2, 4, 8, 16] }], {
margin: { t:0 } } );
</script>
view raw plotly7.html hosted with ❤ by GitHub

The plot will be displayed in the <div id='show_plot'></div>