### Start Development Server

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/NOTES.md

Execute this command to start the development server, which is necessary for the Nodeplotlib web application to function during development.

```bash
npm start dev-server
```

--------------------------------

### Clone and Install NodePlotLib from Repository

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/README.md

Clone the NodePlotLib repository, navigate to the directory, and install dependencies.

```sh
git clone https://github.com/{{USERNAME}}/nodeplotlib
cd nodeplotlib
npm i
```

--------------------------------

### Install NodePlotLib via npm or yarn

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/README.md

Use npm or yarn to add NodePlotLib to your project dependencies.

```sh
npm install nodeplotlib
# or
yarn add nodeplotlib
```

--------------------------------

### Serve NodePlotLib App for Development

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/README.md

Build the web app in watch mode and start the development server. Set the NODEPLOTLIB_PORT environment variable to specify the port.

```sh
npx nx run web:build -- --watch

NODEPLOTLIB_PORT=4201 npx nx run dev-server:serve
// or on Windows cmd
set "NODEPLOTLIB_PORT=4201" && npx nx run dev-server:serve
// or on Windows Powershell
$env:NODEPLOTLIB_PORT = "4201" ; npx nx run dev-server:serve
```

--------------------------------

### Bar Charts Example

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/libs/nodeplotlib/README.md

Generate a bar chart by defining a trace with 'bar' type and providing x and y data.

```typescript
const trace: Plot = { x: [1, 2], y: [1, 2], type: 'bar' };
plot([trace]);
```

--------------------------------

### Line Plots Example

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/libs/nodeplotlib/README.md

Create a line plot by defining multiple scatter traces with x and y data.

```typescript
const trace1: Plot = { x: [1, 2], y: [1, 2], type: 'scatter' };
const trace2: Plot = { x: [3, 4], y: [9, 16], type: 'scatter' };
plot([trace1, trace2]);
```

--------------------------------

### 3D Line Plots Example

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/libs/nodeplotlib/README.md

Create a 3D scatter plot by providing x, y, and z coordinates for the trace.

```typescript
const trace: Plot = {
  x: [9, 8, 5, 1],
  y: [1, 2, 4, 8],
  z: [11, 8, 15, 3],
  type: 'scatter3d',
};
plot([trace]);
```

--------------------------------

### 3D Surface Plots Example

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/libs/nodeplotlib/README.md

Generate a 3D surface plot by providing a 'z' array representing the surface height.

```typescript
const trace: Plot = {
  colorscale: 'Viridis',
  z: [
    [3, 5, 7, 9],
    [21, 13, 8, 5],
  ],
};
plot([trace]);
```

--------------------------------

### Create Simple Histogram

Source: https://context7.com/ngfelixl/nodeplotlib/llms.txt

Generates a basic histogram from an array of numerical data. Ensure 'nodeplotlib' is installed and imported.

```typescript
import { plot, Plot, Layout } from 'nodeplotlib';

// Simple histogram
const histogramData: Plot[] = [
  {
    x: [1, 2, 2, 3, 3, 3, 4, 4, 5],
    type: 'histogram',
  },
];
plot(histogramData);
```

--------------------------------

### Basic plot() Function Usage

Source: https://context7.com/ngfelixl/nodeplotlib/llms.txt

The main `plot()` function renders data visualizations. It accepts plot data, an optional layout, and an optional config object. The function starts a local server and opens a new browser tab for each plot.

```typescript
import { plot, Plot, Layout, Config } from 'nodeplotlib';

// Function signature
function plot(
  data: Plot[] | Observable<Plot[]>,
  layout?: Layout,
  config?: Config
): void;

// Basic usage with static data
const data: Plot[] = [
  {
    x: [1, 3, 4, 5],
    y: [3, 12, 1, 4],
    type: 'scatter',
  },
];

plot(data);
```

--------------------------------

### Build and Watch Web App

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/NOTES.md

Run this command to build the web application for development and enable watch mode for automatic recompilation on file changes.

```bash
npm run build web -- --watch
```

--------------------------------

### Build NodePlotLib for Production

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/README.md

Execute the production build script to compile the web app and library, then copy assets to the library's dist folder.

```sh
npm run build:prod
```

--------------------------------

### Run Scatter Plot Demo (JS)

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/tools/demo/README.md

Execute the scatter plot demo using a compiled JavaScript file.

```bash
node ./tools/demo/scatter.js
```

--------------------------------

### Run Scatter Plot Demo (TS)

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/tools/demo/README.md

Execute the scatter plot demo using TypeScript with ts-node.

```bash
npx ts-node ./tools/demo/scatter.ts
```

--------------------------------

### Run Candlestick Plot Demo (JS)

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/tools/demo/README.md

Execute the candlestick plot demo using a compiled JavaScript file.

```bash
node ./tools/demo/candlestick.js
```

--------------------------------

### Create Table Visualization

Source: https://context7.com/ngfelixl/nodeplotlib/llms.txt

Generates a table visualization with custom headers and cell formatting. Requires 'nodeplotlib' and 'Plot' types.

```typescript
import { plot, Plot } from 'nodeplotlib';

const tableData: Plot[] = [
  {
    type: 'table',
    header: {
      values: [['<b>EXPENSES</b>'], ['<b>Q1</b>'], ['<b>Q2</b>'], ['<b>Q3</b>'], ['<b>Q4</b>']],
      align: 'center',
      line: { width: 1, color: 'black' },
      fill: { color: 'grey' },
      font: { family: 'Arial', size: 12, color: 'white' },
    },
    cells: {
      values: [
        ['Salaries', 'Office', 'Merchandise', 'Legal', '<b>TOTAL</b>'],
        [1200000, 20000, 80000, 2000, 12120000],
        [1300000, 20000, 70000, 2000, 130902000],
        [1300000, 20000, 120000, 2000, 131222000],
        [1400000, 20000, 90000, 2000, 14102000],
      ],
      align: 'center',
      line: { color: 'black', width: 1 },
      fill: { color: [['white', 'lightgrey', 'white', 'lightgrey', 'white']] },
      font: { family: 'Arial', size: 11, color: ['black'] },
    },
  } as Plot,
];

plot(tableData);
```

--------------------------------

### Create a Simple Plot

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/libs/nodeplotlib/README.md

Import the plot function and Plot type, define data, and call plot to generate a scatter plot.

```typescript
import { plot, Plot } from 'nodeplotlib';

const data: Plot[] = [
  {
    x: [1, 3, 4, 5],
    y: [3, 12, 1, 4],
    type: 'scatter',
  },
];

plot(data);
```

--------------------------------

### Create a Real-time Streaming Plot

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/libs/nodeplotlib/README.md

Utilize RxJS to create a stream of plot data from an interval, mapping counter values to a sine wave plot.

```typescript
import { plot, Plot } from 'nodeplotlib';
import { interval, map } from 'rxjs';

const stream$: Observable<Plot[]> = interval(100).pipe(
  map(createSinusPlotFromNumber)
);

function createSinusPlotFromNumber(num: number): Plot[] {
  const data: Plot[] = [
    {
      x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      y: Array(10)
        .fill(0)
        .map((_, i) => Math.sin(num + i)),
      type: 'scatter',
    },
  ];
  return data;
}
```

--------------------------------

### Create Scatter and Line Plots

Source: https://context7.com/ngfelixl/nodeplotlib/llms.txt

Visualize relationships between data points using scatter and line plots. Customize with `mode: 'markers'`, `mode: 'lines'`, or `mode: 'lines+markers'`.

```typescript
import { plot, Plot } from 'nodeplotlib';

// Simple scatter plot
const trace1: Plot = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
  y: [1, 2, 1, 2, 1, 2, 1, 2, 1, 2],
  type: 'scatter',
};

// Multiple traces on one plot
const trace2: Plot = { x: [1, 2], y: [1, 2], type: 'scatter' };
const trace3: Plot = { x: [3, 4], y: [9, 16], type: 'scatter' };
plot([trace2, trace3]);

// Scatter with markers only
const markerPlot: Plot = {
  x: [1, 2, 3, 4, 5],
  y: [1, 4, 9, 16, 25],
  mode: 'markers',
  name: 'points',
  marker: {
    color: 'rgb(102,0,0)',
    size: 8,
    opacity: 0.7,
  },
  type: 'scatter',
};
plot([markerPlot]);
```

--------------------------------

### Create 3D Plots

Source: https://context7.com/ngfelixl/nodeplotlib/llms.txt

Visualize three-dimensional data with 3D scatter plots and surface plots. Use `type: 'scatter3d'` for scatter/line plots and `type: 'surface'` for surface plots.

```typescript
import { plot, Plot } from 'nodeplotlib';

// 3D scatter/line plot
const scatter3d: Plot = {
  x: [9, 8, 5, 1],
  y: [1, 2, 4, 8],
  z: [11, 8, 15, 3],
  type: 'scatter3d',
};
plot([scatter3d]);

// 3D surface plot
const surface: Plot = {
  colorscale: 'Viridis',
  z: [
    [3, 5, 7, 9],
    [21, 13, 8, 5],
  ],
  type: 'surface',
};
plot([surface]);
```

--------------------------------

### Create Candlestick Chart

Source: https://context7.com/ngfelixl/nodeplotlib/llms.txt

Generates a financial candlestick chart using OHLC data and date-based x-axis. Ensure 'nodeplotlib' is imported.

```typescript
import { plot, Plot, Layout } from 'nodeplotlib';

const candlestickData: Plot[] = [
  {
    x: ['2017-01-04', '2017-01-05', '2017-01-06', '2017-01-09', '2017-01-10'],
    open: [115.85, 115.92, 116.78, 117.95, 118.77],
    high: [116.51, 116.86, 118.16, 119.43, 119.38],
    low: [115.75, 115.81, 116.47, 117.94, 118.30],
    close: [116.02, 116.61, 117.91, 118.99, 119.11],
    increasing: { line: { color: '#17BECF' } },
    decreasing: { line: { color: '#7F7F7F' } },
    type: 'candlestick',
    xaxis: 'x',
    yaxis: 'y',
  } as Plot,
];

const candlestickLayout: Layout = {
  dragmode: 'zoom',
  showlegend: false,
  xaxis: {
    autorange: true,
    title: 'Date',
    type: 'date',
    rangeslider: { range: ['2017-01-03', '2017-01-12'] },
  },
  yaxis: {
    autorange: true,
    type: 'linear',
  },
};

plot(candlestickData, candlestickLayout);
```

--------------------------------

### Import Plotly Types

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/libs/nodeplotlib/README.md

Import necessary types like plot, Plot, Layout, and Config for defining plot structures.

```typescript
import { plot, Plot, Layout, Config } from 'nodeplotlib';
```

--------------------------------

### Real-Time Streaming Plots with RxJS

Source: https://context7.com/ngfelixl/nodeplotlib/llms.txt

Create dynamic, real-time plots by passing an RxJS Observable to the plot function. The plot updates automatically when the Observable emits new data.

```typescript
import { plot, Plot } from 'nodeplotlib';
import { interval, Observable, map } from 'rxjs';

// Create a stream that emits new plot data every 100ms
const stream$: Observable<Plot[]> = interval(100).pipe(
  map((index) => {
    const data: Plot = {
      x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      y: Array(10).fill(0).map((_, i) => Math.sin(index + i)),
      type: 'scatter',
    };
    return [data];
  })
);

// Pass the Observable directly to plot()
plot(stream$);

// More complex streaming example with multiple traces
const multiTraceStream$: Observable<Plot[]> = interval(50).pipe(
  map((tick) => [
    {
      x: Array(20).fill(0).map((_, i) => i),
      y: Array(20).fill(0).map((_, i) => Math.sin(tick * 0.1 + i * 0.3)),
      type: 'scatter',
      name: 'Sin Wave',
    },
    {
      x: Array(20).fill(0).map((_, i) => i),
      y: Array(20).fill(0).map((_, i) => Math.cos(tick * 0.1 + i * 0.3)),
      type: 'scatter',
      name: 'Cos Wave',
    },
  ])
);

plot(multiTraceStream$);
```

--------------------------------

### Create Radial and Polar Plots

Source: https://context7.com/ngfelixl/nodeplotlib/llms.txt

Generate radar charts and polar plots using `type: 'scatterpolar'`. These are useful for comparing multiple variables on a circular axis.

```typescript
import { plot, Plot, Layout } from 'nodeplotlib';

const radarData: Plot[] = [
  {
    type: 'scatterpolar',
    r: [1.5, 10, 39, 31, 15, 1.5],
    theta: ['A', 'B', 'C', 'D', 'E', 'A'],
    fill: 'toself',
    name: 'Group B',
  },
];

const radarLayout: Layout = {
  polar: {
    radialaxis: {
      visible: true,
      range: [0, 50],
    },
  },
};

plot(radarData, radarLayout);
```

--------------------------------

### Create Bar Charts

Source: https://context7.com/ngfelixl/nodeplotlib/llms.txt

Compare categorical data using horizontal or vertical bar charts. Set `orientation: 'h'` for horizontal bars; omit for vertical.

```typescript
import { plot, Plot } from 'nodeplotlib';

// Horizontal bar chart
const horizontalBar: Plot[] = [
  {
    type: 'bar',
    x: [20, 14, 23],
    y: ['giraffes', 'orangutans', 'monkeys'],
    orientation: 'h',
  },
];
plot(horizontalBar);

// Vertical bar chart
const verticalBar: Plot[] = [
  {
    type: 'bar',
    x: ['Product A', 'Product B', 'Product C'],
    y: [150, 230, 180],
  },
];
plot(verticalBar);
```

--------------------------------

### Create 2D Histogram Contour with Marginal Distributions

Source: https://context7.com/ngfelixl/nodeplotlib/llms.txt

Generates a 2D histogram with contour lines and marginal histograms on the axes. Requires 'nodeplotlib' and 'Layout' types.

```typescript
import { plot, Plot, Layout } from 'nodeplotlib';

// 2D histogram contour with marginal distributions
const x = Array(500).fill(0).map(() => Math.random() * 2 - 1);
const y = Array(500).fill(0).map(() => Math.random() * 2 - 1);

const densityData: Plot[] = [
  { x, y, mode: 'markers', type: 'scatter', marker: { size: 2, opacity: 0.4 } },
  { x, y, type: 'histogram2dcontour', colorscale: 'Hot', showscale: false } as Plot,
  { x, type: 'histogram', yaxis: 'y2', marker: { color: 'rgb(102,0,0)' } },
  { y, type: 'histogram', xaxis: 'x2', marker: { color: 'rgb(102,0,0)' } },
];

const densityLayout: Layout = {
  showlegend: false,
  width: 600,
  height: 550,
  xaxis: { domain: [0, 0.85], showgrid: false },
  yaxis: { domain: [0, 0.85], showgrid: false },
  xaxis2: { domain: [0.85, 1], showgrid: false },
  yaxis2: { domain: [0.85, 1], showgrid: false },
};

plot(densityData, densityLayout);
```

--------------------------------

### Create Sankey Diagram

Source: https://context7.com/ngfelixl/nodeplotlib/llms.txt

Generates a Sankey diagram to visualize flow data between nodes. Requires 'nodeplotlib' and 'Plot' types.

```typescript
import { plot, Plot, Layout } from 'nodeplotlib';

const sankeyData: Plot[] = [
  {
    type: 'sankey',
    orientation: 'h',
    node: {
      pad: 15,
      thickness: 30,
      line: { color: 'black', width: 0.5 },
      label: ['A1', 'A2', 'B1', 'B2', 'C1', 'C2'],
      color: ['blue', 'blue', 'blue', 'blue', 'blue', 'blue'],
    },
    link: {
      source: [0, 1, 0, 2, 3, 3],
      target: [2, 3, 3, 4, 4, 5],
      value: [8, 4, 2, 8, 4, 2],
    },
  } as Plot,
];

const sankeyLayout: Layout = {
  title: 'Basic Sankey',
  font: { size: 10 },
};

plot(sankeyData, sankeyLayout);
```

--------------------------------

### Commit Message Template

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/CONTRIBUTING.md

Use this template for commit messages. Include type, scope, message, body, and optional BREAKING CHANGE or Closes/Fixes/Related to issue number.

```text
type(scope): message

message-body

BREAKING CHANGE
Closes #4746
```

--------------------------------

### Configure Plot Layout with Layout Parameter

Source: https://context7.com/ngfelixl/nodeplotlib/llms.txt

Customize plot appearance, including titles, axes, and legends, using the Layout parameter. This allows for fine-grained control over the plot's presentation.

```typescript
import { plot, Plot, Layout } from 'nodeplotlib';

const data: Plot[] = [
  { x: [1, 2, 3, 4], y: [10, 15, 13, 17], type: 'scatter', name: 'Series A' },
  { x: [1, 2, 3, 4], y: [16, 5, 11, 9], type: 'scatter', name: 'Series B' },
];

const layout: Layout = {
  title: 'Sales Comparison',
  xaxis: {
    title: 'Quarter',
    showgrid: true,
    zeroline: false,
  },
  yaxis: {
    title: 'Revenue ($)',
    showgrid: true,
    zeroline: false,
  },
  showlegend: true,
  legend: {
    x: 0,
    y: 1,
  },
  width: 800,
  height: 500,
  margin: { l: 60, r: 30, t: 50, b: 50 },
};

plot(data, layout);
```

--------------------------------

### Radial Plots with Layout

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/libs/nodeplotlib/README.md

Create a polar scatter plot and customize its appearance using the layout parameter, including radial axis range.

```typescript
const data: Plot[] = [
  {
    type: 'scatterpolar',
    r: [1.5, 10, 39, 31, 15, 1.5],
    theta: ['A', 'B', 'C', 'D', 'E', 'A'],
    fill: 'toself',
    name: 'Group B',
  },
];

const layout: Layout = {
  polar: {
    radialaxis: {
      visible: true,
      range: [0, 50],
    },
  },
};

plot(data, layout);
```

--------------------------------

### Plot Function Signature

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/libs/nodeplotlib/README.md

The plot function accepts data (Plot array or Observable), an optional layout, and optional configuration.

```typescript
function plot(
  data: Plot[] | Observable<Plot[]>,
  layout?: Layout,
  config?: Config
): void;
```

--------------------------------

### Plotting an Observable Stream

Source: https://github.com/ngfelixl/nodeplotlib/blob/main/libs/nodeplotlib/README.md

Pass an RxJS Observable directly to the plot function to render real-time data.

```typescript
plot(stream$);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.