Difference between revisions of "Team:BOKU-Vienna/Model"

Revision as of 10:26, 15 October 2018 (view source)

Bhofmann (Talk | contribs)

← Older edit

Latest revision as of 01:04, 18 October 2018 (view source)

Bhofmann (Talk | contribs)

(3 intermediate revisions by the same user not shown)

Line 18:

</script>

−

~~<link rel="stylesheet" href="https://2018.igem.org/Template:BOKU-Vienna/css/fa-svg-with-js?action=raw&ctype=text/css">~~

−

~~<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">~~

Line 33:

Line 31:

−

+

−

+

<h2>The Model</h2>

Line 44:

Line 43:

</script>

</div> <div id="main" class="container">

+

<h1 id="tryityourself">Try it yourself</h1>

+

</div> <footer></footer>

−

+

</div> </div>

Line 56:

Line 57:

let data = modelInitData;

−

let margin = {top: 20, right: 20, bottom: 30, left: 30},

+

let margin = {top: 20, right: 20, bottom: 50, left: 80},

width = 960 - margin.left - margin.right,

height = 500 - margin.top - margin.bottom;

Line 109:

Line 110:

.attr("id", "start")

.text("Start Experiment");

+

let textarea = svg.append("g").

+

attr("class", "description-text");

+

svg.append("g")

Line 118:

Line 123:

.attr("class", "axis axis--y")

.call(d3.axisLeft(y))

−

.selectAll(".tick:last-of-type")

+

.selectAll(".tick:last-of-type");

−

.append("text")

+

−

.attr("~~class~~", "~~axis~~-~~title~~")

+

svg.append("text")

−

.attr("x", 3)

+

.attr("transform", "rotate(-90)")

−

.attr("dy", ".~~32em~~")

+

.attr("y", 0 - margin.left)

−

.text("~~Color Difference at ±10°~~ (~~CIE76~~)");

+

.attr("x", 0 - height/2)

+

.attr("dy", "1em")

+

.style("text-anchor", "middle")

+

.text("Response [%]");

+

svg.append("text")

+

.attr("y", height + margin.bottom/2)

+

.attr("x", width/2)

+

.attr("dx", "1em")

+

.style("text-anchor", "middle")

+

.text("Time [s]");

/*svg.datum(data)

Line 136:

Line 151:

if (this.id === "start") {

addNewLine("switchoff", "Switch OFF", data);

+

svg.append("text")

+

.attr("transform", "translate(" + (x(data[0].gfp) + 20) + "," + -10 + ")")

+

.attr("dy", ".35em")

+

.attr("text-anchor", "start")

+

.style("fill", "blue")

+

.text("GFP");

+

svg.append("text")

+

.attr("transform", "translate(" + (x(data[0].gfp) + 20) + "," + 70 + ")")

+

.attr("dy", ".35em")

+

.attr("text-anchor", "start")

+

.style("fill", "green")

+

.text("gON");

+

svg.append("text")

+

.attr("transform", "translate(" + (x(data[0].gfp) + 20) + "," + 350 + ")")

+

.attr("dy", ".35em")

+

.attr("text-anchor", "start")

+

.style("fill", "red")

+

.text("gOFF");

}

@@ Line 18: / Line 18: @@
      </script>
      <link rel="stylesheet" href="https://2018.igem.org/Template:BOKU-Vienna/css/ekko-lightbox?action=raw&ctype=text/css">
-    <link rel="stylesheet" href="https://2018.igem.org/Template:BOKU-Vienna/css/fa-svg-with-js?action=raw&ctype=text/css">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
      <link rel="stylesheet" href="https://2018.igem.org/Template:BOKU-Vienna/css/styles?action=raw&ctype=text/css">
      <script src="https://2018.igem.org/Template:BOKU-Vienna/js/wiki?action=raw&ctype=text/javascript"></script>
@@ Line 33: / Line 31: @@
-   <div class="sub-page">
+   <div class="sub-page"> <header></header>
-  <header></header>    <div class="landing-sub-page" style="background: url(" images="" model="" model-landing.jpg")="" fixed="" no-repeat="" center;="" background-size:="" cover;"="">
+    <div class="landing-sub-page" id="top" style="background: url(https://static.igem.org/mediawiki/2018/7/78/T--BOKU-Vienna--2018_model-landing.jpg) fixed no-repeat center; background-size: cover;">
          <div class="header">
              <h2>The Model</h2>
@@ Line 44: / Line 43: @@
        </script>
      </div>    <div id="main" class="container">
+    <h1 id="tryityourself">Try it yourself</h1>
          <div id="simulation_model"></div>
      </div>    <footer></footer>
      <!--SMOOTH SCROLL UP-->
      <div class="scrolltop">
-       <div class="scroll icon"><i class="fa fa-4x fa-angle-up"></i></div>
+       <div class="scroll icon"><i class="fas fa-chevron-up"></i></div>
      </div>  </div>
@@ Line 56: / Line 57: @@
                  let data = modelInitData;
-                 let margin = {top: 20, right: 20, bottom: 30, left: 30},
+                 let margin = {top: 20, right: 20, bottom: 50, left: 80},
                          width = 960 - margin.left - margin.right,
                          height = 500 - margin.top - margin.bottom;
@@ Line 109: / Line 110: @@
                          .attr("id", "start")
                          .text("Start Experiment");
+                let textarea = svg.append("g").
+                        attr("class", "description-text");
                  svg.append("g")
@@ Line 118: / Line 123: @@
                          .attr("class", "axis axis--y")
                          .call(d3.axisLeft(y))
-                         .selectAll(".tick:last-of-type")
+                         .selectAll(".tick:last-of-type");
-                        .append("text")
-                         .attr("class", "axis-title")
+                svg.append("text")
-                         .attr("x", 3)
+                         .attr("transform", "rotate(-90)")
-                         .attr("dy", ".32em")
+                        .attr("y", 0 - margin.left)
-                         .text("Color Difference at ±10° (CIE76)");
+                         .attr("x", 0 - height/2)
+                         .attr("dy", "1em")
+                        .style("text-anchor", "middle")
+                         .text("Response [%]");
+                svg.append("text")
+                        .attr("y", height + margin.bottom/2)
+                        .attr("x", width/2)
+                        .attr("dx", "1em")
+                        .style("text-anchor", "middle")
+                        .text("Time [s]");
                  /*svg.datum(data)
@@ Line 136: / Line 151: @@
                      if (this.id === "start") {
                          addNewLine("switchoff", "Switch OFF", data);
+       svg.append("text")
+                                .attr("transform", "translate(" + (x(data[0].gfp) + 20) + "," + -10 + ")")
+                                .attr("dy", ".35em")
+                                .attr("text-anchor", "start")
+                                .style("fill", "blue")
+                                .text("GFP");
+                        svg.append("text")
+                                .attr("transform", "translate(" + (x(data[0].gfp) + 20) + "," + 70 + ")")
+                                .attr("dy", ".35em")
+                                .attr("text-anchor", "start")
+                                .style("fill", "green")
+                                .text("gON");
+                        svg.append("text")
+                                .attr("transform", "translate(" + (x(data[0].gfp) + 20) + "," + 350 + ")")
+                                .attr("dy", ".35em")
+                                .attr("text-anchor", "start")
+                                .style("fill", "red")
+                                .text("gOFF");
                      }