tributary-bozar

_.md

[ Launch: tributary-transition ] 6106999 by jandot

config.json

{"description":"tributary-bozar","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"genotypes.csv":{"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,"thumbnail":"http://i.imgur.com/9vW3jIV.png"}

genotypes.csv

genotype
A
G
Y
R
G
G
C
G
A
A
T
A
C
G
C
A
G
C
G
C
G
A
C
Y
G
C
C
Y
T
A
T
C
A
A
A
A
C
T
T
C
Y
C
C
G
C
C
T
Y
R
G
Y
Y
G
G
C
Y
G
R
C
Y
G
R
G
Y
G
R
R
C
T
G
G
T
C
A
G
T
G
C
T
R
G
T
C
R
Y
Y
Y
R
A
Y
C
Y
A
A
G
C
Y
A
C
Y
Y
R
K
Y
G
G
C
C
C
C
C
R
R
A
C
R
R
Y
G
Y
R
T
Y
R
G
G
Y
R
C
M
G
C
R
R
T
R
Y
Y
A
G
T
G
T
Y
M
Y
C
C
G
R
R
Y
Y
R
A
A
R
G
Y
Y
M
R
Y
R
G
Y
Y
C
K
Y
Y
G
Y
M
Y
Y
A
Y
Y
Y
C
Y
Y
G
G
C
A
T
G
G
T
M
Y
C
R
C
Y
G
C
R
G
R
Y
Y
Y
Y
Y
R
C
Y
G
R
T
C
T
C
T
Y
Y
C
G
A
R
G
G
Y
R
K
A
C
T
R
R
C
K
G
Y
T
A
T
G
R
Y
C
C
R
Y
Y
T
G
G
A
A
K
T
C
C
C
G
Y
Y
T
C
R
G
G
G
R
K
R
M
C
C
A
G
G
A
R
T
R
R
K
R
A
T
Y
R
T
G
T
Y
Y
Y
R
R
Y
Y
C
A
R
Y
G
K
A
R
Y
R
R
C
C
R
Y
R
R
T
Y
G
G
A
C
Y
G
G
Y
Y
C
G
C
T
R
G
C
C
C
C
C
R
G
T
T
T
C
T
G
T
T
C
G
T
G
T
A
C
G
G
G
K
Y
G
G
G
R
Y
R
Y
C
G
C
Y
C
Y
T
A
C
R
C
Y
R
T
C
T
G
Y
G
C
G
G
T
T
T
G
G
R
C
Y
C
K
C
M
R
R
A
C
T
C
C
G
Y
R
R
A
Y
R
T
C
G
C
R
G
M
T
C
M
Y
C
Y
K
G
Y
R
C
R
G
Y
R
R
A
G
Y
M
R
R
K
Y
R
Y
Y
A
K
G
G
T
T
T
T
T
A
C
T
T
T
T
G
G
C
Y
G
Y
R
R
R
T
C
A
C
G
A
C
C
A
C
G
C
A
T
C
G
A
K
M
M
C
A
T
G
C
Y
Y
T
R
R
G
G
G
Y
R
T
K
R
C
R
C
T
C
T
T
C
G
A
G
G
A
C
A
C

inlet.js

// Check out the tutorial at http://enjalot.github.io/dot-enter/

var svg = d3.select("svg");

var data1 = tributary.genotypes;

var radius = 2;
var diameter = radius * 2;

var colours = d3.scale.category10();
var colour = function(d) {
  if (d.genotype == "A") {
    return colours(0);
  } else if (d.genotype == "C") {
    return colours(1);
  } else if (d.genotype == "G") {
    return colours(2);
  } else if (d.genotype == "T") {
    return colours(3);
  } else {
    return colours(4);
  }
}

var state = "linear";
var differentOpacity = function(d) { // opacity depends on heterozygous vs homozygous
        if (["A","C","G","T"].indexOf(d.genotype) > -1) {
          return 0.1;
        } else {
          return 1;
        }
      }

var linearLayout = function(d,i) {
        var x = 100 + (i%100) * diameter;
        var y = 100 + Math.floor(i/100) * diameter;
        return "translate(" + [x,y] + ")"
}

var polarLayout = function(d,i) {
		var circleRadius = 2*(525*radius)/(2*Math.PI)
        var x = circleRadius + circleRadius*Math.cos(i*((2*Math.PI)/525))
        var y = circleRadius + circleRadius*Math.sin(i*((2*Math.PI)/525))
        return "translate(" + [x, y] + ")"
}

var spikeyLayout = function(d,i) {
		var circleRadius = 2*(525*radius)/(2*Math.PI)
        var delta;
		if (["A","C","G","T"].indexOf(d.genotype) > -1) {
			delta = -5;
		} else {
			delta = 5;
		}
        var x = circleRadius + (circleRadius+delta)*Math.cos(i*((2*Math.PI)/525))
        var y = circleRadius + (circleRadius+delta)*Math.sin(i*((2*Math.PI)/525))
        return "translate(" + [x, y] + ")"
}

var groups = svg.selectAll("g")
	.data(data1)
	.enter()
	.append("g")
	.attr("transform", function(d,i) { return linearLayout(d,i)})
	.classed("glyphs", true)
	.on("mouseover", function() {
		svg.selectAll("g.glyphs")
			.transition()
			.duration(100)
			.attr({
				opacity: differentOpacity
			});
      })
	.on("mouseout", function() {
		svg.selectAll("g.glyphs")
			.transition()
			.duration(100)
			.attr({
				opacity: 0.5
			});
      });

var circles = groups.append("circle")
	.attr({
      cx: 0,
      cy: 0,
      r: radius,
      fill: function(d,i) {
        return colour(d);
      },
      opacity: 0.5
    });


var button = svg.append("rect")
	.attr({
      x: 400,
      y: 400,
      width: 100,
      height: 35,
      fill: "#B6B6B6",
      stroke: "#3B3B3B"
    })
	.on("click", function() {
      if ( display === "linear" ) {
			svg.selectAll("g.glyphs")
				.transition()
				.duration(1000)
				.attr({
					transform: function(d,i) { return polarLayout(d,i) }
				})
            display = "polar";
      } else if ( display === "polar" ) {
			svg.selectAll("g.glyphs")
				.transition()
				.duration(1000)
				.attr({
					transform: function(d,i) { return spikeyLayout(d,i) }
				})
            display = "spikey";
      } else {
			svg.selectAll("g.glyphs")
				.transition()
				.duration(1000)
				.attr({
					transform: function(d,i) { return linearLayout(d,i) }
				})
            display = "linear";
      }
	})