dribnet/README.md

## README.md

      
    Raw
  

              README.md
            
          
    blocks version of my silly radial clock program. This was made as an animation test and was reimplemented with various (clojure) libraries. More details available in the clocky repo and related talk slides.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body { background-color:grey; }
path.millis1 { stroke:pink; fill:brown; }
path.millis2 { stroke:brown; fill:pink; }
path.seconds1 { stroke:pink; fill:brown; }
path.seconds2 { stroke:brown; fill:pink; }
path.minutes1 { stroke:pink; fill:brown; }
path.minutes2 { stroke:brown; fill:pink; }
path.hours1 { stroke:pink; fill:brown; }
path.hours2 { stroke:brown; fill:pink; }

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>

<div id="clocky">
  <!-- d3 goodness here -->
</div>

<script>

  var radii = {'hours': 275, 'minutes': 200, 'seconds': 110, 'millis': 30};

  var arc = d3.svg.arc()
      .startAngle(function(d) { return d.value * 2 * Math.PI / 100; })
      .endAngle(function(d) { return (d.value+50) * 2 * Math.PI / 100; })
      .innerRadius(0)
      .outerRadius(function(d) { return radii[d.key] });

  var root = d3.select("#clocky").append("svg")
      .attr("width", 600)
      .attr("height", 600)
      .append("g")
      .attr("transform", "translate(300,300)");

  var curClockData = function() {
      var d = new Date;
      var hours = (d.getHours() % 12) * 100.0 / 12;
      var minutes = d.getMinutes() * 100.0 / 60;
      var seconds = d.getSeconds() * 100.0 / 60;
      var millis = d.getMilliseconds() * 100.0 / 1000;
      return [
        {'value': hours,  'key': 'hours', 'which': 1},
        {'value': (hours+50),  'key': 'hours', 'which': 2},
        {'value': minutes,  'key': 'minutes', 'which': 1},
        {'value': (minutes+50),  'key': 'minutes', 'which': 2},
        {'value': seconds,  'key': 'seconds', 'which': 1},
        {'value': (seconds+50),  'key': 'seconds', 'which': 2},
        {'value': millis,  'key': 'millis', 'which': 1},
        {'value': (millis+50),  'key': 'millis', 'which': 2},
      ]
  }

  var rings = root.selectAll("g")
      .data(curClockData);

  rings.enter().append("g")
      .append("path");

  // Update arcs.
  d3.timer(function() {
      var rings = root.selectAll("g")
          .data(curClockData);

      rings.select("path")
          .attr("class", function(d) { return d.key + d.which; })
          .attr("d", arc);
  });

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body { background-color:grey; }
	path.millis1 { stroke:pink; fill:brown; }
	path.millis2 { stroke:brown; fill:pink; }
	path.seconds1 { stroke:pink; fill:brown; }
	path.seconds2 { stroke:brown; fill:pink; }
	path.minutes1 { stroke:pink; fill:brown; }
	path.minutes2 { stroke:brown; fill:pink; }
	path.hours1 { stroke:pink; fill:brown; }
	path.hours2 { stroke:brown; fill:pink; }

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<div id="clocky">
	<!-- d3 goodness here -->
	</div>

	<script>

	var radii = {'hours': 275, 'minutes': 200, 'seconds': 110, 'millis': 30};

	var arc = d3.svg.arc()
	.startAngle(function(d) { return d.value * 2 * Math.PI / 100; })
	.endAngle(function(d) { return (d.value+50) * 2 * Math.PI / 100; })
	.innerRadius(0)
	.outerRadius(function(d) { return radii[d.key] });

	var root = d3.select("#clocky").append("svg")
	.attr("width", 600)
	.attr("height", 600)
	.append("g")
	.attr("transform", "translate(300,300)");

	var curClockData = function() {
	var d = new Date;
	var hours = (d.getHours() % 12) * 100.0 / 12;
	var minutes = d.getMinutes() * 100.0 / 60;
	var seconds = d.getSeconds() * 100.0 / 60;
	var millis = d.getMilliseconds() * 100.0 / 1000;
	return [
	{'value': hours, 'key': 'hours', 'which': 1},
	{'value': (hours+50), 'key': 'hours', 'which': 2},
	{'value': minutes, 'key': 'minutes', 'which': 1},
	{'value': (minutes+50), 'key': 'minutes', 'which': 2},
	{'value': seconds, 'key': 'seconds', 'which': 1},
	{'value': (seconds+50), 'key': 'seconds', 'which': 2},
	{'value': millis, 'key': 'millis', 'which': 1},
	{'value': (millis+50), 'key': 'millis', 'which': 2},
	]
	}

	var rings = root.selectAll("g")
	.data(curClockData);

	rings.enter().append("g")
	.append("path");

	// Update arcs.
	d3.timer(function() {
	var rings = root.selectAll("g")
	.data(curClockData);

	rings.select("path")
	.attr("class", function(d) { return d.key + d.which; })
	.attr("d", arc);
	});

	</script>