Line Stroke Size in D3

JavaScript performance comparison

Revision 2 of this test case created

Info

Test different stroke sizes for performance

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>

<div id="graph" style="height:100px;"></div>
<script>
Benchmark.prototype.setup = function() {
    var points = [];
        for( var i = 0; i < 16000; ++i )
        {
            points.push(Math.random());
        }
   
    var element = $("#graph");
    var width = element.width(),
        height = element.height();
   
    // set up initial svg object
    var vis = d3.select(element[0])
       .append("svg")
       .attr("width", width)
       .attr("height", height);
   
    var x = d3.scale.linear().range([0,width]);
            var y = d3.scale.linear().range([height, 0]);
            x.domain([0,points.length]);
            y.domain(d3.extent(points));
   
    function drawLine( stroke )
    {
        var line = d3.svg.line()
               .x(function(d) { return x(d[0]); })
               .y(function(d) { return y(d[1]); });
   
            var d = points.map( function(v,i) { return [i,v]; } );
   
            vis.append("path")
               .datum(d)
               .attr("class", "line")
               .attr("d", line)
               .attr("fill","none")
               .attr("stroke","black")
               .attr("stroke-width",stroke);
    }
   
    function finish()
    {
    setTimeout(function() {
      deferred.resolve();
    }, 1);
    }
};

Benchmark.prototype.teardown = function() {
    element[0].innerHTML = ''
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
1px
// async test
drawLine("1px");
finish();
pending…
1.5px
// async test
drawLine("1.5px");
finish();
pending…
2px
// async test
drawLine("2px");
finish();
pending…
2.5px
// async test
drawLine("2.5px");
finish();
pending…
1.1px
// async test
drawLine("1.1px");
finish();
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment