A bunch of pages

assets/math.js

@@ -12,17 +12,18 @@ function defineVars(vars) {
     });
 }
 
-function plot(target, fns, deps) {
+function plot(target, fns, deps, [xDomain, yDomain] = [[-1, 9], [-1, 9]]) {
     const depsEl = deps.map(document.querySelector.bind(document));
     const plot = () => {
         functionPlot({
             target,
             width: 600,
             height: 400,
-            yAxis: { domain: [-1, 9] },
+            xAxis: { domain: xDomain },
+            yAxis: { domain: yDomain },
             grid: true,
             data: fns(...(depsEl.map(el => parseFloat(el.value)))).map(fn => ({
-                    fn
+                    fn, graphType: 'polyline'
                 }))
         });
     }

assets/site.css

@@ -162,4 +162,10 @@ i.cite {
     text-align: center;
     padding-top: 8px;
     font-size: 9pt;
+}
+
+.footnotes {
+    margin: 10px;
+    border-top: 1px solid;
+    opacity: 0.8;
 }

pages/activators-vs-repressors.md

@@ -4,4 +4,35 @@
 
 # Choosing Between Activators & Repressors
 
+We now have two ways of regulating gene expression, and they seem to be able to do the same things. Which should we use?
+
+![An diagram of a gene with an activator and a gene with a repressor, side-by-side.](/assets/choosing-dg1.png)
+<i class="cite">Credit: CalTech</i>
+
+Michael Savageau researched this in the context of bacterial metabolic genes and digestive enzyme production in 1977.[^1] He found that genes in high demand were usually regulated by activators, while those in low demand were generally regulated by repressors.
+
+![Low demand vs. high demand](/assets/choosing-dg2.png)
+<i class="cite">Credit: CalTech</i>
+
+He hypothesized the "use it or lose it" rule: essentially, the somewhat counterintuitive behavior was due to selection pressure that would eliminate the regulators if they were not used enough.
+
+There have been other explanations, too:
+
+- Shinar, et al. found the same result in 2006, but suggested a slightly more intuitive explanation.[^2] They suggested that proteins do not only bind to one receptor, but can bind to a range of similar receptors, even if a protein could cause problems in some of them. Since unoccupied receptors are more susceptible to binding errors, it's preferable to keep them occupied with the right protein than to take the risk of the wrong protein accidentally binding.
+- Gerland and Hwa found the same results as Savageau in 2009, but restricted the scope of his reasoning.[^3] They suggested that, for small populations with long timescales (slow evolution), Savageau's reasoning was correct. In large populations with short timescales (fast evolution), though, they suggested that the opposite, more intuitive, option could occur: regulators could be used for the higher-demand proteins and activators for the lower-demand proteins, in the interest of reducing "wear and tear".
+
+At this point, we're pretty sure that, in the majority of cases, regulators are used for lower-demand proteins, and activators are used for higher-demand proteins, as Savageau suggested. As shown by the varying ideas above, though, we still don't know why.
+
+You've reached the end, for now. I hope to expand this site in the future. If you have any questions, comments, or suggestions, please feel free to [tell me about them](https://github.com/aleksrutins/biocircuits/issues/new).
+
+<section class="footnotes">
+
+[^1] Savageau, M. A. (1977). Design of molecular control mechanisms and the demand for gene expression. Proceedings of the National Academy of Sciences, 74(12), 5647–5651. <https://doi.org/10.1073/pnas.74.12.5647>
+
+[^2] Shinar, G., Dekel, E., Tlusty, T., & Alon, U. (2006). Rules for biological regulation based on error minimization. Proceedings of the National Academy of Sciences, 103(11), 3999–4004. <https://doi.org/10.1073/pnas.0506610103>
+
+[^3] Gerland, U., & Hwa, T. (2009). Evolutionary selection between alternative modes of gene regulation. Proceedings of the National Academy of Sciences, 106(22), 8841–8846. https://doi.org/10.1073/pnas.0808500106
+
+</section>
+
 <nav-links back="/hill-functions.html"></nav-links>

pages/activators.md

@@ -4,4 +4,35 @@
 
 # Activators
 
-<nav-links back="/repressors.html" next="/hill-functions.html"></nav-links>
+Just like repressors can inhibit a gene, **activators** can enable it. Just like repressors, activators' behavior can also be changed by small molecule inputs. Another example from our bacterial friends is the LuxR activator, which only acts as an activator in the presence of the compound ligand.
+
+Here's a diagram, with the activator labeled A:
+
+![A diagram of a gene with and without an activator.](/assets/activator-dg.png)
+<i class="cite">Credit: CalTech</i>
+
+For activators, we have a different curve (seen below in red, contrasted to the repressor curve in blue):
+
+$$\beta(a)=\beta_0\frac{p_\text{bound}}{p_\text{tot}}=\beta_0\frac{a/K_d}{1 + a/K_d}$$
+
+<div class="graph">
+    <div id="binding-curve"></div>
+    <div>
+        <label for="kd">K<sub>d</sub</label>
+        <input type="range" id="kd" value=1>
+    </div>
+    <div>
+        <label for="beta0">β<sub>0</sub></label>
+        <input type="range" id="beta0" value=1>
+    </div>
+</div>
+
+As you can see, an activator has exactly the opposite effect as a repressor.
+
+That was a short section. Onward!
+
+<nav-links back="/repressors.html" next="/hill-functions.html"></nav-links>
+
+<script>
+    plot('#binding-curve', (kd, beta0) => [`${beta0}/(1 + x/(${kd}))`, `${beta0} * ((x/${kd})/(1 + (x/${kd})))`], ['#kd', '#beta0'], [[0, 10], [0, 10]])
+</script>

pages/hill-functions.md

@@ -4,4 +4,59 @@
 
 # Ultrasensitivity & the Hill Function
 
-<nav-links back="/activators.html" next="/activators-vs-repressors.html"></nav-links>
+The models we've been using are all well and good to capture the general idea of the effects of activators and repressors, but in the real world, many responses respond in a more switch-like, or **ultrasensitive**, way. This can come from many different things; for instance, binding a protein at one site might increase the affinity for that protein at an adjacent site, or you could have a protein with an alternative shape that could be stabilized by binding agonist effector molecules (basically, molecules that change its shape) into a shape that has a higher affinity for those same molecules. What you generally see in an ultrasensitive response is that an increasing concentration has a little effect for a while, and then suddenly a large effect.
+
+The **Hill function** is a phenomenological way of analyzing ultrasensitive systems. There are two versions of it, the activating Hill function (for analyzing activators, shown in blue):
+
+$$f_\text{act}(x)=\frac{x^n}{k^n + x^n}=\frac{(x/k)^n}{1 + (x/k)^n}$$
+
+And the repressive Hill function (for analyzing repressors, shown in red):
+
+$$f_\text{rep}(x)=\frac{k^n}{k^n + x^n}=\frac{1}{1 + (x/k)^n}$$
+
+This function has two parameters:
+
+- $k$ is the concentration at which the function attains half of its maximum value. This is called the **Hill activation constant**.
+- $n$ is the **Hill coefficient**. This is a way of parameterizing how ultrasensitive the response is. When $n=1$, the Hill function is identical to the simple binding curves. As $n$ increases, the function becomes sharper and more ultrasensitive. At the limit when $n=\infty$, the Hill function is a perfect step function.
+
+<div class="graph">
+    <div id="hill-graph"></div>
+    <div>
+        <label for="k">k</label>
+        <input type="range" id="k" value=1>
+    </div>
+    <div>
+        <label for="n">n</label>
+        <input type="range" id="n" value=1>
+    </div>
+</div>
+
+To find production rates with the Hill function, just add $\beta_0$:
+
+- Activator (shown in blue): $\beta(a)=\beta_0f_\text{act}(a)=\beta_0\frac{(a/k)^n}{1 + (a/k)^n}$
+- Repressor (shown in red): $\beta(r)=\beta_0f_\text{rep}(r)=\beta_0\frac{1}{1 + (r/k)^n}$
+
+<div class="graph">
+    <div id="hill-graph-prod"></div>
+    <div>
+        <label for="k-prod">k</label>
+        <input type="range" id="k-prod" value=1>
+    </div>
+    <div>
+        <label for="n-prod">n</label>
+        <input type="range" id="n-prod" value=1>
+    </div>
+    <div>
+        <label for="b0">β<sub>0</sub></label>
+        <input type="range" id="b0" value=1>
+    </div>
+</div>
+
+Onwards!
+
+<nav-links back="/activators.html" next="/activators-vs-repressors.html"></nav-links>
+
+<script>
+    plot('#hill-graph', (k, n) => [`((x/${k})^(${n}))/(1 + ((x/${k})^(${n})))`, `1/(1 + ((x/${k})^(${n})))`], ['#k', '#n'], [[0, 10], [0, 1]])
+    plot('#hill-graph-prod', (k, n, b0) => [`(${b0}) * ((x/${k})^(${n}))/(1 + ((x/${k})^(${n})))`, `(${b0})/(1 + ((x/${k})^(${n})))`], ['#k-prod', '#n-prod', '#b0'], [[0, 10], [0, 10]])
+</script>

pages/repressors.md

@@ -8,6 +8,11 @@ Theoretically, a single gene could keep producing a single protein indefinitely,
 
 **Repressors** enable gene regulation. They bind to specific binding sites at or near the promoter of a gene (remember, that's where transcription starts) and inhibit transcription initiation. An example of this in bacteria is the Lacl repressor in _E. coli_. Normally, it inhibits the gene for lactase production. When lactose is present, though, a modified form of lactose (allolactose) binds to Lacl, and prevents it from inhibiting lactase production. Lactase is then produced, and the lactose is digested. Lacl is then free to bind to the gene again, inhibiting lactase production until the next time lactose appears.
 
+Here's a diagram, with the repressor labeled R:
+
+![A diagram of a gene with and without a repressor.](/assets/repressor-dg.png)
+<i class="cite">Credit: CalTech</i>
+
 Binding and unbinding a repressor can be modeled through this chemical equation:
 
 $$\ce{P + R <=>[k_+][k_-] P_\mathrm{bound}}$$
@@ -80,7 +85,7 @@ Onwards!
 <nav-links back="/simplest-circuit.html" next="/activators.html"></nav-links>
 
 <script>
-    plot('#binding-curve', (kd, beta0) => [`${beta0}/(1 + x/(${kd}))`, `-(${beta0})x/(${kd}) + ${beta0}`], ['#kd', '#beta0'])
+    plot('#binding-curve', (kd, beta0) => [`${beta0}/(1 + x/(${kd}))`, `-(${beta0})x/(${kd}) + ${beta0}`], ['#kd', '#beta0'], [[0, 10], [0, 10]])
 
-    plot('#binding-curve-leaky', (kd, beta0, alpha0) => [`${beta0}/(1 + x/(${kd})) + ${alpha0}`, `-(${beta0})x/(${kd}) + ${beta0} + ${alpha0}`], ['#leaky-kd', '#leaky-beta0', '#leaky-alpha0'])
+    plot('#binding-curve-leaky', (kd, beta0, alpha0) => [`${beta0}/(1 + x/(${kd})) + ${alpha0}`, `-(${beta0})x/(${kd}) + ${beta0} + ${alpha0}`], ['#leaky-kd', '#leaky-beta0', '#leaky-alpha0'], [[0, 10], [0, 10]])
 </script>