d3 vs Highcharts (v3)

Revision 3 of this benchmark created on

Preparation HTML

<script src="http://code.highcharts.com/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.