antismash_talk.js

   1 $(function() {
   2   // Deck initialization
   3   $.deck('.slide');
   4
   5   var cell_svg = d3.select("#cell-canvas")
   6     .append("svg:svg")
   7       .attr("class", "cell-drawing")
   8       .attr("width", 800)
   9       .attr("height", 450);
  10
  11   $(document).bind('deck.change', function(event, from, to) {
  12     var target = $.deck('getSlide', to);
  13     var slide_id = target.attr('id');
  14     switch (slide_id) {
  15     case "cell-animation-begin":
  16       cell_animation_reset();
  17       cell_animation_begin(cell_svg, 250, 200);
  18       break;
  19     case "cell-animation-factory":
  20       cell_animation_factory(cell_svg, 250, 200);
  21       break;
  22     case "bacteria-animation-begin":
  23       bacteria_animation_begin();
  24       break;
  25     case "bacteria-animation-grow":
  26       bacteria_animation_grow();
  27       break;
  28     case "background-dna":
  29       $("#dna-canvas").html("<img src='dna_backbone.svg'>");
  30       break;
  31     case "background-dna-single":
  32       $("#dna-canvas").html("<img src='dna_single_strand.svg'>");
  33       break;
  34     case "background-dna-double":
  35       $("#dna-canvas").html("<img src='dna_double_strand.svg'>");
  36       break;
  37     case "antismash-find-orfs":
  38       $("#orf-canvas").html("<img src='sequence_unannotated.svg'>");
  39       break;
  40     case "antismash-find-orfs-start":
  41       $("#orf-canvas").html("<img src='sequence_start_codons.svg'>");
  42       break;
  43     case "antismash-find-orfs-stop":
  44       $("#orf-canvas").html("<img src='sequence_stop_codons.svg'>");
  45       break;
  46     case "antismash-find-orfs-all":
  47       $("#orf-canvas").html("<img src='sequence_annotated.svg'>");
  48       break;
  49     case "antismash-svm":
  50       $("#svm-canvas").html("<img src='classification-untrained.png' height='500'>");
  51       break;
  52     case "antismash-svm-trained":
  53       $("#svm-canvas").html("<img src='classification.png' height='500'>");
  54       break;
  55     case "antismash-svm-new":
  56       $("#svm-canvas").html("<img src='classification-new.png' height='500'>");
  57       break;
  58     }
  59   });
  60 });
  61
  62 /************* Cell == Factory ******************/
  63 function cell_animation_begin(container, x, y) {
  64   var cell = container.append("svg:rect")
  65     .attr("x", x)
  66     .attr("y", y)
  67     .attr("width", 300)
  68     .attr("height", 120)
  69     .attr("rx", 50)
  70     .attr("class", "cell")
  71   //draw_cilium(container, x+300, y+(120/2));
  72 }
  73
  74 function cell_animation_reset() {
  75   d3.selectAll(".factory-window").remove();
  76   d3.selectAll(".chimney").remove();
  77   d3.select(".cilium").remove();
  78   d3.select(".cell").remove();
  79 }
  80
  81 function cell_animation_factory(container, x, y) {
  82   var chimney = container.append("svg:rect")
  83     .attr("x", x+200)
  84     .attr("y", y-140)
  85     .attr("width", 30)
  86     .attr("height",140)
  87     .attr("class", "chimney");
  88
  89   draw_window(container, x+50, y);
  90   draw_window(container, x+120, y);
  91 }
  92
  93 function draw_window(container, x, y) {
  94   var window1 = container.append("svg:path")
  95     .attr("class", "factory-window")
  96     .attr("d", "M " + x + " " + y + " l 60 -60 v 60 z");
  97 }
  98
  99 function draw_cilium(container, x, y) {
 100   var cilium = container.append("svg:path")
 101     .attr("class", "cilium")
 102     .attr("d", "M " + x +" " + y + " a 60 100 0 0 1 100 0 a 45 90 0 0 0 75 0 a 40 100 0 0 1 50 0");
 103 }
 104
 105 /************************* Bacterial Growth ***********************/
 106
 107 function bacteria_animation_begin() {
 108   $("#bacteria-canvas").html("<img src='starter_culture.svg' height='500'>");
 109 }
 110
 111 function bacteria_animation_grow() {
 112   $("#bacteria-canvas").html("<img src='grown_culture.svg' height='500'>");
 113 }