d3.touches array data on touch

A simple demo showing the information d3.touches stores in its array for Chapter 12 of D3.js in Action.

7<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>D3 Touch 1</title>
  <meta charset="utf-8" />
</head>
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>
  body, html {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width:100%;
    height:100%;
    overflow-y: hidden;
    overflow-x: hidden;
  }
  #vizContainer {
    width:100%;
    height:100%;
  }
  svg {
    width: 100%;
    height: 100%;
  }
  #buttons {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
  }
</style>
<body onload="touchDemo1()">

<div id="vizContainer">
<svg></svg>
<div id="buttons">
</div>
</div>
  <footer>
<script>
  function touchDemo1() {
    var color = d3.scale.category20()
    
    d3.select("svg").on("touchstart", touchStatus);
    d3.select("svg").on("touchmove", touchStatus);
    
    function touchStatus() {
      d3.event.preventDefault();
      d3.event.stopPropagation();
      d = d3.touches(this);
      d3.select("#vizContainer")
      .selectAll("circle")
      .data(d)
      .enter()
      .append("svg:circle")
      .attr({r: 5, w: 5, h: 5, rx: d[0][0], ry: d[0][1] })
      
      d3.select("#vizContainer")
      .select("circle")
      .data(d)
      .exit()
      .remove();

d3.select('#vizContainer')
      .selectAll('circle')
      .attr('fill', function(d) { return color(d) });
      
    }

}
</script>
  </footer>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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