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?

• Trenton McKinney: jupyter-notebook.readthedocs.io/en/stable/examples/Notebook/… 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.
• fcsr: Do you mean data from Jupyter be accessed by the browser? Meaning it can also be access in dev console?
• R.D.: @fcsr - Yes, essentially, data within a Jupyter cell being accessible from the console (and therefore accessible from my javascript extension)
• R.D.: @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.
• Michael B: there seems to be a useful response posted here: stackoverflow.com/questions/42773092/…

Answer 1

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))