Tributary inlet

_.md

[ Launch: Tributary inlet ] 5102056 by helixmat

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var color = "#2EDF7C"

    
    
    
    
//HERE BE DRAGONS...    
    
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(d2.5.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);

 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);




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 * 80;
        })
        .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;
}


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