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

m
(plasmid demo)
 
(One intermediate revision 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>
  
 
<script>
 
<script>
 +
var matrix = [
 +
  [11975,  5871, 8916, 2868],
 +
  [ 1951, 10048, 2060, 6171],
 +
  [ 8010, 16145, 8090, 8045],
 +
  [ 1013,  990,  940, 6907]
 +
];
  
−
var width = 960,
+
var svg = d3.select("svg"),
−
     height = 136,
+
    width = +svg.attr("width"),
−
     cellSize = 17;
+
     height = +svg.attr("height"),
 +
    outerRadius = Math.min(width, height) * 0.5 - 40,
 +
     innerRadius = outerRadius - 30;
  
−
var formatPercent = d3.format(".1%");
+
var formatValue = d3.formatPrefix(",.0", 1e3);
  
−
var color = d3.scaleQuantize()
+
var chord = d3.chord()
−
     .domain([-0.05, 0.05])
+
     .padAngle(0.05)
−
     .range(["#a50026", "#d73027", "#f46d43", "#fdae61", "#fee08b", "#ffffbf", "#d9ef8b", "#a6d96a", "#66bd63", "#1a9850", "#006837"]);
+
     .sortSubgroups(d3.descending);
  
−
var svg = d3.select("body")
+
var arc = d3.arc()
−
  .selectAll("svg")
+
     .innerRadius(innerRadius)
−
  .data(d3.range(1990, 2011))
+
     .outerRadius(outerRadius);
−
  .enter().append("svg")
+
−
     .attr("width", width)
+
−
     .attr("height", height)
+
−
  .append("g")
+
−
    .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");
+
  
−
svg.append("text")
+
var ribbon = d3.ribbon()
−
     .attr("transform", "translate(-6," + cellSize * 3.5 + ")rotate(-90)")
+
     .radius(innerRadius);
−
    .attr("font-family", "sans-serif")
+
−
    .attr("font-size", 10)
+
−
    .attr("text-anchor", "middle")
+
−
    .text(function(d) { return d; });
+
  
−
var rect = svg.append("g")
+
var color = d3.scaleOrdinal()
−
     .attr("fill", "none")
+
     .domain(d3.range(4))
−
    .attr("stroke", "#ccc")
+
     .range(["#000000", "#FFDD89", "#957244", "#F26223"]);
−
  .selectAll("rect")
+
−
  .data(function(d) { return d3.timeDays(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
+
−
  .enter().append("rect")
+
−
     .attr("width", cellSize)
+
−
    .attr("height", cellSize)
+
−
    .attr("x", function(d) { return d3.timeWeek.count(d3.timeYear(d), d) * cellSize; })
+
−
    .attr("y", function(d) { return d.getDay() * cellSize; })
+
−
    .datum(d3.timeFormat("%Y-%m-%d"));
+
  
−
svg.append("g")
+
var g = svg.append("g")
−
     .attr("fill", "none")
+
     .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
−
    .attr("stroke", "#000")
+
    .datum(chord(matrix));
−
  .selectAll("path")
+
−
  .data(function(d) { return d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
+
−
  .enter().append("path")
+
−
    .attr("d", pathMonth);
+
  
−
d3.csv("dji.csv", function(error, csv) {
+
var group = g.append("g")
−
   if (error) throw error;
+
    .attr("class", "groups")
 +
  .selectAll("g")
 +
  .data(function(chords) { return chords.groups; })
 +
   .enter().append("g");
  
−
  var data = d3.nest()
+
group.append("path")
−
      .key(function(d) { return d.Date; })
+
    .style("fill", function(d) { return color(d.index); })
−
      .rollup(function(d) { return (d[0].Close - d[0].Open) / d[0].Open; })
+
    .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
−
     .object(csv);
+
     .attr("d", arc);
  
−
   rect.filter(function(d) { return d in data; })
+
var groupTick = group.selectAll(".group-tick")
−
      .attr("fill", function(d) { return color(data[d]); })
+
   .data(function(d) { return groupTicks(d, 1e3); })
−
     .append("title")
+
  .enter().append("g")
−
      .text(function(d) { return d + ": " + formatPercent(data[d]); });
+
     .attr("class", "group-tick")
−
});
+
    .attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)"; });
  
−
function pathMonth(t0) {
+
groupTick.append("line")
−
  var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
+
    .attr("x2", 6);
−
      d0 = t0.getDay(), w0 = d3.timeWeek.count(d3.timeYear(t0), t0),
+
−
      d1 = t1.getDay(), w1 = d3.timeWeek.count(d3.timeYear(t1), t1);
+
−
  return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize
+
−
      + "H" + w0 * cellSize + "V" + 7 * cellSize
+
−
      + "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize
+
−
      + "H" + (w1 + 1) * cellSize + "V" + 0
+
−
      + "H" + (w0 + 1) * cellSize + "Z";
+
−
}
+
  
 +
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>
 
</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