bpow/ xci.md

## xci.md

      
    Raw
  

               xci.md
            
          
    An illustration of how stochastic X-chromosome inactivation leads to functional mosaicism.

  
## index.html
<!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>

## xci.js
// 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)
}
	<!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>
	// 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)
	}