mynameisfiber/index.html

## index.html
<!DOCTYPE html>
<!--
    This visualization shows how a distribution gets decayed to uniform
    using a poisson based decay model.  This type of decay is implemented
    in forgettable in order to store time relevant statistical models.

    In this visualization, the blocks on the right (darker color)
    represent the original distribution, while the blocks on the right
    (lighter color) are the decayed values.  The decay is currently
    happening at a constant rate and the visualization can be reset by
    reloading the page.

    Learn more at: http://mynameisfiber.github.com/forgettable/
-->
<meta charset="utf-8">
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
  height: 500px;
}

text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
</style>

<script src="http://d3js.org/d3.v3.min.js"></script>

<body>
<div id=vis></div>
<small><a href="http://github.com/mynameisfiber/">Micha Gorelick</a></small>
</body>

<script>
function clone(obj){
    if(obj == null || typeof(obj) != 'object')
        return obj;

    var temp = obj.constructor(); // changed

    for(var key in obj)
        temp[key] = clone(obj[key]);
    return temp;
}

var n = 2, // number of layers
    m = 58, // number of samples per layer
    stack = d3.layout.stack(),
    data= bumpLayer(m, .1),
    layers = stack(d3.range(n).map(function() { return clone(data); })),
    yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
    Z = d3.sum(data, function(data) { return data.y; }),
    origZ = d3.sum(data, function(data) { return data.y; });

var margin = {top: 40, right: 10, bottom: 20, left: 10},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .domain(d3.range(m))
    .rangeRoundBands([0, width], .08);

var y = d3.scale.linear()
    .domain([0, 1])
    .range([height, 0]);

var color = d3.scale.linear()
    .domain([0, n - 1])
    .range(["#aad", "#556"]);

var xAxis = d3.svg.axis()
    .scale(x)
    .tickSize(0)
    .tickPadding(6)
    .orient("bottom");

var svg = d3.select("#vis").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var layer = svg.selectAll(".layer")
    .data(layers, function(d) { return d.x; })
  .enter().append("g")
    .attr("class", "layer")
    .style("fill", function(d, i) { return color(i); });

var rect = layer.selectAll("rect")
    .data(function(d) { return d; })
  .enter().append("rect")
    .attr("x", function(d, i, j) { return x(d.x) + x.rangeBand() / n * j; })
    .attr("y", height)
    .attr("width", x.rangeBand() / n)
    .attr("height", 0);

rect.transition()
    .delay(function(d, i) { return i * 10; })
    .attr("y", function(d) { return y(d.y / Z); })
    .attr("height", function(d) { return height - y(d.y / Z); });

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);


function updatePlot() {
  rect.transition()
      .duration(100)
      .delay(function(d, i) { return i * 10; })
      .attr("x", function(d, i, j) { return x(d.x) + x.rangeBand() / n * j; })
      .attr("width", x.rangeBand() / n)
    .transition()
    .attr("y", function(d, i, j) {
          var z = 1;
          if(j == 0) {
              z = Z;
            } else {
              z = origZ;
          }
          console.log(z);
        return y(d.y / z); })
      .attr("height", function(d, i, j) {
          var z = 1;
          if(j == 0) {
              z = Z;
            } else {
              z = origZ;
          }
          return Math.max(0,height - y(d.y/z));
      });
}


// Inspired by Lee Byron's test data generator.
function bumpLayer(n, o) {

  function bump(a) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < n; i++) {
      var w = (i / n - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }

  var a = [], i;
  for (i = 0; i < n; ++i) a[i] = o + o * Math.random();
  for (i = 0; i < 5; ++i) bump(a);
  return a.map(function(d, i) { return {x: i, y: Math.round(Math.max(1, 25*d))}; });
}

// probability for the Poisson pmf
function poisson( x, m )
{
    var f = 1;
    var r;
    r = Math.pow(m,x)*Math.exp(-m);        // numerator
    while (x > 0)                          // compute x!
    {
        f = f*x;
        x--;
    }
    return (r/f);                          // p(x,m) = (m^x)*exp(-m)/x!
}

function PoissonSample(lambda)
{
    var r = Math.random()
    var P = 0;
    var k = 0;
    var maxiter = 500;
    do {
        P += poisson(k, lambda);
        k += 1
        maxiter--;
    } while(P < r && maxiter > 0)
    if (maxiter == 0) {
        return 0;
    }
    return k-1;
}

function decay() {
    console.log("Updating");
    var now = new Date().getTime();
    var dt = now - lastDecay;
    var lambda = rate * dt / 1000.;

    console.log(now, dt, lambda)
    for (var i=0; i<m; i++) {
        var k = PoissonSample(lambda);
        o = layers[0][i].y;
        layers[0][i].y = Math.max(1, layers[0][i].y - k);
        Z -= (o - layers[0][i].y);
    }

    lastDecay = now;
    updatePlot();
}

rate = 2.0;
lastDecay = new Date().getTime();
setInterval(decay, 1000);

</script>
	<!DOCTYPE html>
	<!--
	This visualization shows how a distribution gets decayed to uniform
	using a poisson based decay model. This type of decay is implemented
	in forgettable in order to store time relevant statistical models.

	In this visualization, the blocks on the right (darker color)
	represent the original distribution, while the blocks on the right
	(lighter color) are the decayed values. The decay is currently
	happening at a constant rate and the visualization can be reset by
	reloading the page.

	Learn more at: http://mynameisfiber.github.com/forgettable/
	-->
	<meta charset="utf-8">
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: auto;
	position: relative;
	width: 960px;
	height: 500px;
	}

	text {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	</style>

	<script src="http://d3js.org/d3.v3.min.js"></script>

	<body>
	<div id=vis></div>
	<small><a href="http://github.com/mynameisfiber/">Micha Gorelick</a></small>
	</body>

	<script>
	function clone(obj){
	if(obj == null \|\| typeof(obj) != 'object')
	return obj;

	var temp = obj.constructor(); // changed

	for(var key in obj)
	temp[key] = clone(obj[key]);
	return temp;
	}

	var n = 2, // number of layers
	m = 58, // number of samples per layer
	stack = d3.layout.stack(),
	data= bumpLayer(m, .1),
	layers = stack(d3.range(n).map(function() { return clone(data); })),
	yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
	Z = d3.sum(data, function(data) { return data.y; }),
	origZ = d3.sum(data, function(data) { return data.y; });

	var margin = {top: 40, right: 10, bottom: 20, left: 10},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x = d3.scale.ordinal()
	.domain(d3.range(m))
	.rangeRoundBands([0, width], .08);

	var y = d3.scale.linear()
	.domain([0, 1])
	.range([height, 0]);

	var color = d3.scale.linear()
	.domain([0, n - 1])
	.range(["#aad", "#556"]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.tickSize(0)
	.tickPadding(6)
	.orient("bottom");

	var svg = d3.select("#vis").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var layer = svg.selectAll(".layer")
	.data(layers, function(d) { return d.x; })
	.enter().append("g")
	.attr("class", "layer")
	.style("fill", function(d, i) { return color(i); });

	var rect = layer.selectAll("rect")
	.data(function(d) { return d; })
	.enter().append("rect")
	.attr("x", function(d, i, j) { return x(d.x) + x.rangeBand() / n * j; })
	.attr("y", height)
	.attr("width", x.rangeBand() / n)
	.attr("height", 0);

	rect.transition()
	.delay(function(d, i) { return i * 10; })
	.attr("y", function(d) { return y(d.y / Z); })
	.attr("height", function(d) { return height - y(d.y / Z); });

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);


	function updatePlot() {
	rect.transition()
	.duration(100)
	.delay(function(d, i) { return i * 10; })
	.attr("x", function(d, i, j) { return x(d.x) + x.rangeBand() / n * j; })
	.attr("width", x.rangeBand() / n)
	.transition()
	.attr("y", function(d, i, j) {
	var z = 1;
	if(j == 0) {
	z = Z;
	} else {
	z = origZ;
	}
	console.log(z);
	return y(d.y / z); })
	.attr("height", function(d, i, j) {
	var z = 1;
	if(j == 0) {
	z = Z;
	} else {
	z = origZ;
	}
	return Math.max(0,height - y(d.y/z));
	});
	}


	// Inspired by Lee Byron's test data generator.
	function bumpLayer(n, o) {

	function bump(a) {
	var x = 1 / (.1 + Math.random()),
	y = 2 * Math.random() - .5,
	z = 10 / (.1 + Math.random());
	for (var i = 0; i < n; i++) {
	var w = (i / n - y) * z;
	a[i] += x * Math.exp(-w * w);
	}
	}

	var a = [], i;
	for (i = 0; i < n; ++i) a[i] = o + o * Math.random();
	for (i = 0; i < 5; ++i) bump(a);
	return a.map(function(d, i) { return {x: i, y: Math.round(Math.max(1, 25*d))}; });
	}

	// probability for the Poisson pmf
	function poisson( x, m )
	{
	var f = 1;
	var r;
	r = Math.pow(m,x)*Math.exp(-m); // numerator
	while (x > 0) // compute x!
	{
	f = f*x;
	x--;
	}
	return (r/f); // p(x,m) = (m^x)*exp(-m)/x!
	}

	function PoissonSample(lambda)
	{
	var r = Math.random()
	var P = 0;
	var k = 0;
	var maxiter = 500;
	do {
	P += poisson(k, lambda);
	k += 1
	maxiter--;
	} while(P < r && maxiter > 0)
	if (maxiter == 0) {
	return 0;
	}
	return k-1;
	}

	function decay() {
	console.log("Updating");
	var now = new Date().getTime();
	var dt = now - lastDecay;
	var lambda = rate * dt / 1000.;

	console.log(now, dt, lambda)
	for (var i=0; i<m; i++) {
	var k = PoissonSample(lambda);
	o = layers[0][i].y;
	layers[0][i].y = Math.max(1, layers[0][i].y - k);
	Z -= (o - layers[0][i].y);
	}

	lastDecay = now;
	updatePlot();
	}

	rate = 2.0;
	lastDecay = new Date().getTime();
	setInterval(decay, 1000);

	</script>