sv-graph

_.md

[ Launch: sv-graph ] 6114799 by jandot

config.json

{"description":"sv-graph","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}},"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/ystzXGQ.png"}

inlet.js

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

var chrLength = 60;

var data1 = [
  {start: 1, stop: 10, kind: "normal"},
  {start: 11, stop: 20, kind: "deletion"},
  {start: 21, stop: 40, kind: "normal"},
  {start: 41, stop: 50, kind: "deletion"},
  {start: 51, stop: 60, kind: "normal"}
  ];

var refStart = function(d) {
  return d.start
}
var segmentLength = function(d) {
  return (d.stop - d.start + 1)
}
var caseStart = function(d) {
  return d.start
}


var colours = d3.scale.category10();
var colour = function(d) {
  if ( d.kind == "normal" ) {
    return colours(0)
  } else if ( d.kind == "deletion" ) {
    return colours(1)
  } else {
    return colours(2)
  }
}

var segments = svg.selectAll("line")
	.data(data1)
	.enter()
	.append("line")
	.attr({
      "x1": function(d) { return 10*refStart(d) },
      "y1": 50,
      "x2": function(d) { return 10*(refStart(d) + segmentLength(d)) },
      "y2": 50,
      stroke: function(d) { return colour(d) },
      "stroke-width": 5,
      opacity: 0.5
	})

d3.select("body")
	.on("keydown", function() {
      if (d3.event.keyCode == 192) { // `~ key
		svg.selectAll("line")
			.transition()
			.duration(1000)
        .attr({transform: "translate(0,100)"
         })
      }
    })