Skip to content

Instantly share code, notes, and snippets.

@1wheel
Last active Aug 21, 2016
Embed
What would you like to do?
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