d3 vs Highcharts (v10)

Revision 10 of this benchmark created on

Preparation HTML

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://d3js.org/d3.v3.js"></script>


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

Setup

var data = [];
  
  for (var i = 0; i < 10000; i++) {
    data.push([Math.random(), Math.random(), Math.random()]);
  };

Test runner

Ready to run.

Testing in
TestOps/sec
Highcharts
$(function() {
  $("#hc").highcharts({
    chart: {
      type: 'bubble',
      plotBorderWidth: 1,

    },

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

    xAxis: {
      gridLineWidth: 1
    },

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

    series: [{
      animation: false,
      data: data

    }]

  });
});
ready
D3
$(function() {
var svg = d3.select("#d3").append("svg").attr("width", 500).attr("height", 500);

  var circle = d3.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.