asr/biocircuits
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Simplest circuit

Browse source
This commit is contained in:
Aleks Rūtiņš 2024-06-01 20:26:03 -04:00
parent f39aaf6b97
commit 9dfdcb2fdf
6 changed files with 148 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

39
assets/math.js Normal file
View file

@ -0,0 +1,39 @@
function defineVars(vars) {
const data = new Map(vars);
window.addEventListener('DOMContentLoaded', () => {
const mathVars = document.querySelectorAll('span.katex span.mord.mathnormal');
mathVars.forEach(el => {
for (const [v, help] of data.entries()) {
if (el.textContent == v) el.setAttribute('title', help);
}
});
});
}
function plot(target, fn, deps) {
const depsEl = deps.map(document.querySelector.bind(document));
const plot = () => {
functionPlot({
target,
width: 600,
height: 400,
yAxis: { domain: [-1, 9] },
grid: true,
data: [
{
fn: fn(...(depsEl.map(el => el.value)))
}
]
});
}
depsEl.forEach(el => {
el.addEventListener((el.tagName == 'INPUT' && el.type == 'range' ? 'mousemove' : 'change'), plot);
});
plot();
}
Object.assign(window, {defineVars, plot});

BIN
assets/simplest-circuit-dg1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 156 KiB

18
assets/site.css
View file

@ -149,3 +149,21 @@ footer {
li:not(:first-child) { li:not(:first-child) {
padding-top: 8px; padding-top: 8px;
} }
.graph {
display: flex;
flex-direction: column;
align-items: center;
}
img {
width: 50%;
display: block;
margin: auto;
}
i.cite {
display: block;
text-align: center;
padding-top: 8px;
}

14
layouts/base.html
View file

@ -4,8 +4,17 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}} | Biocircuits for Mere Mortals</title> <title>{{title}} | Biocircuits for Mere Mortals</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
<link rel="stylesheet" href="/assets/site.css"> <link rel="stylesheet" href="/assets/site.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/mhchem.min.js" integrity="sha384-ifpG+NlgMq0kvOSGqGQxW1mJKpjjMDmZdpKGq3tbvD3WPhyshCEEYClriK/wRVU0" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
<script src="/assets/math.js"></script>
<script src="https://unpkg.com/function-plot/dist/function-plot.js"></script>
</head> </head>
<body> <body>
<div class="app"> <div class="app">
@ -14,6 +23,9 @@
<footer> <footer>
<p>&copy; 2024 <a href="https://farthergate.com">Aleks Rūtiņš</a></p> <p>&copy; 2024 <a href="https://farthergate.com">Aleks Rūtiņš</a></p>
<p>Built with <a href="https://cheetah.farthergate.com">Cheetah</a></p> <p>Built with <a href="https://cheetah.farthergate.com">Cheetah</a></p>
<p>
With the exception of pasted graphics, where the source is noted, this work is licensed under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution License CC BY-NC-SA 4.0</a>. All code contained herein is licensed under an <a href="https://opensource.org/license/mit">MIT license</a>.
</p>
</footer> </footer>
</main> </main>
</div> </div>

9
pages/index.html
View file

@ -7,6 +7,8 @@
<p class="tagline">for mere mortals</p> <p class="tagline">for mere mortals</p>
<p class="tagline">(albeit ones who know a bit of differential calculus)</p> <p class="tagline">(albeit ones who know a bit of differential calculus)</p>
<p><strong>DISCLAIMER: This is a school project. I would like to think that the CalTech course I've drawn from has made me somewhat knowledgeable on this topic, but please do not use this for medical advice, etc., etc. If you happen to know what you are doing, and you find a mistake on this website, please <a href="https://github.com/aleksrutins/biocircuits/issues/new">tell me about it</a>. With that said:</a></strong></p>
<p class="fade"> <p class="fade">
Biological circuit design is the science of abstracting <em>natural</em> biological processes by defining them Biological circuit design is the science of abstracting <em>natural</em> biological processes by defining them
as you would any synthetic circuit. It also allows us to create our own circuits out of natural components. as you would any synthetic circuit. It also allows us to create our own circuits out of natural components.
@ -17,7 +19,7 @@
Indeed, the marvelous progression of electronic circuit capabilities [...] could well describe biological circuits decades from now. Like electronics, we may will soon be able to program cellular “miracle devices” to create “little gadgets” that address serious environmental and medical applications. Indeed, the marvelous progression of electronic circuit capabilities [...] could well describe biological circuits decades from now. Like electronics, we may will soon be able to program cellular “miracle devices” to create “little gadgets” that address serious environmental and medical applications.
</blockquote> </blockquote>
<p class="fade fade3">That CalTech course will be the main source for this presentation.</p> <p class="fade fade3">That CalTech course will be the main source for this presentation. All diagrams are from it.</p>
<p class="fade fade4">Let's dive in!</p> <p class="fade fade4">Let's dive in!</p>
@ -28,23 +30,28 @@
</section> </section>
<script> <script>
addEventListener('DOMContentLoaded', () => {
if(localStorage.getItem('faded')) if(localStorage.getItem('faded'))
document.querySelectorAll('.fade').forEach(it => document.querySelectorAll('.fade').forEach(it =>
it.classList.add('no-delay')); it.classList.add('no-delay'));
localStorage.setItem('faded', true); localStorage.setItem('faded', true);
});
</script> </script>
<style> <style>
@keyframes fade { @keyframes fade {
0% { 0% {
opacity: 0; opacity: 0;
pointer-events: none;
} }
100% { 100% {
opacity: 1; opacity: 1;
pointer-events: all;
} }
} }
.fade { .fade {
opacity: 0; opacity: 0;
pointer-events: none;
animation: fade .5s linear 0s 1 forwards normal; animation: fade .5s linear 0s 1 forwards normal;
} }
.fade2 { .fade2 {

65
pages/simplest-circuit.md
View file

@ -3,3 +3,68 @@
<nav-links back="/concepts.html"></nav-links> <nav-links back="/concepts.html"></nav-links>
# The Simplest Circuit # The Simplest Circuit
The key idea for this section is that **steady-state expression levels depend on protein production and removal rates**.
Let's break that down.
First, steady-state conditions mean that all inputs to the system are constant forever. That simplifies things quite a bit.
Expression levels are just the net amount of proteins produced.
So, how many proteins there are, with no variables, depends on how many proteins are being created and how many are being removed. Simple, right?
Now, the circuit. This circuit is the simplest possible circuit: a single gene &mdash; let's call it \\(x\\) &mdash; coding for a single protein \\(p\\) at a rate of \\(\beta\\) molecules per unit time.
![alt text](/assets/simplest-circuit-dg1.png)
<i class="cite">Credit: CalTech</i>
However, in real life, proteins aren't just made forever; they're also reduced, through both _active degradation_ (being broken down) and _dilution_ (the cell getting bigger, which reduces the protein's _concentration_). That's represented above by the dashed circle. For simplicity, let's say that it's being reduced at a rate constant \\(\gamma\\) (that letter is a gamma, for anyone who wanted to know). Note that this is not just a rate &mdash; it's a _rate constant_, meaning that the actual rate is proportional to the number of molecules. More molecules, more reduction.
There's a differential equation for this:
$$ \frac{dx}{dt} = \text{production} - (\text{degradation} + \text{dilution}) $$
Or:
$$ \frac{dx}{dt} = \beta - \gamma x $$
Since \\(\gamma\\) counts both degradation and dilution, we can say that:
$$ \gamma = \gamma_\text{degradation} - \gamma_\text{dilution} $$
Since we're getting into the math, a quick tip: if you (like me) forget what a variable does halfway through the page, just hover over it and it'll tell you what it does. Anyway, back to the show.
To find the net production of the protein under steady state conditions, set the derivative to zero and solve for \\(x\\):
$$0 = \beta - \gamma x$$
$$-\beta = -\gamma x$$
$$\frac{-\beta}{-\gamma} = x$$
$$\frac\beta\gamma = x$$
And we find that **steady-state protein concentration is proportional to the ratio of production and removal rates**. This is another core concept that should be built as intuition.
Since I haven't used the interactive graphing functions I took the bandwidth to import yet, let's graph the general shape of the protein concentration function under the simplest possible conditions (play with the sliders!):
$$f(t)=xt=\frac{\beta t}{\gamma}$$
<div class="graph">
<div id="concentration-graph"></div>
<div>
<label for="beta">β</label>
<input type="range" id="beta">
</div>
<div>
<label for="gamma">γ</label>
<input type="range" id="gamma">
</div>
</div>
It's a line &mdash; for now. Onwards!
<nav-links back="/concepts.html"></nav-links>
<script>
plot('#concentration-graph', (beta, gamma) => `(${beta}x)/${gamma}`, ['#beta', '#gamma'])
defineVars([
['γ', 'The rate constant for reduction of protein concentration.'],
['β', 'The rate of protein production, in molecules per unit time.'],
['x', 'The gene in question.'],
['p', 'The protein in question.']
])
</script>