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     }
  38   });
  39 });
  40
  41 /************* Cell == Factory ******************/
  42 function cell_animation_begin(container, x, y) {
  43   var cell = container.append("svg:rect")
  44     .attr("x", x)
  45     .attr("y", y)
  46     .attr("width", 300)
  47     .attr("height", 120)
  48     .attr("rx", 50)
  49     .attr("class", "cell")
  50   draw_cilium(container, x+300, y+(120/2));
  51 }
  52
  53 function cell_animation_reset() {
  54   d3.selectAll(".factory-window").remove();
  55   d3.selectAll(".chimney").remove();
  56   d3.select(".cilium").remove();
  57   d3.select(".cell").remove();
  58 }
  59
  60 function cell_animation_factory(container, x, y) {
  61   var chimney = container.append("svg:rect")
  62     .attr("x", x+200)
  63     .attr("y", y-140)
  64     .attr("width", 30)
  65     .attr("height",140)
  66     .attr("class", "chimney");
  67
  68   draw_window(container, x+50, y);
  69   draw_window(container, x+120, y);
  70 }
  71
  72 function draw_window(container, x, y) {
  73   var window1 = container.append("svg:path")
  74     .attr("class", "factory-window")
  75     .attr("d", "M " + x + " " + y + " l 60 -60 v 60 z");
  76 }
  77
  78 function draw_cilium(container, x, y) {
  79   var cilium = container.append("svg:path")
  80     .attr("class", "cilium")
  81     .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");
  82 }
  83
  84 /************************* Bacterial Growth ***********************/
  85
  86 function bacteria_animation_begin() {
  87   $("#bacteria-canvas").html("<img src='starter_culture.svg' height='500'>");
  88 }
  89
  90 function bacteria_animation_grow() {
  91   $("#bacteria-canvas").html("<img src='grown_culture.svg' height='500'>");
  92 }