real-time graphing now uses a canvas overlay

This speeds up real-time graphing of 5000 points 
by a factor of 4.

Author: stepheneb

avalanche2d.html

@@ -157,7 +157,7 @@ <h1 id="title">Avalanche-JS Demo</h1>
             <fieldset>
               <legend>Rendering</legend>
               <label><input id="show-visualization" type="checkbox" checked/> Visualization</label>
-              <label><input id="show-graph" type="checkbox" /> Graph</label>
+              <label><input id="show-graph" type="checkbox" checked/> Graph</label>
               <label><input id="show-data-table" type="checkbox"/> Folder-Desk Array</label>
             </fieldset>
           </form>
@@ -300,6 +300,7 @@ <h3>Folder-Desk Data Array:</h3>
           displayStats();
           avalanche2d.displayFolderCanvas(canvas, model);
         };
+        graph.hide_canvas();
         graph.new_data(graph_data);
         step_model_inputs[0].checked = true;
       };
@@ -312,6 +313,7 @@ <h3>Folder-Desk Data Array:</h3>
           displayStats();
           avalanche2d.displayFolderCanvas(canvas, model);
         };
+        graph.hide_canvas();
         graph.new_data(graph_data);
         if (model.indexOfStep >= 5000) displayResetWarning();
         step_model_inputs[0].checked = true;
@@ -324,6 +326,10 @@ <h3>Folder-Desk Data Array:</h3>
           step_model_inputs[0].checked = true;
         } else {
           start_time = +new Date();
+          if (show_graph.checked) {
+            graph.initialize_canvas();
+            graph.show_canvas();
+          };
           modelRunRequest = requestAnimFrame(runModelLoop, visualizations);
         }
       };
@@ -335,6 +341,7 @@ <h3>Folder-Desk Data Array:</h3>
         folder_data.innerHTML = '';
         step_count.innerHTML = '';
         step_model_warning.innerHTML = null;
+        graph.hide_canvas();
         graph_data = [2];
         graph.new_data(graph_data);
         step_model_inputs[0].checked = true;
@@ -372,7 +379,8 @@ <h3>Folder-Desk Data Array:</h3>
           model.nextStep();
           graph_data.push(model.averageFolders);
           if (show_visualization.checked) avalanche2d.displayFolderCanvas(canvas, model);
-          if (show_graph.checked) graph.add_point(model.averageFolders);
+          // if (show_graph.checked) graph.add_point(model.averageFolders);
+          if (show_graph.checked) graph.add_canvas_point(model.averageFolders);
           if (show_data_table.checked) avalanche2d.displayFolderTable(folder_data, model);
           sample_time = +new Date();
           sample_duration = sample_time - last_sample_time;
@@ -397,7 +405,6 @@ <h3>Folder-Desk Data Array:</h3>
           modelStop()
         }
       };
-
     });
   };
 </script>

src/grapher.js

@@ -15,6 +15,23 @@
     graph.add_point = function(p) {
       add_point(p);
     };
+    
+    graph.add_canvas_point = function(p) {
+      add_canvas_point(p);
+    };
+    
+    graph.initialize_canvas = function() {
+      initialize_canvas();
+    };
+    
+    graph.show_canvas = function() {
+      show_canvas();
+    };
+
+    graph.hide_canvas = function() {
+      hide_canvas();
+    };
+    
 
     var size = [500, 350],
         padding = [20, 30, 20, 40], // top right bottom left
@@ -42,6 +59,10 @@
         downy = Math.NaN,
         dragged = null,
         selected = points[0];
+    
+    var plot, gcanvas, gctx;
+    
+    var chart = document.getElementById("chart");
 
     var vis = d3.select("#chart").append("svg:svg")
         .attr("width", size[0] + padding[3] + padding[1])
@@ -70,6 +91,8 @@
         .attr("class", "line")
         .attr("d", line(points));
 
+    initialize_canvas();
+
     // variables for speeding up dynamic plotting
     var line_path = vis.select("path")[0][0];
     var line_seglist = line_path.pathSegList;
@@ -118,23 +141,60 @@
       points.push(point);
       var newx = x.call(self, len, len);
       var newy = y.call(self, p, len);
+      line_seglist.appendItem(line_path.createSVGPathSegLinetoAbs(newx, newy));
+    };
+    
+    function add_canvas_point(p) {
+      var len = points.length;
+      var oldx = x.call(self, len-1, len-1);
+      var oldy = y.call(self, points[len-1].y, len-1);
+      var point = { x: len, y: p };
+      points.push(point);
+      var newx = x.call(self, len, len);
+      var newy = y.call(self, p, len);
+      gctx.beginPath();
+      gctx.moveTo(oldx, oldy);
+      gctx.lineTo(newx, newy);
+      gctx.closePath();
+      gctx.stroke();
+      // FIXME: FireFox bug
+    };
+    
+    function show_canvas() {
+      gcanvas.style.zIndex = 100;
+    };
 
-      // adding circle points with dom manipulation
-      // var c2 = cpoint.cloneNode(false);
-      // c2.setAttribute("cx", newx);
-      // c2.setAttribute("cy", newy);
-      // vis_node.appendChild(c2);
+    function hide_canvas() {
+      gcanvas.style.zIndex = -100;
+    };
 
-      // adding circle points with d3
-      // vis.append("svg:circle").attr('cx',newx).attr('cy',newy).attr('r',1)
-      
-      // adding new line segments with dom manipulation
-      line_seglist.appendItem(line_path.createSVGPathSegLinetoAbs(newx, newy));
+    function initialize_canvas() {
+      plot = {}
+      plot.rect = chart.children[0].getElementsByTagName("rect")[0]
+      plot.width = plot.rect.width['baseVal'].value
+      plot.height = plot.rect.height['baseVal'].value
+      plot.left = plot.rect.getCTM().e
+      plot.top = plot.rect.getCTM().f
 
-      // adding new line segments with d3 and custom attribute generation
-      // vis.select("path").attr("d", generate_path_attribute([point], x, y));
+      gcanvas = document.createElement('canvas');
+      chart.appendChild(gcanvas);
+      gcanvas.style.position = 'absolute'
+      gcanvas.width = plot.width;
+      gcanvas.height = plot.height;
+      gcanvas.offsetLeft = plot.left;
+      gcanvas.offsetTop = plot.top;
+      gcanvas.style.left = plot.left + 'px'
+      gcanvas.style.top = plot.top + 'px'
+      gctx = gcanvas.getContext( '2d' );
+      gctx.globalCompositeOperation = "destination-atop";
+      gctx.lineWidth = 1;
+      gctx.fillStyle = "rgba(0,255,0, 0.05)";
+      gctx.fillRect(0, 0, gcanvas.width, gcanvas.height);
+      gctx.strokeStyle = "rgba(255,65,0, 1.0)";
+      gcanvas.style.border = 'solid 1px red'
+      gcanvas.style.zIndex = -100
     };
-    
+
     function update() {
       var lines = vis.select("path").attr("d", line(points));
 

stylesheets/style.css

@@ -50,7 +50,8 @@ fieldset {
   background-color: #f7f2c5;
   width: 560px;
   height: 400px;
-  border: solid 1px #cccccc; }
+  border: solid 1px #cccccc; 
+  position: relative; }
 
 .line {
   fill: none;