apcj/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Shards and Machines</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.7.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.7.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.7.1"></script>

    <style type="text/css">
        text {
            font: 14px Helvetica Neue;
        }

        button {
          font: 14px Helvetica Neue;
          -webkit-box-shadow: 0 1px 3px #999;
        }
    </style>
  </head>
  <body>
    <button id="addmachine">Add Machine</button>
    <script type="text/javascript">

    var w = 1600,
    h = 900,
    r = 400,
    machineColor = d3.scale.category20c();
    dataColor = d3.interpolateHsl("#F00", "#00F");

    function generate(repeat, count) {
      var array = [];
      for (var j = 0; j < repeat; j++) {
        for (var i = 0; i < count; i++) {
          array.push({ label:i });
        }
      }
      return array;
    }

    var nMachines = 10;
    var nShards = 100;
    var replicationFactor = 7;

    var vis = d3.select("body")
        .append("svg:svg")
            .attr("width", w)
            .attr("height", h);

    var roundChart = vis.append("svg:g")
            .attr("transform", "translate(" + r + "," + r + ")");

    var grid = vis.append("svg:g")
      .attr("transform", "translate(1000, 100)");

    function render() {
      var machines = generate(1, nMachines);
      var data = generate(replicationFactor, nShards);

      var machineArc = d3.svg.arc()
          .outerRadius(r)
          .innerRadius(r - 50);

      var dataArc = d3.svg.arc()
          .outerRadius(r - 50)
          .innerRadius(r - 100);

      var machinePie = d3.layout.pie().sort(null)
          .value(function(d) { return 1 });

      var machineArcs = roundChart.selectAll("path.machine")
          .data(machinePie(machines));

      machineArcs.transition()
        .attr("d", machineArc);

      machineArcs.enter()
        .append("svg:path")
        .attr("class", "machine")
        .attr("fill", function(d, i) { return machineColor(i / nMachines); } )
        .attr("d", machineArc);

      var machineLabels = roundChart.selectAll("text.machine")
          .data(machinePie(machines));

      function centerOfArc(d) {
        return "translate(" + machineArc.centroid(d) + ")";
      }

      machineLabels.transition()
        .attr("transform", centerOfArc);

      machineLabels.enter()
        .append("svg:text")
        .attr("class", "machine")
        .attr("transform", centerOfArc)
        .attr("text-anchor", "middle")
        .attr("dy", ".31em")
        .text(function(d, i) { return machines[i].label; });

      var dataPie = d3.layout.pie().sort(null)
        .value(function(d) { return 1 });

      var dataArcs = roundChart.selectAll("g.data")
          .data(dataPie(data))
          .enter()
              .append("svg:g")
                  .attr("class", "data");

      dataArcs.append("svg:path")
              .attr("fill", function(d, i) { return dataColor(d.data.label / nShards); } )
              .attr("d", dataArc);

      var nShardsPerMachine = Math.ceil(nShards * replicationFactor / nMachines);
      var shardSize = { width: 15, height: 5 };

      var machineLabelRects = grid.selectAll("rect.machineLabel")
        .data(machines);

      function machineLabelRectsGeometry(rect) {
        rect
          .attr("x", function(d, i) { return shardSize.width * i; })
          .attr("width", shardSize.width)
          .attr("height", 50);
      }

      machineLabelRects.transition()
        .call(machineLabelRectsGeometry)

      machineLabelRects.enter()
        .append("svg:rect")
        .attr("class", "machineLabel")
        .attr("fill", function(d, i) { return machineColor(i / machines.length); })
        .call(machineLabelRectsGeometry);

      var machineLabelText = grid.selectAll("text.machineLabel")
        .data(machines);

      machineLabelText.enter()
        .append("svg:text")
        .attr("class", "machineLabel")
        .attr("x", function(d, i) { return shardSize.width * (i + .5); })
        .attr("y", 25)
        .attr("dy", ".31em")
        .attr("text-anchor", "middle")
        .text(function(d, i) { return d.label; });

      var dataRects = grid.selectAll("rect.data")
        .data(data);

      function dataRectGeometry(rect) {
        rect
          .attr("x", function(d, i) { return Math.floor(i / nShardsPerMachine) * shardSize.width; })
          .attr("y", function(d, i) { return 50 + ((i % nShardsPerMachine) * shardSize.height); })
          .attr("width", shardSize.width)
          .attr("height", shardSize.height)
      }

      dataRects.transition().duration(2000)
        .call(dataRectGeometry);

      dataRects.enter()
        .append("svg:rect")
        .attr("class", "data")
        .attr("fill", function(d, i) { return dataColor(d.label / nShards); } )
        .call(dataRectGeometry);
    }

    render();

    d3.select("#addmachine").on("click", function() {
      nMachines++;
      render();
    });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Shards and Machines</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.7.1"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.7.1"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.7.1"></script>

	<style type="text/css">
	text {
	font: 14px Helvetica Neue;
	}

	button {
	font: 14px Helvetica Neue;
	-webkit-box-shadow: 0 1px 3px #999;
	}
	</style>
	</head>
	<body>
	<button id="addmachine">Add Machine</button>
	<script type="text/javascript">

	var w = 1600,
	h = 900,
	r = 400,
	machineColor = d3.scale.category20c();
	dataColor = d3.interpolateHsl("#F00", "#00F");

	function generate(repeat, count) {
	var array = [];
	for (var j = 0; j < repeat; j++) {
	for (var i = 0; i < count; i++) {
	array.push({ label:i });
	}
	}
	return array;
	}

	var nMachines = 10;
	var nShards = 100;
	var replicationFactor = 7;

	var vis = d3.select("body")
	.append("svg:svg")
	.attr("width", w)
	.attr("height", h);

	var roundChart = vis.append("svg:g")
	.attr("transform", "translate(" + r + "," + r + ")");

	var grid = vis.append("svg:g")
	.attr("transform", "translate(1000, 100)");

	function render() {
	var machines = generate(1, nMachines);
	var data = generate(replicationFactor, nShards);

	var machineArc = d3.svg.arc()
	.outerRadius(r)
	.innerRadius(r - 50);

	var dataArc = d3.svg.arc()
	.outerRadius(r - 50)
	.innerRadius(r - 100);

	var machinePie = d3.layout.pie().sort(null)
	.value(function(d) { return 1 });

	var machineArcs = roundChart.selectAll("path.machine")
	.data(machinePie(machines));

	machineArcs.transition()
	.attr("d", machineArc);

	machineArcs.enter()
	.append("svg:path")
	.attr("class", "machine")
	.attr("fill", function(d, i) { return machineColor(i / nMachines); } )
	.attr("d", machineArc);

	var machineLabels = roundChart.selectAll("text.machine")
	.data(machinePie(machines));

	function centerOfArc(d) {
	return "translate(" + machineArc.centroid(d) + ")";
	}

	machineLabels.transition()
	.attr("transform", centerOfArc);

	machineLabels.enter()
	.append("svg:text")
	.attr("class", "machine")
	.attr("transform", centerOfArc)
	.attr("text-anchor", "middle")
	.attr("dy", ".31em")
	.text(function(d, i) { return machines[i].label; });

	var dataPie = d3.layout.pie().sort(null)
	.value(function(d) { return 1 });

	var dataArcs = roundChart.selectAll("g.data")
	.data(dataPie(data))
	.enter()
	.append("svg:g")
	.attr("class", "data");

	dataArcs.append("svg:path")
	.attr("fill", function(d, i) { return dataColor(d.data.label / nShards); } )
	.attr("d", dataArc);

	var nShardsPerMachine = Math.ceil(nShards * replicationFactor / nMachines);
	var shardSize = { width: 15, height: 5 };

	var machineLabelRects = grid.selectAll("rect.machineLabel")
	.data(machines);

	function machineLabelRectsGeometry(rect) {
	rect
	.attr("x", function(d, i) { return shardSize.width * i; })
	.attr("width", shardSize.width)
	.attr("height", 50);
	}

	machineLabelRects.transition()
	.call(machineLabelRectsGeometry)

	machineLabelRects.enter()
	.append("svg:rect")
	.attr("class", "machineLabel")
	.attr("fill", function(d, i) { return machineColor(i / machines.length); })
	.call(machineLabelRectsGeometry);

	var machineLabelText = grid.selectAll("text.machineLabel")
	.data(machines);

	machineLabelText.enter()
	.append("svg:text")
	.attr("class", "machineLabel")
	.attr("x", function(d, i) { return shardSize.width * (i + .5); })
	.attr("y", 25)
	.attr("dy", ".31em")
	.attr("text-anchor", "middle")
	.text(function(d, i) { return d.label; });

	var dataRects = grid.selectAll("rect.data")
	.data(data);

	function dataRectGeometry(rect) {
	rect
	.attr("x", function(d, i) { return Math.floor(i / nShardsPerMachine) * shardSize.width; })
	.attr("y", function(d, i) { return 50 + ((i % nShardsPerMachine) * shardSize.height); })
	.attr("width", shardSize.width)
	.attr("height", shardSize.height)
	}

	dataRects.transition().duration(2000)
	.call(dataRectGeometry);

	dataRects.enter()
	.append("svg:rect")
	.attr("class", "data")
	.attr("fill", function(d, i) { return dataColor(d.label / nShards); } )
	.call(dataRectGeometry);
	}

	render();

	d3.select("#addmachine").on("click", function() {
	nMachines++;
	render();
	});
	</script>
	</body>
	</html>