Skip to content

Instantly share code, notes, and snippets.

@edrex

edrex/README.md

Created February 27, 2012 02:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save edrex/1920883 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save edrex/1920883 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. edrex revised this gist Mar 3, 2012. 2 changed files with 64 additions and 59 deletions.
    9 changes: 5 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,21 +10,22 @@
    <div style="float:right; text-align: right">
    <form id='form'>
    <p>
    <label for="max">Maximum rows:</label>
    <label for="max">Rows</label>
    <input type="number" value="64" min="1" max=500 id="n">
    </p>
    <p>
    <label for="max">P (base for mod):</label>
    <label for="max">P</label>
    <input type="number" value="11" min="1" max=500 id="p">
    </p>
    <input type="submit" id="generate">Generate!</input>
    <input type="submit" value="Generate!"/>
    </form>
    </div>

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

    var update = bind(d3.select('body'))
    var update = pascal.create(d3.select('body'))

    function render() {
    update(d3.select("#n").property("value"),
    d3.select("#p").property("value"));
    114 changes: 59 additions & 55 deletions pascal.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,59 +1,63 @@
    function pascals_triangle(n, mod) {
    var T = [[1]];
    var r=0
    // pascal module
    var pascal = (function(){

    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;
    var calculate = function(n, mod) {
    var T = [[1]];
    var r=0

    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 });
    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;
    }
    return update;
    }

    function make_p_gen(p, g) {
    return make_vis_svg(Math.pow(p,g),p)
    }
    return {
    calculate: calculate,

    create: function(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")
    // after binding returns an update method
    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(calculate(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;
    }
    }
    })();
  2. edrex revised this gist Mar 3, 2012. 1 changed file with 59 additions and 0 deletions.
    59 changes: 59 additions & 0 deletions pascal.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    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)
    }
  3. edrex revised this gist Mar 2, 2012. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -23,9 +23,11 @@

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

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

    render();
  4. edrex revised this gist Mar 2, 2012. 1 changed file with 1 addition and 61 deletions.
    62 changes: 1 addition & 61 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,67 +21,8 @@
    </form>
    </div>

    <script src="pascal.js" type="text/javascript"></script>
    <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;
    }

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

    function make_vis_svg(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 });
    }


    function make_p_gen(p, g) {
    return make_vis_svg(Math.pow(p,g),p)
    }

    function render() {
    make_vis_svg(d3.select("#n").property("value"),
    d3.select("#p").property("value"));
    @@ -94,5 +35,4 @@
    render()
    d3.event.preventDefault()
    });

    </script>
  5. edrex revised this gist Mar 2, 2012. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,3 @@
    See it in action at [bl.ocks.org](http://bl.ocks.org/1920883).

    Inspired by [Vihart](http://www.youtube.com/user/Vihart)'s [video](http://www.youtube.com/watch?v=Yhlv5Aeuo_k) on the same topic.
  6. edrex revised this gist Mar 2, 2012. 1 changed file with 19 additions and 19 deletions.
    38 changes: 19 additions & 19 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -39,11 +39,16 @@

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

    function make_vis_svg(n, p) {
    var ratio = Math.sin(Math.PI/3),
    height = 500
    var width = height/ratio
    var n = Math.min(n, width-2)
    var vis_width = (n/(n+2)) * width,
    vis_height = (n/(n+2)) * height
    @@ -52,28 +57,23 @@
    var u = 10 // unit size
    var scale = vis_width/(n*u)

    body.selectAll('svg.pascal').remove()
    var svg = d3.select("body").append("svg")
    .attr("class", 'pascal')
    .attr("width", width)
    .attr("height", height)
    vis.attr("transform", "translate("+ (vis_width/2+x_margin) +","+ y_margin +") scale("+scale+","+scale+")")

    var vis = svg.append("g")
    .attr("transform", "translate("+ (vis_width/2+x_margin) +","+ y_margin +") scale("+scale+","+scale+")")

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

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

  7. edrex revised this gist Mar 2, 2012. 1 changed file with 10 additions and 10 deletions.
    20 changes: 10 additions & 10 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -48,13 +48,13 @@
    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,
    scale = vis_width/n

    body.selectAll('.pascal-svg').remove()
    y_margin = (height - vis_height)/2
    var u = 10 // unit size
    var scale = vis_width/(n*u)

    body.selectAll('svg.pascal').remove()
    var svg = d3.select("body").append("svg")
    .attr("class", 'pascal-svg')
    .attr("class", 'pascal')
    .attr("width", width)
    .attr("height", height)

    @@ -65,16 +65,16 @@
    .data(pascals_triangle(n, p))
    row.enter().append('g')
    .attr('class', 'row')
    .attr('transform', function(d,i){return "translate("+ -i/2 +","+ i*ratio +")"})
    .attr('transform', function(d,i){return "translate("+ -i*u/2 +","+ i*u*ratio +")"})

    var entry = row.selectAll('circle')
    .data(function(d) { return d })
    entry.enter().append("circle")
    .style("fill", function(d) {return colors((d%p)/p)})
    .attr("r", 0.5)
    .attr("cx", function(d,i){return i})
    .append("svg:title")
    .text(function(d, i) { return d });
    .attr("r", u/2)
    .attr("cx", function(d,i){return i*u})
    .append("svg:title")
    .text(function(d, i) { return ""+d });
    }


  8. edrex revised this gist Mar 2, 2012. 1 changed file with 1 addition and 26 deletions.
    27 changes: 1 addition & 26 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,37 +1,12 @@
    body {
    margin: 0 40px;
    }

    form#form {
    font-size: small;
    }

    svg {
    font: 10px sans-serif;
    }

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

    .pascal-text {
    text-align: center;
    }

    .pascal-text div {
    white-space: nowrap;
    height: 5px;
    }

    .pascal-text div span {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0;
    }


    .axis path, .axis line {
    fill: none;
    stroke: #fff;
    }
  9. edrex revised this gist Mar 2, 2012. 1 changed file with 24 additions and 49 deletions.
    73 changes: 24 additions & 49 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -37,48 +37,19 @@
    return T;
    }

    // flatten positional information into each entry so they can lay themselves out
    function mangle(T) {
    var R = [];
    for (var i=0; i<T.length; i++) {
    for (var j=0; j<T[i].length; j++) {
    R.push([i,j,T[i][j]]);
    }
    }
    return R;
    }

    var colors = d3.interpolateHsl('rgb(0,255,0)', 'rgb(128, 0, 128)');
    var body = d3.select('body')

    function make_vis_text(n, p) {
    body.selectAll('.pascal-text').remove()
    var c = body.append('div')
    .attr('class', 'pascal-text');

    c.selectAll('div').remove();
    var row = c.selectAll('div')
    .data(pascals_triangle(n), function(n) {return n.length});
    row.enter().append("div");
    row.exit().remove();

    var entry = row.selectAll('span')
    .data(function(d) { return d; })
    .enter().append("span")
    //.text(function(d) { return d})
    .style("background-color", function(v) {return colors((v%p)/p)});
    }

    function make_vis_svg(n, p) {
    var ratio = Math.sin(Math.PI/3)
    var height = 500
    var ratio = Math.sin(Math.PI/3),
    height = 500
    var width = height/ratio
    var n = Math.min(n, width-2);
    var vis_width = (n/(n+2)) * width
    var vis_height = (n/(n+2)) * height
    var x_margin = (width - vis_width)/2
    var y_margin = (height - vis_height)/2
    var scale = vis_width/n
    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,
    scale = vis_width/n

    body.selectAll('.pascal-svg').remove()

    @@ -90,15 +61,20 @@
    var vis = svg.append("g")
    .attr("transform", "translate("+ (vis_width/2+x_margin) +","+ y_margin +") scale("+scale+","+scale+")")

    var entry = vis.selectAll('circle')
    .data(mangle(pascals_triangle(n, p)), function(n) {return n.length});
    var row = vis.selectAll('g.row')
    .data(pascals_triangle(n, p))
    row.enter().append('g')
    .attr('class', 'row')
    .attr('transform', function(d,i){return "translate("+ -i/2 +","+ i*ratio +")"})

    var entry = row.selectAll('circle')
    .data(function(d) { return d })
    entry.enter().append("circle")
    .style("fill", function(d) {return colors((d[2]%p)/p)})
    .style("fill", function(d) {return colors((d%p)/p)})
    .attr("r", 0.5)
    .attr("cx", function(d){return d[1] - d[0]/2})
    .attr("cy", function(d){return d[0]*ratio})
    .append("svg:title")
    .text(function(d, i) { return "The value at row "+d[0]+" and column "+ d[1]+ " is "+d[2] });
    .attr("cx", function(d,i){return i})
    .append("svg:title")
    .text(function(d, i) { return d });
    }


    @@ -114,10 +90,9 @@
    render();

    var form = d3.select("#form")
    .on("submit", function() {
    render()
    d3.event.preventDefault()
    });
    .on("submit", function() {
    render()
    d3.event.preventDefault()
    });

    //make_p_gen(3,4);
    </script>
  10. edrex revised this gist Mar 2, 2012. 2 changed files with 38 additions and 41 deletions.
    42 changes: 1 addition & 41 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,48 +4,8 @@
    <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>

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

    body {
    margin: 0 40px;
    }
    form#form {
    font-size: small;
    }

    svg {
    font: 10px sans-serif;
    }

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

    .pascal-text {
    text-align: center;
    }

    .pascal-text div {
    white-space: nowrap;
    height: 5px;
    }

    .pascal-text div span {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0;
    }


    .axis path, .axis line {
    fill: none;
    stroke: #fff;
    }
    ​}

    </style>
    <body>
    <div style="float:right; text-align: right">
    <form id='form'>
    37 changes: 37 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    body {
    margin: 0 40px;
    }
    form#form {
    font-size: small;
    }

    svg {
    font: 10px sans-serif;
    }

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

    .pascal-text {
    text-align: center;
    }

    .pascal-text div {
    white-space: nowrap;
    height: 5px;
    }

    .pascal-text div span {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0;
    }


    .axis path, .axis line {
    fill: none;
    stroke: #fff;
    }
  11. edrex revised this gist Feb 28, 2012. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,6 +6,9 @@

    <style>

    body {
    margin: 0 40px;
    }
    form#form {
    font-size: small;
    }
  12. edrex revised this gist Feb 28, 2012. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -107,15 +107,15 @@
    }

    function make_vis_svg(n, p) {
    var dy = Math.sin(Math.PI/3)
    var ratio = Math.sin(Math.PI/3)
    var height = 500
    var width = height/dy
    var width = height/ratio
    var n = Math.min(n, width-2);
    var vis_width = (n/(n+2)) * width
    var vis_height = (n/(n+2)) * height
    var margin = (width - vis_width)/2
    var scale = vis_height/n
    var dy = Math.sin(Math.PI/3)
    var x_margin = (width - vis_width)/2
    var y_margin = (height - vis_height)/2
    var scale = vis_width/n

    body.selectAll('.pascal-svg').remove()

    @@ -125,15 +125,15 @@
    .attr("height", height)

    var vis = svg.append("g")
    .attr("transform", "scale("+scale+","+scale+") translate("+(1+n/2)+",1.5) ")
    .attr("transform", "translate("+ (vis_width/2+x_margin) +","+ y_margin +") scale("+scale+","+scale+")")

    var entry = vis.selectAll('circle')
    .data(mangle(pascals_triangle(n, p)), function(n) {return n.length});
    entry.enter().append("circle")
    .style("fill", function(d) {return colors((d[2]%p)/p)})
    .attr("r", 0.5)
    .attr("cx", function(d){return d[1] - d[0]/2})
    .attr("cy", function(d){return d[0]*dy})
    .attr("cy", function(d){return d[0]*ratio})
    .append("svg:title")
    .text(function(d, i) { return "The value at row "+d[0]+" and column "+ d[1]+ " is "+d[2] });
    }
  13. edrex revised this gist Feb 28, 2012. No changes.
  14. edrex revised this gist Feb 28, 2012. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,8 +3,6 @@
    <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>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

    <style>

  15. edrex revised this gist Feb 28, 2012. 1 changed file with 10 additions and 7 deletions.
    17 changes: 10 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -109,19 +109,22 @@
    }

    function make_vis_svg(n, p) {
    var canvas_size = 500
    var n = Math.min(n, canvas_size-2);
    var vis_size = (n/(n+2)) * canvas_size
    var margin = (canvas_size - vis_size)/2
    var scale = vis_size/n
    var dy = Math.sin(Math.PI/3)
    var height = 500
    var width = height/dy
    var n = Math.min(n, width-2);
    var vis_width = (n/(n+2)) * width
    var vis_height = (n/(n+2)) * height
    var margin = (width - vis_width)/2
    var scale = vis_height/n
    var dy = Math.sin(Math.PI/3)

    body.selectAll('.pascal-svg').remove()

    var svg = d3.select("body").append("svg")
    .attr("class", 'pascal-svg')
    .attr("width", canvas_size)
    .attr("height", canvas_size)
    .attr("width", width)
    .attr("height", height)

    var vis = svg.append("g")
    .attr("transform", "scale("+scale+","+scale+") translate("+(1+n/2)+",1.5) ")
  16. edrex revised this gist Feb 28, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    Inspired by [Vihart](http://www.youtube.com/user/Vihart)'s [video on the same topic](http://www.youtube.com/watch?v=Yhlv5Aeuo_k).
    Inspired by [Vihart](http://www.youtube.com/user/Vihart)'s [video](http://www.youtube.com/watch?v=Yhlv5Aeuo_k) on the same topic.
  17. edrex revised this gist Feb 28, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    Inspired by [Vihart](http://www.youtube.com/user/Vihart)'s [video on the same topic](http://www.youtube.com/watch?v=Yhlv5Aeuo_k).
  18. edrex revised this gist Feb 28, 2012. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -17,7 +17,8 @@
    }

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

    .pascal-text {
  19. edrex revised this gist Feb 28, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -132,8 +132,8 @@
    .attr("r", 0.5)
    .attr("cx", function(d){return d[1] - d[0]/2})
    .attr("cy", function(d){return d[0]*dy})
    //.append("svg:title")
    //.text(function(d, i) { return "The value at row "+d[0]+" and column "+ d[1]+ " is "+d[2] });
    .append("svg:title")
    .text(function(d, i) { return "The value at row "+d[0]+" and column "+ d[1]+ " is "+d[2] });
    }


  20. edrex revised this gist Feb 28, 2012. 1 changed file with 48 additions and 15 deletions.
    63 changes: 48 additions & 15 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,17 +8,21 @@

    <style>

    body {
    text-align: center;
    form#form {
    font-size: small;
    }

    svg {
    font: 10px sans-serif;
    }

    circle:hover {
    fill: red;
    }

    .pascal-text {
    text-align: center;
    `}
    }

    .pascal-text div {
    white-space: nowrap;
    @@ -41,23 +45,39 @@

    </style>
    <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>

    function pascals_triangle(n) {
    T = [[1]];
    r=0
    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), function(i) {
    return (T[r-1][i-1]||0) + (T[r-1][i]||0);
    }));
    T.push(_.map(_.range(r+1), f));
    }
    return T;
    }

    // flatten positional information into each entry so they can lay themselves out
    function mangle(T) {
    R = [];
    var R = [];
    for (var i=0; i<T.length; i++) {
    for (var j=0; j<T[i].length; j++) {
    R.push([i,j,T[i][j]]);
    @@ -89,6 +109,7 @@

    function make_vis_svg(n, p) {
    var canvas_size = 500
    var n = Math.min(n, canvas_size-2);
    var vis_size = (n/(n+2)) * canvas_size
    var margin = (canvas_size - vis_size)/2
    var scale = vis_size/n
    @@ -105,21 +126,33 @@
    .attr("transform", "scale("+scale+","+scale+") translate("+(1+n/2)+",1.5) ")

    var entry = vis.selectAll('circle')
    .data(mangle(pascals_triangle(n)), function(n) {return n.length});
    .data(mangle(pascals_triangle(n, p)), function(n) {return n.length});
    entry.enter().append("circle")
    .style("fill", function(d) {return colors((d[2]%p)/p)})
    .attr("r", 0.5)
    .attr("cx", function(d){return d[1] - d[0]/2})
    .attr("cy", function(d){return d[0]*dy})
    .append("svg:title")
    .text(function(d, i) { return "The value at row "+d[0]+" and column "+ d[1]+ " is "+d[2] });
    //.append("svg:title")
    //.text(function(d, i) { return "The value at row "+d[0]+" and column "+ d[1]+ " is "+d[2] });
    }


    function make_p_gen(p, g) {
    return make_vis_svg(Math.pow(p,g),p)
    }

    //make_vis_text(20,3);
    make_p_gen(3,4);
    function render() {
    make_vis_svg(d3.select("#n").property("value"),
    d3.select("#p").property("value"));
    }

    render();

    var form = d3.select("#form")
    .on("submit", function() {
    render()
    d3.event.preventDefault()
    });

    //make_p_gen(3,4);
    </script>
  21. edrex revised this gist Feb 28, 2012. 1 changed file with 31 additions and 14 deletions.
    45 changes: 31 additions & 14 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -18,7 +18,7 @@

    .pascal-text {
    text-align: center;
    }
    `}

    .pascal-text div {
    white-space: nowrap;
    @@ -44,15 +44,15 @@
    <script>

    function pascals_triangle(n) {
    if (n==1) {
    return [[1]];
    } else {
    T = pascals_triangle(n-1);
    T.push(_.map(_.range(n), function(i) {
    return (T[n-2][i-1]||0) + (T[n-2][i]||0);
    T = [[1]];
    r=0
    while (r < n-1) {
    r++
    T.push(_.map(_.range(r+1), function(i) {
    return (T[r-1][i-1]||0) + (T[r-1][i]||0);
    }));
    return T;
    }
    return T;
    }

    // flatten positional information into each entry so they can lay themselves out
    @@ -69,6 +69,24 @@
    var colors = d3.interpolateHsl('rgb(0,255,0)', 'rgb(128, 0, 128)');
    var body = d3.select('body')

    function make_vis_text(n, p) {
    body.selectAll('.pascal-text').remove()
    var c = body.append('div')
    .attr('class', 'pascal-text');

    c.selectAll('div').remove();
    var row = c.selectAll('div')
    .data(pascals_triangle(n), function(n) {return n.length});
    row.enter().append("div");
    row.exit().remove();

    var entry = row.selectAll('span')
    .data(function(d) { return d; })
    .enter().append("span")
    //.text(function(d) { return d})
    .style("background-color", function(v) {return colors((v%p)/p)});
    }

    function make_vis_svg(n, p) {
    var canvas_size = 500
    var vis_size = (n/(n+2)) * canvas_size
    @@ -86,23 +104,22 @@
    var vis = svg.append("g")
    .attr("transform", "scale("+scale+","+scale+") translate("+(1+n/2)+",1.5) ")

    // .append("g")
    //.call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]));

    var entry = vis.selectAll('circle')
    .data(mangle(pascals_triangle(n)), function(n) {return n.length});
    entry.enter().append("circle")
    .style("fill", function(d) {return colors((d[2]%p)/p)})
    .attr("r", 0.5)
    .attr("cx", function(d){return d[1] - d[0]/2})
    .attr("cy", function(d){return d[0]*dy})
    .append("svg:title")
    .text(function(d, i) { return "The value at row "+d[0]+" and column "+ d[1]+ " is "+d[2] });
    }


    function make_p_gen(p, g) {
    return make_vis_svg(Math.pow(p,g),p)
    }
    //make_vis_text(20,3);

    make_p_gen(3,4)

    //make_vis_text(20,3);
    make_p_gen(3,4);
    </script>
  22. edrex revised this gist Feb 28, 2012. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,13 +8,17 @@

    <style>

    body {
    text-align: center;
    }

    svg {
    font: 10px sans-serif;
    }

    .pascal-text {
    text-align: center;
    `}
    }

    .pascal-text div {
    white-space: nowrap;
  23. edrex revised this gist Feb 28, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -66,7 +66,7 @@
    var body = d3.select('body')

    function make_vis_svg(n, p) {
    var canvas_size = 640
    var canvas_size = 500
    var vis_size = (n/(n+2)) * canvas_size
    var margin = (canvas_size - vis_size)/2
    var scale = vis_size/n
  24. edrex revised this gist Feb 28, 2012. 1 changed file with 48 additions and 51 deletions.
    99 changes: 48 additions & 51 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,28 +1,31 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>Zoom + Pan</title>
    <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>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

    <style>

    svg {
    font: 10px sans-serif;
    shape-rendering: crispEdges;
    }

    .pascal-text {
    overflow-x: scroll;
    white-space: nowrap;
    }
    text-align: center;
    `}

    .pascal-text div {
    text-align: center;
    white-space: nowrap;
    height: 5px;
    }

    .pascal-text div span {
    display: inline-block;
    margin: .2em;
    width: 2em;
    width: 5px;
    height: 5px;
    margin: 0;
    }


    @@ -36,7 +39,6 @@
    <body>
    <script>

    var n = 20;
    function pascals_triangle(n) {
    if (n==1) {
    return [[1]];
    @@ -49,6 +51,7 @@
    }
    }

    // flatten positional information into each entry so they can lay themselves out
    function mangle(T) {
    R = [];
    for (var i=0; i<T.length; i++) {
    @@ -59,49 +62,43 @@
    return R;
    }

    var base = 2;
    var colors = d3.interpolateHsl('rgb(0,255,0)', 'rgb(128, 0, 128)');
    var body = d3.select('body')

    function make_vis_svg(n, p) {
    var canvas_size = 640
    var vis_size = (n/(n+2)) * canvas_size
    var margin = (canvas_size - vis_size)/2
    var scale = vis_size/n
    var dy = Math.sin(Math.PI/3)

    body.selectAll('.pascal-svg').remove()

    var svg = d3.select("body").append("svg")
    .attr("class", 'pascal-svg')
    .attr("width", canvas_size)
    .attr("height", canvas_size)

    var vis = svg.append("g")
    .attr("transform", "scale("+scale+","+scale+") translate("+(1+n/2)+",1.5) ")

    // .append("g")
    //.call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]));

    var entry = vis.selectAll('circle')
    .data(mangle(pascals_triangle(n)), function(n) {return n.length});
    entry.enter().append("circle")
    .style("fill", function(d) {return colors((d[2]%p)/p)})
    .attr("r", 0.5)
    .attr("cx", function(d){return d[1] - d[0]/2})
    .attr("cy", function(d){return d[0]*dy})
    }

    var c = d3.select("body").append('div')
    .attr('class', 'pascal-text');

    function make_vis(n, p) {
    var row = c.selectAll('div')
    .data(pascals_triangle(n), function(n) {return n.length});
    row.enter().append("div");
    row.exit().remove();

    var entry = row.selectAll('span')
    .data(function(d) { return d; })
    .style("background-color", function(v) {return colors((v%p)/p)});
    entry.enter().append("span")
    .text(function(d) { return d})
    .style("background-color", function(v) {return colors((v%p)/p)});
    function make_p_gen(p, g) {
    return make_vis_svg(Math.pow(p,g),p)
    }
    //make_vis_text(20,3);

    make_p_gen(3,4)

    make_vis(20,3);
    // var width = 960,
    // height = 500;

    // var x = d3.scale.linear()
    // .domain([0, n])
    // .range([0, width]);

    // var y = d3.scale.linear()
    // .domain([0, n])
    // .range([height, 0]);

    // var svg = d3.select("body").append("svg")
    // .attr("width", width)
    // .attr("height", height)
    // // .append("g")
    // .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]));

    // var elts = svg.selectAll('text')
    // .data(mangle(pascals_triangle(n)));
    // elts.enter().append("text")
    // .attr('cx', function(d) { return d[1]-d[0]/2 })
    // .attr('cy', function(d) { return d[0]})
    // .text(function(d) { return d[2]});
    // elts.exit().remove();
    </script>
    </script>
  25. edrex created this gist Feb 27, 2012.
    107 changes: 107 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,107 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>Zoom + Pan</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>
    <style>

    svg {
    font: 10px sans-serif;
    shape-rendering: crispEdges;
    }

    .pascal-text {
    overflow-x: scroll;
    white-space: nowrap;
    }

    .pascal-text div {
    text-align: center;
    }

    .pascal-text div span {
    display: inline-block;
    margin: .2em;
    width: 2em;
    }


    .axis path, .axis line {
    fill: none;
    stroke: #fff;
    }
    ​}

    </style>
    <body>
    <script>

    var n = 20;
    function pascals_triangle(n) {
    if (n==1) {
    return [[1]];
    } else {
    T = pascals_triangle(n-1);
    T.push(_.map(_.range(n), function(i) {
    return (T[n-2][i-1]||0) + (T[n-2][i]||0);
    }));
    return T;
    }
    }

    function mangle(T) {
    R = [];
    for (var i=0; i<T.length; i++) {
    for (var j=0; j<T[i].length; j++) {
    R.push([i,j,T[i][j]]);
    }
    }
    return R;
    }

    var base = 2;
    var colors = d3.interpolateHsl('rgb(0,255,0)', 'rgb(128, 0, 128)');

    var c = d3.select("body").append('div')
    .attr('class', 'pascal-text');

    function make_vis(n, p) {
    var row = c.selectAll('div')
    .data(pascals_triangle(n), function(n) {return n.length});
    row.enter().append("div");
    row.exit().remove();

    var entry = row.selectAll('span')
    .data(function(d) { return d; })
    .style("background-color", function(v) {return colors((v%p)/p)});
    entry.enter().append("span")
    .text(function(d) { return d})
    .style("background-color", function(v) {return colors((v%p)/p)});
    }

    make_vis(20,3);
    // var width = 960,
    // height = 500;

    // var x = d3.scale.linear()
    // .domain([0, n])
    // .range([0, width]);

    // var y = d3.scale.linear()
    // .domain([0, n])
    // .range([height, 0]);

    // var svg = d3.select("body").append("svg")
    // .attr("width", width)
    // .attr("height", height)
    // // .append("g")
    // .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]));

    // var elts = svg.selectAll('text')
    // .data(mangle(pascals_triangle(n)));
    // elts.enter().append("text")
    // .attr('cx', function(d) { return d[1]-d[0]/2 })
    // .attr('cy', function(d) { return d[0]})
    // .text(function(d) { return d[2]});
    // elts.exit().remove();
    </script>