Difference between revisions of "Team:GO Paris-Saclay/WikiDraft"

m
(plasmid demo)
 
(2 intermediate revisions by the same user not shown)
Line 4: Line 4:
  
 
=== Test JavaScript ===
 
=== Test JavaScript ===
 +
 +
This is a procedurally generated plasmid display : that is, it is not a static image, but is generated by javascript code. Which means, it is possible to add thing like zooming on click, settings for display ...
 +
<html>
 +
<script src="https://static.igem.org/mediawiki/2018/2/26/T--GO_Paris-Saclay--angularplasmid.complete.min.txt"></script>
 +
 +
        <plasmid sequencelength="1000" plasmidheight="300" plasmidwidth="300">
 +
            <plasmidtrack trackstyle="fill:#ccc" width="5" radius="120"></plasmidtrack>
 +
            <plasmidtrack trackstyle="fill:rgba(225,225,225,0.5)" radius="110">
 +
                <tracklabel text="MTX" labelstyle='font-size:20px;font-weight:400'></tracklabel>
 +
                <tracklabel text="in pSB1C3" labelstyle='font-size:10px;font-weight:400' vadjust="10"></tracklabel>
 +
                <tracklabel text="3.5 + ~4.5 kb" labelstyle='font-size:10px' vadjust="30"></tracklabel>
 +
            <trackscale interval="1000" showlabels="1" style="stroke:#333;stroke-width:2px" ticksize="5" vadjust="8" labelstyle="font-size:9px;fill:#999;font-weight:300" labelvadjust="15"></trackscale>s
 +
               
 +
                <trackmarker start="0" end="90" markerstyle='stroke:#000;fill:rgba(0,255,255,1);'  wadjust="0" vadjust="0">
 +
                    <markerlabel type="path" text="Biobrick Suffix" class="smlabel gold" vadjust="35"></markerlabel>
 +
                </trackmarker>
 +
               
 +
                <trackmarker start="10" markerstyle="stroke:rgba(255,0,0,.3);stroke-width:1px" vadjust="-10" wadjust="20">
 +
                    <markerlabel text="SpeI" class="vsmlabel red" valign="inner" vadjust="-5"></markerlabel>
 +
                </trackmarker>
 +
               
 +
                <trackmarker start="40" markerstyle="stroke:rgba(255,0,0,.3);stroke-width:1px" vadjust="-10" wadjust="20">
 +
                    <markerlabel text="NotI" class="vsmlabel red" valign="inner" vadjust="-5"></markerlabel>
 +
                </trackmarker>
 +
               
 +
                <trackmarker start="80" markerstyle="stroke:rgba(255,0,0,.3);stroke-width:1px" vadjust="-10" wadjust="20">
 +
                    <markerlabel text="PstI" class="vsmlabel red" valign="inner" vadjust="-5"></markerlabel>
 +
                </trackmarker>
 +
               
 +
               
 +
                <trackmarker start="120" end="150" markerstyle='stroke:#000;fill:rgba(0,100,100,1);'  wadjust="0" vadjust="0">
 +
                    <markerlabel type="path" text="Ori" class="smlabel gold" vadjust="35"></markerlabel>
 +
                </trackmarker>
 +
               
 +
                <trackmarker start="160" end="300" markerstyle='stroke:#000;fill:rgba(0,100,100,1);'  wadjust="0" vadjust="0">
 +
                    <markerlabel type="path" text="Chloramphenicol resistance" style="font-size:10px" class="smlabel gold" vadjust="35"></markerlabel>
 +
                </trackmarker>
 +
               
 +
                <trackmarker start="320" end="420" markerstyle='stroke:#000;fill:rgba(0,255,255,1);'  wadjust="0" vadjust="0">
 +
                    <markerlabel type="path" text="Biobrick Prefix" class="smlabel gold" vadjust="35"></markerlabel>
 +
                </trackmarker>
 +
               
 +
                <trackmarker start="330" markerstyle="stroke:rgba(255,0,0,.3);stroke-width:1px" vadjust="-10" wadjust="20">
 +
                    <markerlabel text="EcoRI" class="vsmlabel red" valign="inner" vadjust="-5"></markerlabel>
 +
                </trackmarker>
 +
                <trackmarker start="360" markerstyle="stroke:rgba(255,0,0,.3);stroke-width:1px" vadjust="-10" wadjust="20">
 +
                    <markerlabel text="NotI" class="vsmlabel red" valign="inner" vadjust="-5"></markerlabel>
 +
                </trackmarker>
 +
                <trackmarker start="400" markerstyle="stroke:rgba(255,0,0,.3);stroke-width:1px" vadjust="-10" wadjust="20">
 +
                    <markerlabel text="XbaI" class="vsmlabel red" valign="inner" vadjust="-5"></markerlabel>
 +
                </trackmarker>
 +
               
 +
               
 +
                <trackmarker start="450" end="470" markerstyle='stroke:#000;fill:#ff0;' arrowendlength="5" arrowendwidth="3"  vadjust="0" wadjust="5">
 +
                    <markerlabel text="Promoter 1" vadjust="40" hadjust="2" valign="outer" class="smlabel gold" showline="1" linevadjust="-15" linevadjust="-15" lineclass="labelline"></markerlabel>
 +
                </trackmarker>
 +
               
 +
                <trackmarker start="480" markerstyle="stroke:rgba(255,0,0,.3);stroke-width:1px;stroke-dasharray:2,2" vadjust="-10" wadjust="20">
 +
                    <markerlabel text="RBS" class="vsmlabel purple" valign="inner" vadjust="-5"></markerlabel>
 +
                </trackmarker>
 +
               
 +
                <trackmarker start="490" end="600" markerstyle='stroke:#000;fill:rgba(0,255,255,1);'  wadjust="0" vadjust="0">
 +
                    <markerlabel type="path" text="abgT" class="smlabel gold" vadjust="35"></markerlabel>
 +
                </trackmarker>
 +
               
 +
 +
               
 +
 +
               
 +
               
 +
                <trackmarker start="610" markerstyle="stroke:rgba(255,0,0,.3);stroke-width:1px;stroke-dasharray:2,2" vadjust="-10" wadjust="20">
 +
                    <markerlabel text="RBS" class="vsmlabel purple" valign="inner" vadjust="-5"></markerlabel>
 +
                </trackmarker>
 +
               
 +
                <trackmarker start="620" end="740" markerstyle='stroke:#000;fill:rgba(0,255,255,1);'  wadjust="0" vadjust="0">
 +
                    <markerlabel type="path" text="cpg2" class="smlabel gold" vadjust="35"></markerlabel>
 +
                </trackmarker>
 +
               
 +
               
 +
               
 +
                <trackmarker start="750" markerstyle="stroke:rgba(255,0,0,.3);stroke-width:1px" vadjust="-10" wadjust="20">
 +
                    <markerlabel text="Terminator" class="vsmlabel purple" valign="inner" vadjust="-20"></markerlabel>
 +
                </trackmarker>
 +
                <trackmarker start="752" markerstyle="stroke:rgba(255,0,0,.3);stroke-width:1px;" vadjust="-10" wadjust="20">
 +
                </trackmarker>
 +
               
 +
               
 +
                <trackmarker start="780" end="805" markerstyle='stroke:#000;fill:#ff0;' arrowendlength="5" arrowendwidth="3"  vadjust="0" wadjust="5">
 +
                    <markerlabel text="Promoter 2" vadjust="40" hadjust="2" valign="outer" class="smlabel gold" showline="1" linevadjust="-15" linevadjust="-15" lineclass="labelline"></markerlabel>
 +
                </trackmarker>
 +
               
 +
                <trackmarker start="810" markerstyle="stroke:rgba(255,0,0,.3);stroke-width:1px;stroke-dasharray:2,2" vadjust="-10" wadjust="20">
 +
                    <markerlabel text="RBS" class="vsmlabel purple" valign="inner" vadjust="-5"></markerlabel>
 +
                </trackmarker>
 +
               
 +
 +
               
 +
                <trackmarker start="820" end="950" markerstyle='stroke:#000;fill:rgba(0,255,255,1);'  wadjust="0" vadjust="0">
 +
                    <markerlabel type="path" text="folC" class="smlabel gold" vadjust="35"></markerlabel>
 +
                </trackmarker>
 +
               
 +
                <trackmarker start="956" markerstyle="stroke:rgba(255,0,0,.3);stroke-width:1px" vadjust="-10" wadjust="20">
 +
                    <markerlabel text="Terminator" class="vsmlabel purple" valign="inner" vadjust="-5"></markerlabel>
 +
                </trackmarker>
 +
                <trackmarker start="958" markerstyle="stroke:rgba(255,0,0,.3);stroke-width:1px;" vadjust="-10" wadjust="20">
 +
                </trackmarker>
 +
 +
 +
 +
 +
            </plasmidtrack>
 +
        </plasmid>
 +
 +
 +
</html>
  
 
This is a nice, procedurally generate figure, to demonstrate D3 JS integration
 
This is a nice, procedurally generate figure, to demonstrate D3 JS integration
Line 9: Line 124:
 
<html>
 
<html>
 
<script src="https://static.igem.org/mediawiki/2018/b/b0/T--GO_Paris-Saclay--D3_JS.txt"></script>
 
<script src="https://static.igem.org/mediawiki/2018/b/b0/T--GO_Paris-Saclay--D3_JS.txt"></script>
 +
 +
 +
 +
 +
 
<svg width="960" height="960"></svg>
 
<svg width="960" height="960"></svg>
  

Latest revision as of 14:36, 25 May 2018

Test section

This is text blabla

Test JavaScript

This is a procedurally generated plasmid display : that is, it is not a static image, but is generated by javascript code. Which means, it is possible to add thing like zooming on click, settings for display ... s

This is a nice, procedurally generate figure, to demonstrate D3 JS integration