Client scatter speedup

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    .chart--container {
      min-height: 150px;
      width: 100%;
      height: 100%;
    }

    .zc-ref {
      display: none;
    }

    /* cascading coloring rules */
    #myChart-graph-id0-plot-0-bl-1-c>circle {
      fill: #ef5350;
    }

    #myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(2n) {
      fill: #ab47bc;
    }

    #myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(3n) {
      fill: #66bb6a;
    }

    #myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(4n) {
      fill: #42a5f5;
    }
  </style>
</head>

<body>
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var nodeSize = 5;

    function getColor(index) {
      var color = '#ef5350';
      var nodeIndex = index + 1; // need to increase nodeindex since base index is 0 and css doesn't catch that
      if (nodeIndex % 2 == 0)
        color = '#ab47bc';
      if (nodeIndex % 3 == 0)
        color = '#66bb6a';
      if (nodeIndex % 4 == 0)
        color = '#42a5f5';

      //console.log('returning ', color, 'from nodeIndex:', nodeIndex)
      return color;
    }

    zingchart.bind('myChart', 'node_mouseover', function(e) {
      var getAllCircles = document.querySelectorAll('#myChart-graph-id0-plot-0-bl-1-c > circle')[e.nodeindex]
      // #myChart-graph-id0-plotset-plot-0-node-0-marker-circle
      var queryString = e.graphid + '-plotset-plot-0-node-' + e.nodeindex + '-marker-circle';
      var path = document.getElementById(queryString);
      path.setAttribute('r', 15);

      var tooltip = document.querySelector('#myChart-tooltip-text-path');
      tooltip.setAttribute('fill', getColor(e.nodeindex));
    });

    zingchart.bind('myChart', 'node_mouseout', function(e) {
      // #myChart-graph-id0-plotset-plot-0-node-0-marker-circle
      var queryString = e.graphid + '-plotset-plot-0-node-' + e.nodeindex + '-marker-circle';
      var path = document.getElementById(queryString);
      path.setAttribute('r', nodeSize);
    });


    zingchart.render({
      id: 'myChart',
      dataurl: 'https://app.zingsoft.com/api/file/GTGK2KRR/h7cGk3vaTmmJIQcwwqAA_big_scatter_demo.json',
      output: 'svg'
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
</body>

</html>

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.chart--container {
  min-height: 150px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}

/* cascading coloring rules */
#myChart-graph-id0-plot-0-bl-1-c>circle {
  fill: #ef5350;
}

#myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(2n) {
  fill: #ab47bc;
}

#myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(3n) {
  fill: #66bb6a;
}

#myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(4n) {
  fill: #42a5f5;
}

var nodeSize = 5;

function getColor(index) {
  var color = '#ef5350';
  var nodeIndex = index + 1; // need to increase nodeindex since base index is 0 and css doesn't catch that
  if (nodeIndex % 2 == 0)
    color = '#ab47bc';
  if (nodeIndex % 3 == 0)
    color = '#66bb6a';
  if (nodeIndex % 4 == 0)
    color = '#42a5f5';

  //console.log('returning ', color, 'from nodeIndex:', nodeIndex)
  return color;
}

zingchart.bind('myChart', 'node_mouseover', function(e) {
  var getAllCircles = document.querySelectorAll('#myChart-graph-id0-plot-0-bl-1-c > circle')[e.nodeindex]
  // #myChart-graph-id0-plotset-plot-0-node-0-marker-circle
  var queryString = e.graphid + '-plotset-plot-0-node-' + e.nodeindex + '-marker-circle';
  var path = document.getElementById(queryString);
  path.setAttribute('r', 15);

  var tooltip = document.querySelector('#myChart-tooltip-text-path');
  tooltip.setAttribute('fill', getColor(e.nodeindex));
});

zingchart.bind('myChart', 'node_mouseout', function(e) {
  // #myChart-graph-id0-plotset-plot-0-node-0-marker-circle
  var queryString = e.graphid + '-plotset-plot-0-node-' + e.nodeindex + '-marker-circle';
  var path = document.getElementById(queryString);
  path.setAttribute('r', nodeSize);
});


zingchart.render({
  id: 'myChart',
  dataurl: 'https://app.zingsoft.com/api/file/GTGK2KRR/h7cGk3vaTmmJIQcwwqAA_big_scatter_demo.json',
  output: 'svg'
});