SVG vs Canvas D3

An example to ilustrate the difference of using d3.scaleThreshold vs d3.scaleSequential for creating discrete vs continuous diverging scales using d3.v4 and d3-scale-chromatic

See also sequential scales

Built with blockbuilder.org

forked from john-guerra's block: Discrete vs continuous diverging scales with d3-scale-chromatic

forked from john-guerra's block: SVG vs Canvas D3

forked from fereshtehamini's block: SVG vs Canvas D3

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body { margin:20px;position:fixed;top:0;right:0;bottom:0;left:0; }
    #canvasExample, #svgExample {
      position:relative;
      width:100%;
    }
  </style>
</head>

<body>
  <p>Here is an example of drawing 20000 lines with svg vs canvas</p>
  <h2>SVG</h2>
  <button id="btnSVG">Draw with svg</button> <p id="svgTime"></p>
  <div id="svgExample"></div>

<h2>Canvas</h2>
  <button id="btnCanvas">Draw with canvas</button> <p id="canvasTime"></p>
  <div id="canvasExample"></div>
  <script>

// ******************** Globals ************************
    var x = d3.scaleLinear().domain([-1, 1]).range([20, 500]);

var steps = 5
    //Discrete diverging scale
    var color_threshold = d3.scaleThreshold()
      .domain(d3.range(-1 + 2/steps, 1, 2/steps) ) //[-.6, -.2, .2, .6]
      .range(d3.schemePuOr[steps]); //=> 5 colors in an array

//Continuous diverging scale
    var color_sequential = d3.scaleSequential(d3.interpolatePuOr)
      .domain([-1, 1]);

function drawWithCanvas() {
      //Cleanup
      d3.select("#canvasExample").select("svg").remove();
      d3.select("#canvasExample").select("canvas").remove();
      // Background canvas for quick drawing of 2k lines
      var canvas = d3.select("#canvasExample").append("canvas")
        .attr("width", 960)
        .attr("height", 100);
      var ctx = canvas.node().getContext("2d");
      //Translucent svg on top to show the axis
      var svg = d3.select("#canvasExample").append("svg")
        .attr("width", 960)
        .attr("height", 100)
        .style("position", "absolute")
        .style("top", 0)
        .style("left", 0);

// Let's add an axis
      svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0, 50)")
        .call(d3.axisTop(x));

// Let's draw 20000 lines on canvas for speed
      d3.range(-1, 1, 0.00001)
        .forEach(function (d) {
          ctx.beginPath();
          ctx.strokeStyle = color_threshold(d);
          ctx.moveTo(x(d), 50);
          ctx.lineTo(x(d), 70);
          ctx.stroke();

ctx.beginPath();
          ctx.strokeStyle = color_sequential(d);
          ctx.moveTo(x(d), 80);
          ctx.lineTo(x(d), 100);
          ctx.stroke();
        });
    } // drawWithCanvas

function drawWithSVG() {
      d3.select("#svgExample").select("svg").remove();
      var svg = d3.select("#svgExample").append("svg")
        .attr("width", 960)
        .attr("height", 100);

// Let's add an axis
      svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0, 50)")
        .call(d3.axisTop(x));

var line = d3.line();

var gStep = svg.append("g");
      var gSeq = svg.append("g");

// Let's draw 20000 lines with svg
      gStep.selectAll("path")
        .data(d3.range(-1, 1, 0.00001))
        .enter()
        .append("path")
        .attr("d", function (d) {
          return line([[x(d), 50], [x(d), 70]]);
        })
        .style("stroke", color_threshold);

gSeq.selectAll("path")
        .data(d3.range(-1, 1, 0.0001))
        .enter()
        .append("path")
        .attr("d", function (d) {
          return line([[x(d), 80], [x(d), 100]]);
        })
        .style("stroke", color_sequential);

} // drawWithSVG

// Setup buttons
    d3.select("#btnCanvas").on("click", function () {

var t0 = performance.now();
      drawWithCanvas();
      var t1 = performance.now();
      d3.select("#canvasTime").text("Drawing on canvas took " + (t1 - t0) + " milliseconds.")

} );
    d3.select("#btnSVG").on("click",  function () {

var t0 = performance.now();
      drawWithSVG();
      var t1 = performance.now();
      d3.select("#svgTime").text("Drawing on SVG took " + (t1 - t0) + " milliseconds.");

});

</script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js