vectorsize · December 31, 2015 18:22
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Custom Elements</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.3.2"></script>
    <style type="text/css">

    body {
      margin: 0;
    }

    </style>
  </head>
  <body>
    <canvas id="container" width="960" height="500"></canvas>
    <script type="text/javascript">

      var w = 960,
          h = 500;

      // creare a document fragment to draw "offline"
      var sketchFrag = document.createDocumentFragment();
      var canvas = document.getElementById('container');
      var context = canvas.getContext("2d");

      var sketch = d3.select(sketchFrag).append("svg")
          .attr("width", w)
          .attr("height", h)
          .call(custom);

      // On each mouse move, create a circle that increases in size and fades away.
      d3.select(canvas).on("mousemove", function() {

        var circ = sketch.append("circle")
              .attr("x", d3.event.offsetX)
              .attr("y", d3.event.offsetY)
              .attr("radius", 1)
              .attr("strokeStyle", "red")
            .transition()
              .duration(2000)
              .ease(Math.sqrt)
              .attr("radius", 200)
              .attr("strokeStyle", "white")
              .remove();
      });

      function custom(selection) {
       
        selection.each(function() {
          var root = this;

          // canvas.style.position = "absolute";
          // canvas.style.top = root.offsetTop + "px";
          // canvas.style.left = root.offsetLeft + "px";

          // It'd be nice to use DOM Mutation Events here instead.
          // However, they appear to arrive irregularly, causing choppy animation.
          d3.timer(redraw);

          // Clear the canvas and then iterate over child elements.
          function redraw() {

            canvas.width = root.getAttribute("width");
            canvas.height = root.getAttribute("height");
            
            sketch.selectAll('circle')
              .each(function(){
                var d = d3.select(this);
                context.strokeStyle = d.attr("strokeStyle");
                context.beginPath();
                context.arc(d.attr("x"), d.attr("y"), d.attr("radius"), 0, 2 * Math.PI);
                context.stroke();
              });
          }
        });
      };

    </script>
  </body>
 </html>
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<title>Custom Elements</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.3.2"></script>
	<style type="text/css">

	body {
	margin: 0;
	}

	</style>
	</head>
	<body>
	<canvas id="container" width="960" height="500"></canvas>
	<script type="text/javascript">

	var w = 960,
	h = 500;

	// creare a document fragment to draw "offline"
	var sketchFrag = document.createDocumentFragment();
	var canvas = document.getElementById('container');
	var context = canvas.getContext("2d");

	var sketch = d3.select(sketchFrag).append("svg")
	.attr("width", w)
	.attr("height", h)
	.call(custom);

	// On each mouse move, create a circle that increases in size and fades away.
	d3.select(canvas).on("mousemove", function() {

	var circ = sketch.append("circle")
	.attr("x", d3.event.offsetX)
	.attr("y", d3.event.offsetY)
	.attr("radius", 1)
	.attr("strokeStyle", "red")
	.transition()
	.duration(2000)
	.ease(Math.sqrt)
	.attr("radius", 200)
	.attr("strokeStyle", "white")
	.remove();
	});

	function custom(selection) {

	selection.each(function() {
	var root = this;

	// canvas.style.position = "absolute";
	// canvas.style.top = root.offsetTop + "px";
	// canvas.style.left = root.offsetLeft + "px";

	// It'd be nice to use DOM Mutation Events here instead.
	// However, they appear to arrive irregularly, causing choppy animation.
	d3.timer(redraw);

	// Clear the canvas and then iterate over child elements.
	function redraw() {

	canvas.width = root.getAttribute("width");
	canvas.height = root.getAttribute("height");

	sketch.selectAll('circle')
	.each(function(){
	var d = d3.select(this);
	context.strokeStyle = d.attr("strokeStyle");
	context.beginPath();
	context.arc(d.attr("x"), d.attr("y"), d.attr("radius"), 0, 2 * Math.PI);
	context.stroke();
	});
	}
	});
	};

	</script>
	</body>
	</html>