cell.js

   1 $(document).ready(function() {
   2   var svg = d3.select("#cell-canvas")
   3     .append("svg:svg")
   4       .attr("class", "drawing")
   5       .attr("width", 800)
   6       .attr("height", 450);
   7
   8   draw_cell(svg, 250, 300);
   9 });
  10
  11 function draw_cell(container, x, y) {
  12   var cell = container.append("svg:rect")
  13     .attr("x", x)
  14     .attr("y", y)
  15     .attr("width", 300)
  16     .attr("height", 120)
  17     .attr("rx", 50)
  18     .attr("class", "cell")
  19   draw_cilium(container, x+300, y+(120/2));
  20 }
  21
  22 function remove_factory(container) {
  23   d3.selectAll(".factory-window").remove();
  24   d3.select(".chimney").remove();
  25 }
  26
  27 function draw_factory(container, x, y) {
  28   var chimney = container.append("svg:rect")
  29     .attr("x", x+200)
  30     .attr("y", y-140)
  31     .attr("width", 30)
  32     .attr("height",140)
  33     .attr("class", "chimney");
  34
  35   draw_window(container, x+50, y);
  36   draw_window(container, x+120, y);
  37 }
  38
  39 function draw_window(container, x, y) {
  40   var window1 = container.append("svg:path")
  41     .attr("class", "factory-window")
  42     .attr("d", "M " + x + " " + y + " l 60 -60 v 60 z");
  43 }
  44
  45 function draw_cilium(container, x, y) {
  46   var cilium = container.append("svg:path")
  47     .attr("class", "cilium")
  48     .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");
  49 }