Convert scatterChart into lineChart

Question

I have a scatterChart with too many points in nvd3 that looks like that:

It is very computationally intense task for the browser to render a plenty of points, so I want to actually draw an nvd3 lineChart using the [x, y] data that I got. Basically I want areas of colors on my chart, and not the areas of color created by individual points. Is there a way to do that? What other things could you propose?

I tried random sampling of the data that I have but I do not like it since the improvement in performance is moderate and I am really losing data.

Answer 1

I suggest to use Highcharts with boost feature which renders chart series by WebGL instead of the default SVG:

• https://api.highcharts.com/highcharts/boost

• https://www.highcharts.com/blog/news/175-highcharts-performance-boost/

Here is a snippet showing a Scatter Chart with 5 series for 1000000 points total:

// Prepare the data
var n = 1000000/5,
    i, k,
    s = 5;
var series = [];
for (k = 0; k < s; k += 1) {
	var data = [];
  var cx = Math.random()* 90,
      cy = Math.random()* 90,
      radius = 10+Math.random()*30
  for (i = 0; i < n; i += 1) {
      var pt_angle = Math.random() * 2 * Math.PI;
      var pt_radius_sq = Math.random() * radius * radius;
      var x = Math.sqrt(pt_radius_sq) * Math.cos(pt_angle);
      var y = Math.sqrt(pt_radius_sq) * Math.sin(pt_angle);
  		data.push([cx+x, cy+y]);
  }
  console.log('serie'+k,'nr. points',data.length);
  series.push({
    type: 'scatter',
    data: data,
    marker: {
      radius: 0.1
    },
    tooltip: {
      followPointer: false,
      pointFormat: '[{point.x:.1f}, {point.y:.1f}]'
    }
  });
}

if (!Highcharts.Series.prototype.renderCanvas) {
    throw 'Module not loaded';
}

console.time('scatter');
Highcharts.chart('container', {
    chart: {
        zoomType: 'xy',
        height: '100%'
    },
    colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
    '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
    boost: {
        useGPUTranslations: true,
        usePreAllocated: true
    },
    xAxis: {
        min: 0,
        max: 100,
        gridLineWidth: 1
    },
    yAxis: {
        // Renders faster when we don't have to compute min and max
        min: 0,
        max: 100,
        minPadding: 0,
        maxPadding: 0,
        title: {
            text: null
        }
    },
    title: {
        text: 'Scatter chart with 1 million points'
    },
    legend: {
        enabled: false
    },
	  credits: {
        enabled: false
    },
    series: series
});
console.timeEnd('scatter');

#container {
	min-width: 380;
	max-width: 600px;
	margin: 0 auto;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

Jsfiddle Scatter Chart with 1000000 points: http://jsfiddle.net/beaver71/zyzpwgbv/