Interactive or non-interactive visualization in Jupyter (Python version)?

Today's topic is how we can choose either interactive or non-interactive visualization components in jupyter especially in Python since quite a lot of people enjoy programming in Python environment. My journey begun from installing BeakerX plugin in jupyter because this extension provides a lot of different languages for learners or piloting code development.

Non-interactive

Seaborn (https://seaborn.pydata.org/)

This package is quite useful to handle Panda dataframe mostly and gives fancy charts to analyze and take some insights a specific dataset. Seaborn is based on matplotlib by improving usability except interaction. When we have to check patterns on the dataset fast, seaborn would be a great choice.

from beakerx import *
from beakerx.object import beakerx
beakerx.pandas_display_default()

from matplotlib import pyplot as plt
%matplotlib inline

sns.pairplot(df, hue="species")

The above script produces a pairplot which is shown as the cover image.
Personally, static charts are easier to handle and do not require external javascript library loading. Non-interactive chart method is very useful for piloting, testing and checking datasets as web browser requires less memory where we can focus on more data intensive workflows.

Interactive

Plotly (https://plot.ly/)

Plotly supports wide range of languages such as Javascript, python and R. Therefore, we can get used to Plotly chart in any languages.

import plotly.express as px
# df = px.data.iris()
fig = px.scatter_matrix(df,
    dimensions=["sepal_width", "sepal_length", "petal_width", "petal_length"],
    color="species", symbol="species",
    title="Scatter matrix of iris data set",
    labels={col:col.replace('_', ' ') for col in df.columns})
fig.update_traces(diagonal_visible=False)
fig.show()

Implicit interactive plot conversion in Plotly

There is a way to convert implicitly to plotly plot from the pyplot. It requires a function named, iplot_mpl. Here are brief source codes of doing the conversion.

%matplotlib inline
import matplotlib.pyplot as plt # side-stepping mpl backend
import matplotlib.gridspec as gridspec # subplots
import numpy as np

fig1 = plt.figure()
# Make a legend for specific lines.
import matplotlib.pyplot as plt
import numpy as np


t1 = np.arange(0.0, 2.0, 0.1)
t2 = np.arange(0.0, 2.0, 0.01)

# note that plot returns a list of lines.  The "l1, = plot" usage
# extracts the first element of the list into l1 using tuple
# unpacking.  So l1 is a Line2D instance, not a sequence of lines
l1, = plt.plot(t2, np.exp(-t2))
l2, l3 = plt.plot(t2, np.sin(2 * np.pi * t2), '--go', t1, np.log(1 + t1), '.')
l4, = plt.plot(t2, np.exp(-t2) * np.sin(2 * np.pi * t2), 'rs-.')

plt.xlabel('time')
plt.ylabel('volts')
plt.title('Damped oscillation')
plt.show()

import plotly as py
import plotly.tools as tls
import plotly.graph_objects as go

py.offline.iplot_mpl(fig1)

If we want to remove the given styles, we need to create a Figure by using mpl_to_plotly, then override the layouts like below

fig = tls.mpl_to_plotly(fig1)

fig['layout'] = {'title': 'Damped oscillation',
               'xaxis': {'anchor': 'y', 'domain': [0.0, 1.0], 'title': 'time'},
               'yaxis': {'anchor': 'x', 'domain': [0.0, 1.0], 'title': 'volts'}}

fig['layout'].update(showlegend=True, autosize=True, template= None)
py.offline.iplot(fig)

The whole source codes are in gist.

In addition, we can show plotly charts here with runkit.

// hidden setup JavaScript code goes in this preamble area const hiddenVar = 42 const wrapPlotly = require('runkit-plotly'); var makeChart = wrapPlotly((data, layout, Plotly) => { Plotly.newPlot(layout, data); }); var trace1 = { x: [1, 2, 3, 4, 5], y: [1, 3, 2, 3, 1], mode: "lines+markers", name: "'linear'", line: {shape: "linear"}, type: "scatter" }; var trace2 = { x: [1, 2, 3, 4, 5], y: [6, 8, 7, 8, 6], mode: "lines+markers", name: "'spline'", text: ["tweak line smoothness<br>with 'smoothing' in line object", "tweak line smoothness<br>with 'smoothing' in line object", "tweak line smoothness<br>with 'smoothing' in line object", "tweak line smoothness<br>with 'smoothing' in line object", "tweak line smoothness<br>with 'smoothing' in line object", "tweak line smoothness<br>with 'smoothing' in line object"], line: {shape: "spline"}, type: "scatter" }; var trace3 = { x: [1, 2, 3, 4, 5], y: [11, 13, 12, 13, 11], mode: "lines+markers", name: "'vhv'", line: {shape: "vhv"}, type: "scatter" }; var trace4 = { x: [1, 2, 3, 4, 5], y: [16, 18, 17, 18, 16], mode: "lines+markers", name: "'hvh'", line: {shape: "hvh"}, type: "scatter" }; var trace5 = { x: [1, 2, 3, 4, 5], y: [21, 23, 22, 23, 21], mode: "lines+markers", name: "'vh'", line: {shape: "vh"}, type: "scatter" }; var trace6 = { x: [1, 2, 3, 4, 5], y: [26, 28, 27, 28, 26], mode: "lines+markers", name: "'hv'", line: {shape: "hv"}, type: "scatter" }; var data = [trace1, trace2, trace3, trace4, trace5, trace6]; var layout = {legend: { y: 0.5, traceorder: "reversed", font: {size: 16}, yref: "paper" }}; makeChart(data, layout);

let data = [ { "box": { "visible": true }, "uid": "738c261d-13bb-44e8-bb30-fc2fc4c6763b", "line": { "color": "#9b59b6" }, "name": "sepal_length", "type": "violin", "x": [ "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa" ], "y": [ 5.1, 4.9, 4.7, 4.6, 5, 5.4, 4.6, 5, 4.4, 4.9, 5.4, 4.8, 4.8, 4.3, 5.8, 5.7, 5.4, 5.1, 5.7, 5.1, 5.4, 5.1, 4.6, 5.1, 4.8, 5, 5, 5.2, 5.2, 4.7, 4.8, 5.4, 5.2, 5.5, 4.9, 5, 5.5, 4.9, 4.4, 5.1, 5, 4.5, 4.4, 5, 5.1, 4.8, 5.1, 4.6, 5.3, 5 ], "visible": true, "meanline": { "visible": true }, "showlegend": true, "legendgroup": "sepal_length" }, { "box": { "visible": true }, "uid": "a4f146f3-b97a-43fd-a01c-2229bbf34390", "line": { "color": "#3498db" }, "name": "sepal_width", "type": "violin", "x": [ "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa" ], "y": [ 3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3, 4, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3, 3.8, 3.2, 3.7, 3.3 ], "visible": "legendonly", "meanline": { "visible": true }, "showlegend": true, "legendgroup": "sepal_width" }, { "box": { "visible": true }, "uid": "6e46535b-b0ab-40d0-b1b6-39b0c9b891ef", "line": { "color": "#95a5a6" }, "name": "petal_length", "type": "violin", "x": [ "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa" ], "y": [ 1.4, 1.4, 1.3, 1.5, 1.4, 1.7, 1.4, 1.5, 1.4, 1.5, 1.5, 1.6, 1.4, 1.1, 1.2, 1.5, 1.3, 1.4, 1.7, 1.5, 1.7, 1.5, 1, 1.7, 1.9, 1.6, 1.6, 1.5, 1.4, 1.6, 1.6, 1.5, 1.5, 1.4, 1.5, 1.2, 1.3, 1.4, 1.3, 1.5, 1.3, 1.3, 1.3, 1.6, 1.9, 1.4, 1.6, 1.4, 1.5, 1.4 ], "visible": "legendonly", "meanline": { "visible": true }, "showlegend": true, "legendgroup": "petal_length" }, { "box": { "visible": true }, "uid": "547a8dd0-4aae-4743-8bd8-f3f0c8af6c42", "line": { "color": "#e74c3c" }, "name": "petal_width", "type": "violin", "x": [ "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa", "setosa" ], "y": [ 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2 ], "visible": "legendonly", "meanline": { "visible": true }, "showlegend": true, "legendgroup": "petal_width" }, { "box": { "visible": true }, "uid": "7460098e-f686-4b7c-981c-1adaa0f1188a", "line": { "color": "#9b59b6" }, "name": "sepal_length", "type": "violin", "x": [ "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor" ], "y": [ 7, 6.4, 6.9, 5.5, 6.5, 5.7, 6.3, 4.9, 6.6, 5.2, 5, 5.9, 6, 6.1, 5.6, 6.7, 5.6, 5.8, 6.2, 5.6, 5.9, 6.1, 6.3, 6.1, 6.4, 6.6, 6.8, 6.7, 6, 5.7, 5.5, 5.5, 5.8, 6, 5.4, 6, 6.7, 6.3, 5.6, 5.5, 5.5, 6.1, 5.8, 5, 5.6, 5.7, 5.7, 6.2, 5.1, 5.7 ], "visible": true, "meanline": { "visible": true }, "showlegend": false, "legendgroup": "sepal_length" }, { "box": { "visible": true }, "uid": "a0d8f476-e2e4-46b7-bcb7-07df53102442", "line": { "color": "#3498db" }, "name": "sepal_width", "type": "violin", "x": [ "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor" ], "y": [ 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3, 2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3, 2.7, 3, 2.9, 2.9, 2.5, 2.8 ], "visible": "legendonly", "meanline": { "visible": true }, "showlegend": false, "legendgroup": "sepal_width" }, { "box": { "visible": true }, "uid": "0f1a0743-b96e-4454-9490-a94b9c9be18f", "line": { "color": "#95a5a6" }, "name": "petal_length", "type": "violin", "x": [ "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor" ], "y": [ 4.7, 4.5, 4.9, 4, 4.6, 4.5, 4.7, 3.3, 4.6, 3.9, 3.5, 4.2, 4, 4.7, 3.6, 4.4, 4.5, 4.1, 4.5, 3.9, 4.8, 4, 4.9, 4.7, 4.3, 4.4, 4.8, 5, 4.5, 3.5, 3.8, 3.7, 3.9, 5.1, 4.5, 4.5, 4.7, 4.4, 4.1, 4, 4.4, 4.6, 4, 3.3, 4.2, 4.2, 4.2, 4.3, 3, 4.1 ], "visible": "legendonly", "meanline": { "visible": true }, "showlegend": false, "legendgroup": "petal_length" }, { "box": { "visible": true }, "uid": "040cbbbf-2803-4c1d-8f97-ac45105693ba", "line": { "color": "#e74c3c" }, "name": "petal_width", "type": "violin", "x": [ "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor", "versicolor" ], "y": [ 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1, 1.3, 1.4, 1, 1.5, 1, 1.4, 1.3, 1.4, 1.5, 1, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1, 1.1, 1, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3 ], "visible": "legendonly", "meanline": { "visible": true }, "showlegend": false, "legendgroup": "petal_width" }, { "box": { "visible": true }, "uid": "a432ba40-7348-46af-99d7-6658e85bf724", "line": { "color": "#9b59b6" }, "name": "sepal_length", "type": "violin", "x": [ "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica" ], "y": [ 6.3, 5.8, 7.1, 6.3, 6.5, 7.6, 4.9, 7.3, 6.7, 7.2, 6.5, 6.4, 6.8, 5.7, 5.8, 6.4, 6.5, 7.7, 7.7, 6, 6.9, 5.6, 7.7, 6.3, 6.7, 7.2, 6.2, 6.1, 6.4, 7.2, 7.4, 7.9, 6.4, 6.3, 6.1, 7.7, 6.3, 6.4, 6, 6.9, 6.7, 6.9, 5.8, 6.8, 6.7, 6.7, 6.3, 6.5, 6.2, 5.9 ], "visible": true, "meanline": { "visible": true }, "showlegend": false, "legendgroup": "sepal_length" }, { "box": { "visible": true }, "uid": "0f7b757c-9b2b-487d-979c-d3ceec62b7fa", "line": { "color": "#3498db" }, "name": "sepal_width", "type": "violin", "x": [ "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica" ], "y": [ 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7, 3.2, 3.3, 3, 2.5, 3, 3.4, 3 ], "visible": "legendonly", "meanline": { "visible": true }, "showlegend": false, "legendgroup": "sepal_width" }, { "box": { "visible": true }, "uid": "4d7756b5-8874-43c8-8981-6b945ee0378b", "line": { "color": "#95a5a6" }, "name": "petal_length", "type": "violin", "x": [ "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica" ], "y": [ 6, 5.1, 5.9, 5.6, 5.8, 6.6, 4.5, 6.3, 5.8, 6.1, 5.1, 5.3, 5.5, 5, 5.1, 5.3, 5.5, 6.7, 6.9, 5, 5.7, 4.9, 6.7, 4.9, 5.7, 6, 4.8, 4.9, 5.6, 5.8, 6.1, 6.4, 5.6, 5.1, 5.6, 6.1, 5.6, 5.5, 4.8, 5.4, 5.6, 5.1, 5.1, 5.9, 5.7, 5.2, 5, 5.2, 5.4, 5.1 ], "visible": "legendonly", "meanline": { "visible": true }, "showlegend": false, "legendgroup": "petal_length" }, { "box": { "visible": true }, "uid": "9a4e88df-50cf-4c96-afcb-81dadebb7388", "line": { "color": "#e74c3c" }, "name": "petal_width", "type": "violin", "x": [ "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica", "virginica" ], "y": [ 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2, 1.9, 2.1, 2, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2, 2, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2, 2.3, 1.8 ], "visible": "legendonly", "meanline": { "visible": true }, "showlegend": false, "legendgroup": "petal_width" } ]; let layout = { "title": { "text": "Iris Dataset Distribution" } }; const wrapPlotly = require('runkit-plotly'); var makeChart = wrapPlotly((data, layout, Plotly) => { Plotly.newPlot(layout, data); }); makeChart(data, layout);

Happy coding!