Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active Jun 29, 2016
Embed
What would you like to do?
Spiral Triangle II
license: gpl-3.0
!function(){function e(e){return function(a,i){a=d3.hsl(a),i=d3.hsl(i);var r=(a.h+120)*t,l=(i.h+120)*t-r,h=a.s,s=i.s-h,u=a.l,o=i.l-u;return isNaN(s)&&(s=0,h=isNaN(h)?i.s:h),isNaN(l)&&(l=0,r=isNaN(r)?i.h:r),function(t){var a=r+l*t,i=Math.pow(u+o*t,e),c=(h+s*t)*i*(1-i),d=Math.cos(a),N=Math.sin(a);return"#"+n(i+c*(-.14861*d+1.78277*N))+n(i+c*(-.29227*d-.90649*N))+n(i+1.97294*c*d)}}}function n(e){var n=(e=0>=e?0:e>=1?255:255*e|0).toString(16);return 16>e?"0"+n:n}var t=Math.PI/180;d3.scale.cubehelix=function(){return d3.scale.linear().range([d3.hsl(300,.5,0),d3.hsl(-240,.5,1)]).interpolate(d3.interpolateCubehelix)},d3.interpolateCubehelix=e(1),d3.interpolateCubehelix.gamma=e}();
<!DOCTYPE html>
<meta charset="utf-8">
<style>
rect {
fill: #fff;
stroke: #000;
}
</style>
<svg width="960" height="500">
<defs>
<clipPath id="clip-upper">
<rect width="960" height="305" x="-480" y="-305"></rect>
</clipPath>
<clipPath id="clip-lower">
<rect width="960" height="195" x="-480" y="0"></rect>
</clipPath>
</defs>
<g clip-path="url(#clip-upper)" transform="translate(480,305)"></g>
<g clip-path="url(#clip-lower)" transform="translate(480,305)"></g>
</svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="cubehelix.min.js"></script>
<script>
var width = 960,
height = 500,
triangleSize = 400,
squareCount = 71,
squareSize = 90,
angularSpeed = .08,
colorSpeed = angularSpeed / 240;
var color = d3.scale.cubehelix()
.domain([0, .5, 1])
.range([
d3.hsl(-100, 0.75, 0.35),
d3.hsl( 80, 1.50, 0.80),
d3.hsl( 260, 0.75, 0.35)
]);
var square = d3.selectAll("g")
.selectAll("g")
.data(function(d, i) { return i ? [0, 1, 2] : [2, 0, 1]; })
.enter().append("g")
.attr("transform", function(i) { return "rotate(" + (i * 120 + 60) + ")translate(0," + -triangleSize / Math.sqrt(12) + ")"; })
.selectAll("rect")
.data(d3.range(squareCount))
.enter().append("rect")
.datum(function(i) { return i / squareCount; })
.attr({width: squareSize, height: squareSize, x: -squareSize / 2, y: -squareSize / 2});
d3.timer(function(elapsed) {
square
.style("fill", function(t) { return color((t + elapsed * colorSpeed) % 1); })
.attr("transform", function(t) { return "translate(" + (t - .5) * triangleSize + ",0)rotate(" + (t * 120 + elapsed * angularSpeed) + ")"; });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.