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.

Loading

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

view raw Visualization_in_python(Seaborn, Plotly).ipynb hosted with ❤ by GitHub

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!