Unit chart generator

Based on Gabriel Florit's canvas example.

<!DOCTYPE html>

<html>
<meta charset="utf-8">
<head>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  
  <style type="text/css">
  body {
    font: 11px sans-serif;
    margin: 50px;
  }

#vis {
    width: 480px;
    margin-top: 20px;
    display: inline-block;
  }

svg {
    display: block;
  }

form {
    display: inline-block;
    vertical-align: top;
  }

input {
    width: 100px;
  }

</style>
</head>

<body>
  <div id="vis"></div>
  <form style="top:10px;left:10px;">
    <p>Number of circles: <br/>
    <input id="numCircles" name="numCircles" type="text" value="25"> <br/></p>
    <p>Circles per row: <br/>
    <input id="eachRow" name="eachRow" type="text" value="10"> <br/></p>
    <p>Radius of circles: <br/>
    <input id="cRadius" name="cRadius" type="text" value="5"> <br/></p>
    <p>Padding of circles: <br/>
    <input id="cPadding" name="cPadding" type="text" value="3"></p>
  </form>
 
<script type="text/javascript">

// set svg width and height
  var margin = {top: 20, right: 20, bottom: 20, left: 20},
      width = 480 - margin.left - margin.right,
      height = 462 - margin.top - margin.bottom;

// add an SVG element to pre-defined div
  var svg = d3.select("#vis")
    .append("svg:svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

// draw once for default values 
  drawCircles(25, 10, 5, 3, svg);

// update parameters
  d3.select("form")
    .on("input", function() { drawCircles(+this.numCircles.value, +this.eachRow.value, +this.cRadius.value, +this.cPadding.value, svg); });

function drawCircles(count, nAcross, radius, padding, canvas) {

// count: number of circles
  // nAcross: number of circles in each row
  // radius: radius of circle
  // padding: padding around circle
  // canvas: canvas

var data = d3.range(count);

// compute dimensions
    var nAcross;
    var nDown = Math.ceil(count/nAcross);

// don't allow negative padding
    if (padding < 0) {
      padding = -padding;
    }

var outerRadius = radius + padding;

// width and height of the area chart
    var w = 2 * nAcross * outerRadius;
    var h = 2 * nDown * outerRadius;

// clear previously drawn chart
    d3.select("#chart").remove();

// append group with specified dimensions
    var area = canvas.append("g")
      .attr("id", "chart")
      .attr("width", w)
      .attr("height", h);

// start making circles
    area.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function(d) { return d%nAcross * outerRadius * 2 + outerRadius;})
      .attr("cy", function(d) { return (nDown - Math.floor(d/nAcross) - 1) * outerRadius * 2 + outerRadius;})
      .attr("r", radius)
      .style("fill", "grey");
  }
  
</script>
</body>
</html>

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

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