pyrobot/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Demo</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<script src="http://d3js.org/d3.v2.js"></script>
	<style type="text/css">
		body {
		  font: 14px Helvetica Neue;
		  text-rendering: optimizeLegibility;
		  margin-top: 1em;
		  overflow-y: scroll;
		}

		a {
		  color: steelblue;
		  text-decoration: none;
		}

		a:hover {
		  text-decoration: underline;
		}

		.body {
		  width: 960px;
		  margin: auto;
		}

		.topbar a {
		  margin-right: .5em;
		}

		.content {
		  position: relative;
		  margin-left: 240px;
		}

		.content img {
		  display: block;
		  margin: auto;
		}

		.sidebar {
		  position: absolute;
		  left: -240px;
		  width: 230px;
		  font-weight: 300;
		}

		.gallery {
		  position: relative;
		  left: -240px;
		  width: 970px;
		}

		.content .gallery img {
		  display: inline;
		  width: 226px;
		  height: 180px;
		  border: solid 2px #ccc;
		  margin-right: 10px;
		  margin-bottom: 8px;
		}

		.content .gallery a:hover img {
		  border-color: steelblue;
		}

		.list {
		  clear: left;
		  margin-top: 14px;
		}

		.list img {
		  float: left;
		}

		h1 {
		  font-size: 36px;
		  font-weight: 300;
		  margin-bottom: .3em;
		}

		.sidebar {
		  color: #666;
		}

		.sidebar ul {
		  padding-left: 0;
		  list-style-type: none;
		}

		.sidebar li {
		  white-space: nowrap;
		  width: 230px;
		  overflow: hidden;
		  text-overflow: ellipsis;
		}

		.sidebar h3 {
		  font-weight: 300;
		}

		.foot {
		  font-weight: 300;
		  margin-left: 240px;
		  padding-top: 3em;
		  width: 710px;
		  clear: both;
		}

		button {
		  background: #222 repeat-x;
		  font: 12px Helvetica Neue;
		  color: #fff;
		  text-shadow: 0 -1px 1px #222;
		  padding: 6px 10px 6px 10px;
		  border: 0;
		  border-bottom: 1px solid #222;
		  min-width: 80px;
		  -moz-border-radius: 5px;
		  -moz-box-shadow: 0 1px 3px #999;
		  -webkit-border-radius: 5px;
		  -webkit-box-shadow: 0 1px 3px #999;
		  margin-top:15px;
		  margin-bottom:15px;
		}

		button:hover {
		  background-color: #555;
		}

		.highlight {
		  font: 12px monospace;
		}

		.highlight pre {
		  overflow-x: auto;
		}


		.chart {
		  background: #fff;
		  border: solid 1px #ddd;
		  box-shadow: 0 0 4px rgba(0,0,0,.2);
		  font: 10px sans-serif;
		  height: 180px;
		  position: relative;
		  width: 360px;
		}

		.chart svg {
		  border-left: solid 2px #ddd;
		  position: absolute;
		  top: 0;
		}

		.chart pre {
		  font: 12px monospace;
		  height: 60px;
		  left: 10px;
		  position: absolute;
		  top: 0;
		  width: 340px;
		}

		.chart circle.little {
		  fill: #aaa;
		  stroke: #666;
		  stroke-width: 1.5px;
		}

		.chart button {
		  left: 275px;
		  position: absolute;
		  top: 145px;
		  width: 80px;
		}

		.chart .data rect {
		  fill: #eee;
		  stroke: #ccc;
		}

		hr {
		  margin-bottom: 25px;
		}

		div > h1 > span {
		  color:#999;
		}

		div > h1 ~ p {

			color:#f00;
		}
	</style>
<script type="text/javascript">
var data = [32, 57, 112],
    dataEnter = data.concat(293),
    dataExit = data.slice(0, 2),
    w = 360,
    h = 180,
    x = d3.scale.ordinal().domain([57, 32, 112]).rangePoints([0, w], 1),
    y = d3.scale.ordinal().domain(data).rangePoints([0, h], 2);
</script>
</head>
<body>
	<h2>All svg graphics are generated through code by d3
	<div id="ex1">
		<h1>Example 1 - <span>Selecting Circles</span></h1>
		<div class="chart">
		</div>
		<button class="run">Run</button>
		<button class="reset">Reset</button>
		<script type="text/javascript">
		(function() {
			var svg = d3.select('#ex1 .chart').append("svg")
				.attr("width", w)
				.attr("height", h);

			svg.selectAll(".little")
				.data(data)
				.enter().append("circle")
				.attr("class", "little")
				.attr("cx", x)
				.attr("cy", y)
				.attr("r", 12)

			d3.select("#ex1 .reset").on("click", function() {
				svg.selectAll(".select").remove();
			})

			d3.select("#ex1 .run").on("click", function() {
				svg.selectAll(".select").remove();
				svg.selectAll(".select")
					.data(data).enter()
						.append("circle")
						.attr("class", "select")
						.attr("cx", x)
						.attr("cy", y)
						.attr("r", 60)
						.style("fill", "none")
						.style("stroke", "red")
						.style("stroke-opacity", 1e-6)
						.style("stroke-width", 3)
						.transition().duration(750)
							.attr("r", 12)
							.style("stroke-opacity", 1);
			});
		})();
		</script>
	</div>
	<hr/>
	<div id="ex2">
		<h1>Example 2 - <span>Moar Circles!</span></h1>
		<div class="chart">
		</div>
		<button class="run">Run</button>
		<button class="reset">Reset</button>

		<script type="text/javascript">
		(function() {
			var svg = d3.select('#ex2 .chart').append("svg")
				.attr("width", w)
				.attr("height", h);

			var circle = svg.selectAll(".little")
				.data(data)
				.enter().append("circle")
				.attr("class", "little")
				.attr("cx", x)
				.attr("cy", y)
				.attr("r", 12)

			d3.select("#ex2 .reset").on("click", function() {
				circle.style("fill", "#aaa").attr("r", 12).attr("cy", y);
			});

			d3.select("#ex2 .run").on("click", function() {
				circle.style("fill", "#aaa").attr("r", 12).attr("cy", y);
				circle.transition().duration(500).delay(0).style("fill", "steelblue");
				circle.transition().duration(500).delay(500).attr("cy", 90);
				circle.transition().duration(500).delay(1000).attr("r", 30)
			});
		})();
		</script>
	</div>
	<hr/>
	<div id="ex3">
		<h1>Example 3 - <span>Random movement</span></h1>
		<div class="chart">
		</div>
		<button class="run">Run</button>
		<button class="reset">Reset</button>

		<script type="text/javascript">
		(function() {
			var svg = d3.select('#ex3 .chart').append("svg")
				.attr("width", w)
				.attr("height", h);

			var circle = svg.selectAll(".little")
				.data(data)
				.enter().append("circle")
				.attr("class", "little")
				.attr("cx", x)
				.attr("cy", y)
				.attr("r", 12)

			d3.select("#ex3 .reset").on("click", function() {
				svg.selectAll(".little").remove();
				circle = svg.selectAll(".little")
				.data(data)
				.enter().append("circle")
				.attr("class", "little")
				.attr("cx", x)
				.attr("cy", y)
				.attr("r", 12)
			});

			d3.select("#ex3 .run").on("click", function() {
				circle.transition().duration(750)
					.attr("cx", function() { return Math.random() * w});
			});
		})();
		</script>
	</div>
	<hr/>
	<div id="ex4">
		<h1>Example 4 - <span>Binding the data to arbitrary DOM elements</span></h1>
		<div class="chart">
		</div>
		<button class="run">Run</button>
		<button class="reset">Reset</button>

		<script type="text/javascript">
		(function() {
			var svg = d3.select('#ex4 .chart').append("svg")
				.attr("width", w)
				.attr("height", h);

			var circle = svg.selectAll(".little")
				.data(data)
				.enter().append("circle")
				.attr("class", "little")
				.attr("cx", x)
				.attr("cy", y)
				.attr("r", 12)

			var createGroups = function() {
				var group = svg.selectAll(".data")
						.data(data)
						.enter()
						.append("g")
						.attr("class", "data")
						.attr("transform", function(d, i) { return "translate(" + 20 * (i + 1) + ",20)"});

				group.append("rect")
					.attr("x", -10)
					.attr("y", -10)
					.attr("width", 20)
					.attr("height", 20);

				group.append("text")
					.attr("dy", ".35em")
					.attr("text-anchor", "middle")
					.text(String);

				return group;
			}

			var g = createGroups();


			d3.select("#ex4 .reset").on("click", function() {
				g.remove();
				g = createGroups();
			});

			d3.select("#ex4 .run").on("click", function() {
				g.attr("transform", function(d, i) { return "translate(" + 20 * (i + 1) + ",20)"; })
				 .select("rect")
				 .style("opacity", 1);

				g.transition()
				 .duration(750)
				 .attr("transform", function(d) { return "translate(" + x(d) + "," + y(d) + ")"; })
				 .select("rect")
				 .style("opacity", 1e-6);
			});
		})();
		</script>
	</div>
	<hr/>
	<div id="ex5">
		<h1>Example 5 - <span>Using the data for stuff</span></h1>
		<p>(ie. scaling and positioning the circles)</p>
		<div class="chart">
		</div>
		<button class="run">Run</button>
		<button class="reset">Reset</button>

		<script type="text/javascript">
		(function() {
			var svg = d3.select('#ex5 .chart')
						.append("svg")
						.attr("width", w)
						.attr("height", h);

			var g = svg.selectAll("g")
					   .data(data)
					   .enter()
					   .append("g")
					   .attr("transform", function (d) {
					   		return "translate(" + x(d) + "," + y(d) + ")";
					   });

			g.append("circle")
			 .attr("class", "little")
			 .attr("r", 12);

			g.append("text")
			 .attr("dy", ".35em")
			 .attr("text-anchor", "middle")
			 .text(String);

			d3.select("#ex5 .reset").on("click", function() {
				g.attr("transform", function (d) { return "translate(" + x(d) + "," + y(d) + ")"; })
				 .select("circle")
				 .attr("r", 12);
			});

			d3.select("#ex5 .run").on("click", function() {
				g.attr("transform", function (d) { return "translate(" + x(d) + "," + y(d) + ")"; })
				 .select("circle")
				 .attr("r", 12);

				g.transition()
				 .duration(750)
				 .attr("transform", function (d) { return "translate(" + d + "," + y(d) + ")"})
				 .select("circle")
				 .attr("r", Math.sqrt);
			});
		})();
		</script>
	</div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Demo</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<script src="http://d3js.org/d3.v2.js"></script>
	<style type="text/css">
	body {
	font: 14px Helvetica Neue;
	text-rendering: optimizeLegibility;
	margin-top: 1em;
	overflow-y: scroll;
	}

	a {
	color: steelblue;
	text-decoration: none;
	}

	a:hover {
	text-decoration: underline;
	}

	.body {
	width: 960px;
	margin: auto;
	}

	.topbar a {
	margin-right: .5em;
	}

	.content {
	position: relative;
	margin-left: 240px;
	}

	.content img {
	display: block;
	margin: auto;
	}

	.sidebar {
	position: absolute;
	left: -240px;
	width: 230px;
	font-weight: 300;
	}

	.gallery {
	position: relative;
	left: -240px;
	width: 970px;
	}

	.content .gallery img {
	display: inline;
	width: 226px;
	height: 180px;
	border: solid 2px #ccc;
	margin-right: 10px;
	margin-bottom: 8px;
	}

	.content .gallery a:hover img {
	border-color: steelblue;
	}

	.list {
	clear: left;
	margin-top: 14px;
	}

	.list img {
	float: left;
	}

	h1 {
	font-size: 36px;
	font-weight: 300;
	margin-bottom: .3em;
	}

	.sidebar {
	color: #666;
	}

	.sidebar ul {
	padding-left: 0;
	list-style-type: none;
	}

	.sidebar li {
	white-space: nowrap;
	width: 230px;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.sidebar h3 {
	font-weight: 300;
	}

	.foot {
	font-weight: 300;
	margin-left: 240px;
	padding-top: 3em;
	width: 710px;
	clear: both;
	}

	button {
	background: #222 repeat-x;
	font: 12px Helvetica Neue;
	color: #fff;
	text-shadow: 0 -1px 1px #222;
	padding: 6px 10px 6px 10px;
	border: 0;
	border-bottom: 1px solid #222;
	min-width: 80px;
	-moz-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px #999;
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0 1px 3px #999;
	margin-top:15px;
	margin-bottom:15px;
	}

	button:hover {
	background-color: #555;
	}

	.highlight {
	font: 12px monospace;
	}

	.highlight pre {
	overflow-x: auto;
	}


	.chart {
	background: #fff;
	border: solid 1px #ddd;
	box-shadow: 0 0 4px rgba(0,0,0,.2);
	font: 10px sans-serif;
	height: 180px;
	position: relative;
	width: 360px;
	}

	.chart svg {
	border-left: solid 2px #ddd;
	position: absolute;
	top: 0;
	}

	.chart pre {
	font: 12px monospace;
	height: 60px;
	left: 10px;
	position: absolute;
	top: 0;
	width: 340px;
	}

	.chart circle.little {
	fill: #aaa;
	stroke: #666;
	stroke-width: 1.5px;
	}

	.chart button {
	left: 275px;
	position: absolute;
	top: 145px;
	width: 80px;
	}

	.chart .data rect {
	fill: #eee;
	stroke: #ccc;
	}

	hr {
	margin-bottom: 25px;
	}

	div > h1 > span {
	color:#999;
	}

	div > h1 ~ p {

	color:#f00;
	}
	</style>
	<script type="text/javascript">
	var data = [32, 57, 112],
	dataEnter = data.concat(293),
	dataExit = data.slice(0, 2),
	w = 360,
	h = 180,
	x = d3.scale.ordinal().domain([57, 32, 112]).rangePoints([0, w], 1),
	y = d3.scale.ordinal().domain(data).rangePoints([0, h], 2);
	</script>
	</head>
	<body>
	<h2>All svg graphics are generated through code by d3
	<div id="ex1">
	<h1>Example 1 - <span>Selecting Circles</span></h1>
	<div class="chart">
	</div>
	<button class="run">Run</button>
	<button class="reset">Reset</button>
	<script type="text/javascript">
	(function() {
	var svg = d3.select('#ex1 .chart').append("svg")
	.attr("width", w)
	.attr("height", h);

	svg.selectAll(".little")
	.data(data)
	.enter().append("circle")
	.attr("class", "little")
	.attr("cx", x)
	.attr("cy", y)
	.attr("r", 12)

	d3.select("#ex1 .reset").on("click", function() {
	svg.selectAll(".select").remove();
	})

	d3.select("#ex1 .run").on("click", function() {
	svg.selectAll(".select").remove();
	svg.selectAll(".select")
	.data(data).enter()
	.append("circle")
	.attr("class", "select")
	.attr("cx", x)
	.attr("cy", y)
	.attr("r", 60)
	.style("fill", "none")
	.style("stroke", "red")
	.style("stroke-opacity", 1e-6)
	.style("stroke-width", 3)
	.transition().duration(750)
	.attr("r", 12)
	.style("stroke-opacity", 1);
	});
	})();
	</script>
	</div>
	<hr/>
	<div id="ex2">
	<h1>Example 2 - <span>Moar Circles!</span></h1>
	<div class="chart">
	</div>
	<button class="run">Run</button>
	<button class="reset">Reset</button>

	<script type="text/javascript">
	(function() {
	var svg = d3.select('#ex2 .chart').append("svg")
	.attr("width", w)
	.attr("height", h);

	var circle = svg.selectAll(".little")
	.data(data)
	.enter().append("circle")
	.attr("class", "little")
	.attr("cx", x)
	.attr("cy", y)
	.attr("r", 12)

	d3.select("#ex2 .reset").on("click", function() {
	circle.style("fill", "#aaa").attr("r", 12).attr("cy", y);
	});

	d3.select("#ex2 .run").on("click", function() {
	circle.style("fill", "#aaa").attr("r", 12).attr("cy", y);
	circle.transition().duration(500).delay(0).style("fill", "steelblue");
	circle.transition().duration(500).delay(500).attr("cy", 90);
	circle.transition().duration(500).delay(1000).attr("r", 30)
	});
	})();
	</script>
	</div>
	<hr/>
	<div id="ex3">
	<h1>Example 3 - <span>Random movement</span></h1>
	<div class="chart">
	</div>
	<button class="run">Run</button>
	<button class="reset">Reset</button>

	<script type="text/javascript">
	(function() {
	var svg = d3.select('#ex3 .chart').append("svg")
	.attr("width", w)
	.attr("height", h);

	var circle = svg.selectAll(".little")
	.data(data)
	.enter().append("circle")
	.attr("class", "little")
	.attr("cx", x)
	.attr("cy", y)
	.attr("r", 12)

	d3.select("#ex3 .reset").on("click", function() {
	svg.selectAll(".little").remove();
	circle = svg.selectAll(".little")
	.data(data)
	.enter().append("circle")
	.attr("class", "little")
	.attr("cx", x)
	.attr("cy", y)
	.attr("r", 12)
	});

	d3.select("#ex3 .run").on("click", function() {
	circle.transition().duration(750)
	.attr("cx", function() { return Math.random() * w});
	});
	})();
	</script>
	</div>
	<hr/>
	<div id="ex4">
	<h1>Example 4 - <span>Binding the data to arbitrary DOM elements</span></h1>
	<div class="chart">
	</div>
	<button class="run">Run</button>
	<button class="reset">Reset</button>

	<script type="text/javascript">
	(function() {
	var svg = d3.select('#ex4 .chart').append("svg")
	.attr("width", w)
	.attr("height", h);

	var circle = svg.selectAll(".little")
	.data(data)
	.enter().append("circle")
	.attr("class", "little")
	.attr("cx", x)
	.attr("cy", y)
	.attr("r", 12)

	var createGroups = function() {
	var group = svg.selectAll(".data")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "data")
	.attr("transform", function(d, i) { return "translate(" + 20 * (i + 1) + ",20)"});

	group.append("rect")
	.attr("x", -10)
	.attr("y", -10)
	.attr("width", 20)
	.attr("height", 20);

	group.append("text")
	.attr("dy", ".35em")
	.attr("text-anchor", "middle")
	.text(String);

	return group;
	}

	var g = createGroups();


	d3.select("#ex4 .reset").on("click", function() {
	g.remove();
	g = createGroups();
	});

	d3.select("#ex4 .run").on("click", function() {
	g.attr("transform", function(d, i) { return "translate(" + 20 * (i + 1) + ",20)"; })
	.select("rect")
	.style("opacity", 1);

	g.transition()
	.duration(750)
	.attr("transform", function(d) { return "translate(" + x(d) + "," + y(d) + ")"; })
	.select("rect")
	.style("opacity", 1e-6);
	});
	})();
	</script>
	</div>
	<hr/>
	<div id="ex5">
	<h1>Example 5 - <span>Using the data for stuff</span></h1>
	<p>(ie. scaling and positioning the circles)</p>
	<div class="chart">
	</div>
	<button class="run">Run</button>
	<button class="reset">Reset</button>

	<script type="text/javascript">
	(function() {
	var svg = d3.select('#ex5 .chart')
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	var g = svg.selectAll("g")
	.data(data)
	.enter()
	.append("g")
	.attr("transform", function (d) {
	return "translate(" + x(d) + "," + y(d) + ")";
	});

	g.append("circle")
	.attr("class", "little")
	.attr("r", 12);

	g.append("text")
	.attr("dy", ".35em")
	.attr("text-anchor", "middle")
	.text(String);

	d3.select("#ex5 .reset").on("click", function() {
	g.attr("transform", function (d) { return "translate(" + x(d) + "," + y(d) + ")"; })
	.select("circle")
	.attr("r", 12);
	});

	d3.select("#ex5 .run").on("click", function() {
	g.attr("transform", function (d) { return "translate(" + x(d) + "," + y(d) + ")"; })
	.select("circle")
	.attr("r", 12);

	g.transition()
	.duration(750)
	.attr("transform", function (d) { return "translate(" + d + "," + y(d) + ")"})
	.select("circle")
	.attr("r", Math.sqrt);
	});
	})();
	</script>
	</div>

	</body>
	</html>