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

 
(4 intermediate revisions by the same user not shown)
Line 17: Line 17:
 
       })
 
       })
 
     </script>
 
     </script>
−
    <link rel="stylesheet" href="https://2018.igem.org/Template:BOKU-Vienna/css/bootstrap.min?action=raw&ctype=text/css">
 
 
     <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/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">
 
     <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>
 
     <script src="https://2018.igem.org/Template:BOKU-Vienna/js/wiki?action=raw&ctype=text/javascript"></script>
Line 34: Line 31:
  
 
    
 
    
 +
  <div class="sub-page"> <header></header>
  
−
     <header></header>    <div id="main" class="container">
+
     <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>
 +
        </div>
 +
    </div>    <div id="main" class="container">
 
       <article class="row-element"></article>
 
       <article class="row-element"></article>
 
       <script>
 
       <script>
 
           $('article').load('https://2018.igem.org/Template:BOKU-Vienna/Model?action=raw&ctype=text/javascript');
 
           $('article').load('https://2018.igem.org/Template:BOKU-Vienna/Model?action=raw&ctype=text/javascript');
 
       </script>
 
       </script>
 +
    </div>    <div id="main" class="container">
 +
    <h1 id="tryityourself">Try it yourself</h1>
 +
 +
        <div id="simulation_model"></div>
 
     </div>    <footer></footer>
 
     </div>    <footer></footer>
 
     <!--SMOOTH SCROLL UP-->
 
     <!--SMOOTH SCROLL UP-->
 
     <div class="scrolltop">
 
     <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>  </div>
 +
 
 +
 
 +
  <script>
 +
            $(document).ready(function () {
 +
                let data = modelInitData;
 +
 
 +
                let margin = {top: 20, right: 20, bottom: 50, left: 80},
 +
                        width = 960 - margin.left - margin.right,
 +
                        height = 500 - margin.top - margin.bottom;
 +
 
 +
                let x = d3.scaleLinear()
 +
                        .domain([0, 13600*10])
 +
                        .range([0, width]);
 +
 
 +
                let y = d3.scaleLinear()
 +
                        .domain([-0.1, 1])
 +
                        .range([height, 0]);
 +
 
 +
                let z = d3.scaleOrdinal(d3.schemeCategory10);
 +
 
 +
 
 +
                let plotGfpLine = d3.line()
 +
                        .curve(d3.curveBasis)
 +
                        .x(function (d) {
 +
                            return x(d.time);
 +
                        })
 +
                        .y(function (d) {
 +
                            return y(d.gfp);
 +
                        });
 +
 
 +
                let plotOnLine = d3.line()
 +
                        .curve(d3.curveBasis)
 +
                        .x(function (d) {
 +
                            return x(d.time);
 +
                        })
 +
                        .y(function (d) {
 +
                            return y(d.ron);
 +
                        });
 +
 
 +
                let plotOffLine = d3.line()
 +
                        .curve(d3.curveBasis)
 +
                        .x(function (d) {
 +
                            return x(d.time);
 +
                        })
 +
                        .y(function (d) {
 +
                            return y(d.roff);
 +
                        });
 +
 
 +
                let svg = d3.select("#simulation_model").append("svg")
 +
                        .attr("width", width + margin.left + margin.right)
 +
                        .attr("height", height + margin.top + margin.bottom)
 +
                        .append("g")
 +
                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 +
 
 +
                let button = d3.select("#simulation_model").append("button")
 +
                        .attr("type","button")
 +
                        .attr("class","btn btn-primary")
 +
                        .attr("id", "start")
 +
                        .text("Start Experiment");
 +
 
 +
                let textarea = svg.append("g").
 +
                        attr("class", "description-text");
 +
 
 +
 
 +
                svg.append("g")
 +
                        .attr("class", "axis axis--x")
 +
                        .attr("transform", "translate(0," + y(0) + ")")
 +
                        .call(d3.axisBottom(x));
 +
 
 +
                svg.append("g")
 +
                        .attr("class", "axis axis--y")
 +
                        .call(d3.axisLeft(y))
 +
                        .selectAll(".tick:last-of-type");
 +
 
 +
                svg.append("text")
 +
                        .attr("transform", "rotate(-90)")
 +
                        .attr("y", 0 - margin.left)
 +
                        .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)
 +
                        .append("path")
 +
                        .attr("class", "line")
 +
                        .attr("d", line);*/
 +
 
 +
                let modelOff = [];
 +
                let modelOn = [];
 +
 
 +
                button.on("click", function () {
 +
                    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");
 +
                    }
 +
 
 +
                    if (this.id === "switchoff"){
 +
                        let lastTimeElement = data[data.length-1];
 +
                        modelOff = [];
 +
 
 +
                        modelOff.push(lastTimeElement);
 +
 
 +
                        modelOffData.forEach(function (d) {
 +
                            let oldTime = d.time;
 +
                            modelOff.push({time: lastTimeElement.time + oldTime, gfp: d.gfp, roff: d.roff, ron: d.ron});
 +
                        });
 +
 
 +
                        console.log(modelOff);
 +
                        addNewLine("switchon", "Switch ON", modelOff);
 +
 
 +
                    }
 +
 
 +
                    if (this.id === "switchon"){
 +
                        let lastTimeElement = modelOff[modelOff.length-1];
 +
                        modelOn = [];
 +
 
 +
                        modelOn.push(lastTimeElement);
 +
                        modelOffOnData.forEach(function (d) {
 +
                            let oldTime = d.time;
 +
                            modelOn.push({time: lastTimeElement.time + oldTime, gfp: d.gfp, roff: d.roff, ron: d.ron});
 +
                        });
 +
 
 +
                        console.log(modelOn);
 +
                        addNewLine("switchafteroff", "Switch OFF", modelOn);
 +
 
 +
                    }
 +
 
 +
                    if (this.id === "switchafteroff"){
 +
                        let lastTimeElement = modelOn[modelOn.length-1];
 +
                        modelOff = [];
 +
 
 +
                        modelOff.push(lastTimeElement);
 +
 
 +
                        modelOnOffData.forEach(function (d) {
 +
                            let oldTime = d.time;
 +
                            modelOff.push({time: lastTimeElement.time + oldTime, gfp: d.gfp, roff: d.roff, ron: d.ron});
 +
                        });
 +
 
 +
                        console.log(modelOff);
 +
                        addNewLine("switchon", "Switch ON", modelOff);
 +
                    }
 +
                });
 +
 
 +
 
 +
                function addNewLine(buttonId, buttonText, data) {
 +
                    let gfp = svg.append("path")
 +
                            .data([data])
 +
                            .attr("d", plotGfpLine)
 +
                            .attr("stroke", "blue")
 +
                            .attr("stroke-width", "2")
 +
                            .attr("fill", "none");
 +
 
 +
                    createLine(gfp);
 +
 
 +
                    let off = svg.append("path")
 +
                            .data([data])
 +
                            .attr("d", plotOffLine)
 +
                            .attr("stroke", "red")
 +
                            .attr("stroke-width", "2")
 +
                            .attr("fill", "none");
 +
 
 +
                    createLine(off);
 +
 
 +
                    let on = svg.append("path")
 +
                            .data([data])
 +
                            .attr("d", plotOnLine)
 +
                            .attr("stroke", "green")
 +
                            .attr("stroke-width", "2")
 +
                            .attr("fill", "none");
 +
 
 +
                    createLine(on);
 +
 
 +
 
 +
 
 +
                    function createLine(model){
 +
                        let totalLength = model.node().getTotalLength();
 +
 
 +
                        model.attr("stroke-dasharray", totalLength + " " + totalLength)
 +
                                .attr("stroke-dashoffset", totalLength)
 +
                                .transition()
 +
                                .duration(3000)
 +
                                .ease(d3.easePolyInOut)
 +
                                .attr("stroke-dashoffset", 0)
 +
                                .on('end', changeStyle);
 +
                    }
 +
 
 +
                    function changeStyle() {
 +
                        gfp.attr("stroke-dasharray", "4,4");
 +
                        button.text(buttonText).attr("id", buttonId)
 +
                    }
 +
                }
 +
            });
 +
 
 +
        </script>
 +
 
 
</html>
 
</html>

Latest revision as of 01:04, 18 October 2018


The Model

Try it yourself