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-plotly";
import * as tslab from "tslab";

const trace1: Plotly.Data = {
  x: [1, 2, 3, 4, 5],
  y: [1, 2, 4, 8, 16],
};

const data = [trace1];

Plotly.newPlot(tslab, data);

Also remember to type the traces with Plotly.Data to avoid typescript errors (see example in Usage)

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. Also remember to type the traces with Plotly.Data to avoid typescript errors (see example in Usage)

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.