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

(Created draft page)
 
(plasmid demo)
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
=== Test de titre ===
+
=== Test section ===
 +
 +
This is text blabla
  
−
Test de script :
+
=== 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>
 
<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
 +
 +
<html>
 +
<script src="https://static.igem.org/mediawiki/2018/b/b0/T--GO_Paris-Saclay--D3_JS.txt"></script>
 +
 +
 +
 +
 +
 +
<svg width="960" height="960"></svg>
 +
 +
<script>
 +
var matrix = [
 +
  [11975,  5871, 8916, 2868],
 +
  [ 1951, 10048, 2060, 6171],
 +
  [ 8010, 16145, 8090, 8045],
 +
  [ 1013,  990,  940, 6907]
 +
];
 +
 +
var svg = d3.select("svg"),
 +
    width = +svg.attr("width"),
 +
    height = +svg.attr("height"),
 +
    outerRadius = Math.min(width, height) * 0.5 - 40,
 +
    innerRadius = outerRadius - 30;
 +
 +
var formatValue = d3.formatPrefix(",.0", 1e3);
 +
 +
var chord = d3.chord()
 +
    .padAngle(0.05)
 +
    .sortSubgroups(d3.descending);
 +
 +
var arc = d3.arc()
 +
    .innerRadius(innerRadius)
 +
    .outerRadius(outerRadius);
 +
 +
var ribbon = d3.ribbon()
 +
    .radius(innerRadius);
 +
 +
var color = d3.scaleOrdinal()
 +
    .domain(d3.range(4))
 +
    .range(["#000000", "#FFDD89", "#957244", "#F26223"]);
 +
 +
var g = svg.append("g")
 +
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
 +
    .datum(chord(matrix));
 +
 +
var group = g.append("g")
 +
    .attr("class", "groups")
 +
  .selectAll("g")
 +
  .data(function(chords) { return chords.groups; })
 +
  .enter().append("g");
 +
 +
group.append("path")
 +
    .style("fill", function(d) { return color(d.index); })
 +
    .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
 +
    .attr("d", arc);
 +
 +
var groupTick = group.selectAll(".group-tick")
 +
  .data(function(d) { return groupTicks(d, 1e3); })
 +
  .enter().append("g")
 +
    .attr("class", "group-tick")
 +
    .attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)"; });
 +
 +
groupTick.append("line")
 +
    .attr("x2", 6);
 +
 +
groupTick
 +
  .filter(function(d) { return d.value % 5e3 === 0; })
 +
  .append("text")
 +
    .attr("x", 8)
 +
    .attr("dy", ".35em")
 +
    .attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180) translate(-16)" : null; })
 +
    .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
 +
    .text(function(d) { return formatValue(d.value); });
 +
 +
g.append("g")
 +
    .attr("class", "ribbons")
 +
  .selectAll("path")
 +
  .data(function(chords) { return chords; })
 +
  .enter().append("path")
 +
    .attr("d", ribbon)
 +
    .style("fill", function(d) { return color(d.target.index); })
 +
    .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); });
 +
 +
// Returns an array of tick angles and values for a given group and step.
 +
function groupTicks(d, step) {
 +
  var k = (d.endAngle - d.startAngle) / d.value;
 +
  return d3.range(0, d.value, step).map(function(value) {
 +
    return {value: value, angle: value * k + d.startAngle};
 +
  });
 +
}
 +
</script>
 
</html>
 
</html>

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