Venn Diagrams

_.md

[ Launch Inlet ]
Gist #4246195 [ Launch Inlet ]
Gist #2958199

config.json

{"description":"Venn Diagrams","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":false,"vim":true,"emacs":false,"fontSize":18},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.4876175548589341,"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,"hidepanel":false}

inlet.js

var color = "#FFffff"


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

console.log(binarrs);

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_dots(binarrs, "binarys", 200);



function make_dots(binary, clazz, y) {
    var r = 19;
    var spacer = r + 10;
    var between = 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*between, 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;
}