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

3d-charts.mddocs/

3D Visualizations

Three-dimensional plotting capabilities including 3D scatter plots, surfaces, meshes, and volume rendering.

Capabilities

3D Scatter Plots

Three-dimensional scatter plots for visualizing relationships between three variables.

/**
 * 3D scatter plot trace configuration
 */
interface Scatter3DTrace {
  type: 'scatter3d';
  x: number[];
  y: number[];
  z: number[];
  mode?: 'markers' | 'lines' | 'markers+lines' | 'markers+lines+text' | 'text';
  name?: string;
  text?: string | string[];
  textposition?: string;
  marker?: {
    size?: number | number[];
    color?: string | string[] | number[];
    symbol?: string | string[];
    opacity?: number | number[];
    line?: {
      color?: string | string[];
      width?: number | number[];
    };
    colorscale?: string;
    showscale?: boolean;
    colorbar?: Partial<ColorBar>;
    cauto?: boolean;
    cmin?: number;
    cmax?: number;
  };
  line?: {
    color?: string | string[];
    width?: number;
    dash?: string;
  };
}

Usage Examples:

// Basic 3D scatter plot
Plotly.newPlot('myDiv', [{
    x: [1, 2, 3, 4, 5],
    y: [1, 4, 2, 8, 5],
    z: [2, 1, 7, 3, 9],
    type: 'scatter3d',
    mode: 'markers',
    marker: {
        size: 8,
        color: 'red'
    }
}]);

// 3D line plot
Plotly.newPlot('myDiv', [{
    x: [1, 2, 3, 4, 5],
    y: [1, 4, 2, 8, 5], 
    z: [2, 1, 7, 3, 9],
    type: 'scatter3d',
    mode: 'lines+markers',
    line: {
        color: 'blue',
        width: 6
    },
    marker: {
        size: 4,
        color: 'red'
    }
}]);

// Colored 3D scatter plot
Plotly.newPlot('myDiv', [{
    x: [1, 2, 3, 4, 5],
    y: [1, 4, 2, 8, 5],
    z: [2, 1, 7, 3, 9],
    type: 'scatter3d',
    mode: 'markers',
    marker: {
        size: [10, 15, 20, 25, 30],
        color: [1, 2, 3, 4, 5],
        colorscale: 'Viridis',
        showscale: true,
        opacity: 0.8
    }
}]);

3D Surface Plots

Surface plots for visualizing functions of two variables.

/**
 * 3D surface plot trace configuration
 */
interface SurfaceTrace {
  type: 'surface';
  z: number[][];
  x?: number[] | number[][];
  y?: number[] | number[][];
  surfacecolor?: number[][];
  colorscale?: string;
  showscale?: boolean;
  colorbar?: Partial<ColorBar>;
  opacity?: number;
  cauto?: boolean;
  cmin?: number;
  cmax?: number;
  contours?: {
    x?: Partial<SurfaceContour>;
    y?: Partial<SurfaceContour>;
    z?: Partial<SurfaceContour>;
  };
  hidesurface?: boolean;
  lighting?: Partial<SurfaceLighting>;
  lightposition?: {
    x?: number;
    y?: number;
    z?: number;
  };
}

interface SurfaceContour {
  show?: boolean;
  color?: string;
  width?: number;
  start?: number;
  end?: number;
  size?: number;
  project?: {
    x?: boolean;
    y?: boolean;
    z?: boolean;
  };
}

interface SurfaceLighting {
  ambient?: number;
  diffuse?: number;
  specular?: number;
  roughness?: number;
  fresnel?: number;
}

Usage Examples:

// Generate surface data
function generateSurfaceData() {
    const size = 20;
    const x = [];
    const y = [];
    const z = [];
    
    for (let i = 0; i < size; i++) {
        z[i] = [];
        for (let j = 0; j < size; j++) {
            const xVal = -5 + (10 * i) / (size - 1);
            const yVal = -5 + (10 * j) / (size - 1);
            z[i][j] = Math.sin(Math.sqrt(xVal * xVal + yVal * yVal));
            
            if (i === 0) y.push(yVal);
        }
        x.push(-5 + (10 * i) / (size - 1));
    }
    
    return { x, y, z };
}

// Basic surface plot
const surfaceData = generateSurfaceData();
Plotly.newPlot('myDiv', [{
    type: 'surface',
    x: surfaceData.x,
    y: surfaceData.y,
    z: surfaceData.z,
    colorscale: 'Viridis'
}]);

// Surface with contours
Plotly.newPlot('myDiv', [{
    type: 'surface',
    z: surfaceData.z,
    colorscale: 'Blues',
    contours: {
        z: {
            show: true,
            usecolormap: true,
            highlightcolor: '#42f462',
            project: { z: true }
        }
    }
}]);

// Surface with custom lighting
Plotly.newPlot('myDiv', [{
    type: 'surface',
    z: surfaceData.z,
    colorscale: 'Portland',
    lighting: {
        ambient: 0.4,
        diffuse: 0.8,
        specular: 2.0,
        roughness: 0.1,
        fresnel: 0.2
    },
    lightposition: {
        x: 100,
        y: 200,
        z: 0
    }
}]);

3D Mesh Plots

3D mesh plots for visualizing irregular 3D surfaces and geometries.

/**
 * 3D mesh plot trace configuration
 */
interface Mesh3DTrace {
  type: 'mesh3d';
  x: number[];
  y: number[];
  z: number[];
  i?: number[];
  j?: number[];
  k?: number[];
  intensity?: number[];
  color?: string;
  colorscale?: string;
  showscale?: boolean;
  colorbar?: Partial<ColorBar>;
  opacity?: number;
  alphahull?: number;
  delaunayaxis?: 'x' | 'y' | 'z';
  facecolor?: string[];
  flatshading?: boolean;
  lighting?: Partial<MeshLighting>;
  lightposition?: {
    x?: number;
    y?: number;
    z?: number;
  };
}

interface MeshLighting {
  ambient?: number;
  diffuse?: number;
  specular?: number;
  roughness?: number;
  fresnel?: number;
  vertexnormalsepsilon?: number;
  facenormalsepsilon?: number;
}

Usage Examples:

// Basic mesh plot (convex hull)
const meshData = {
    x: [0, 1, 2, 0, 1, 2, 0, 1, 2],
    y: [0, 0, 0, 1, 1, 1, 2, 2, 2],
    z: [0, 0, 0, 1, 1, 1, 0, 0, 0]
};

Plotly.newPlot('myDiv', [{
    type: 'mesh3d',
    x: meshData.x,
    y: meshData.y,
    z: meshData.z,
    color: 'lightblue',
    opacity: 0.7
}]);

// Mesh with explicit triangulation
Plotly.newPlot('myDiv', [{
    type: 'mesh3d',
    x: [0, 1, 0, 0],
    y: [0, 0, 1, 0],
    z: [0, 0, 0, 1],
    i: [0, 0, 0, 1],
    j: [1, 2, 3, 2],
    k: [2, 3, 1, 3],
    intensity: [0, 0.25, 0.5, 1],
    colorscale: 'Rainbow',
    showscale: true
}]);

// Colored mesh with intensity
Plotly.newPlot('myDiv', [{
    type: 'mesh3d',
    x: meshData.x,
    y: meshData.y,
    z: meshData.z,
    intensity: [0, 1, 2, 0, 1, 2, 0, 1, 2],
    colorscale: 'Viridis',
    showscale: true,
    opacity: 0.8
}]);

Volume Plots

Volume rendering for 3D scalar field visualization.

/**
 * Volume plot trace configuration
 */
interface VolumeTrace {
  type: 'volume';
  x?: number[];
  y?: number[];
  z?: number[];
  value: number[][][];
  isomin?: number;
  isomax?: number;
  opacity?: number | number[];
  opacityscale?: string | number[][];
  colorscale?: string;
  showscale?: boolean;
  colorbar?: Partial<ColorBar>;
  caps?: {
    x?: Partial<VolumeCap>;
    y?: Partial<VolumeCap>;
    z?: Partial<VolumeCap>;
  };
  slices?: {
    x?: Partial<VolumeSlice>;
    y?: Partial<VolumeSlice>;
    z?: Partial<VolumeSlice>;
  };
  surface?: Partial<VolumeSurface>;
  spaceframe?: Partial<VolumeSpaceframe>;
}

interface VolumeCap {
  show?: boolean;
  fill?: number;
}

interface VolumeSlice {
  show?: boolean;
  locations?: number[];
  fill?: number;
}

interface VolumeSurface {
  show?: boolean;
  count?: number;
  fill?: number;
  pattern?: 'all' | 'odd' | 'even';
}

interface VolumeSpaceframe {
  show?: boolean;
  fill?: number;
}

Usage Examples:

// Generate volume data
function generateVolumeData() {
    const size = 20;
    const value = [];
    
    for (let i = 0; i < size; i++) {
        value[i] = [];
        for (let j = 0; j < size; j++) {
            value[i][j] = [];
            for (let k = 0; k < size; k++) {
                const x = (i - size/2) / 5;
                const y = (j - size/2) / 5;
                const z = (k - size/2) / 5;
                value[i][j][k] = x*x + y*y + z*z;
            }
        }
    }
    
    return value;
}

// Basic volume plot
const volumeData = generateVolumeData();
Plotly.newPlot('myDiv', [{
    type: 'volume',
    value: volumeData,
    isomin: 0.1,
    isomax: 2.0,
    opacity: 0.1,
    surface: {
        show: true,
        count: 17
    }
}]);

// Volume with slices
Plotly.newPlot('myDiv', [{
    type: 'volume',
    value: volumeData,
    colorscale: 'Hot',
    slices: {
        z: {
            show: true,
            locations: [0.1, 0.5, 0.9]
        }
    },
    caps: {
        x: { show: false },
        y: { show: false },
        z: { show: false }
    }
}]);

Isosurface Plots

Isosurface plots for visualizing constant-value surfaces in 3D scalar fields.

/**
 * Isosurface plot trace configuration
 */
interface IsosurfaceTrace {
  type: 'isosurface';
  x?: number[];
  y?: number[];
  z?: number[];
  value: number[][][];
  isomin?: number;
  isomax?: number;
  surface?: Partial<IsosurfaceSurface>;
  caps?: Partial<IsosurfaceCaps>;
  colorscale?: string;
  showscale?: boolean;
  colorbar?: Partial<ColorBar>;
}

interface IsosurfaceSurface {
  show?: boolean;
  count?: number;
  fill?: number;
  pattern?: 'all' | 'odd' | 'even';
}

interface IsosurfaceCaps {
  x?: Partial<IsosurfaceCap>;
  y?: Partial<IsosurfaceCap>;
  z?: Partial<IsosurfaceCap>;
}

interface IsosurfaceCap {
  show?: boolean;
  fill?: number;
}

Usage Examples:

// Basic isosurface
Plotly.newPlot('myDiv', [{
    type: 'isosurface',
    value: volumeData,
    isomin: 0.5,
    isomax: 1.5,
    surface: {
        show: true,
        count: 5
    },
    colorscale: 'Blues'
}]);

3D Layout Configuration

Layout options specific to 3D scenes.

/**
 * 3D scene configuration
 */
interface Scene {
  bgcolor?: string;
  camera?: Partial<Camera>;
  domain?: {
    x?: [number, number];
    y?: [number, number];
  };
  aspectmode?: 'auto' | 'cube' | 'data' | 'manual';
  aspectratio?: {
    x?: number;
    y?: number;
    z?: number;
  };
  xaxis?: Partial<Scene3DAxis>;
  yaxis?: Partial<Scene3DAxis>;
  zaxis?: Partial<Scene3DAxis>;
  dragmode?: 'orbit' | 'turntable' | 'zoom' | 'pan' | false;
  hovermode?: 'closest' | false;
  annotations?: Partial<Scene3DAnnotation>[];
}

interface Camera {
  up?: { x?: number; y?: number; z?: number; };
  center?: { x?: number; y?: number; z?: number; };
  eye?: { x?: number; y?: number; z?: number; };
  projection?: {
    type?: 'perspective' | 'orthographic';
  };
}

interface Scene3DAxis {
  title?: string | Partial<AxisTitle>;
  type?: 'linear' | 'log' | 'date' | 'category';
  range?: [number, number];
  autorange?: boolean | 'reversed';
  showgrid?: boolean;
  gridcolor?: string;
  gridwidth?: number;
  showline?: boolean;
  linecolor?: string;
  linewidth?: number;
  showspikes?: boolean;
  spikecolor?: string;
  spikesides?: boolean;
  spikethickness?: number;
  showbackground?: boolean;
  backgroundcolor?: string;
  showaxeslabels?: boolean;
  color?: string;
  tickmode?: 'linear' | 'array';
  nticks?: number;
  tick0?: number;
  dtick?: number;
  tickvals?: number[];
  ticktext?: string[];
  ticks?: '' | 'outside' | 'inside';
  mirror?: boolean | 'ticks' | 'all' | 'allticks';
  ticklen?: number;
  tickwidth?: number;
  tickcolor?: string;
  tickfont?: Partial<Font>;
  tickangle?: number;
  tickformat?: string;
  exponentformat?: 'none' | 'e' | 'E' | 'power' | 'SI' | 'B';
  showexponent?: 'all' | 'first' | 'last' | 'none';
  zeroline?: boolean;
  zerolinecolor?: string;
  zerolinewidth?: number;
}

Usage Examples:

// 3D plot with custom scene configuration
Plotly.newPlot('myDiv', [{
    type: 'scatter3d',
    x: [1, 2, 3, 4, 5],
    y: [1, 4, 2, 8, 5],
    z: [2, 1, 7, 3, 9],
    mode: 'markers'
}], {
    scene: {
        bgcolor: 'black',
        xaxis: {
            title: 'X Axis',
            color: 'white',
            gridcolor: 'gray'
        },
        yaxis: {
            title: 'Y Axis',
            color: 'white',
            gridcolor: 'gray'
        },
        zaxis: {
            title: 'Z Axis',
            color: 'white',
            gridcolor: 'gray'
        },
        camera: {
            eye: { x: 1.5, y: 1.5, z: 1.5 }
        },
        aspectmode: 'cube'
    }
});

// Multiple 3D scenes
Plotly.newPlot('myDiv', [
    {
        type: 'scatter3d',
        x: [1, 2, 3],
        y: [1, 2, 3],
        z: [1, 2, 3],
        scene: 'scene'
    },
    {
        type: 'scatter3d',
        x: [4, 5, 6],
        y: [4, 5, 6],
        z: [4, 5, 6],
        scene: 'scene2'
    }
], {
    scene: {
        domain: { x: [0, 0.5], y: [0, 1] },
        camera: { eye: { x: 2, y: 2, z: 2 } }
    },
    scene2: {
        domain: { x: [0.5, 1], y: [0, 1] },
        camera: { eye: { x: -2, y: -2, z: 2 } }
    }
});

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