pyrobot/index.html

## index.html
<!doctype html>
<html>
<head>
	<script src="http://d3js.org/d3.v2.js"></script>
	<style>
		.chart rect {
			stroke: #FFF;
			fill: steelblue;
		}

		.chart text {
			font-size: 11px;
			fill: white;
		}

		text.rule {
			fill: black;
		}

		#dataValues {
			width: 150px;
			height: 16px;
		}

		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;
		}
	</style>
</head>
<body>
	<label for="dataValues">Enter (CSV) data to graph: </label><br/>
	<input id="dataValues" type="text"></input>
	<button>Generate</button>
	<br/><br/>
	<script type="text/javascript">
		(function () {
			// initial data
			var data = [
				4,
				8,
				15,
				16,
				23,
				42
			];

			var chart, x, y;

			function rebuild() {
				var graphHeight = data.length * 20;

				// remove old graph if it exists
				d3.select("svg").remove();


				// regenerate grid bounds
				x = d3.scale.linear()
				  .domain([0, d3.max(data)])
				  .range([0, 420]);

				y = d3.scale.ordinal()
				  .domain(data)
				  .rangeBands([0, graphHeight]);


				// initialize the chart
				chart = d3.select("body")
							  .append("svg")
							  .attr("class", "chart")
							  .attr("width", 440)
							  .attr("height", 20 + graphHeight)
							  .append("g")
							  .attr("transform", "translate(10,15)")

				// create the bars bar
				chart.selectAll("rect")
					 .data(data)
					 .enter()
					 .append("rect")
					 .attr("y", function (d, i) {
					 	return i * 20;
					 })
					 .attr("width", x)
					 .attr("height", y.rangeBand());

			    // add the text labels
				chart.selectAll("text")
					 .data(data)
					 .enter()
					 .append("text")
					 .attr("x", x)
					 .attr("y", function (d) { return y(d) + y.rangeBand() / 2; })
					 .attr("dx", -3)
					 .attr("dy", ".35em")
					 .attr("text-anchor", "end")
					 .text(String);

				// create the grid ticks
				chart.selectAll("line")
					 .data(x.ticks(10))
					 .enter()
					 .append("line")
					 .attr("x1", x)
					 .attr("x2", x)
					 .attr("y1", 0)
					 .attr("y2", graphHeight)
					 .style("stroke", "#ccc");

				// add range labels
				chart.selectAll(".rule")
				     .data(x.ticks(10))
				     .enter()
				     .append("text")
				     .attr("class", "rule")
				     .attr("x", x)
				     .attr("y", 0)
				     .attr("dy", -3)
				     .attr("text-anchor", "middle")
				     .text(String);

				// create the Y axis line
				chart.append("line")
					 .attr("y1", 0)
					 .attr("y2", graphHeight)
					 .style("stroke", "#000");
			}

			rebuild();

		    var inputVal = document.getElementById("dataValues");

			inputVal.value = data.join(',');

			d3.select("button").on("click", function () {
				if (!inputVal.value) {
					inputVal.style.backgroundColor = "#e00";
					return;
				}

				inputVal.style.backgroundColor = "#fff";

				var values = inputVal.value.split(",");
				for (var i = 0, l = values.length; i < l; i++) {
					values[i] = +values[i];
				}

				data = values;

				rebuild();
			});
		})();
	</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v2.js"></script>
	<style>
	.chart rect {
	stroke: #FFF;
	fill: steelblue;
	}

	.chart text {
	font-size: 11px;
	fill: white;
	}

	text.rule {
	fill: black;
	}

	#dataValues {
	width: 150px;
	height: 16px;
	}

	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;
	}
	</style>
	</head>
	<body>
	<label for="dataValues">Enter (CSV) data to graph: </label><br/>
	<input id="dataValues" type="text"></input>
	<button>Generate</button>
	<br/><br/>
	<script type="text/javascript">
	(function () {
	// initial data
	var data = [
	4,
	8,
	15,
	16,
	23,
	42
	];

	var chart, x, y;

	function rebuild() {
	var graphHeight = data.length * 20;

	// remove old graph if it exists
	d3.select("svg").remove();


	// regenerate grid bounds
	x = d3.scale.linear()
	.domain([0, d3.max(data)])
	.range([0, 420]);

	y = d3.scale.ordinal()
	.domain(data)
	.rangeBands([0, graphHeight]);


	// initialize the chart
	chart = d3.select("body")
	.append("svg")
	.attr("class", "chart")
	.attr("width", 440)
	.attr("height", 20 + graphHeight)
	.append("g")
	.attr("transform", "translate(10,15)")

	// create the bars bar
	chart.selectAll("rect")
	.data(data)
	.enter()
	.append("rect")
	.attr("y", function (d, i) {
	return i * 20;
	})
	.attr("width", x)
	.attr("height", y.rangeBand());

	// add the text labels
	chart.selectAll("text")
	.data(data)
	.enter()
	.append("text")
	.attr("x", x)
	.attr("y", function (d) { return y(d) + y.rangeBand() / 2; })
	.attr("dx", -3)
	.attr("dy", ".35em")
	.attr("text-anchor", "end")
	.text(String);

	// create the grid ticks
	chart.selectAll("line")
	.data(x.ticks(10))
	.enter()
	.append("line")
	.attr("x1", x)
	.attr("x2", x)
	.attr("y1", 0)
	.attr("y2", graphHeight)
	.style("stroke", "#ccc");

	// add range labels
	chart.selectAll(".rule")
	.data(x.ticks(10))
	.enter()
	.append("text")
	.attr("class", "rule")
	.attr("x", x)
	.attr("y", 0)
	.attr("dy", -3)
	.attr("text-anchor", "middle")
	.text(String);

	// create the Y axis line
	chart.append("line")
	.attr("y1", 0)
	.attr("y2", graphHeight)
	.style("stroke", "#000");
	}

	rebuild();

	var inputVal = document.getElementById("dataValues");

	inputVal.value = data.join(',');

	d3.select("button").on("click", function () {
	if (!inputVal.value) {
	inputVal.style.backgroundColor = "#e00";
	return;
	}

	inputVal.style.backgroundColor = "#fff";

	var values = inputVal.value.split(",");
	for (var i = 0, l = values.length; i < l; i++) {
	values[i] = +values[i];
	}

	data = values;

	rebuild();
	});
	})();
	</script>
	</body>
	</html>