inlets for tributary

arctween.js

var data = [5, 25, 40, 20, 10];

var sw = parseInt(svg.style("width"), 10);
var sh = parseInt(svg.style("height"), 10);

var r = Math.min(sw, sh)/2;
var color = d3.scale.category20();
var arc = d3.svg.arc().outerRadius(r);
var donut = d3.layout.pie();

tributary.init = function(g) {
    g.data([data]);
    var pie_arcs = g.selectAll("g.pie_arc")
        .data(donut)
      .enter().append("g")
        .attr("class", "pie_arc")
        .attr("transform", "translate(" + (r + 2*r) + "," + r + ")");

    var pie_paths = pie_arcs.append("path")
        .attr("fill", function(d, i) { return color(i); });

    var donut_arcs = g.selectAll("g.donut_arc")
        .data(donut)
      .enter().append("g")
        .attr("class", "donut_arc")
        .attr("transform", "translate(" + r + "," + r + ")");

    var donut_paths = donut_arcs.append("path")
        .attr("fill", function(d, i) { return color(i); });

};

tributary.run = function(t, g) {
    var pie_paths = g.selectAll("g.pie_arc")
        .select("path");
    var donut_paths = g.selectAll("g.donut_arc")
        .select("path");
 
    //This is the same as tweenPie
    pie_paths.attr("d", function(d,i) {
        var interpol = d3.interpolate({startAngle: 0, endAngle: 0}, d);
        return arc(interpol(t));
    });
    //This is the same as tweenDonut
    donut_paths.attr("d", function(d,i) {
        //d.innerRadius = r * 0.6;
        d.innerRadius = 0;
        var interpol = d3.interpolate({innerRadius: r*0.6}, d);
        return arc(interpol(t));
    });

};

/*
function tweenPie(b) {
    b.innerRadius = 0;
    var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
    return function(t) {
        return arc(i(t));
    };
}
function tweenDonut(b) {
    b.innerRadius = r * .6;
    var i = d3.interpolate({innerRadius: 0}, b);
    return function(t) {
        return arc(i(t));
    };
}
*/

color.js

//Try changing all these parameters
//Layout properties
var colors = [
	"#658851"
    ,"#D40067"
    , "#4DA9DF"
];
var color = colors[0];

//var hsl_color = d3.rgb(colors[0]).hsl();
//console.log(hsl_color)

var hex = color.slice(1, color.length);
var hexs = [hex.slice(0, 2), hex.slice(2, 4) , hex.slice(4, 6)];
var rgbs = _.map(hexs, function(hex) {
    return parseInt(hex, 16);
});
//from this article http://blog.sarathonline.com/2009/02/javascript-convert-strings-to-binary.html
function intToBin(d){
    var j;
    var arr = [];
    for (j = 0; j < 8; j++) {
        arr.push(d%2);
        d = Math.floor(d/2);
    }
    //reverse all bits again.
    return arr.reverse().join("");
}
var bins = _.map(rgbs, function(rgb) {
    return intToBin(rgb);
});

//from @mrejFox http://enjalot.com/tributary/2632354/sinwaves.js
var binarrs = _.map(bins, function(bin) {
    var i;
    var data = [];
    bin = String(bin);
    //for (var i=0; i < bin.length; i++) { data.push({text: bin.slice(i,i+1)}) };
    for (i=0; i < bin.length; i++) { data.push(parseInt(bin.slice(i,i+1), 10)); }
    return data;
});

var sw = parseInt(d3.select("svg").style("width"), 10);
var sh = parseInt(d3.select("svg").style("height"), 10);

var svg = d3.select("svg")
  .append("svg:g");

svg.append("rect")
  .attr("width", sw)
  .attr("height", sh)
  .attr("fill", color)
  .attr("x", 0)
  .attr("y", 0);

   
function make_text(text, clazz, y) {
    var text_group = svg.append("g")
        .classed(clazz, true)
    var txt = text_group.append("text")
        .style("font-size", 30);
    txt.selectAll("tspan")
        .data(text)
        .enter().append("tspan")
        .text(function(d,i) {
            return d;
        })
        .attr("dx", 33);
    //center the text
    var offset = -37;
    var bbox = txt.node().getBBox();
    //txt.attr("x", -bbox.width/2);
    text_group
        .attr("transform", "translate(" + [-bbox.width/2 + sw/2 + offset, y] + ")");
 
    return txt;
}

function make_dots(binary, clazz, y) {
    var r = 30;
    var spacer = r + 10;
    var bw = 8 * spacer + 50;
    var dots_group = svg.append("g")
    var three_dots = dots_group.append("g")
        .selectAll("g." + clazz)
        .data(binary)
        .enter().append("g")
        .classed(clazz, true)
        .attr("transform", function(d,i) {
            return "translate(" + [i*bw, 0] + ")";
        });


        
    var dots = three_dots.selectAll("circle")
        //.data(function(d, i) { return {"digit":d, "i": i}; })
        .data(function(d, i) { return d; })
        .enter()
        .append("circle")
        .attr("cx", function(d,i) {
            return i * spacer;
        })
        .attr("r", function(d,i) {
            return 10 + 15*d;
        })
        .attr("fill", function(d,i) {
            if(d) {
                return "#ffffff";
            } else {
                return "#000000";
            }
        })
        .attr("fill-opacity", 0.5)
        .attr("stroke", "#000000")
        ;
 
    var offset = 20;
    var bbw = dots_group.node().getBBox().width;
    dots_group.attr("transform", function(d,i) {
        return "translate(" + [-bbw/2 + sw/2 + offset, y] + ")";
    });


    return dots;
}


function make_boxes(binary, clazz, y) {
    var rw = 30;
    var rh = rw;
    var bw = 8 * rw + 95;
    var boxes_group = svg.append("g");
    var three_boxes = boxes_group.append("g")
        .selectAll("g." + clazz)
        .data(binary)
        .enter().append("g")
        .classed(clazz, true)
        .attr("transform", function(d,i) {
            return "translate(" + [i*bw, 0] + ")";
        });


    var boxes = three_boxes.selectAll("rect")
        //.data(function(d, i) { return {"digit":d, "i": i}; })
        .data(function(d, i) { return d; })
        .enter()
        .append("rect")
        .attr("x", function(d,i) {
            return i * 35;
        })
        .attr("width", rw)
        .attr("height", rh)
        .attr("fill", function(d,i) {
            if(d) {
                return "#ffffff";
            } else {
                return "#000000";
            }
        })
        .attr("fill-opacity", 0.5)
        .attr("stroke", "#000000")
        ;
 
    var bbw = boxes_group.node().getBBox().width
    boxes_group.attr("transform", function(d,i) {
        return "translate(" + [-bbw/2 + sw/2, y] + ")";
    });


    return boxes;
}

make_text(hexs, "hex", 50);
make_text(rgbs, "rgb", 100);
make_text(bins, "bins", 150);
make_dots(binarrs, "binarys", 200);
make_boxes(binarrs, "boxes", 250);

make_boxes(binarrs, "boxes2", 300);
make_dots(binarrs, "binarys2", 380);




        
        

flow.js

var n = 5;         //number of rings
var radius = 123;  //radius interval
var deg = 360;     //angle (in degrees) we will split
var width = 125;    //width of each box
    //, t = 1196     //"time'
var a = 7.9885;
var ntheta = 3.4843;
var speed_factor = 0.56425;
var tfactor = 223;
var opacity = 0.63202;
var stroke_opacity = 0.2;
var stroke_width = 7;
    //, fill_color = "#000000"
var stroke_colors = ["#FFFFFF", "#fff"];
var corners = 0;
var size_scale = 121;
var rfactor = 45;


tributary.duration = 1500;
tributary.nclones = 2;
tributary.clone_opacity = 0.2;

var colors = [
    '#D40067'
    , '#4DA9DF'
    , '#00ff00'
    , '#ff0000'
    
];
var k, color_scale;
//interpolate over multiple colors


var sw = tributary.sw;
var sh = tributary.sh;

var rings = [ ];

var i;
for (i in d3.range(n))
{
    var speed = i * speed_factor;
    rings.push({ 
        radius: radius * i, 
        width: width, 
        speed: speed,
        phase: i
    });
}

tributary.init = function(g) {
    g = g.append("svg:g")
        .attr("transform", "translate(" + sw / 2 + "," + sh / 2 + ")scale(.6)");

    var ring = g.selectAll("g.ring")
        .data(rings)
      .enter().append("svg:g")
        .attr("class", "ring")
        .each(ringEnter);

   
};

tributary.run = function(t, g) {
    var ffts = getFreq();
    freqs = _.map(ffts, function(fft, i) {
        return fft/255;
    });
    /*
    var freqs = [
        ffts[10], ffts[20], ffts[30],ffts[40],
        ffts[100], ffts[200], ffts[300],ffts[400],
        ffts[500], ffts[600], ffts[700],ffts[800],
        ffts[150], ffts[250], ffts[350],ffts[450]
    ]
    */
    /*freqs = _.map(tributary.pads, function(pad) {
        return pad.get();
    });
    */
    var freq = ffts[tributary.findex]/255;
    //t = freqs[0];
    
    var rotate = function(d,i) { 
        var rf = 0;
        if(i < n) {
            rf = d.speed * freqs[i];
        } else {
            rf = d.speed;
        }
      return "rotate(" + (a * rf * t * tfactor) + ")"; 
    };
    var rotate_translate = function(d,i) { 
        var rf = 0;
        if(i < n) {
            rf = d.speed * freqs[i];
        } else {
            rf = d.speed;
        }
        var rad = d.radius + rfactor * freqs[9];
        return "rotate(" + (a * rf * t * tfactor) + ")translate(" + [0, 0] +")"; 
    };

    var color_scale = function(d, i) {
        var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2);
        //var k = deg / theta;
        var num_interps = colors.length -1;
  
        var ord = d3.scale.linear()
            .domain([0, theta])
            .range([0, num_interps]);
  
        var section = parseInt(ord(i),10);
        //console.log("section", section)
        var section_size = theta / num_interps;
        //get the two colors we want to interpolate between
	    var col_range = [colors[section], colors[section+1]];
  
	    var col_scale = d3.scale.linear()
	        .domain([section * section_size, (section+1) * section_size])
	        //.interpolate(d3.interpolateRgb)
	        .interpolate(d3.interpolateHsl)
	        .range(col_range);
  
	    return col_scale(i);
    };


	var rings = g.selectAll("g.ring")
 		.attr("transform", rotate_translate)
		.selectAll("rect")
	    .attr("transform", rotate)
	    //.attr("fill", fill_color)
	    .attr("fill-opacity", opacity)
	    .attr("stroke", function(d,i) {
	        return stroke_colors[i % 2];
	    })
	    .attr("stroke-opacity", stroke_opacity)
	    .attr("stroke-width", stroke_width)
        .attr("rx", function(d,i) {
            return freqs[8] * corners;
        })
        .attr("ry", function(d,i) {
            return freqs[7] * corners;
        })   
        .attr("fill", color_scale)
        .attr("width", function(d,i) {
            return d.width + freqs[1] * size_scale;
        })
        .attr("height", function(d,i) {
            return d.width + freqs[1] * size_scale;
        });
}

function ringEnter(d, i) {
    //split up the circle into squares
    var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2),
    k = deg / theta;


	d3.select(this).selectAll("g.square")
    	  .data(d3.range(theta).map(function() { return d; }))
	    .enter().append("svg:g")
	      .attr("class", "square")
	      .attr("transform", function(d, i) { return "rotate(" + i * k + ")translate(" + d.radius + ")"; })
	    .append("svg:rect")
	      .attr("x", -d.width / 2)
	      .attr("y", -d.width / 2)
	      .attr("width", d.width)
      .attr("height", d.width);
}

geyser.js

       
var n = 5         //number of rings
    , radius = 123  //radius interval
    , deg = 360     //angle (in degrees) we will split
    , width = 125    //width of each box
    //, t = 1196     //"time'
    , a = 7.9885
    , ntheta = 3.4843
    , speed_factor = 0.05454
    , tfactor = 165
    , opacity = 0.63202
    , stroke_opacity = 0.2
    , stroke_width = 7
    //, fill_color = "#000000"
    , stroke_colors = ["#ffffff", "#fff"]
    , corners = -310
    , size_scale = 59
    , rfactor = 20;


tributary.duration = 1500;
tributary.nclones = 2;
tributary.clone_opacity = 0.2;

var colors = [
    '#D40067'
    , '#4DA9DF'
    , '#00ff00'
    , '#ff0000'
    
];
var k, color_scale;
//interpolate over multiple colors


var sw = tributary.sw;
var sh = tributary.sh;

var rings = [ ];

var i;
for (i in d3.range(n))
{
    var speed = i * speed_factor;
    rings.push({ 
        radius: radius*i, 
        width: width, 
        speed: speed,
        phase: i
    });
}

tributary.init = function(g) {
    g = g.append("svg:g")
        .attr("transform", "translate(" + sw / 2 + "," + sh / 2 + ")scale(.6)");

    var ring = g.selectAll("g.ring")
        .data(rings)
      .enter().append("svg:g")
        .attr("class", "ring")
        .each(ringEnter);

   
};

tributary.run = function(t, g) {
    var ffts = getFreq();
    freqs = ffts;
    /*
    var freqs = [
        ffts[10], ffts[20], ffts[30],ffts[40],
        ffts[100], ffts[200], ffts[300],ffts[400],
        ffts[500], ffts[600], ffts[700],ffts[800],
        ffts[150], ffts[250], ffts[350],ffts[450]
    ]
    */
    /*freqs = _.map(tributary.pads, function(pad) {
        return pad.get();
    });
    */
    var freq = ffts[tributary.findex]/255;
    //t = freqs[0];
    
    var rotate = function(d,i) { 
        var rf = 0;
        if(i < n) {
            rf = d.speed * freqs[i];
        } else {
            rf = d.speed;
        }
      return "rotate(" + (a * rf * t * tfactor) + ")"; 
    };
    var rotate_translate = function(d,i) { 
        var rf = 0;
        if(i < n) {
            rf = d.speed * freqs[i]
        } else {
            rf = d.speed
        }
        var rad = d.radius + rfactor * freqs[9] 
            console.log(d, a, rf, t, tfactor, rad)
        return "rotate(" + (a * rf * t * tfactor) + ")translate(" + rad +")"; 
    };

    var color_scale = function(d, i) {
        var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2);
        //var k = deg / theta;
        var num_interps = colors.length -1
  
        var ord = d3.scale.linear()
            .domain([0, theta])
            .range([0, num_interps])
  
        var section = parseInt(ord(i))
        //console.log("section", section)
        var section_size = theta / num_interps
        //get the two colors we want to interpolate between
	    var col_range = [colors[section], colors[section+1]]
  
	    var col_scale = d3.scale.linear()
	        .domain([section * section_size, (section+1) * section_size])
	        //.interpolate(d3.interpolateRgb)
	        .interpolate(d3.interpolateHsl)
	        .range(col_range)
  
	    return col_scale(i)
    }    


	var rings = g.selectAll("g.ring")
 		.attr("transform", rotate_translate)
		.selectAll("rect")
	    .attr("transform", rotate)
	    //.attr("fill", fill_color)
	    .attr("fill-opacity", opacity)
	    .attr("stroke", function(d,i) {
	        return stroke_colors[i % 2];
	    })
	    .attr("stroke-opacity", stroke_opacity)
	    .attr("stroke-width", stroke_width)
    	.attr("rx", function(d,i) {
    	    return freqs[8] * corners;
    	})
    	.attr("ry", function(d,i) {
            return freqs[7] * corners;
    	})   
        .attr("fill", color_scale)
        .attr("width", function(d,i) {
            return d.width + freqs[1] * size_scale
        })
        .attr("height", function(d,i) {
            return d.width + freqs[1] * size_scale
        })
}

function ringEnter(d, i) {
    //split up the circle into squares
    var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2),
    k = deg / theta;


	d3.select(this).selectAll("g.square")
    	  .data(d3.range(theta).map(function() { return d; }))
	    .enter().append("svg:g")
	      .attr("class", "square")
	      .attr("transform", function(d, i) { return "rotate(" + i * k + ")translate(" + d.radius + ")"; })
	    .append("svg:rect")
	      .attr("x", -d.width / 2)
	      .attr("y", -d.width / 2)
	      .attr("width", d.width)
      .attr("height", d.width);
}

icon.js

var n = 13         //number of rings
    , radius = 70  //radius interval
    , deg = 360     //angle (in degrees) we will split
    , width = 62    //width of each box
    , t = 13     //"time'
    , a = 19.72
    , ntheta = 2
    , speed_factor = 0.0175

    , opacity = .5
    , stroke_opacity = 0.504
    , stroke_width = 16.08
    , fill_color = "#000000"
    , stroke_colors = ["#ffffff", "#000000"]
    , corners = 21




var sw = parseInt(d3.select("svg").style("width"))
//make the sin waves extend past the width a little
sw += .1 * sw
var sh = parseInt(d3.select("svg").style("height"))


var rings = [ ];

for (i in d3.range(n))
{
    var speed = i * speed_factor
    rings.push({ 
        radius: radius*i, 
        width: width, 
        speed: speed,
        phase: i
    })
}

var svg = d3.select("svg")

svg.append("rect")
    .attr("width", sw)
    .attr("height", sh)
    .attr("fill", "#888888")


svg = svg.append("svg:g")
    .attr("transform", "translate(" + sw / 2 + "," + sh / 2 + ")scale(.6)");

var ring = svg.selectAll("g")
    .data(rings)
  .enter().append("svg:g")
    .attr("class", "ring")
    .each(ringEnter);


var updateRing = function(elapsed) {
  rotate = function(d,i) { 
    return "rotate(" + (a * d.speed * elapsed) + ")"; 
  };

  var rings = svg.selectAll("g.ring")
      .attr("transform", rotate)
  var cells = rings
    .selectAll("g.square")
    
  var rects = cells
    .select("rect")
      .attr("transform", rotate)  
      .attr("fill", fill_color)
      .attr("fill-opacity", opacity)
      .attr("stroke", function(d,i) {
          return stroke_colors[i % 2];
      })
      .attr("stroke-opacity", stroke_opacity)
      .attr("stroke-width", stroke_width)
      .attr("rx", corners)
      .attr("ry", corners)



}
function ringEnter(d, i) {
    //split up the circle into squares
    var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2),
    k = deg / theta;
    var cells = d3.select(this).selectAll("g")
      .data(d3.range(theta).map(function() { return d; }))
    .enter().append("svg:g")
      .attr("class", "square")
      .attr("transform", function(_, i) { return "rotate(" + i * k + ")translate(" + d.radius + ")"; })
    var rects = cells
    .append("svg:rect")
        .attr("x", -d.width / 2)
        .attr("y", -d.width / 2)
        .attr("width", d.width)
        .attr("height", d.width);
    var icons = cells
    .append("svg:use")
     .attr("xlink:href", "#manicon")
        .attr("x", -d.width / 2)
        .attr("y", -d.width / 2)
        .attr("width", d.width)
        .attr("height", d.width);
}



//Append the man and the woman icons (from thenounproject.com)
var defs = svg.append("defs")
var man = defs.append("g")
    .attr("id", "man")
man.append("circle")
    .attr("cx", 18.118)
    .attr("cy", 8.159)
    .attr("r", 8.159)
man.append("path")
    .attr("d", "M8.472,95.426c0,2.524,2.05,4.574,4.574,4.574c2.529,0,4.576-2.05,4.576-4.574l0.004-38.374h2.037L19.65,95.426\nc0,2.524,2.048,4.574,4.574,4.574s4.573-2.05,4.573-4.574l0.02-66.158h2.006v24.38c0,4.905,6.398,4.905,6.384,0v-24.9\nc0-5.418-3.184-10.728-9.523-10.728L9.396,18.012C3.619,18.012,0,22.722,0,28.599v25.05c0,4.869,6.433,4.869,6.433,0v-24.38h2.048\nL8.472,95.426z")

updateRing(t)

    /*
                <g id="woman">
                    <circle cx="22.925" cy="8.164" r="8.164"/>
                    <path d="M29.775,18.047c5.697,0,8.008,4.695,8.871,7.283l6.999,23.008c1.396,4.949-4.899,6.998-6.4,2.175l-6.298-21.125h-1.833
                        L42.03,66.966H31.973v29.296c0,4.996-7.514,4.971-7.514,0V66.774h-3.063l0.005,29.447c0,5.037-7.545,5.037-7.545,0l-0.002-29.255
                        H3.765l10.831-37.578h-1.694l-6.299,21.2c-1.5,4.621-7.85,2.724-6.396-2.228L7.2,25.33c0.749-2.625,3.045-7.283,8.795-7.283H29.775z
                        "/>
                </g>
                */

planets.js

var planets = [
{
    name: "mercury"
    ,size: 4900
    ,dist_avg: 36
    ,dist_min: 28.6
    ,dist_max: 43.4
    ,color: "#909090"
}
,{
    name: "venus"
    ,size: 12100
    ,dist_avg: 67
    ,dist_min: 67
    ,dist_max: 68
    ,color: "#C05B1C"
}
,{
    name: "earth"
    ,size: 12800
    ,dist_avg: 93
    ,dist_min: 91
    ,dist_max: 94.5
    ,color: "#5B89B4"
}
,{
    name: "mars"
    ,size: 6800
    ,dist_avg: 142
    ,dist_min: 128
    ,dist_max: 155
    ,color: "#C8552A"
}
,{
    name: "jupiter"
    ,size: 143000
    ,dist_avg: 484
    ,dist_min: 460
    ,dist_max: 508
    ,color: "#8D9482"
}
,{
    name: "saturn"
    ,size: 125000
    ,dist_avg: 891
    ,dist_min: 840
    ,dist_max: 938
    ,color: "#DACD5F"
}
,{
    name: "uranus"
    ,size: 51100
    ,dist_avg: 1790
    ,dist_min: 1700
    ,dist_max: 1870
    ,color: "#7C929C"
}
,{
    name: "neptune"
    ,size: 49500
    ,dist_avg: 2800
    ,dist_min: 2770
    ,dist_max: 2820
    ,color: "#5285D7"
}
];

//get the width and height of the screen so we can draw inside of it
var sw = parseInt(d3.select("svg").style("width"), 10);
var sh = parseInt(d3.select("svg").style("height"), 10);

//set the sun's position to be in the center of the screen
var sun = {x: sw/2, y: sh/2};

//we want to scale the distance of the planets by some number so
//that they fit inside of our screen (we use 1million miles for the distance)
var dist_radius = 261;
//we want to scale the size of the sun and the planets so that they are visible on the screen.
//this means that they don't match the scale of the distance
var size_radius = 110;
//we know the size of the sun and its bigger than any planet
var size_max = 695500;
var size_scale = d3.scale.linear()
  .domain([0, size_max])
  .range([0, size_radius]);

//get the maximum distance of a planet
var dist_max = d3.max(planets, function(d) {
    return d.dist_avg;
});
//we use a log scale because the planets are so spread out
var dist_scale = d3.scale.log()
    .domain([1, dist_max])
    .range([0, dist_radius]);
        
var sun_circle = svg.append("circle")
    .attr("r", size_scale(695500))
    .attr("cx", sun.x)
    .attr("cy", sun.y)
    .attr("fill", "#FFFF1D");

var gplanets  = svg.selectAll("g.planet")
    .data(planets)
    .enter()
    .append("g")
    .classed("planet", true)
    .attr("transform", function(d,i) {
      var dp = i/planets.length;
      var theta = dp * Math.PI * 2;
      var radius = dist_scale(d.dist_avg);
      var x = Math.cos(theta) * radius;
      var y = Math.sin(theta) * radius;
      return "translate(" + [sun.x + x,sun.y + y] + ")";
    })
    ;
var circles = gplanets.append("circle")
    .attr("r", function(d,i) {
      var radius = size_scale(d.size);
      return radius;
    })
    /*
    .attr("cx", function(d,i) {
      //divide up 2*pi (full circle) into equal parts
      var dp = i/planets.length
      var theta = dp * Math.PI * 2;
      var radius = dist_scale(d.dist_avg)
      var x = Math.cos(theta) * radius;
      return sun.x + x + offset.x;
    })

    .attr("cy", function(d,i) {
		var dp = i/planets.length
      var theta = dp * Math.PI * 2;
     var radius = dist_scale(d.dist_avg)
      var y = Math.sin(theta) * radius;
      return sun.y + y + offset.y;
    })
*/
    .attr("fill", function(d,i) {
      return d.color;
    });
    
var labels = gplanets.append("text")
    .text(function(d,i) {
      return d.name;
    })
    .attr("x", 25)
    .attr("y", 4);

    
    
    
    
    

    
    
    
    
    
    

reptile_weave.js

var w = tributary.g_width;
var h = tributary.g_height;
var n = 20;            //number of vertical bars
var spacing = 29;      //spacing between bars
var bar_height = w + 231;
var bar_width = 2;    //width in pixels of each bar
var rot_a = 0;
var rot_b = 90;
var opacity = 0.5;


var color = d3.scale.category20();
//var color = d3.scale.category20b()
//var color = d3.scale.category20c()
d3.select("svg").style("background-color", "#000000");



var make_bars = function(clazz, rot, height) {
    var data = d3.range(0, n)
    //var sw = parseInt(d3.select("svg").style("width"))
    //var sh = parseInt(d3.select("svg").style("height"))
    
    var gg = g.append("g")
        .attr("class", clazz)
        .attr("transform", "rotate(" + rot + ","+[w/2,h/2] +")")
        
    var bars = gg.selectAll("rect."+clazz)
        .data(data)
        .enter()
        .append("rect")
        .attr("class", clazz)

    bars.attr("width", bar_width)
        .attr("height", bar_height)
        .attr("fill", function(d,i) { return color(i) })
        .attr("opacity", opacity)
        .attr("transform", function(d,i) { 
            //each bar is spaced evenly, and then centered
            return "translate(" + [i*spacing - bar_width/2, -h] + ")";
        })
}


make_bars("a", rot_a, w)
make_bars("b", rot_b, w)

reptile_weave2.js

var w = tributary.g_width;
var h = tributary.g_height;
var n = 10;            //number of vertical bars
var spacing = 11.88;      //spacing between bars
var bar_height = w + 300;
var bar_width = 9.04;    //width in pixels of each bar
var rot_a = 32;
var rot_b = 302;
var opacity = 0.95577;
d3.select("svg").style("background-color", "#000000");


var color = d3.scale.category20c();
//var color = d3.scale.category20b()
//var color = d3.scale.category20c()

//var svg = g.attr("transform", "translate(-10, -10)")
//g.append("rect").attr("width", tributary.g_width).attr("height", tributary.g_height)



var make_bars = function(clazz, rot, height) {
    var data = d3.range(0, n)
    //var sw = parseInt(d3.select("svg").style("width"))
    //var sh = parseInt(d3.select("svg").style("height"))
    
    var gg = g.append("g")
        .attr("class", clazz)
        .attr("transform", "rotate(" + rot + ","+[w/2,h/2] +")")
        
    var bars = gg.selectAll("rect."+clazz)
        .data(data)
        .enter()
        .append("rect")
        .attr("class", clazz)

    bars.attr("width", bar_width)
        .attr("height", bar_height)
        .attr("fill", function(d,i) { return color(i) })
        .attr("opacity", opacity)
        .attr("transform", function(d,i) { 
            //each bar is spaced evenly, and then centered
            return "translate(" + [i*spacing - bar_width/2, -bar_height/2] + ")";
        })
}


make_bars("a", rot_a, w)
make_bars("b", rot_b, w)

shapes.js

//http://www.w3.org/TR/SVG/shapes.html
//http://alignedleft.com/tutorials/d3/an-svg-primer/

var svg = d3.select("svg");
var rect = svg.append("rect")
    .attr("x", 10)
    .attr("y", 10)
    .attr("width", 10)
    .attr("height", 100)
    .attr("rx", 5)
    .attr("ry", 5)
    .attr("fill", "#000")
    .attr("opacity", 1.0);

var circle = svg.append("circle")
    .attr("cx", 250)
    .attr("cy", 60)
    .attr("r", 50)
    .attr("fill", "#000000")
    .attr("stroke", "#0000aa")
    .attr("stroke-width", 3);

var ellipse = svg.append("ellipse")
    .attr("cx", 450)
    .attr("cy", 60)
    .attr("rx", 40)
    .attr("ry", 70)
    .attr("fill", "#ffff00");

var line = svg.append("line")
    .attr("x1", 10)
    .attr("y1", 150)
    .attr("x2", 100)
    .attr("y2", 150)
    .attr("stroke", "#000000")
    .attr("stroke-width", 3);
    
var text = svg.append("text")
    .attr("x", 250)
    .attr("y", 160)
    .attr("font", "Helvetica")
    .attr("font-size", 24)
    .attr("fill", "#ff0000")
    .text("Hello World");
    

sinwaves.js

//Try changing all these parameters
//Layout properties
var
     n = 35
    , m = 30
    , spacing = 21
    , opacity = 0.8
    , stroke_width = 15

//Sin wave function
//y = amplitude * sin( omega * theta + phase)
var amplitude = 21
    , theta = Math.PI * 3.5 
    , omega = -0.1
    , phase = -0.5


var colors = [
    '#D40067'
    , '#4DA9DF'
    , '#00ff00'
    , '#ff0000'
    
]

//interpolate over multiple colors
var color_scale = function(i) {
    var num_interps = colors.length -1
    
    var ord = d3.scale.linear()
        .domain([0, n])
        .range([0, num_interps])
    
    var section = parseInt(ord(i))
    //console.log("section", section)
    var section_size = n / num_interps
    //get the two colors we want to interpolate between
    var col_range = [colors[section], colors[section+1]]
    
    var col_scale = d3.scale.linear()
        .domain([section * section_size, (section+1) * section_size])
        //.interpolate(d3.interpolateRgb)
        .interpolate(d3.interpolateHsl)
        .range(col_range)
    
    return col_scale(i)
    
}
/*
var color = d3.scale.linear()
    .domain([0, n])
    //.interpolate(d3.interpolateRgb)
    .interpolate(d3.interpolateHsl)
    .range(['#D40067', '#4DA9DF'])
*/    
var color = color_scale



var sw = parseInt(d3.select("svg").style("width"))
//make the sin waves extend past the width a little
sw += .1 * sw
var sh = parseInt(d3.select("svg").style("height"))


var lines = [ ];
for (i in d3.range(n)) {

    var data = d3.range(m) 
    lines.push({ 
        index: i,
        data: data
    })
}

var xscale = d3.scale.linear()
    .domain([0, m])
    .range([-.1*sw, sw])

function line_maker( data ) {
    var freq = omega * data.index
    var svgline = d3.svg.line()
        .x(function(d,i) {
            return xscale(d);
        })
        .y(function(d,i) {
            var th = d/m * theta
            var ph = (n-data.index) * phase
            var y = amplitude * Math.sin(freq * th + ph );
            return y
        })
        .interpolate("basis")
        //.interpolate("linear")
    return svgline(data.data);
}

function lineenter(d, i) {
    d3.select(this).selectAll("path.path")
        .data([d])
        .enter()
    .append("svg:path")
        .attr("class", "path")
        .attr("stroke-width", stroke_width)
        //.attr("stroke-width", function(e,i) { return e.width;})
        .attr("stroke", "#fff")
        .attr("fill", "none")
    update_spacing()
}

function update_spacing()
{
    var th = spacing * n;
    var hscale = d3.scale.linear()
        .domain([0, n])
        .range([0, sh])
    d3.selectAll("g.line path")
        .attr("transform", function(d, i) { 
            //return "translate(" + [0, th - spacing * d.index] + ")"; 
            return "translate(" + [0, 10+sh/2 + th / 2 - spacing * d.index] + ")"; 
        })
}

var svg = d3.select("svg")
    .attr("width", sw)
    .attr("height", sh)
  .append("svg:g")

var line = svg.selectAll("g.line")
    .data(lines)
  .enter().append("svg:g")
    .attr("class", "line")
    .each(lineenter);




/*
var opacity = d3.scale.linear()
    .domain([0, n])
    .range([1, .4])
*/
  
d3.selectAll("g.line path") 
    .attr("d", function(d,i) {
        return line_maker(d) 
    })
    .attr("stroke", function(d,i) { return color(d.index);})
    .attr("opacity", opacity);

sinwaves_datgui.js

//Try changing all these parameters
//Layout properties
var n = 35;
var m = 30;
trib.spacing = 21;
trib.opacity = 0.8; trib_options.opacity = {"min":0, "max":1};
trib.stroke_width = 0.2;

//Sin wave function
//y = amplitude * sin( omega * theta + phase)
trib.amplitude = 21;
trib.theta = Math.PI * 3.5;
trib.omega = -0.1;
trib.phase = 0.2;


var colors = [
    '#D40067'
    , '#4DA9DF'
    , '#00ff00'
    , '#ff0000'
    
]

//interpolate over multiple colors
var color_scale = function(i) {
    var num_interps = colors.length -1
    
    var ord = d3.scale.linear()
        .domain([0, n])
        .range([0, num_interps])
    
    var section = parseInt(ord(i))
    //console.log("section", section)
    var section_size = n / num_interps
    //get the two colors we want to interpolate between
    var col_range = [colors[section], colors[section+1]]
    
    var col_scale = d3.scale.linear()
        .domain([section * section_size, (section+1) * section_size])
        //.interpolate(d3.interpolateRgb)
        .interpolate(d3.interpolateHsl)
        .range(col_range)
    
    return col_scale(i)
    
}
/*
var color = d3.scale.linear()
    .domain([0, n])
    //.interpolate(d3.interpolateRgb)
    .interpolate(d3.interpolateHsl)
    .range(['#D40067', '#4DA9DF'])
*/    
var color = color_scale



var sw = parseInt(d3.select("svg").style("width"))
//make the sin waves extend past the width a little
sw += .1 * sw
var sh = parseInt(d3.select("svg").style("height"))


var lines = [ ];
for (i in d3.range(n)) {

    var data = d3.range(m) 
    lines.push({ 
        index: i,
        data: data
    })
}

var xscale = d3.scale.linear()
    .domain([0, m])
    .range([-.1*sw, sw])

function line_maker( data ) {
    var freq = trib.omega * data.index
    var svgline = d3.svg.line()
        .x(function(d,i) {
            return xscale(d);
        })
        .y(function(d,i) {
            var th = d/m * trib.theta
            var ph = (n-data.index) * trib.phase
            var y = trib.amplitude * Math.sin(freq * th + ph );
            return y
        })
        .interpolate("basis")
        //.interpolate("linear")
    return svgline(data.data);
}

function lineenter(d, i) {
    d3.select(this).selectAll("path.path")
        .data([d])
        .enter()
    .append("svg:path")
        .attr("class", "path")
        .attr("stroke-width", trib.stroke_width)
        //.attr("stroke-width", function(e,i) { return e.width;})
        .attr("stroke", "#fff")
        .attr("fill", "none")
    update_spacing()
}

function update_spacing()
{
    var th = trib.spacing * n;
    var hscale = d3.scale.linear()
        .domain([0, n])
        .range([0, sh])
    d3.selectAll("g.line path")
        .attr("transform", function(d, i) { 
            //return "translate(" + [0, th - spacing * d.index] + ")"; 
            return "translate(" + [0, 10+sh/2 + th / 2 - trib.spacing * d.index] + ")"; 
        })
}

var svg = d3.select("svg")
    .attr("width", sw)
    .attr("height", sh)
  .append("svg:g")

var line = svg.selectAll("g.line")
    .data(lines)
  .enter().append("svg:g")
    .attr("class", "line")
    .each(lineenter);




/*
var opacity = d3.scale.linear()
    .domain([0, n])
    .range([1, .4])
*/
  
d3.selectAll("g.line path") 
    .attr("d", function(d,i) {
        return line_maker(d) 
    })
    .attr("stroke", function(d,i) { return color(d.index);})
    .attr("opacity", trib.opacity);

squarecircle.js

var start = Date.now()
    , n = 6         //number of rings
    , radius = 70  //radius interval
    , deg = 360     //angle (in degrees) we will split
    , width = 21    //width of each box
    , t = 1337     //"time'
    , a = 1
    , ntheta = 2
    , speed_factor = 0.02917

    , opacity = 0.01
    , stroke_opacity = 0.9
    , stroke_width = 2
    , fill_color = "#000000"
    , stroke_colors = ["#ffffff", "#000000"]
    , corners = 0




var sw = parseInt(d3.select("svg").style("width"))
//make the sin waves extend past the width a little
sw += .1 * sw
var sh = parseInt(d3.select("svg").style("height"))


var rings = [ ];

for (i in d3.range(n))
{
    var speed = i * speed_factor
    rings.push({ 
        radius: radius*i, 
        width: width, 
        speed: speed,
        phase: i
    })
}

var svg = d3.select("svg")

svg.append("rect")
    .attr("width", sw)
    .attr("height", sh)
    .attr("fill", "#888888")


svg = svg.append("svg:g")
    .attr("transform", "translate(" + sw / 2 + "," + sh / 2 + ")scale(.6)");

var ring = svg.selectAll("g")
    .data(rings)
  .enter().append("svg:g")
    .attr("class", "ring")
    .each(ringEnter);


var updateRing = function(elapsed) {
  rotate = function(d,i) { 
    return "rotate(" + (a * d.speed * elapsed) + ")"; 
  };

  var rings = svg.selectAll("g.ring")
      .attr("transform", rotate)
    .selectAll("rect")
      .attr("transform", rotate)
      .attr("fill", fill_color)
      .attr("fill-opacity", opacity)
      .attr("stroke", function(d,i) {
          return stroke_colors[i % 2];
      })
      .attr("stroke-opacity", stroke_opacity)
      .attr("stroke-width", stroke_width)
      .attr("rx", corners)
      .attr("ry", corners)



}
function ringEnter(d, i) {
    //split up the circle into squares
    var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2),
    k = deg / theta;
  d3.select(this).selectAll("g")
      .data(d3.range(theta).map(function() { return d; }))
    .enter().append("svg:g")
      .attr("class", "square")
      .attr("transform", function(_, i) { return "rotate(" + i * k + ")translate(" + d.radius + ")"; })
    .append("svg:rect")
      .attr("x", -d.width / 2)
      .attr("y", -d.width / 2)
      .attr("width", d.width)
      .attr("height", d.width);
}
updateRing(t)

test.html

<html>
    <head>
        <script type="text/javascript" src="../advd3/d3/d3.v2.js"></script>
    </head>
    <body>
        <svg></svg>
        <script type="text/javascript" src="warp.js"></script>
    </body>
</html>

warp.js

//http://stackoverflow.com/questions/5055625/image-warping-bulge-effect-algorithm

//Try changing all these parameters
//Layout properties
var n = 15            

    , k = 0.94           //amount of warping, try positive numbers around 1
    , spacing = 8       //spacing between squares
    , color = "#D40067"
    , opacity = 0.9
    , stroke_color = "#4DA9DF"
    , stroke_opacity = 0.9
    , stroke_width = 3
    , corners = 5
    , offset = 40



//take in normalized coords (from 0 to 1)
function warp(x0, y0, x1, y1)
{
    var r = Math.sqrt( (x0 - x1)*(x0 - x1) + (y0 - y1)*(y0 - y1) )
    var a = Math.atan2(y0 - y1, x0 - x1)
    var rn = Math.pow(r, k)
    var nx =  rn * Math.cos(a) + x1
    var ny = rn * Math.sin(a) + y1
    return [nx, ny]
}

//pass in the center point we want to warp around
function warp_boxes(x1, y1)
{
    boxes = d3.selectAll("g.box")
        .attr("transform", function(d,i)
        {
            x0 = x(d) / n;
            y0 = y(d) / n;
            xy = warp(x0, y0, x1, y1);
            //console.log("xy", x0,y0, xy);
            xx = xy[0] * n * (bw+spacing)
            yy = xy[1] * n * (bh+spacing)
            return "translate(" + [xx,yy] + ")"
        })
}

function x(i) {
   return (i%n)
}
function y(i) { 
    return Math.floor(i/n)
}

function make_unit_chart(){
    var data = d3.range(n*n);

    var sw = parseInt(d3.select("svg").style("width")) + offset
    var sh = parseInt(d3.select("svg").style("height")) + offset

    var canvas = d3.select("svg")
        .append("svg:g")
            .attr("id", "graph");

    bw = (sw - spacing*n) / n 
    bh = (sh - spacing*n) / n
    
    canvas.append("svg:rect")
        .attr("class", "bgrect")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("fill", "#ffffff")

    chart = canvas.append("svg:g")
        .attr("class", "chart")
        .attr("transform", "translate(" + [-offset/2, -offset/2] + ")")

    rects = chart.selectAll("g.box")
        .data(data)
    	.enter()
            .append("svg:g")
            .attr("class", "box")
            .attr("transform", function(d,i) {
                return "translate(" + [x(d)*(bw+spacing), y(d)*(bh+spacing)] + ")"
            })
            .attr("pointer-events", "all")


    rects
        .append("svg:rect")
            .attr("fill", function(d,i){
                return color;
            })
            .attr("stroke", function(d,i){
                return stroke_color;
            })
            .attr("stroke-opacity", function(d,i) {
                return stroke_opacity;
            })
            .attr("stroke-width", function(d,i) {
                return stroke_width;
            })
            .attr("rx", function(d,i) {
                return corners;
            })
             .attr("ry", function(d,i) {
                return corners;
            })
            .attr("class", "rowrect")
            .attr("width", bw)
            .attr("height", bh)
            .attr("opacity", opacity)

    canvas.append("svg:rect")
        .attr("pointer-events", "all")
        .attr("width", sw)
        .attr("height", sh)
        .attr("fill-opacity", 0)
        .on("mousemove", function(d,i) {
            //console.log("this", this, d3.svg.mouse(this))
            x1 = d3.svg.mouse(this)[0] / sw
            y1 = d3.svg.mouse(this)[1] / sh
            warp_boxes(x1, y1)
        })
        .on("mouseout", function(d,i) {
            //set the bulge back to center of canvas
            //these coordinates go from 0 - 1
            x1 = .5
            y1 = .5
            warp_boxes(x1, y1)

        })
        var x1 = .5
        var y1 = .5
        warp_boxes(x1, y1)



};


make_unit_chart()

weave.js

//Try changing all these parameters
//Layout properties
var h = 1000            //height of the bars (we make it a lot bigger than canvas so we can rotate)
    , n = 30            //number of vertical bars
    , m = 30            //number of horizontal bars
    , spacing = 30      //spacing between bars
    , bar_width = 10    //width in pixels of each bar
    , rot_a = 0
    , rot_b = 90
    , opacity = 0.8


var color = d3.scale.category20()
//var color = d3.scale.category20b()
//var color = d3.scale.category20c()

var svg = d3.select("svg")
    .append("g")
        .attr("transform", "translate(-10, -10)")


var make_bars = function(clazz, rot) {
    var data = d3.range(0, n)
    var sw = parseInt(d3.select("svg").style("width"))
    var sh = parseInt(d3.select("svg").style("height"))
    
    var g = svg.append("g")
        .attr("class", clazz)
        .attr("transform", "rotate(" + rot + ","+[sw/2,sh/2] +")")
        
    var bars = g.selectAll("rect."+clazz)
        .data(data)
        .enter()
        .append("rect")
        .attr("class", clazz)

    bars.attr("width", bar_width)
        .attr("height", 2*h)
        .attr("fill", function(d,i) { return color(i) })
        .attr("opacity", opacity)
        .attr("transform", function(d,i) { 
            //each bar is spaced evenly, and then centered
            return "translate(" + [i*spacing - bar_width/2, -h] + ")";
        })
}


make_bars("a", rot_a)
make_bars("b", rot_b)