d3 vs Highcharts (v5)

Revision 5 of this benchmark created on

Preparation HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.2/highcharts.js"></script>
<script src="http://d3js.org/d3.v2.js"></script>
<div id="container" style="height: 400px; width: 600px; margin: 0 auto"></div>

<div id="d3"></div>

Setup

var data = [];
  
  for (var i = 0; i < 3000; i++) {
    data.push([Math.random(), Math.random(), Math.random()]);
  };
  
  var svg = d3.select("#d3").append("svg").attr("width", 500).attr("height", 500);

Test runner

Ready to run.

Testing in
TestOps/sec
Highcharts
var chart = new Highcharts.Chart({

  chart: {
    type: 'bubble',
    plotBorderWidth: 1,
    zoomType: 'xy',
    renderTo: 'container'


  },

  title: {
    text: 'Highcharts bubbles with radial gradient fill'
  },

  xAxis: {
    gridLineWidth: 1
  },

  yAxis: {
    startOnTick: false,
    endOnTick: false
  },

  series: [{
    animation: false,
    data: data

  }]

});
ready
D3
var circle = svg.selectAll("circle")
  .data(data)
  .enter().append("circle")
  .attr("cy", function(d) {
    return d[0]
  })
  .attr("cx", function(d) {
    return d[1]
  })
  .attr("r", function(d) {
    return d[2]
  });
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.