API for programmatically embedding Tablesaw `Plot` graphs?

I want to embed custom graphs, and I’m not sure where to start. I’m a Java expert, but I’m new to Jupyter Notebook and IJava, so maybe you can point me to some documentation.

First of all I installed Anaconda and then installed the IJava kernel in Jupyter Notebook with no problem. So far it’s working without a hitch using OpenJDK 11 on Windows 10!

Next I tried to use a Java-based dataframe package Tablesaw. I was able to add its Maven dependencies, load a CSV file, and create a plot. Very nice!

However to produce a graph Tablesaw generates a temporary HTML file using Plotly, and invokes the browser to show the interactive plot. In other words, the graph does not appear inside Jupyter Notebook.

Tablesaw has an example at https://nbviewer.jupyter.org/github/benmccann/nbviewer-test/blob/master/Tablesaw.ipynb using the BeakerX kernel (not IJava), and as you can see (scroll down to “Play (Money)ball with Linear Regression”), they are embedding a Tablesaw Plot directly within Jupyter Notebook.

I just assumed that IJava was better and more up-to-date with the latest Java versions (because it’s built directly on JShell), so before I switch to BeakerX I wanted to find out if I could do the same thing in IJava. Where do I start to figure out how to embed a Tablesaw Plot object as an interactive graph, the way they are doing that in BeakerX?

[garretwilson]

@SpencerPark, thanks immensely for this feedback. I’m excited to try it out, and the Tablesaw team is anxious to hear back as well. I just have a pile of work to get through before I can get back to this. In the meantime, if you want to put any of this as an answer on my Stack Overflow question, you can get the bounty I put up before it expires. Cheers!

[lanking520]

I have a hard time to do that with IJava. I expand this script and make it even plot with an image. However, I cannot store the state of the image if I try to save the notebook. Only JavaScript saved and image are not rendered if you open the notebook again. Is there any viable path for me to execute the html and probably display the base64 encoding image directly from the cell (so I can save and share with others).

// For rendering plots in Jupyter Notebook
import io.github.spencerpark.ijava.IJava;

IJava.getKernelInstance().getRenderer()
    .createRegistration(tech.tablesaw.plotly.components.Figure.class)
    .preferring(io.github.spencerpark.jupyter.kernel.display.mime.MIMEType.TEXT_HTML)
    .register((figure, ctx) -> {
        ctx.renderIfRequested(io.github.spencerpark.jupyter.kernel.display.mime.MIMEType.TEXT_HTML, () -> {
            String id = UUID.randomUUID().toString().replace("-", "");
            boolean plotImage = System.getenv().containsKey("D2L_PLOT_IMAGE");

            figure.asJavascript(id);
            Map<String, Object> context = figure.getContext();
            StringBuilder html = new StringBuilder();
            html.append("<img id=\"").append(id).append("_img\"></img>\n");
            html.append("<div id=\"").append(id).append("\"></div>\n");
            html.append("<script>require(['https://cdn.plot.ly/plotly-1.57.0.min.js'], Plotly => {\n");
            if (!plotImage) {
                // render javascript
                html.append("var ").append(context.get("targetName")).append(" = document.getElementById('").append(id).append("');\n");
            } else {
                // render image
                html.append("var ").append(context.get("targetName")).append(" = document.createElement('div');\n");
                html.append("var ").append(context.get("targetName") + "_img").append(" = document.getElementById('").append(id).append("_img');\n");
                String plotFunction = (String) context.get("plotFunction");
                String imgExt = ".then(function(gd) { Plotly.toImage(gd).then(function(url) { " + context.get("targetName") + "_img" + ".src=url; } )});";
                context.put("plotFunction", plotFunction.substring(0, plotFunction.length() - 1) + imgExt);
            }
            html.append(context.get("figure")).append('\n');
            html.append(context.get("plotFunction")).append('\n');
            html.append("})</script>\n");
            return html.toString();
    });
});

I’ve been trying the whole day to get it work. But learned quite a lot on how IJava kernel work with DisplayData 😃