Tri-Surf Plots in JavaScript

How to make Trisurf in javascript.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

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])

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var x = [0, 0, 1, 1, 0, 0, 1, 1]\nvar y = [0, 1, 1, 0, 0, 1, 1, 0]\nvar z = [0, 0, 0, 0, 1, 1, 1, 1]\nvar i = [7, 0, 0, 0, 4, 4, 2, 6, 4, 0, 3, 7]\nvar j = [3, 4, 1, 2, 5, 6, 5, 5, 0, 1, 2, 2]\nvar k = [0, 7, 2, 3, 6, 7, 1, 2, 5, 5, 7, 6]\n\nvar facecolor = [\n\t'rgb(50, 200, 200)',\n\t'rgb(100, 200, 255)',\n\t'rgb(150, 200, 115)',\n\t'rgb(200, 200, 50)',\n\t'rgb(230, 200, 10)',\n\t'rgb(255, 140, 0)'\n]\n\nfacecolor2 = new Array(facecolor.length * 2);\n\nfacecolor.forEach(function(x, i) {\n\tfacecolor2[i * 2 + 1] = facecolor2[i * 2] = x;\n});\n\nvar data = {\n\tx: x,\n\ty: y,\n\tz: z,\n\ti: i,\n\tj: j,\n\tk: k,\n\tfacecolor: facecolor2,\n\ttype: 'mesh3d'\n}\n\nPlotly.newPlot('myDiv', [data])\n"}">

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]);

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"// Note x, y, z define the vertices for a unit cube\n\nvar x = [0, 0, 1, 1, 0, 0, 1, 1];\nvar y = [0, 1, 1, 0, 0, 1, 1, 0];\nvar z = [0, 0, 0, 0, 1, 1, 1, 1];\nvar i = [7, 0, 0, 0, 4, 4, 2, 6, 4, 0, 3, 7];\nvar j = [3, 4, 1, 2, 5, 6, 5, 5, 0, 1, 2, 2];\nvar k = [0, 7, 2, 3, 6, 7, 1, 2, 5, 5, 7, 6];\n\nvar range_x = [-2, 2];\nvar range_y = [-3, 3];\nvar range_z = [-1, 1];\n\nfunction rectangle(x, y, z, range_x, range_y, range_z) {\n\n if (range_x.length !== 2 || range_y.length !== 2 || range_z.length !== 2) {\n throw 'Ranges must contain 2 values';\n }\n\t// we will forego other checks for to limit the length of the example\n\tx = x.map(function(e, i) {\n return range_x[e];\n });\n\n y = y.map(function(e, i) {\n return range_y[e];\n });\n\n z = z.map(function(e, i) {\n return range_z[e];\n });\n\n\treturn {x: x, y: y, z: z};\n}\n\nresult = rectangle(x, y, z, range_x, range_y, range_z);\n\n// x, y, z now represent the vertices for the rectangular box with\n// the ranges specified above\nx = result.x;\ny = result.y;\nz = result.z;\n\nvar facecolor = [\n 'rgb(50, 200, 200)',\n 'rgb(100, 200, 255)',\n 'rgb(150, 200, 115)',\n 'rgb(200, 200, 50)',\n 'rgb(230, 200, 10)',\n 'rgb(255, 140, 0)'\n];\n\nfacecolor2 = new Array(facecolor.length * 2);\nfacecolor.forEach(function(x, i) {\n facecolor2[i * 2 + 1] = facecolor2[i * 2] = x;\n});\n\nvar data = {\n x: x,\n y: y,\n z: z,\n i: i,\n j: j,\n k: k,\n facecolor: facecolor2,\n type: 'mesh3d'\n};\n\nPlotly.newPlot('myDiv', [data]);\n"}">