pguso/tslab-plotly

Plotly support for typescript Jupyter notebooks with tslab kernel

tslab-plotly

Plotly.js plots in typescript Jupyter Notebooks!

Also works in Notebooks inside VSCode.

And the plots are interactive, checkout the example in notebook viewer

installation

npm i tslab-plotly

Usage

import Plotly from "tslab-plot";
import * as tslab from "tslab";

Plotly.newPlot(tslab, [
  {
    x: [1, 2, 3, 4, 5],
    y: [1, 2, 4, 8, 16],
  },
]);

API

The API exposed is exactly the same as that of plotly.js, except that the first argument is tslab instead of the id of the HTML container element.

See example plots in https://plotly.com/javascript/.

Requirements

Obviously node, npm and typescript. And the Jupyter lab environment:

Option 1

• Jupyter lab
• TSLab

Option 2

• vscode
• typescript-notebook extension

Option 3

• Jupyter lab
• TSLab
• vscode
• vscode-jupyter extension

How it works

This library uses tslab.display.html to inject:

• The DIV container for the plot
• A script tag that fetches plotly.js from a CDN
• Passess all the plot parameters to it in JSON format.