gcd-viz
| function drawGCD(){ | |
| var stack = [] | |
| var a = 960 - Math.floor(Math.random()*100), b = 400 + Math.floor(Math.random()*100) | |
| function gcd(u, v){ | |
| stack.push({u: u, v: v}) | |
| return v ? gcd(v, u % v) : u | |
| } | |
| gcd(a, b) | |
| var size = 960, | |
| s = 960/Math.max(a, b), | |
| s = 1 | |
| colors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"] | |
| stack[0].translate = [0, 0] | |
| stack.forEach(function(d, i){ | |
| d.i = i | |
| d.us = d.u*s | |
| d.vs = d.v*s | |
| d.prev = i ? stack[i - 1] : d | |
| d.flipped = !(!i || !(i % 2)) | |
| d.x = d.flipped ? d.vs : d.us | |
| d.y = d.flipped ? d.us : d.vs | |
| d.num = Math.floor(d.u/d.v) | |
| d.translate = d.prev.translate.slice() | |
| if (i) d.translate[+!d.flipped] += d.prev.v*d.prev.num | |
| console.log(d.flipped, d.translate) | |
| d.color = colors[i] | |
| }) | |
| var svg = d3.select('body').html('').append('svg') | |
| .attr({width: size, height: 500}) | |
| svg.append('rect').attr({width: a, height: b}) | |
| svg.dataAppend(stack, 'g') | |
| .each(function(d){ | |
| if (!d.v) return | |
| d3.select(this).dataAppend(d3.range(d.num).map(function(i){ return {i: i, j: d.i, p: d} }), 'rect.step') | |
| .attr(d.flipped ? 'y' : 'x', function(e){ return e.i*d.v }) | |
| .attr('width', d.v) | |
| .attr('height', d.v) | |
| .style('fill', d.color) | |
| .style('stroke', d3.rgb(d.color).darker(2)) | |
| }) | |
| .translate(ƒ('translate')) | |
| svg.selectAll('rect.step').style('opacity', 0) | |
| .transition().delay(function(d, i){ return d ? (d.j + 1)*700 : 0 }) | |
| .style('opacity', 1) | |
| .style('stroke-width', 10) | |
| .transition().duration(500) | |
| .style('stroke-width', 1) | |
| svg.append('text') | |
| .translate([10, 500/2]) | |
| .dataAppend(stack, 'tspan.number') | |
| .text(function(d){ return ' ' + d.u + ' ' }) | |
| .style({fill: function(d, i){ return i ? d.prev.color : 'black' }}) | |
| .style('opacity', 0) | |
| .transition().delay(function(d){ return d.i*700 }) | |
| .style('opacity', 1) | |
| window.setTimeout(drawGCD, stack.length*700 + 1000) | |
| } | |
| drawGCD() |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| rect{ | |
| fill-opacity: 1; | |
| stroke: black; | |
| } | |
| svg{ | |
| overflow: visible; | |
| } | |
| body{ | |
| margin: 0px; | |
| } | |
| html{ | |
| width: 960px; | |
| height: 500px; | |
| } | |
| .tbl{ | |
| display: inline-block; | |
| width: 360px; | |
| vertical-align: top; | |
| } | |
| .cell{ | |
| display: inline-block; | |
| width: 60px; | |
| } | |
| .number{ | |
| font-size: 500%; | |
| font-family: monospace; | |
| text-shadow: 0 1px 0 #ccc, 1px 0 0 #ccc, 0 -1px 0 #ccc, -1px 0 0 #ccc; | |
| } | |
| </style> | |
| <body></body> | |
| <script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script> | |
| <script src="/1wheel/raw/67b47524ed8ed829d021/lodash-3.8.0.js"></script> | |
| <script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script> | |
| <script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script> | |
| <script src='/1wheel/raw/5d32ecb8a54b42f53646/geometry.js'></script> | |
| <script src='gcd.js'></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment