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

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

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

##2. pyplot in html using javascript

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

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

  • (3) Finally, we generate the plot

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