Click events for data from csv

plotly.js
1

Hi everyone. I’m trying to make my graph change colour and size of its markers on click. Basically, what I’m trying to achieve is a mixture of this example on click events and this example on 3D scatter plots. However, what I get is a very long cycle which takes very long time to proceed and eventually my code crashes. Here is what I do:

const plot_data = 'plot_data.csv'
const myPlot = document.getElementById('myDiv');

Plotly.d3.csv(plot_data, function(err, rows) {
    var cluster = unpack(rows, 'cluster')
    function unpack(rows, key) {
        return rows.map(function(row) {
            return row[key];
        });
    }

    var trace = {
        x: unpack(rows, 'x1'), 
        y: unpack(rows, 'y1'), 
        z: unpack(rows, 'z1'),
        text: unpack(rows, 'user_id'),
        mode: 'markers',
        marker: {
            size: 3,
            color: cluster,
            colorscale: 'viridis',
            line: {
                width: 0},
            opacity: 0.5},
        type: 'scatter3d'
    };

    var data = [trace];
    var layout = {
        width: 1000,
        height: 800,
        margin: {
            l: 0,
            r: 0,
            b: 0,
            t: 0
        }};
    Plotly.newPlot('myDiv', data, layout);

    myPlot.on('plotly_click', function(data){
        var pn='',
            tn='',
            colors=[];
        for(var i=0; i < data.points.length; i++){
            pn = data.points[i].pointNumber;
            tn = data.points[i].curveNumber;
            colors = data.points[i].data.marker.color;
        };
        colors[pn] = '#C54C82';

        var update = {'marker':{color: colors, size:16}};
        Plotly.restyle('myDiv', update, [tn]);
    });
});

I’m pretty new to javascript and I don’t fully get its asynchronous nature. Please tell me how can I get these click events work. Thank you in advance.