seliopou/index.html

## index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
	<title>twenty-five suns</title>
  <style>
  svg {
    background: rgb(237, 237, 237);
  }
  path {
    fill: none;
    stroke: rgb(186,5,36);
    stroke-width: 1px;
    shape-rendering: geometricPrecision;
  }
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
  var width = 80,
      height = 80,
      scl = 0.2,
      rows = 5,
      cols = 5;

  var svg = d3.select('body').append('svg')
    .attr('width', cols * width)
    .attr('height', rows * height);

  var defs = svg.append('defs');

  var points = d3.range(0, 32).map(function(e) {
    return [width * Math.cos(Math.PI * e / 31 / 2), height * Math.sin(Math.PI * e / 31 / 2)];
  });

  var tl = 0,
      bl = 3,
      br = 2,
      tr = 1;

  var cells = [ bl, tl, bl, tl, br,
                tr, br, br, bl, bl,
                tl, bl, br, tl, tr,
                tl, tr, tl, tr, tl,
                tr, br, tr, br, tl];

  function orient(d) {
    return 'rotate(' + (90 * d[0]) + ' ' + (width / 2) +  ' ' + (height / 2) + ')' + 'scale(' + scl + ')';
  }

  function translate(d, i) {
    var dx = width * (i % cols);
        dy = width * Math.floor(i / cols);

    return 'translate(' + dx + ', ' + dy + ')';
  }

  defs.append('clipPath')
      .attr('id', 'box')
    .append('path')
      .attr('d', 'M 0 0 L 80 0 L 80 80 L 0 80 L 0 0 Z');

  defs.append('g')
      .attr('id', 'radial')
    .selectAll('path')
      .data(d3.geom.voronoi(points))
    .enter().append('path')
      .attr('d', function(d) { return 'M' + d.join('L') + 'Z'; });

  svg.append('g')
      .attr('id', 'canvas')
    .selectAll('g')
      .data(cells)
    .enter().append('g')
      .attr('transform', translate)
      .attr('clip-path', 'url(#box)')
    .selectAll('use')
      .data(function(d, i) { return [[d, i]]; })
    .enter().append('use')
      .attr('xlink:href', '#radial')
      .attr('transform', orient);
</script>
</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>twenty-five suns</title>
	<style>
	svg {
	background: rgb(237, 237, 237);
	}
	path {
	fill: none;
	stroke: rgb(186,5,36);
	stroke-width: 1px;
	shape-rendering: geometricPrecision;
	}
	</style>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var width = 80,
	height = 80,
	scl = 0.2,
	rows = 5,
	cols = 5;

	var svg = d3.select('body').append('svg')
	.attr('width', cols * width)
	.attr('height', rows * height);

	var defs = svg.append('defs');

	var points = d3.range(0, 32).map(function(e) {
	return [width * Math.cos(Math.PI * e / 31 / 2), height * Math.sin(Math.PI * e / 31 / 2)];
	});

	var tl = 0,
	bl = 3,
	br = 2,
	tr = 1;

	var cells = [ bl, tl, bl, tl, br,
	tr, br, br, bl, bl,
	tl, bl, br, tl, tr,
	tl, tr, tl, tr, tl,
	tr, br, tr, br, tl];

	function orient(d) {
	return 'rotate(' + (90 * d[0]) + ' ' + (width / 2) + ' ' + (height / 2) + ')' + 'scale(' + scl + ')';
	}

	function translate(d, i) {
	var dx = width * (i % cols);
	dy = width * Math.floor(i / cols);

	return 'translate(' + dx + ', ' + dy + ')';
	}

	defs.append('clipPath')
	.attr('id', 'box')
	.append('path')
	.attr('d', 'M 0 0 L 80 0 L 80 80 L 0 80 L 0 0 Z');

	defs.append('g')
	.attr('id', 'radial')
	.selectAll('path')
	.data(d3.geom.voronoi(points))
	.enter().append('path')
	.attr('d', function(d) { return 'M' + d.join('L') + 'Z'; });

	svg.append('g')
	.attr('id', 'canvas')
	.selectAll('g')
	.data(cells)
	.enter().append('g')
	.attr('transform', translate)
	.attr('clip-path', 'url(#box)')
	.selectAll('use')
	.data(function(d, i) { return [[d, i]]; })
	.enter().append('use')
	.attr('xlink:href', '#radial')
	.attr('transform', orient);
	</script>
	</body>
	</html>