Difference between revisions of "Team:Toronto/Integrated Practices"

Line 11: Line 11:
 
<html>
 
<html>
  
−
<div id="navigation">
+
<style>
−
<ul>
+
 
−
<li><a href="https://2017.igem.org/Team:Toronto"><span>home</span></a></li>
+
form {
−
</li>
+
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
−
<li><a href="#"><span>team</span></a>
+
  position: absolute;
−
<ul>
+
  left: 10px;
−
<li><a href="https://2017.igem.org/Team:Toronto/Team"><span>team</span></a></li>
+
  top: 10px;
−
</li>
+
}
−
<li><a href="https://2017.igem.org/Team:Toronto/Collaborations"><span>collaborations</span></a></li>
+
 
−
</li>
+
label {
−
</ul>
+
  display: block;
−
<li><a href="#"><span>project</span></a>
+
}
−
<ul>
+
 
−
<li><a href="https://2017.igem.org/Team:Toronto/Description"><span>description</span></a></li>
+
</style>
−
</li>
+
<form>
−
<li><a href="https://2017.igem.org/Team:Toronto/Design"><span>design</span></a></li>
+
  <label><input type="radio" name="mode" value="grouped"> Grouped</label>
−
</li>
+
  <label><input type="radio" name="mode" value="stacked" checked> Stacked</label>
−
<li><a href="https://2017.igem.org/Team:Toronto/Experiments"><span>experiments</span></a></li>
+
</form>
−
</li>
+
<svg width="960" height="500"></svg>
−
<li><a href="https://2017.igem.org/Team:Toronto/Proof"><span>proof</span></a></li>
+
<!-- <script src="https://d3js.org/d3.v4.min.js"></script -->
−
</li>
+
<script>
−
<li><a href="https://2017.igem.org/Team:Toronto/Demonstrate"><span>demonstrate</span></a></li>
+
 
−
</li>
+
var n = 4, // The number of series.
−
<li><a href="https://2017.igem.org/Team:Toronto/Results"><span>results</span></a></li>
+
    m = 58; // The number of values per series.
−
</li>
+
 
−
<li><a href="https://2017.igem.org/Team:Toronto/Notebook"><span>notebook</span></a></li>
+
// The xz array has m elements, representing the x-values shared by all series.
−
</li>
+
// The yz array has n elements, representing the y-values of each of the n series.
−
</ul>
+
// Each yz[i] is an array of m non-negative numbers representing a y-value for xz[i].
−
<li><a href="#"><span>parts</span></a>
+
// The y01z array has the same structure as yz, but with stacked [y₀, y₁] instead of y.
−
<ul>
+
var xz = d3.range(m),
−
<li><a href="https://2017.igem.org/Team:Toronto/Parts"><span>parts</span></a></li>
+
    yz = d3.range(n).map(function() { return bumps(m); }),
−
</li>
+
    y01z = d3.stack().keys(d3.range(n))(d3.transpose(yz)),
−
<li><a href="https://2017.igem.org/Team:Toronto/Basic_Part"><span>basic_part</span></a></li>
+
    yMax = d3.max(yz, function(y) { return d3.max(y); }),
−
</li>
+
    y1Max = d3.max(y01z, function(y) { return d3.max(y, function(d) { return d[1]; }); });
−
<li><a href="https://2017.igem.org/Team:Toronto/Composite_Part"><span>composite_part</span></a></li>
+
 
−
</li>
+
var svg = d3.select("svg"),
−
<li><a href="https://2017.igem.org/Team:Toronto/Part_Collection"><span>part_collection</span></a></li>
+
    margin = {top: 40, right: 10, bottom: 20, left: 10},
−
</li>
+
    width = +svg.attr("width") - margin.left - margin.right,
−
</ul>
+
    height = +svg.attr("height") - margin.top - margin.bottom,
−
<li><a href="https://2017.igem.org/Team:Toronto/Safety"><span>safety</span></a></li>
+
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
−
</li>
+
 
−
<li><a href="https://2017.igem.org/Team:Toronto/Attributions"><span>attributions</span></a></li>
+
var x = d3.scaleBand()
−
</li>
+
    .domain(xz)
−
<li class="active"><a href="#"><span>human_practices</span></a>
+
    .rangeRound([0, width])
−
<ul>
+
    .padding(0.08);
−
<li><a href="https://2017.igem.org/Team:Toronto/Human_Practices"><span>human_practices</span></a></li>
+
 
−
</li>
+
var y = d3.scaleLinear()
−
<li><a href="https://2017.igem.org/Team:Toronto/HP-Silver"><span>silver</span></a></li>
+
    .domain([0, y1Max])
−
</li>
+
    .range([height, 0]);
−
<li><a href="https://2017.igem.org/Team:Toronto/HP-Gold"><span>gold</span></a></li>
+
 
−
</li>
+
var color = d3.scaleOrdinal()
−
<li class="active"><a href="https://2017.igem.org/Team:Toronto/Integrated_Practices"><span>integrated_practices</span></a></li>
+
    .domain(d3.range(n))
−
</li>
+
    .range(d3.schemeCategory20c);
−
<li><a href="https://2017.igem.org/Team:Toronto/Engagement"><span>engagement</span></a></li>
+
 
−
</li>
+
var series = g.selectAll(".series")
−
</ul>
+
  .data(y01z)
−
<li><a href="#"><span>awards</span></a>
+
  .enter().append("g")
−
<ul>
+
    .attr("fill", function(d, i) { return color(i); });
−
<li><a href="https://2017.igem.org/Team:Toronto/Entrepreneurship"><span>entrepreneurship</span></a></li>
+
 
−
</li>
+
var rect = series.selectAll("rect")
−
<li><a href="https://2017.igem.org/Team:Toronto/Hardware"><span>hardware</span></a></li>
+
  .data(function(d) { return d; })
−
</li>
+
  .enter().append("rect")
−
<li><a href="https://2017.igem.org/Team:Toronto/Software"><span>software</span></a></li>
+
    .attr("x", function(d, i) { return x(i); })
−
</li>
+
    .attr("y", height)
−
<li><a href="https://2017.igem.org/Team:Toronto/Measurement"><span>measurement</span></a></li>
+
    .attr("width", x.bandwidth())
−
</li>
+
    .attr("height", 0);
−
<li><a href="https://2017.igem.org/Team:Toronto/Model"><span>model</span></a></li>
+
 
−
</li>
+
rect.transition()
−
</ul>
+
    .delay(function(d, i) { return i * 10; })
−
</ul>
+
    .attr("y", function(d) { return y(d[1]); })
−
</div>
+
    .attr("height", function(d) { return y(d[0]) - y(d[1]); });
−
<div class="content">
+
 
−
<div class="content" id="content-main"><div class="row"><div class="col col-lg-8 col-md-12"><div class="content-main"><h3 id="-alert-">★ ALERT!</h3>
+
g.append("g")
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2016.igem.org/Judging/Awards#SpecialPrizes">Best Integrated Human Practices award</a>.</p>
+
    .attr("class", "axis axis--x")
−
<p>Delete this box in order to be evaluated for this medal. See more information at <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions">Instructions for Pages for awards</a>.</p>
+
    .attr("transform", "translate(0," + height + ")")
−
<p>Do you want to be considered for the <a href="https://2016.igem.org/Judging/Awards#SpecialPrizes">Best Integrated Human Practices award</a>? Help the judges consider your team for this award by describing your work on this page.</p>
+
    .call(d3.axisBottom(x)
−
<p>Here are two examples of excellent Integrated Human Practices work from 2015:</p>
+
        .tickSize(0)
−
<ul>
+
        .tickPadding(6));
−
<li><a href="https://2015.igem.org/Team:Bielefeld-CeBiTec/Practices">Bielefeld 2015</a></li>
+
 
−
<li><a href="https://2015.igem.org/Team:Edinburgh/Practices">Edinburgh 2015</a></li>
+
d3.selectAll("input")
−
</ul>
+
    .on("change", changed);
−
</div></div><div id="tableofcontents" class="tableofcontents affix sidebar col-lg-4 hidden-xs hidden-sm hidden-md visible-lg-3"><ul class="nav"></div></div></div>
+
 
−
</div>
+
var timeout = d3.timeout(function() {
 +
  d3.select("input[value=\"grouped\"]")
 +
      .property("checked", true)
 +
      .dispatch("change");
 +
}, 2000);
 +
 
 +
function changed() {
 +
  timeout.stop();
 +
  if (this.value === "grouped") transitionGrouped();
 +
  else transitionStacked();
 +
}
 +
 
 +
function transitionGrouped() {
 +
  y.domain([0, yMax]);
 +
 
 +
  rect.transition()
 +
      .duration(500)
 +
      .delay(function(d, i) { return i * 10; })
 +
      .attr("x", function(d, i) { return x(i) + x.bandwidth() / n * this.parentNode.__data__.key; })
 +
      .attr("width", x.bandwidth() / n)
 +
    .transition()
 +
      .attr("y", function(d) { return y(d[1] - d[0]); })
 +
      .attr("height", function(d) { return y(0) - y(d[1] - d[0]); });
 +
}
 +
 
 +
function transitionStacked() {
 +
  y.domain([0, y1Max]);
 +
 
 +
  rect.transition()
 +
      .duration(500)
 +
      .delay(function(d, i) { return i * 10; })
 +
      .attr("y", function(d) { return y(d[1]); })
 +
      .attr("height", function(d) { return y(d[0]) - y(d[1]); })
 +
    .transition()
 +
      .attr("x", function(d, i) { return x(i); })
 +
      .attr("width", x.bandwidth());
 +
}
 +
 
 +
// Returns an array of m psuedorandom, smoothly-varying non-negative numbers.
 +
// Inspired by Lee Byron’s test data generator.
 +
// http://leebyron.com/streamgraph/
 +
function bumps(m) {
 +
  var values = [], i, j, w, x, y, z;
 +
 
 +
  // Initialize with uniform random values in [0.1, 0.2).
 +
  for (i = 0; i < m; ++i) {
 +
    values[i] = 0.1 + 0.1 * Math.random();
 +
  }
 +
 
 +
  // Add five random bumps.
 +
  for (j = 0; j < 5; ++j) {
 +
    x = 1 / (0.1 + Math.random());
 +
    y = 2 * Math.random() - 0.5;
 +
    z = 10 / (0.1 + Math.random());
 +
    for (i = 0; i < m; i++) {
 +
      w = (i / m - y) * z;
 +
      values[i] += x * Math.exp(-w * w);
 +
    }
 +
  }
 +
 
 +
  // Ensure all values are positive.
 +
  for (i = 0; i < m; ++i) {
 +
    values[i] = Math.max(0, values[i]);
 +
  }
 +
 
 +
  return values;
 +
}
 +
 
 +
</script>
  
 
</html>
 
</html>
 
{{Toronto/footer}}
 
{{Toronto/footer}}

Revision as of 20:43, 30 October 2017

General Pages

Wet Lab

Dry Lab

Human Practices

iGEM Toronto