Skip to content

Instantly share code, notes, and snippets.

@connorgr

connorgr/README.md

Created February 20, 2016 22:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save connorgr/7eb93603027e3d56553e to your computer and use it in GitHub Desktop.
Save connorgr/7eb93603027e3d56553e to your computer and use it in GitHub Desktop.
Download ZIP
fibonacci coloring
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<script>
var radius = 5,
off = 100+radius,
svg = d3.select("body").append("svg")
.append('g').attr('transform', 'translate('+off+','+off+')'),
lineG = svg.append('g'),
circ1 = svg.append("circle")
.attr({
cx: 0, cy: 0, r: radius
})
.style('fill', 'steelblue');
function fibTween(a,b,i) {
setTimeout(function () {
var c = a+b,
Lab = { l: c%100, a: a%200, b: b%200 };
Lab.a -= 100;
Lab.b -= 100;
var next = (c%200) - 100;
svg.append('line')
.attr({x1: Lab.a, x2: Lab.b, y1: Lab.b, y2: next})
.attr('stroke', d3.lab(Lab.l, Lab.a, Lab.b))
.attr('stroke-width', 1);
circ1.transition().duration(1667)
.attr('cx', Lab.a).attr('cy', Lab.b)
.style('fill',d3.lab(Lab.l, Lab.a, Lab.b))
.each('end', function() {
console.log('hi');
});
if(i == 78) fibTween(1,1,0); // Number overflow
else fibTween(b, c, i++);
}, 1000);
}
fibTween(1,1,0);
// svg.append("rect")
// .attr({x: 100, y: 10, width: 700, height: 480})
// .style({ fill: "#a72d1a"})
// .transition().duration(3000).ease("bounce")
// .style({ fill: "#5db9e3"})
console.log("you are now rocking with d3", d3);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment