Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

Created September 26, 2013 00:45
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 enjalot/6708323 to your computer and use it in GitHub Desktop.
Save enjalot/6708323 to your computer and use it in GitHub Desktop.
simplified aspiring mustache emporium
{"description":"simplified aspiring mustache emporium","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":true,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"","inline-console":false}
//with @slembcke, because my math needs simplification
//(I would have never gotten the matrix transformation in a million years)
//"body").style("background-color", d3.rgb(25, 25, 25));
tributary.duration = 5000;
var rectSize = 60;
var numHeight = Math.ceil(;
var numWidth = Math.ceil(tributary.sw/rectSize)+1;
var margin = {t: 0, l: 0};
//want to go from color 1 to color 2 to color 1
var colorScale = d3.scale.linear()
.domain([0, 0.5])
.range(["#F70FBF", "#6A3BE4"]);
var svg = d3.selectAll('svg');
x: -rectSize/2,
y: -rectSize/2,
height: rectSize,
width: rectSize,
fill: colorScale(0)
}); = function(unused, t){
fill: colorScale(Math.abs(0.5-(t%1))),
"transform" : function(d, i){
var offset = t%1;
var xBaseCoord = i%numWidth;
var yBaseCoord = Math.floor(i/numWidth);
if(((xBaseCoord + yBaseCoord)%2)===0){
offset = 1-offset;
return "matrix(" +[1-offset, -offset, offset, 1-offset, ((xBaseCoord) *rectSize) + margin.l, ((yBaseCoord)*rectSize) + margin.t ] + ")";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment