Interactive or non-interactive visualization in Jupyter (Python version)?
Tags: plotly, jupyter, python, visualization
Published: 2020-02-27 14:47:49

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.

```python
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. 

```python
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()
```

![Plotly_pairplot](https://dev-to-uploads.s3.amazonaws.com/i/ymku4u42jbur6x4wek67.png)


## 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.

```python
%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

```python
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.

{% gist https://gist.github.com/hkmoon/48f3b3380475abafe65e8b4c18cf40df %}


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

{% 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&lt;br&gt;with 'smoothing' in line object", "tweak line smoothness&lt;br&gt;with 'smoothing' in line object", "tweak line smoothness&lt;br&gt;with 'smoothing' in line object", "tweak line smoothness&lt;br&gt;with 'smoothing' in line object", "tweak line smoothness&lt;br&gt;with 'smoothing' in line object", "tweak line smoothness&lt;br&gt;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);

{% endrunkit %}

{% runkit

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);
{% endrunkit %}


Happy coding!