Last active
August 29, 2015 13:57
-
-
Save asparagino/9472071 to your computer and use it in GitHub Desktop.
Crittercism hexbin hack
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<style> | |
.hexagon { | |
fill: none; | |
stroke: #000; | |
stroke-width: .5px; | |
} | |
</style> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/d3.hexbin.v0.min.js"></script> | |
</head> | |
<body> | |
<script> | |
var width = 960, | |
height = 500, | |
i = -1, | |
θ = 0, | |
δθ = .03, | |
n = 2000, | |
k = 20; // samples to replace per frame | |
var randomX = d3.random.normal(width / 2, 80), | |
randomY = d3.random.normal(height / 2, 80), | |
points = d3.range(n).map(function() { return [randomX(), randomY()]; }); | |
var color = d3.scale.linear() | |
.domain([0, 20]) | |
.range(["white", "steelblue"]) | |
.interpolate(d3.interpolateLab); | |
var hexbin = d3.hexbin() | |
.size([width, height]) | |
.radius(20); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
var hexagon = svg.append("g") | |
.attr("class", "hexagons") | |
.selectAll("path") | |
.data(hexbin(points)) | |
.enter().append("path") | |
.attr("d", crittergon()) | |
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + "), scale(0.05), matrix(1 0 0 -1 0 800)"; }) | |
.style("fill", function(d) { return color(d.length); }); | |
d3.timer(function() { | |
θ += δθ; | |
randomX = d3.random.normal(width / 2 + 80 * Math.cos(θ), 80), | |
randomY = d3.random.normal(height / 2 + 80 * Math.sin(θ), 80); | |
for (var j = 0; j < k; ++j) { | |
i = (i + 1) % n; | |
points[i][0] = randomX(); | |
points[i][1] = randomY(); | |
} | |
hexagon = hexagon | |
.data(hexbin(points), function(d) { return d.i + "," + d.j; }); | |
hexagon.exit().remove(); | |
hexagon.enter().append("path") | |
.attr("d", crittergon()) | |
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + "), scale(0.05), matrix(1 0 0 -1 0 800)"; }); | |
hexagon | |
.style("fill", function(d) { return color(d.length); }); | |
}); | |
function crittergon() { | |
return "M632 246q-7 12 -18 21q-2 2 -4 3l-116 78q48 29 95 58q6 4 14 9q7 5 14 13q6 8 10 20q4 11 4 30q0 18 -4 31q-4 14 -10 23q-7 10 -14 16t-14 11l-220 134l-4 2q-3 2 -7 4l-8 2q-3 1 -7 2t-8 1q-7 1 -15 0q-3 0 -7 -1l-8 -2q-3 -1 -7 -2q-4 -2 -7 -4l-4 -2q-113 -69 -227 -138q-23 -10 -36 -32q-10 -16 -11 -36v-2v-3v-2v-6v-265v-3q-1 -16 5 -30v-1l1 -2q2 -3 4 -7q0 -1 1 -2q1 -2 3 -5l3 -3q2 -4 8 -9q6 -6 13 -10l236 -144l4 -2q3 -2 7 -4q4 -1 7 -2l8 -2t7 -1q4 0 8 -1q4 1 7 1q4 0 8 1t7 2l8 2q4 2 7 4l4 2q118 72 237 144q13 9 22 21q10 13 13 28q4 17 2 31q-3 15 -11 29zM605 195q-4 -17 -19 -26l-236 -144q-1 0 -2 -1l-4 -2t-4 -1q-2 -1 -4 -1q-2 -1 -4 -1h-8q-2 0 -4 1q-2 0 -4 1q-2 0 -4 1l-4 2l-1 1h-1l-236 144q-7 5 -12 12l-1 1q-6 9 -7 19v2v12v32v45v52v51v45v32v12q1 7 3 12v2q1 1 2 3q0 1 1 1q0 1 1 2q0 1 1 1q0 1 1 2l4 4v1q3 3 8 5l6 4q2 1 5 2q17 4 32 -5q118 -72 236 -145q8 -4 12 -11q5 -7 7 -14q2 -8 0 -16q-1 -8 -5 -16q-3 -4 -6 -7q-4 -3 -8 -5q-1 -1 -2 -1l-4 -2t-4 -1q-2 -1 -4 -1q-2 -1 -4 -1h-8q-2 0 -4 1q-2 0 -4 1q-2 0 -4 1l-4 2q-1 1 -2 1l-144 88q-4 2 -9 2t-10 -2q-4 -3 -7 -7q-2 -4 -2 -9v-2v-135v0q0 -5 2 -9q2 -5 7 -7q87 -54 175 -107v0q2 -2 4 -2q1 0 2 -1h3h1h5q0 1 1 1t3 1l1 1q102 62 204 125q11 6 22 6t21 -6q10 -5 15 -14q9 -15 5 -32z"; | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment