edrex · February 27, 2012 02:34
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>Pascal's Triangle Congruence Mod p</title>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/2.7.4/d3.min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>

 <link href="style.css" media="screen" rel="stylesheet" type="text/css" />

 <body>
  <div style="float:right; text-align: right">
    <form id='form'>
      <p>
        <label for="max">Maximum rows:</label>
        <input type="number" value="64" min="1" max=500 id="n">
      </p>
      <p>
        <label for="max">P (base for mod):</label>
        <input type="number" value="11" min="1" max=500 id="p">
      </p>
      <input type="submit" id="generate">Generate!</input>
    </form>
  </div>

 <script src="pascal.js" type="text/javascript"></script>
 <script>

 var update = bind(d3.select('body'))
 function render() {
  update(d3.select("#n").property("value"),
         d3.select("#p").property("value"));
 }

 render();

 var form = d3.select("#form")
  .on("submit", function() {
    render()
    d3.event.preventDefault()
  });
 </script>
diff --git a/pascal.js b/pascal.js
 function pascals_triangle(n, mod) {
  var T = [[1]];
  var r=0

  var f_no_mod = function(i) {return ((T[r-1][i-1]||0) + (T[r-1][i]||0))};
  var f = mod ? function(i) { return f_no_mod(i) % mod } : f_no_mod;

  while (r < n-1) {
    r++
    T.push(_.map(_.range(r+1), f));
  }
  return T;
 }

 function bind(parent) {
  var colors = d3.interpolateHsl('rgb(0,255,0)', 'rgb(128, 0, 128)');
  var ratio = Math.sin(Math.PI/3),
      height = 500
  var width = height/ratio
  var svg = parent.append("svg")
    .attr("class", 'pascal')
    .attr("width", width)
    .attr("height", height)
  var vis = svg.append("g")

  var update = function(n, p) {
    var n = Math.min(n, width-2)
    var vis_width = (n/(n+2)) * width,
        vis_height = (n/(n+2)) * height
    var x_margin = (width - vis_width)/2,
        y_margin = (height - vis_height)/2
    var u = 10 // unit size
    var scale = vis_width/(n*u)

    vis.attr("transform", "translate("+ (vis_width/2+x_margin) +","+ y_margin +") scale("+scale+","+scale+")")

    var ur = vis.selectAll('g.row')
      .data(pascals_triangle(n, p))
    ur.enter().append('g')
        .attr('class', 'row')
        .attr('transform', function(d,i){return "translate("+ -i*u/2 +","+ i*u*ratio +")"})
    ur.exit().remove()

    var ue = ur.selectAll('circle')
      .data(function(d) { return d })
    ue.enter().append("circle")
      .attr("r", u/2)
      .attr("cx", function(d,i){return i*u})
      .append("title")
    ue.style("fill", function(d) {return colors((d%p)/p)})
      .select("title")
        .text(function(d, i) { return ""+d });
  }
  return update;
 }

 function make_p_gen(p, g) {
  return make_vis_svg(Math.pow(p,g),p)
 }
diff --git a/style.css b/style.css
 body {
  margin: 0 40px;
 }

 form#form {
  font-size: small;
 }

 circle:hover {
  cursor:crosshair;
  fill: red ! important;
 }
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Pascal's Triangle Congruence Mod p</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/2.7.4/d3.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>

	<link href="style.css" media="screen" rel="stylesheet" type="text/css" />

	<body>
	<div style="float:right; text-align: right">
	<form id='form'>
	<p>
	<label for="max">Maximum rows:</label>
	<input type="number" value="64" min="1" max=500 id="n">
	</p>
	<p>
	<label for="max">P (base for mod):</label>
	<input type="number" value="11" min="1" max=500 id="p">
	</p>
	<input type="submit" id="generate">Generate!</input>
	</form>
	</div>

	<script src="pascal.js" type="text/javascript"></script>
	<script>

	var update = bind(d3.select('body'))
	function render() {
	update(d3.select("#n").property("value"),
	d3.select("#p").property("value"));
	}

	render();

	var form = d3.select("#form")
	.on("submit", function() {
	render()
	d3.event.preventDefault()
	});
	</script>
	function pascals_triangle(n, mod) {
	var T = [[1]];
	var r=0

	var f_no_mod = function(i) {return ((T[r-1][i-1]\|\|0) + (T[r-1][i]\|\|0))};
	var f = mod ? function(i) { return f_no_mod(i) % mod } : f_no_mod;

	while (r < n-1) {
	r++
	T.push(_.map(_.range(r+1), f));
	}
	return T;
	}

	function bind(parent) {
	var colors = d3.interpolateHsl('rgb(0,255,0)', 'rgb(128, 0, 128)');
	var ratio = Math.sin(Math.PI/3),
	height = 500
	var width = height/ratio
	var svg = parent.append("svg")
	.attr("class", 'pascal')
	.attr("width", width)
	.attr("height", height)
	var vis = svg.append("g")

	var update = function(n, p) {
	var n = Math.min(n, width-2)
	var vis_width = (n/(n+2)) * width,
	vis_height = (n/(n+2)) * height
	var x_margin = (width - vis_width)/2,
	y_margin = (height - vis_height)/2
	var u = 10 // unit size
	var scale = vis_width/(n*u)

	vis.attr("transform", "translate("+ (vis_width/2+x_margin) +","+ y_margin +") scale("+scale+","+scale+")")

	var ur = vis.selectAll('g.row')
	.data(pascals_triangle(n, p))
	ur.enter().append('g')
	.attr('class', 'row')
	.attr('transform', function(d,i){return "translate("+ -iu/2 +","+ iu*ratio +")"})
	ur.exit().remove()

	var ue = ur.selectAll('circle')
	.data(function(d) { return d })
	ue.enter().append("circle")
	.attr("r", u/2)
	.attr("cx", function(d,i){return i*u})
	.append("title")
	ue.style("fill", function(d) {return colors((d%p)/p)})
	.select("title")
	.text(function(d, i) { return ""+d });
	}
	return update;
	}

	function make_p_gen(p, g) {
	return make_vis_svg(Math.pow(p,g),p)
	}
	body {
	margin: 0 40px;
	}

	form#form {
	font-size: small;
	}

	circle:hover {
	cursor:crosshair;
	fill: red ! important;
	}