Использование библиотеки javascript в блокноте jupyter / jupyterlab

Question

Моя настоящая цель - графически связать два списка вместе.

Я хочу сделать это в интерактивном режиме в jupyter / jupyterlab.

Пример можно найти в этой библиотеке: http://sebastien.drouyer.com/jquery.flowchart-demo/

Моя проблема в том, что я нелегко интегрировать Javascript в блокнот ipython.

Я нашел несколько руководств: http://jacobbridges.github.io/post/jupyter-notebook-with-interactive-charts/

Если я смогу воспроизвести этот пример, я не буду пытаться заменить библиотеку потоковой диаграммы.

Первая ячейка

%%javascript
require.config({
  paths: {
    flowcharts: "https://github.com/sdrdis/jquery.flowchart/blob/master/jquery.flowchart.js",
  },
shim: {
    flowcharts: {
      exports: "FlowCharts",
      deps: ["jquery"]
    },
}
});

Вторая

%%javascript
// Since I append the div later, sometimes there are multiple divs.
$("#example_1").remove();

// Make the cdiv to contain the chart.
element.append('<div id="example_1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>');
var data = {
  operators: {
    operator: {
      top: 20,
      left: 20,
      properties: {
        title: 'Operator',
        inputs: {
          input_1: {
            label: 'Input 1',
          },
          input_2: {
            label: 'Input 2',
          }
        },
        outputs: {
          output_1: {
            label: 'Output 1',
          },
          output_2: {
            label: 'Output 2',
          },
          output_3: {
            label: 'Output 3',
          }
        }
      }
    }
  }
};

// Require highcarts and make the chart.
require(['flowcharts'], function(FlowCharts) {
   $('#example_1').flowchart({
      data: data
    });
});

Я также не знаю, куда импортировать файл CSS.

Может кто-топомогите мне с этим?

С уважением, Томас