Access data object in Jupyter extension

Question

I've created a JavaScript extension for my Jupyter Notebook that will plot some data for me. Right now I have the data hardcoded within the extension.

My question: is there a way to access a data object that exists within the Notebook?

For example, below is some sample code for an extension:

define([
    'base/js/namespace'
], function(
    Jupyter
) {
  function test_second_extension() {

    var handler = function () {
      console.log(
          'This is the current notebook application instance:',
          Jupyter.notebook
      );
      var data = [{"x": 1, "y": 5}, {"x": 2, "y":12}, {"x": 3, "y": 27}];
      console.log(data);
    };

    var action = {
        icon: 'fa-comment-o', // a font-awesome class used on buttons, etc
        help    : 'Print notebook instance',
        help_index : 'zz',
        handler : handler
    };
    var prefix = 'test_second_extension';
    var action_name = 'show-alert';

    var full_action_name = Jupyter.actions.register(action, action_name, prefix); // returns 'my_extension:show-alert'
    Jupyter.toolbar.add_buttons_group([full_action_name]);
  }

  return {
    load_ipython_extension: test_second_extension
  };
});

And this is what I have in a Python3 Jupyter cell:

import pandas as pd
data = pd.read_json('[{"x": 1, "y": 5}, {"x": 2, "y":12}, {"x": 3, "y": 27}]')

Is there a way to access the data object that is created in the Jupyter cell from within the extension, instead of hardcoding it?

https://jupyter-notebook.readthedocs.io/en/stable/examples/Notebook/Importing%20Notebooks.html my help you. It's not explained why you're creating your own JS plotting extension, but you may want to consider Bokeh if you want an interactive JS plotting package. — Trenton McKinney, Sep 05 '18 at 17:27
Do you mean data from Jupyter be accessed by the browser? Meaning it can also be access in dev console? — fcsr, Sep 07 '18 at 11:31
@fcsr - Yes, essentially, data within a Jupyter cell being accessible from the console (and therefore accessible from my javascript extension) — R.D., Sep 10 '18 at 17:47
@Trenton_M - The reason for using our own JS plotting extension is to give us a quick display of common data in a plot that we designed that fits many of our data structures. It's something we have working in Zeppelin currently, but we're attempting to make the switch over to Jupyter. I haven't looked into Bokeh, I'll try to see if that fits my use case. But I'm still curious if there's a way to access the data object from a cell in the javascript extension. — R.D., Sep 10 '18 at 17:53
there seems to be a useful response posted here: https://stackoverflow.com/questions/42773092/javascript-jupyter-notebook-how-to-get-code-cell-content — Michael B, Sep 12 '18 at 05:41

score 1 · Answer 1 · answered Sep 14 '18 at 18:21

A bit janky but try this

from IPython.core.display import Javascript
import json

#list of dicts
list_of_dicts = [{"x": 1, "y": 5}, {"x": 2, "y":12}, {"x": 3, "y": 27}]

#convert to json string
json_list = json.dumps(list_of_dicts)

#run in cell
#This will run in the console check your browser
Javascript("""
var json_list = {};
window.variable = json_list;
console.log(json_list);""".format(json_list))

#or as a function
#replace console_log with what you need
def run_in_console(data):
    json_list = json.dumps(data)
    return Javascript("""
        var json_list = {};
        window.variable = json_list;
        console.log(json_list);""".format(json_list))

Access data object in Jupyter extension

1 Answers1