CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-plotly-js

The open source JavaScript graphing library that powers Plotly with comprehensive data visualization capabilities including statistical charts, 3D graphs, scientific visualizations, and interactive plotting features.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

statistical-charts.mddocs/

Statistical Charts

Advanced statistical visualizations including histograms, box plots, violin plots, and distribution analysis charts.

Capabilities

Histograms

Distribution visualization for continuous data with automatic or manual binning.

/**
 * Histogram trace configuration
 */
interface HistogramTrace {
  type: 'histogram';
  x?: number[];
  y?: number[];
  histfunc?: 'count' | 'sum' | 'avg' | 'min' | 'max';
  histnorm?: '' | 'percent' | 'probability' | 'density' | 'probability density';
  autobinx?: boolean;
  autobiny?: boolean;
  nbinsx?: number;
  nbinsy?: number;
  xbins?: Partial<HistogramBins>;
  ybins?: Partial<HistogramBins>;
  bingroup?: string;
  marker?: Partial<HistogramMarker>;
  orientation?: 'v' | 'h';
  cumulative?: Partial<HistogramCumulative>;
  error_x?: Partial<ErrorBars>;
  error_y?: Partial<ErrorBars>;
}

interface HistogramBins {
  start?: number;
  end?: number;
  size?: number;
}

interface HistogramMarker {
  color?: string | string[];
  opacity?: number;
  line?: {
    color?: string;
    width?: number;
  };
  colorscale?: string;
  cauto?: boolean;
  cmin?: number;
  cmax?: number;
}

interface HistogramCumulative {
  enabled?: boolean;
  direction?: 'increasing' | 'decreasing';
  currentbin?: 'include' | 'exclude' | 'half';
}

Usage Examples:

// Basic histogram
const data = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5];
Plotly.newPlot('myDiv', [{
    x: data,
    type: 'histogram',
    nbinsx: 10
}]);

// Normalized histogram
Plotly.newPlot('myDiv', [{
    x: data,
    type: 'histogram',
    histnorm: 'probability',
    marker: {
        color: 'lightblue',
        line: {
            color: 'blue',
            width: 1
        }
    }
}]);

// Custom bin configuration
Plotly.newPlot('myDiv', [{
    x: data,
    type: 'histogram',
    xbins: {
        start: 0,
        end: 6,
        size: 0.5
    },
    marker: {
        color: 'rgba(255, 0, 0, 0.7)'
    }
}]);

// Cumulative histogram
Plotly.newPlot('myDiv', [{
    x: data,
    type: 'histogram',
    cumulative: {
        enabled: true,
        direction: 'increasing'
    }
}]);

// Overlaid histograms
const data1 = Array.from({length: 500}, () => Math.random() * 10);
const data2 = Array.from({length: 500}, () => Math.random() * 8 + 2);

Plotly.newPlot('myDiv', [
    {
        x: data1,
        type: 'histogram',
        opacity: 0.7,
        name: 'Group 1',
        marker: { color: 'red' }
    },
    {
        x: data2,
        type: 'histogram',
        opacity: 0.7,
        name: 'Group 2',
        marker: { color: 'blue' }
    }
], {
    barmode: 'overlay'
});

2D Histograms

Two-dimensional histograms for visualizing bivariate distributions.

/**
 * 2D histogram trace configuration
 */
interface Histogram2DTrace {
  type: 'histogram2d';
  x: number[];
  y: number[];
  z?: number[];
  histfunc?: 'count' | 'sum' | 'avg' | 'min' | 'max';
  histnorm?: '' | 'percent' | 'probability' | 'density' | 'probability density';
  autobinx?: boolean;
  autobiny?: boolean;
  nbinsx?: number;
  nbinsy?: number;
  xbins?: Partial<HistogramBins>;
  ybins?: Partial<HistogramBins>;
  bingroup?: string;
  colorscale?: string;
  showscale?: boolean;
  colorbar?: Partial<ColorBar>;
  zauto?: boolean;
  zmin?: number;
  zmax?: number;
}

Usage Examples:

// Generate bivariate data
const n = 1000;
const x = Array.from({length: n}, () => Math.random() * 10);
const y = Array.from({length: n}, () => Math.random() * 8 + x[i % n] * 0.3);

// Basic 2D histogram
Plotly.newPlot('myDiv', [{
    x: x,
    y: y,
    type: 'histogram2d',
    colorscale: 'Hot'
}]);

// 2D histogram with custom bins
Plotly.newPlot('myDiv', [{
    x: x,
    y: y,
    type: 'histogram2d',
    xbins: { start: 0, end: 10, size: 0.5 },
    ybins: { start: 0, end: 12, size: 0.6 },
    colorscale: 'Viridis',
    showscale: true
}]);

Box Plots

Statistical distribution visualization showing quartiles, outliers, and median.

/**
 * Box plot trace configuration
 */
interface BoxTrace {
  type: 'box';
  x?: any[];
  y?: number[];
  q1?: number[];
  median?: number[];
  q3?: number[];
  lowerfence?: number[];
  upperfence?: number[];
  mean?: number[];
  sd?: number[];
  notchspan?: number[];
  name?: string;
  orientation?: 'v' | 'h';
  boxpoints?: 'all' | 'outliers' | 'suspectedoutliers' | false;
  boxmean?: true | 'sd' | false;
  notched?: boolean;
  notchwidth?: number;
  whiskerwidth?: number;
  width?: number;
  offset?: number;
  offsetgroup?: string;
  alignmentgroup?: string;
  selected?: Partial<BoxSelected>;
  unselected?: Partial<BoxUnselected>;
  marker?: Partial<BoxMarker>;
  line?: Partial<BoxLine>;
  fillcolor?: string;
  pointpos?: number;
  jitter?: number;
}

interface BoxMarker {
  color?: string;
  size?: number;
  opacity?: number;
  outliercolor?: string;
  symbol?: string;
  line?: {
    color?: string;
    width?: number;
    outliercolor?: string;
    outlierwidth?: number;
  };
}

interface BoxLine {
  color?: string;
  width?: number;
}

Usage Examples:

// Basic box plot
const boxData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20];
Plotly.newPlot('myDiv', [{
    y: boxData,
    type: 'box',
    name: 'Sample Data'
}]);

// Box plot with all points shown
Plotly.newPlot('myDiv', [{
    y: boxData,
    type: 'box',
    boxpoints: 'all',
    boxmean: true,
    name: 'Data with Points'
}]);

// Grouped box plots
const group1 = Array.from({length: 50}, () => Math.random() * 10);
const group2 = Array.from({length: 50}, () => Math.random() * 8 + 3);
const group3 = Array.from({length: 50}, () => Math.random() * 12 + 1);

Plotly.newPlot('myDiv', [
    {
        y: group1,
        type: 'box',
        name: 'Group A',
        marker: { color: 'red' }
    },
    {
        y: group2,
        type: 'box',
        name: 'Group B',
        marker: { color: 'blue' }
    },
    {
        y: group3,
        type: 'box',
        name: 'Group C',
        marker: { color: 'green' }
    }
]);

// Horizontal box plots
Plotly.newPlot('myDiv', [{
    x: boxData,
    type: 'box',
    orientation: 'h',
    name: 'Horizontal Box'
}]);

// Box plot with custom statistics
Plotly.newPlot('myDiv', [{
    type: 'box',
    q1: [1, 2, 3],
    median: [2, 3, 4],
    q3: [3, 4, 5],
    lowerfence: [0, 1, 2],
    upperfence: [4, 5, 6],
    mean: [2.2, 3.1, 4.3],
    sd: [0.5, 0.8, 0.6],
    y: ['A', 'B', 'C'],
    orientation: 'h'
}]);

Violin Plots

Distribution visualization combining box plot and kernel density estimation.

/**
 * Violin plot trace configuration
 */
interface ViolinTrace {
  type: 'violin';
  x?: any[];
  y?: number[];
  name?: string;
  orientation?: 'v' | 'h';
  side?: 'both' | 'positive' | 'negative';
  width?: number;
  points?: 'all' | 'outliers' | 'suspectedoutliers' | false;
  pointpos?: number;
  jitter?: number;
  box?: Partial<ViolinBox>;
  meanline?: Partial<ViolinMeanLine>;
  span?: [number, number];
  spanmode?: 'soft' | 'hard' | 'manual';
  bandwidth?: number;
  scalegroup?: string;
  scalemode?: 'width' | 'count';
  marker?: Partial<ViolinMarker>;
  line?: Partial<ViolinLine>;
  fillcolor?: string;
}

interface ViolinBox {
  visible?: boolean;
  width?: number;
  fillcolor?: string;
  line?: {
    color?: string;
    width?: number;
  };
}

interface ViolinMeanLine {
  visible?: boolean;
  color?: string;
  width?: number;
}

interface ViolinMarker {
  color?: string;
  size?: number;
  opacity?: number;
  symbol?: string;
  outliercolor?: string;
  line?: {
    color?: string;
    width?: number;
    outliercolor?: string;
    outlierwidth?: number;
  };
}

interface ViolinLine {
  color?: string;
  width?: number;
}

Usage Examples:

// Basic violin plot
const violinData = Array.from({length: 100}, () => 
    Math.random() * 5 + Math.random() * 3
);

Plotly.newPlot('myDiv', [{
    y: violinData,
    type: 'violin',
    name: 'Distribution'
}]);

// Violin plot with box plot inside
Plotly.newPlot('myDiv', [{
    y: violinData,
    type: 'violin',
    box: {
        visible: true,
        width: 0.5
    },
    meanline: {
        visible: true
    },
    name: 'Violin with Box'
}]);

// Split violin plots
const leftData = Array.from({length: 50}, () => Math.random() * 8);
const rightData = Array.from({length: 50}, () => Math.random() * 6 + 2);

Plotly.newPlot('myDiv', [
    {
        y: leftData,
        type: 'violin',
        side: 'negative',
        name: 'Left Side',
        fillcolor: 'lightblue'
    },
    {
        y: rightData,
        type: 'violin',
        side: 'positive',
        name: 'Right Side',
        fillcolor: 'lightcoral'
    }
]);

// Violin plot with all points
Plotly.newPlot('myDiv', [{
    y: violinData,
    type: 'violin',
    points: 'all',
    pointpos: 0,
    jitter: 0.3,
    marker: {
        size: 4,
        color: 'red'
    }
}]);

Strip Charts

One-dimensional scatter plots for showing individual data points.

/**
 * Strip chart using scatter trace with categorical x-axis
 */
interface StripChart {
  type: 'scatter';
  x: string[];
  y: number[];
  mode: 'markers';
  marker: {
    size?: number;
    opacity?: number;
    color?: string | string[];
  };
  transforms?: [{
    type: 'groupby';
    groups: string[];
    styles: any[];
  }];
}

Usage Examples:

// Basic strip chart
const categories = Array.from({length: 100}, (_, i) => 
    ['A', 'B', 'C', 'D'][Math.floor(i / 25)]
);
const values = Array.from({length: 100}, () => Math.random() * 10);

Plotly.newPlot('myDiv', [{
    x: categories,
    y: values,
    type: 'scatter',
    mode: 'markers',
    marker: {
        size: 8,
        opacity: 0.6
    }
}]);

// Strip chart with jitter (simulated)
const jitteredX = categories.map(cat => 
    cat + (Math.random() - 0.5) * 0.3
);

Plotly.newPlot('myDiv', [{
    x: jitteredX,
    y: values,
    type: 'scatter',
    mode: 'markers',
    marker: {
        size: 6,
        opacity: 0.7,
        color: values,
        colorscale: 'Viridis'
    }
}]);

Error Bars

Statistical error visualization for scatter plots and bar charts.

/**
 * Error bar configuration
 */
interface ErrorBars {
  visible?: boolean;
  type?: 'percent' | 'constant' | 'sqrt' | 'data';
  symmetric?: boolean;
  array?: number[];
  arrayminus?: number[];
  value?: number;
  valueminus?: number;
  traceref?: number;
  tracerefminus?: number;
  copy_ystyle?: boolean;
  copy_zstyle?: boolean;
  color?: string;
  thickness?: number;
  width?: number;
}

Usage Examples:

// Scatter plot with error bars
const xData = [1, 2, 3, 4, 5];
const yData = [2, 4, 3, 6, 5];
const yError = [0.5, 0.8, 0.3, 1.0, 0.7];

Plotly.newPlot('myDiv', [{
    x: xData,
    y: yData,
    type: 'scatter',
    mode: 'markers',
    error_y: {
        type: 'data',
        array: yError,
        visible: true,
        color: 'red',
        thickness: 2,
        width: 5
    },
    marker: {
        size: 10,
        color: 'blue'
    }
}]);

// Bar chart with error bars
Plotly.newPlot('myDiv', [{
    x: ['A', 'B', 'C', 'D'],
    y: [20, 14, 23, 25],
    type: 'bar',
    error_y: {
        type: 'percent',
        value: 10,
        visible: true
    }
}]);

// Asymmetric error bars
Plotly.newPlot('myDiv', [{
    x: xData,
    y: yData,
    type: 'scatter',
    mode: 'markers',
    error_y: {
        type: 'data',
        symmetric: false,
        array: [0.8, 1.0, 0.5, 1.2, 0.9],
        arrayminus: [0.3, 0.4, 0.2, 0.6, 0.4],
        visible: true
    }
}]);

Distribution Plots Layout

Layout configurations commonly used with statistical charts.

/**
 * Statistical chart layout options
 */
interface StatisticalLayout {
  boxmode?: 'group' | 'overlay';
  boxgap?: number;
  boxgroupgap?: number;
  violinmode?: 'group' | 'overlay';
  violingap?: number;
  violingroupgap?: number;
  barnorm?: '' | 'fraction' | 'percent';
  barmode?: 'stack' | 'group' | 'overlay' | 'relative';
}

Usage Examples:

// Grouped box plots layout
Plotly.newPlot('myDiv', boxTraces, {
    boxmode: 'group',
    boxgap: 0.3,
    boxgroupgap: 0.1,
    title: 'Grouped Box Plots'
});

// Overlaid violin plots
Plotly.newPlot('myDiv', violinTraces, {
    violinmode: 'overlay',
    title: 'Overlaid Violin Plots'
});

// Normalized histogram
Plotly.newPlot('myDiv', histogramTraces, {
    barmode: 'overlay',
    barnorm: 'percent',
    title: 'Normalized Histograms'
});

Install with Tessl CLI

npx tessl i tessl/npm-plotly-js

docs

3d-charts.md

basic-charts.md

core-plotting.md

events.md

export-utilities.md

index.md

layout.md

statistical-charts.md

tile.json