3D Isosurface Plots in JavaScript

How to make 3D isosurface plots in javascript.

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

Basic Isosurface Plot

var data = [
    {
        type: "isosurface",
        x: [0,0,0,0,1,1,1,1],
        y: [0,1,0,1,0,1,0,1],
        z: [1,1,0,0,1,1,0,0],
        value: [1,2,3,4,5,6,7,8],
        isomin: 2,
        isomax: 6,
        colorscale: "Reds"
    }
];

var layout = {
    margin: {t:0, l:0, b:0},
    scene: {
        camera: {
            eye: {
                x: 1.88,
                y: -2.12,
                z: 0.96
            }
        }
    }
};

Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});

Isosurface with Additional Slices

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/clebsch-cubic.csv', function(err, rows){
  function unpack(rows, key) {
  return rows.map(function(row) {return parseFloat(row[key]); });
}

var data = [
    {
        type: "isosurface",
        x: unpack(rows, 'x'),
        y: unpack(rows, 'y'),
        z: unpack(rows, 'z'),
        value: unpack(rows, 'value'),
        isomin: -100,
        isomax: 100,
        surface: {show: true, count: 1, fill: 0.8},
        slices: {z: {
          show: true, locations: [-0.3, 0.5]
        }},
        caps: {
            x: {show: false},
            y: {show: false},
            z: {show: false}
        },
    }
];

var layout = {
    margin: {t:0, l:0, b:0},
    scene: {
        camera: {
            eye: {
                x: 1.86,
                y: 0.61,
                z: 0.98
            }
        }
    }
};

Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
});

</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/clebsch-cubic.csv', function(err, rows){\n function unpack(rows, key) {\n return rows.map(function(row) {return parseFloat(row[key]); });\n}\n\nvar data = [\n {\n type: \"isosurface\",\n x: unpack(rows, 'x'),\n y: unpack(rows, 'y'),\n z: unpack(rows, 'z'),\n value: unpack(rows, 'value'),\n isomin: -100,\n isomax: 100,\n surface: {show: true, count: 1, fill: 0.8},\n slices: {z: {\n show: true, locations: [-0.3, 0.5]\n }},\n caps: {\n x: {show: false},\n y: {show: false},\n z: {show: false}\n },\n }\n];\n\nvar layout = {\n margin: {t:0, l:0, b:0},\n scene: {\n camera: {\n eye: {\n x: 1.86,\n y: 0.61,\n z: 0.98\n }\n }\n }\n};\n\nPlotly.newPlot('myDiv', data, layout, {showSendToCloud: true});\n});\n"}">

Multiple Isosurfaces with Caps

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/clebsch-cubic.csv', function(err, rows){
  function unpack(rows, key) {
  return rows.map(function(row) {return parseFloat(row[key]); });
}

var data = [
    {
        type: "isosurface",
        x: unpack(rows, 'x'),
        y: unpack(rows, 'y'),
        z: unpack(rows, 'z'),
        value: unpack(rows, 'value'),
        isomin: -10,
        isomax: 10,
        surface: {show: true, count: 4, fill: 1, pattern: 'odd'},
        caps: {
            x: {show: true},
            y: {show: true},
            z: {show: true}
        },
    }
];

var layout = {
    margin: {t:0, l:0, b:0},
    scene: {
        camera: {
            eye: {
                x: 1.86,
                y: 0.61,
                z: 0.98
            }
        }
    }
};

Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
});

</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/clebsch-cubic.csv', function(err, rows){\n function unpack(rows, key) {\n return rows.map(function(row) {return parseFloat(row[key]); });\n}\n\nvar data = [\n {\n type: \"isosurface\",\n x: unpack(rows, 'x'),\n y: unpack(rows, 'y'),\n z: unpack(rows, 'z'),\n value: unpack(rows, 'value'),\n isomin: -10,\n isomax: 10,\n surface: {show: true, count: 4, fill: 1, pattern: 'odd'},\n caps: {\n x: {show: true},\n y: {show: true},\n z: {show: true}\n },\n }\n];\n\nvar layout = {\n margin: {t:0, l:0, b:0},\n scene: {\n camera: {\n eye: {\n x: 1.86,\n y: 0.61,\n z: 0.98\n }\n }\n }\n};\n\nPlotly.newPlot('myDiv', data, layout, {showSendToCloud: true});\n});\n\n"}">