DEV Community: HongKee Moon

Sharing data among Python, R, Java, Javascript in Jupyter notebook

HongKee Moon — Thu, 05 Mar 2020 08:57:35 +0000

This will be the conclusion of my journey of exploring polyglot data visualization. As a scientific software engineer, there are many chances to cope with various kinds of environments where scientists are keen on. Personally, I prefer to using javascript because it is platform agnostic.

I have one post how to communicate between python and javascript/java thanks to BeakerX extension.

AutoTranslation from Python to Javascript in Jupyter

HongKee Moon ・ Feb 24 ・ 1 min read

#jupyter #beakerx #python #javascript

Today we take a look at how to exchange data between R and Python cells in Jupyter. The summary figure shows how to share data among R, Python, Java, Javascript in Jupyter notebook.

rpy2 (https://rpy2.readthedocs.io/en/latest/)

rpy2 is designed to facilitate the use of R by Python programmers. R objects are exposed as instances of python classes and R functions as bound methods to those objects.

In order to use rpy2 in jupyter notebooks, we need to install them first. Please, refer https://rpy2.readthedocs.io/en/latest/overview.html#installation.

Then, enable it with load_ext magic in the jupyter cell.

%load_ext rpy2.ipython

For the convenience, let's put this extension in ipython_config.py file which is located in ~/.ipython/profile_defaults. If there is no config file in the location, please, create ipython_config.py. Then, paste the below content.

c.IPKernelApp.extensions = [
    'rpy2.ipython'
]

Now you can freely use the magics provided by rpy2. Let's check the output of pi from R.

import rpy2.robjects as robjects
pi = robjects.r['pi']
pi[0]

Create a dataframe in Python

import pandas as pd
python_df = pd.DataFrame({'A': [2, 3, 5, 2, 3, 4, 6, 2, 5, 9],
                          'B': [4, 2, 4, 6, 2, 4, 6, 7, 3, 5]})

print(python_df)

Use the dataframe in R with -i flag in the R magic

%%R -i python_df
# Pass the specific dataframe to R using the -i option

plot(python_df, main="Plotting a Python Dataframe in R",
    col="red", pch=12)

Export R variables with -o flag in the R magic

%%R -o model -o coef
# R to Python

model <- lm(B ~ A, data=python_df)
coef <- model$coefficients

Use the exported R variables with rpy2

import rpy2.robjects as robjects

print(model)
print(type(model))

print(dict(model.items()))

Normally, the exported R dataframe is automatically translated as a panda's dataframe in Python.

%%R -o cars_df

cars_df <- mtcars

# print(cars_df)
from beakerx import *
from beakerx.object import beakerx

beakerx.pandas_display_default()
cars_df

However, there is no direct way from R to Java/Javascript now. Hopefully, BeakerX team will provide the auto-translation feature for R sooner or later.

Here is the gist including all the snippets shown in the article.

Happy coding!

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

HongKee Moon — Wed, 04 Mar 2020 16:05:29 +0000

OK, it's time to use R kernel in our jupyter notebook. Actually, this can be done easily by following the instructions in https://irkernel.github.io/installation/.
Then, let's check if our R kernel is installed well.

library(ggplot2)

p <- qplot(wt, mpg, data=mtcars, geom=c('point', 'smooth'),
     method='lm', formular=y~x, color=cyl,
     main='Regression of MPG on Weight',
     xlab='Weight', ylab='Miles per Gallon')

p

You probably see the cover picture after running the R cell which is a non-interactive chart, named ggplot2.

Non-interactive: ggplot2 (https://ggplot2.tidyverse.org)

ggplot2 is widely used for data scientists because it is fast, simple, customizable and scalable, which is a part of tidyverse. Tidyverse is an ecosystem of packages designed with common APIs and a shared philosophy for data science. You can check https://www.tidyverse.org/.

When you want to make any plots from ggplot2 interactive, you can use ggplotly() function provided by plotly.

library(plotly)

embed_notebook(ggplotly(p), height="500")

Do not forget to call embed_notebook() function. The above script changes the non-interactive chart to an interactive one.

Interactive: plotly (https://plot.ly/r/)

Plotly provides two different methods for scatter plot. One is based on svg and the other is based on webgl. We can convert our svg chart to webgl with toWebGL() function at anytime. Please, refer https://plot.ly/r/webgl-vs-svg/.

# install.packages("babynames", repos="http://cran.r-project.org")

library(babynames)
nms <- filter(babynames, name %in% c("Sam", "Jamie"))
p <- ggplot(nms) + 
  geom_line(aes(year, prop, color = sex, linetype = name))

embed_notebook(ggplotly(p, dynamicTicks = TRUE) %>%
  rangeslider() %>%
  layout(hovermode = "x"))

The above code produces the time series how frequently "Sam" and "Jamie" are used as names for male and female.

The gist included in this article shows several cells how to customize plotly chart and how to highlight the data cross linked with sub plots.

Finally, the code below shows a heatmap with dendrogram thanks to heatmaply.

library(heatmaply)
library(dplyr)

mtscaled <- as.matrix(scale(mtcars))
heatmaply(mtscaled, k_row = 3, k_col = 2) %>% embed_notebook(height="800")

Happy coding!

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

HongKee Moon — Thu, 27 Feb 2020 14:47:49 +0000

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!

AutoTranslation from Python to Javascript in Jupyter

HongKee Moon — Mon, 24 Feb 2020 16:15:31 +0000

Today, we are going to think about how to bridge the data to different kernel. BeakerX project is quite useful as an extension of Jupyter notebook in order to use various kinds different languages which are based on Java. Therefore, when I have some chances to learn other languages, I can easily learn it from Jupyter notebook. It supports Clojure, Groovy, Java, Kotlin, R, SQL, Scala:

This extension also gives a way to bridge between different kernels for exchange of the data, called AutoTranslation (refer: https://github.com/twosigma/beakerx).

Firstly, I generate random histogram data in Python. Then, we use beakerx data holder to save them. Secondly, we are going to use them for showing in amCharts.

Here are whole source code which you can copy & paste. However, you should install BeakerX for your Jupyter. Please, read the instruction in https://github.com/twosigma/beakerx for more information.

Happy coding!

Visualization in Jupyter

HongKee Moon — Fri, 21 Feb 2020 15:55:44 +0000

Recently, I tried to load techan.js (http://techanjs.org/) in a Jupyter notebook javascript kernel. However, it failed to load since techan.js is made in commonJS format. Jupyter javascript kernel inherently uses requirejs(https://requirejs.org/) which support es6 based modules.

One of good PRs is https://github.com/andredumas/techan.js/pull/220 which converts the current commonJS system to ES6 module system. Therefore, I cloned it and changed some codes in order to be compatible with requirejs.

The output of the above cell is the cover image.

In addition, I noted how to embed amcharts(https://www.amcharts.com/) which is quite useful for visualization in Jupyter notebook as well.

The output of the amChart cell in Jupyter:

Please, enjoy the visualization in javascript inside Jupyter notebook.

Also, let me know if you need any helps to embed nice modules in Jupyter notebook.