cjbarber/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">

body {
  font: 300 36px "Helvetica Neue";
  height: 640px;
  margin: 80px 160px 80px 160px;
  overflow: hidden;
  position: relative;
  width: 960px;
}

a:link, a:visited {
  color: #777;
  text-decoration: none;
}

a:hover {
  color: #666;
}

blockquote {
  margin: 0;
}

blockquote:before {
  content: "â€œ";
  position: absolute;
  left: -.4em;
}

blockquote:after {
  content: "â€";
  position: absolute;
}

body > ul {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 64px;
}

h1, h2, h3 {
  font-weight: inherit;
  margin: 0;
}

h2, h3 {
  text-align: left;
  font-size: inherit;
  position: absolute;
  top: 0;
  left: 0;
}

h2 {
  font-size: 24px;
  position: absolute;
}

h3 {
  bottom: -20px;
  font-size: 18px;
}

.invert {
  background: #1f1f1f;
  color: #dcdccc;
}

.invert h2, .invert h3 {
  color: #7f9f7f;
}

.string, .regexp {
  color: #f39;
}

.keyword {
  color: #00c;
}

.comment {
  color: #777;
  font-style: oblique;
}

.number {
  color: #369;
}

.class, .special {
  color: #1181B8;
}

body > svg {
  position: absolute;
  top: -80px;
  left: -160px;
}

path {
  fill: #ddd;
  stroke: black;
  stroke-width: 1.5px;
}

form {
  position: absolute;
  font-size: 18px;
}

text {
  font-size: 16px;
  font-weight: 500;
  fill: white;
}

.sun path {
  fill: #6baed6;
}

.planet path {
  fill: #9ecae1;
}

.ring path {
  fill: #c6dbef;
}

    </style>
  </head>
  <body>
    <h2>
      Data ↦ Visualization<br>
      Chris Barber
    </h2>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js"></script>
    <script type="text/javascript">

var w = 1280,
    h = 800,
    r = 80,
    x = Math.sin(2 * Math.PI / 3),
    y = Math.cos(2 * Math.PI / 3),
    speed = 4,
    start = Date.now();

var svg = d3.select("body").insert("svg:svg", "form")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.9)")
  .append("svg:g")
    .data([{radius: r * 5}]);

svg.append("svg:g")
    .attr("class", "ring")
    .data([{teeth: 80, radius: -r * 5, ring: true}])
  .append("svg:path")
    .attr("class", "gear")
    .attr("d", gear);

var sun = svg.append("svg:g")
    .attr("class", "sun")
    .data([{teeth: 16, radius: r}])
  .append("svg:g")
    .attr("class", "gear");

sun.append("svg:path")
    .attr("d", gear);

sun.append("svg:text")
    .attr("x", r / 2 + 6)
    .attr("dy", ".31em")
    .attr("text-anchor", "middle")
    .text("Me");

var planet1 = svg.append("svg:g")
    .attr("class", "planet")
    .attr("transform", "translate(0,-" + r * 3 + ")")
    .data([{teeth: 32, radius: -r * 2}])
  .append("svg:g")
    .attr("class", "gear");

planet1.append("svg:path")
    .attr("d", gear);

planet1.append("svg:text")
    .attr("x", -r)
    .attr("dy", ".31em")
    .attr("text-anchor", "middle")
    .attr("transform", "rotate(45)")
    .text("UX->MKTG355");

var planet2 = svg.append("svg:g")
    .attr("class", "planet")
    .attr("transform", "translate(" + -r * 3 * x + "," + -r * 3 * y + ")")
    .data([{teeth: 32, radius: -r * 2}])
  .append("svg:g")
    .attr("class", "gear");

planet2.append("svg:path")
    .attr("d", gear);

planet2.append("svg:text")
    .attr("x", -r)
    .attr("dy", ".31em")
    .attr("text-anchor", "middle")
    .attr("transform", "rotate(45)")
    .text("Building->CS");

var planet3 = svg.append("svg:g")
    .attr("class", "planet")
    .attr("transform", "translate(" + r * 3 * x + "," + -r * 3 * y + ")")
    .data([{teeth: 32, radius: -r * 2}])
  .append("svg:g")
    .attr("class", "gear");

planet3.append("svg:path")
    .attr("d", gear);

planet3.append("svg:text")
    .attr("x", -r)
    .attr("dy", ".31em")
    .attr("text-anchor", "middle")
    .attr("transform", "rotate(45)")
    .text("Data->People");

d3.selectAll("input[name=reference]")
    .data([r * 5, Infinity, -r])
    .on("change", function(d) { svg.data([{radius: d}]); });

d3.selectAll("input[name=speed]")
    .on("change", function() { speed = +this.value; });

function gear(d) {
  var n = d.teeth,
      r2 = Math.abs(d.radius),
      r0 = r2 - 8,
      r1 = r2 + 8,
      r3 = d.ring ? (r3 = r0, r0 = r1, r1 = r3, r2 + 20) : 20,
      da = Math.PI / n,
      a0 = -Math.PI / 2 + (d.ring ? Math.PI / n : 0),
      i = -1,
      path = ["M", r0 * Math.cos(a0), ",", r0 * Math.sin(a0)];
  while (++i < n) path.push(
      "A", r0, ",", r0, " 0 0,1 ", r0 * Math.cos(a0 += da), ",", r0 * Math.sin(a0),
      "L", r2 * Math.cos(a0), ",", r2 * Math.sin(a0),
      "L", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0),
      "A", r1, ",", r1, " 0 0,1 ", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0),
      "L", r2 * Math.cos(a0 += da / 3), ",", r2 * Math.sin(a0),
      "L", r0 * Math.cos(a0), ",", r0 * Math.sin(a0));
  path.push("M0,", -r3, "A", r3, ",", r3, " 0 0,0 0,", r3, "A", r3, ",", r3, " 0 0,0 0,", -r3, "Z");
  return path.join("");
}

d3.timer(function() {
  var angle = (Date.now() - start) * speed,
      transform = function(d) { return "rotate(" + angle / d.radius + ")"; };
  svg.selectAll(".gear").attr("transform", transform);
  svg.attr("transform", transform); // fixed ring
});

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">

	body {
	font: 300 36px "Helvetica Neue";
	height: 640px;
	margin: 80px 160px 80px 160px;
	overflow: hidden;
	position: relative;
	width: 960px;
	}

	a:link, a:visited {
	color: #777;
	text-decoration: none;
	}

	a:hover {
	color: #666;
	}

	blockquote {
	margin: 0;
	}

	blockquote:before {
	content: "â€œ";
	position: absolute;
	left: -.4em;
	}

	blockquote:after {
	content: "â€";
	position: absolute;
	}

	body > ul {
	margin: 0;
	padding: 0;
	}

	h1 {
	font-size: 64px;
	}

	h1, h2, h3 {
	font-weight: inherit;
	margin: 0;
	}

	h2, h3 {
	text-align: left;
	font-size: inherit;
	position: absolute;
	top: 0;
	left: 0;
	}

	h2 {
	font-size: 24px;
	position: absolute;
	}

	h3 {
	bottom: -20px;
	font-size: 18px;
	}

	.invert {
	background: #1f1f1f;
	color: #dcdccc;
	}

	.invert h2, .invert h3 {
	color: #7f9f7f;
	}

	.string, .regexp {
	color: #f39;
	}

	.keyword {
	color: #00c;
	}

	.comment {
	color: #777;
	font-style: oblique;
	}

	.number {
	color: #369;
	}

	.class, .special {
	color: #1181B8;
	}

	body > svg {
	position: absolute;
	top: -80px;
	left: -160px;
	}

	path {
	fill: #ddd;
	stroke: black;
	stroke-width: 1.5px;
	}

	form {
	position: absolute;
	font-size: 18px;
	}

	text {
	font-size: 16px;
	font-weight: 500;
	fill: white;
	}

	.sun path {
	fill: #6baed6;
	}

	.planet path {
	fill: #9ecae1;
	}

	.ring path {
	fill: #c6dbef;
	}

	</style>
	</head>
	<body>
	<h2>
	Data ↦ Visualization<br>
	Chris Barber
	</h2>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js"></script>
	<script type="text/javascript">

	var w = 1280,
	h = 800,
	r = 80,
	x = Math.sin(2 * Math.PI / 3),
	y = Math.cos(2 * Math.PI / 3),
	speed = 4,
	start = Date.now();

	var svg = d3.select("body").insert("svg:svg", "form")
	.attr("width", w)
	.attr("height", h)
	.append("svg:g")
	.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.9)")
	.append("svg:g")
	.data([{radius: r * 5}]);

	svg.append("svg:g")
	.attr("class", "ring")
	.data([{teeth: 80, radius: -r * 5, ring: true}])
	.append("svg:path")
	.attr("class", "gear")
	.attr("d", gear);

	var sun = svg.append("svg:g")
	.attr("class", "sun")
	.data([{teeth: 16, radius: r}])
	.append("svg:g")
	.attr("class", "gear");

	sun.append("svg:path")
	.attr("d", gear);

	sun.append("svg:text")
	.attr("x", r / 2 + 6)
	.attr("dy", ".31em")
	.attr("text-anchor", "middle")
	.text("Me");

	var planet1 = svg.append("svg:g")
	.attr("class", "planet")
	.attr("transform", "translate(0,-" + r * 3 + ")")
	.data([{teeth: 32, radius: -r * 2}])
	.append("svg:g")
	.attr("class", "gear");

	planet1.append("svg:path")
	.attr("d", gear);

	planet1.append("svg:text")
	.attr("x", -r)
	.attr("dy", ".31em")
	.attr("text-anchor", "middle")
	.attr("transform", "rotate(45)")
	.text("UX->MKTG355");

	var planet2 = svg.append("svg:g")
	.attr("class", "planet")
	.attr("transform", "translate(" + -r * 3 * x + "," + -r * 3 * y + ")")
	.data([{teeth: 32, radius: -r * 2}])
	.append("svg:g")
	.attr("class", "gear");

	planet2.append("svg:path")
	.attr("d", gear);

	planet2.append("svg:text")
	.attr("x", -r)
	.attr("dy", ".31em")
	.attr("text-anchor", "middle")
	.attr("transform", "rotate(45)")
	.text("Building->CS");

	var planet3 = svg.append("svg:g")
	.attr("class", "planet")
	.attr("transform", "translate(" + r * 3 * x + "," + -r * 3 * y + ")")
	.data([{teeth: 32, radius: -r * 2}])
	.append("svg:g")
	.attr("class", "gear");

	planet3.append("svg:path")
	.attr("d", gear);

	planet3.append("svg:text")
	.attr("x", -r)
	.attr("dy", ".31em")
	.attr("text-anchor", "middle")
	.attr("transform", "rotate(45)")
	.text("Data->People");

	d3.selectAll("input[name=reference]")
	.data([r * 5, Infinity, -r])
	.on("change", function(d) { svg.data([{radius: d}]); });

	d3.selectAll("input[name=speed]")
	.on("change", function() { speed = +this.value; });

	function gear(d) {
	var n = d.teeth,
	r2 = Math.abs(d.radius),
	r0 = r2 - 8,
	r1 = r2 + 8,
	r3 = d.ring ? (r3 = r0, r0 = r1, r1 = r3, r2 + 20) : 20,
	da = Math.PI / n,
	a0 = -Math.PI / 2 + (d.ring ? Math.PI / n : 0),
	i = -1,
	path = ["M", r0 * Math.cos(a0), ",", r0 * Math.sin(a0)];
	while (++i < n) path.push(
	"A", r0, ",", r0, " 0 0,1 ", r0 * Math.cos(a0 += da), ",", r0 * Math.sin(a0),
	"L", r2 * Math.cos(a0), ",", r2 * Math.sin(a0),
	"L", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0),
	"A", r1, ",", r1, " 0 0,1 ", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0),
	"L", r2 * Math.cos(a0 += da / 3), ",", r2 * Math.sin(a0),
	"L", r0 * Math.cos(a0), ",", r0 * Math.sin(a0));
	path.push("M0,", -r3, "A", r3, ",", r3, " 0 0,0 0,", r3, "A", r3, ",", r3, " 0 0,0 0,", -r3, "Z");
	return path.join("");
	}

	d3.timer(function() {
	var angle = (Date.now() - start) * speed,
	transform = function(d) { return "rotate(" + angle / d.radius + ")"; };
	svg.selectAll(".gear").attr("transform", transform);
	svg.attr("transform", transform); // fixed ring
	});

	</script>
	</body>
	</html>