d3 vs native JS, create rect (v2)

Revision 2 of this benchmark created by Felix Furtmayr on October 25, 2014

Preparation HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id="container_d3"></div>
<div id="container_d3_single_attr"></div>
<div id="container_native_JS"></div>
<div id="container_raphael"></div>

Setup

//Create a SVG element with d3
                  var svg_d3 = d3.select("#container_d3").append("svg")
                    .attr("width", 400)
                    .attr("height", 400);
    
                   //Create a SVG element with d3    
                  var svg_d3_single_attr = d3.select("#container_d3_single_attr").append("svg")
                    .attr("width", 400)
                    .attr("height", 400);
    
                   //Create a SVG element with native JS 
                  var svg_native_JS = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                  document.getElementById('container_native_JS').appendChild(svg_native_JS);
                  svg_native_JS.setAttributeNS(null, "width", 400);
                  svg_native_JS.setAttributeNS(null, "height", 400);
    
                   //Create a painting are with raphael
                  var paintarea = Raphael(document.getElementById("container_raphael"), 400, 400);

Test runner

svg_d3.append("rect")
  .attr("x", 100)
  .attr("y", 100)
  .attr("width", 200)
  .attr("height", 200)
  .attr("fill", "blue");

svg_d3_single_attr.append("rect")
  .attr({ "x": 100, "y": 100, "width": 200, "height": 200, "fill": "blue" });

var rect_native_JS = document.createElementNS("http://www.w3.org/2000/svg", "rect");
svg_native_JS.appendChild(rect_native_JS);
rect_native_JS.setAttribute("x", 100);
rect_native_JS.setAttribute("y", 100);
rect_native_JS.setAttribute("width", 200);
rect_native_JS.setAttribute("height", 200);
rect_native_JS.setAttribute("fill", "blue");

var rect =  paintarea.rect(100,100,200,200);
rect.attr({fill:'blue'}); 

Revisions

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

• Revision 2: published by Felix Furtmayr on October 25, 2014
• Revision 3: published on January 16, 2015