An illustration of how stochastic X-chromosome inactivation leads to functional mosaicism.
-
-
Save bpow/09eca8cdfaf3d267a5aa to your computer and use it in GitHub Desktop.
an illustration of the stochastic nature of x-chromosome inactivation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .node { | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> | |
| <script src="xci.js"></script> | |
| <script> | |
| xci(0.2); | |
| xci(0.4); | |
| xci(0.6); | |
| xci(0.8); | |
| </script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Bradford Powell, bpow[]drpowell.org | |
| xci = function(split) { | |
| randomer = function() { | |
| a = new Uint32Array(1) | |
| return window.crypto.getRandomValues(a)[0]/4294967295.0 | |
| } | |
| var width = 400, | |
| height = 400; | |
| var fill = d3.scale.category10(); | |
| var nodes = d3.range(16).map(function(i) { | |
| var value = randomer(); | |
| console.log("node " + i + "(" + value + ")"); | |
| return {value: value}; | |
| }); | |
| var force = d3.layout.force() | |
| .nodes(nodes) | |
| .size([width, height]) | |
| .charge(-10) | |
| .on("tick", tick) | |
| .start(); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var node = svg.selectAll(".node") | |
| .data(nodes) | |
| .enter().append("circle") | |
| .attr("class", "node") | |
| .attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }) | |
| .attr("r", 8) | |
| .style("fill", "white") | |
| .style("stroke", "black") | |
| .call(force.drag) | |
| .on("mousedown", function() { d3.event.stopPropagation(); }) | |
| node.transition() | |
| .style("fill", function(d, i) { return fill(d.value < split); }) | |
| .duration(2000) | |
| .delay(6000) | |
| svg.style("opacity", 1e-6) | |
| .transition() | |
| .duration(5000) | |
| .style("opacity", 1); | |
| function tick(e) { | |
| var k = 6 * e.alpha; | |
| svg.selectAll(".node").attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }); | |
| } | |
| function replication_cycle() { | |
| nodes.forEach(function(n) { if (randomer() < 0.075) { nodes.push({value: n.value, x: n.x+randomer()*8, y:n.y+randomer()*8})}}) | |
| force.start() | |
| node = node.data(nodes); | |
| node.enter().append("circle") | |
| .attr("class", "node") | |
| .attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }) | |
| .attr("r", 8) | |
| .style("fill", function(d) { return fill(d.value < split); }) | |
| .style("stroke", "black") | |
| .call(force.drag); | |
| force.resume() | |
| } | |
| function replication() { | |
| var replicate = setInterval(function () { | |
| if (nodes.length > 300) { | |
| clearInterval(replicate); | |
| } else { | |
| replication_cycle() | |
| } | |
| }, 400) | |
| } | |
| setTimeout(replication, 8000) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment