3D Cluster Graph in JavaScript

How to make a 3D Cluster Graph in JavaScript.


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

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/alpha_shape.csv', function(err, rows){

    function unpack(rows, key) {
        return rows.map(function(row) { return row[key]; });
    }

    var data = [{
        x: unpack(rows, 'x'),
        y: unpack(rows, 'y'),
        z: unpack(rows, 'z'),
        mode: 'markers',
        type: 'scatter3d',
        marker: {
          color: 'rgb(23, 190, 207)',
          size: 2
        }
    },{
        alphahull: 7,
        opacity: 0.1,
        type: 'mesh3d',
        x: unpack(rows, 'x'),
        y: unpack(rows, 'y'),
        z: unpack(rows, 'z')
    }];

    var layout = {
        autosize: true,
        height: 480,
        scene: {
            aspectratio: {
                x: 1,
                y: 1,
                z: 1
            },
            camera: {
                center: {
                    x: 0,
                    y: 0,
                    z: 0
                },
                eye: {
                    x: 1.25,
                    y: 1.25,
                    z: 1.25
                },
                up: {
                    x: 0,
                    y: 0,
                    z: 1
                }
            },
            xaxis: {
                type: 'linear',
                zeroline: false
            },
            yaxis: {
                type: 'linear',
                zeroline: false
            },
            zaxis: {
                type: 'linear',
                zeroline: false
            }
        },
        title: {
            text: '3d point clustering'
        },
        width: 477
    };

    Plotly.newPlot('myDiv', data, layout);

});
</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'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/alpha_shape.csv', function(err, rows){\n\n function unpack(rows, key) {\n return rows.map(function(row) { return row[key]; });\n }\n\n var data = [{\n x: unpack(rows, 'x'),\n y: unpack(rows, 'y'),\n z: unpack(rows, 'z'),\n mode: 'markers',\n type: 'scatter3d',\n marker: {\n color: 'rgb(23, 190, 207)',\n size: 2\n }\n },{\n alphahull: 7,\n opacity: 0.1,\n type: 'mesh3d',\n x: unpack(rows, 'x'),\n y: unpack(rows, 'y'),\n z: unpack(rows, 'z')\n }];\n\n var layout = {\n autosize: true,\n height: 480,\n scene: {\n aspectratio: {\n x: 1,\n y: 1,\n z: 1\n },\n camera: {\n center: {\n x: 0,\n y: 0,\n z: 0\n },\n eye: {\n x: 1.25,\n y: 1.25,\n z: 1.25\n },\n up: {\n x: 0,\n y: 0,\n z: 1\n }\n },\n xaxis: {\n type: 'linear',\n zeroline: false\n },\n yaxis: {\n type: 'linear',\n zeroline: false\n },\n zaxis: {\n type: 'linear',\n zeroline: false\n }\n },\n title: {\n text: '3d point clustering'\n },\n width: 477\n };\n\n Plotly.newPlot('myDiv', data, layout);\n\n});\n"}">