Tri-Surf Plots in JavaScript

How to make Trisurf in javascript.

Plotly is known for its graphing libraries, but it's also a broader ecosystem for building interactive data apps, AI data analysis tools, and deploying and hosting Dash apps. Explore the full set of tools and platforms designed to help turn data into action. Discover Plotly.

Basic Trisurf Plot

function trisurf(Tri, X, Y, Z, C) {
  var data = {
    type: 'mesh3d',
    x: X,
    y: Y,
    z: Z,
    i: Tri.map(function(f) { return f[0] }),
    j: Tri.map(function(f) { return f[1] }),
    k: Tri.map(function(f) { return f[2] }),
    facecolor: C,
    flatshading: true,
  }
  
  Plotly.newPlot('myDiv', [data])
}


//Example usage
trisurf(
  [
    [0, 1, 2],
    [0, 2, 3],
    [0, 3, 1],
    [1, 2, 3]
  ], 
  [0, 1, 0, 0],
  [0, 0, 1, 0],
  [0, 0, 0, 1],
  [ 
    'rgb(0, 0, 0)',
    'rgb(255, 0, 0)',
    'rgb(0, 255, 0)',
    'rgb(0, 0, 255)'
  ])

Trisurf Cube

var x = [0, 0, 1, 1, 0, 0, 1, 1]
var y = [0, 1, 1, 0, 0, 1, 1, 0]
var z = [0, 0, 0, 0, 1, 1, 1, 1]
var i = [7, 0, 0, 0, 4, 4, 2, 6, 4, 0, 3, 7]
var j = [3, 4, 1, 2, 5, 6, 5, 5, 0, 1, 2, 2]
var k = [0, 7, 2, 3, 6, 7, 1, 2, 5, 5, 7, 6]

var facecolor = [
	'rgb(50, 200, 200)',
	'rgb(100, 200, 255)',
	'rgb(150, 200, 115)',
	'rgb(200, 200, 50)',
	'rgb(230, 200, 10)',
	'rgb(255, 140, 0)'
]

facecolor2 = new Array(facecolor.length * 2);

facecolor.forEach(function(x, i) {
	facecolor2[i * 2 + 1] = facecolor2[i * 2] = x;
});

var data = {
	x: x,
	y: y,
	z: z,
	i: i,
	j: j,
	k: k,
	facecolor: facecolor2,
	type: 'mesh3d'
}

Plotly.newPlot('myDiv', [data])

Extending the Cube Example for Boxes

// Note x, y, z define the vertices for a unit cube

var x = [0, 0, 1, 1, 0, 0, 1, 1];
var y = [0, 1, 1, 0, 0, 1, 1, 0];
var z = [0, 0, 0, 0, 1, 1, 1, 1];
var i = [7, 0, 0, 0, 4, 4, 2, 6, 4, 0, 3, 7];
var j = [3, 4, 1, 2, 5, 6, 5, 5, 0, 1, 2, 2];
var k = [0, 7, 2, 3, 6, 7, 1, 2, 5, 5, 7, 6];

var range_x = [-2, 2];
var range_y = [-3, 3];
var range_z = [-1, 1];

function rectangle(x, y, z, range_x, range_y, range_z) {

  if (range_x.length !== 2 || range_y.length !== 2 || range_z.length !== 2) {
    throw 'Ranges must contain 2 values';
  }
	// we will forego other checks for to limit the length of the example
	x = x.map(function(e, i) {
    return range_x[e];
  });

  y = y.map(function(e, i) {
    return range_y[e];
  });

  z = z.map(function(e, i) {
    return range_z[e];
  });

	return {x: x, y: y, z: z};
}

result = rectangle(x, y, z, range_x, range_y, range_z);

// x, y, z now represent the vertices for the rectangular box with
// the ranges specified above
x = result.x;
y = result.y;
z = result.z;

var facecolor = [
    'rgb(50, 200, 200)',
    'rgb(100, 200, 255)',
    'rgb(150, 200, 115)',
    'rgb(200, 200, 50)',
    'rgb(230, 200, 10)',
    'rgb(255, 140, 0)'
];

facecolor2 = new Array(facecolor.length * 2);
facecolor.forEach(function(x, i) {
    facecolor2[i * 2 + 1] = facecolor2[i * 2] = x;
});

var data = {
    x: x,
    y: y,
    z: z,
    i: i,
    j: j,
    k: k,
    facecolor: facecolor2,
    type: 'mesh3d'
};

Plotly.newPlot('myDiv', [data]);