officeofjane/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Based on Gabriel Florit's canvas example.

  
## index.html
<!DOCTYPE html>

<html>
<meta charset="utf-8">
<head>
  <script src="http://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>
	<!DOCTYPE html>

	<html>
	<meta charset="utf-8">
	<head>
	<script src="http://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>