Skip to content

Instantly share code, notes, and snippets.

@jmuyskens
Last active August 29, 2015 14:08
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jmuyskens/2f177c42ab1e6c9a4653 to your computer and use it in GitHub Desktop.
Hexagon whirl
<!DOCTYPE HTML>
<html lang="en">
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="whirl.js"></script>
<style>
path {
fill: none;
stroke: maroon;
}
svg {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<script>
hexwhirl(300);
</script>
</body>
</html>
function lineFunctionFunction(factor) {
return d3.svg.line()
.x(function(d) { return factor * d.x; })
.y(function(d) { return factor * d.y; })
.interpolate("linear");
}
var trianglePoints = [{"x":-1, "y":-0.866025404}, {"x":0, "y":0.866025404},
{"x":1, "y":-0.866025404}, {"x":-1, "y":-0.866025404}];
factor = 100;
function nested(num, total) {
if (num > 0)
var myNest = nested(num - 1, total);
var lineFunction = lineFunctionFunction(factor);
function my(selection) {
selection.each(function(data) {
var s = d3.select(this);
// make the stroke fatter to keep weight consistent as triangle is scaled smaller
var path = s.append("path")
.style("stroke", "maroon")
.attr("d", lineFunction(trianglePoints));
path.transition()
.delay(300)
.duration(5000)
.style("stroke-width", 1 / Math.pow(0.87, total - num));
if (num > 0) {
var newTriangle = s.append("g")
.call(myNest);
newTriangle.transition()
.delay(300)
.duration(5000)
.attr("transform", "scale(.87)rotate(5)translate(-2.7,-4.2)");
}
});
}
return my;
}
function hexwhirl(width) {
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", width)
.append("g")
.attr("transform", "scale(" + (width / 400) + "," + (width / 400) + ")");
var nest = nested(25, 20);
var hex = ["translate(100,100)scale(1,-1)", "translate(200,100)", "translate(300,100)scale(1,-1)", "translate(200,273)scale(1,-1)", "translate(100,273)", "translate(300,273)"];
var triangles = svg.selectAll("g.triangle")
.data(hex)
.enter().append("g");
triangles
.attr("transform", function(d){ return d; })
.call(nest);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment