trinary/index.html

## index.html
<html>
  <head>
    <style>
     body {
     	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     }
    </style>
  </head>
  <body><svg></svg></body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
function collatz(n) {
  var ret = { count: 0, max: n};
  if (n === undefined || n === 0) {return ret; }
  while (n != 1) {
    ret.count = ret.count + 1;
    if (n % 2 === 0) { n = n / 2;}
    else { n = ((3*n)+1)/2; }
    if (n > ret.max) { ret.max = n}
  }
  return ret;
}

var data = d3.range(5200).map(function(d) { return collatz(d)});

// mess with width to see different patterns.
var width = 960;
var height = 500;
var countColor = d3.scale.linear()
.domain(d3.extent(data, function(d) { return d.count;}))
	.range(["#CFE2D8","#1F201F"])
	.interpolate(d3.interpolateHsl);

var maxColor = d3.scale.linear()
.domain(d3.extent(data, function(d) { return d.max;}))
	.range(["#DBD6E9","#11111B"])
	.interpolate(d3.interpolateHsl);
d3.select("svg").attr({
	width: width,
	height: height
});
var c = d3.select("svg").append("g");
c.attr("transform", "translate(0,38)");

c.append("text").classed("label",true).attr("transform","translate(0, -11)").text("Mouse over a box.");

c.selectAll("rect").data(data)
	.enter()
	.append("rect")
.attr("x",  function(d, i) { return (i % (width/16)) * 16})
.attr("y",  function(d, i) { return (Math.floor(i / (width/16)) * 16 )})
.attr("id", function(d, i) { return i; })
.attr("width", 10)
.attr("height",10)
.attr("fill", function(d) { return countColor(d.count) })
.attr("stroke", function(d) { return maxColor(d.max) })
.attr("stroke-width", "2px")
.on("mouseover", function(d,i) { d3.select(".label").text(i + " took " + d.count + " cycles and reached a max of " + d.max)});
</script>
</html>
	<html>
	<head>
	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
	</style>
	</head>
	<body><svg></svg></body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>
	function collatz(n) {
	var ret = { count: 0, max: n};
	if (n === undefined \|\| n === 0) {return ret; }
	while (n != 1) {
	ret.count = ret.count + 1;
	if (n % 2 === 0) { n = n / 2;}
	else { n = ((3*n)+1)/2; }
	if (n > ret.max) { ret.max = n}
	}
	return ret;
	}

	var data = d3.range(5200).map(function(d) { return collatz(d)});

	// mess with width to see different patterns.
	var width = 960;
	var height = 500;
	var countColor = d3.scale.linear()
	.domain(d3.extent(data, function(d) { return d.count;}))
	.range(["#CFE2D8","#1F201F"])
	.interpolate(d3.interpolateHsl);

	var maxColor = d3.scale.linear()
	.domain(d3.extent(data, function(d) { return d.max;}))
	.range(["#DBD6E9","#11111B"])
	.interpolate(d3.interpolateHsl);
	d3.select("svg").attr({
	width: width,
	height: height
	});
	var c = d3.select("svg").append("g");
	c.attr("transform", "translate(0,38)");

	c.append("text").classed("label",true).attr("transform","translate(0, -11)").text("Mouse over a box.");

	c.selectAll("rect").data(data)
	.enter()
	.append("rect")
	.attr("x", function(d, i) { return (i % (width/16)) * 16})
	.attr("y", function(d, i) { return (Math.floor(i / (width/16)) * 16 )})
	.attr("id", function(d, i) { return i; })
	.attr("width", 10)
	.attr("height",10)
	.attr("fill", function(d) { return countColor(d.count) })
	.attr("stroke", function(d) { return maxColor(d.max) })
	.attr("stroke-width", "2px")
	.on("mouseover", function(d,i) { d3.select(".label").text(i + " took " + d.count + " cycles and reached a max of " + d.max)});
	</script>
	</html>