jzelner/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<head>
  <style>
    .enter {
    fill: green;
    }

    .update {
    fill: #333;
    }

  </style>
</head>

<body>

  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script type="text/javascript">
    var max_t = 20;
    N = 100;
    b = 1.1
    total_id = 0;

    function outbreak() {
        var S = N-1;
        var I = 1;
        var done = 0;
        var incidence = [{t:0, I:I, name: String(0)}];
        for (t = 1; t < max_t; t++) {
            var p_inf = 1.0-Math.exp(-b*I/N);
            var new_I = 0;
            for (i = 0; i < S; i++) {
                if (Math.random() < p_inf) {
                    new_I++;
                }
            }
            if (new_I == 0) {
                break;
                done = 1;
            }
            incidence.push({t:t, I:new_I, name:String(t)});
            total_id++;
            S -= new_I;
            I = new_I;
        }
        return(incidence);
    }

    incidence = outbreak();


    var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

    // Parse the date / time

    var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
    var y = d3.scale.linear().range([height, 0]);

    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);

    var svg = d3.select("body").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 + ")");


    xvals = [];
    for (i = 0; i <= 20; i++){
        xvals.push(i);
    }

    x.domain(xvals);
    y.domain([0, 20]);


    function render(zz) {
        console.log(zz)

        var bar = svg.selectAll("bar")
            .data(zz, function(d) { return d.name;});

        bar.exit().remove();


        bar.attr("class", "update")
            .attr("x", function(d) { return x(d.t); })
            .attr("width", x.rangeBand())
            .attr("y", function(d) { return y(d.I); })
            .attr("height", function(d) { return height - y(d.I); });


        console.log("UPDATE", bar)
        console.log("ENTER", bar.enter())

        bar.enter().append("rect")

            .attr("class", "enter")
            .attr("x", function(d) { return x(d.t); })
            .attr("width", x.rangeBand())
            .attr("y", function(d) { return y(d.I); })
            .attr("height", function(d) { return height - y(d.I); });

        bar
            .attr("x", function(d) { return x(d.t); })
            .attr("width", x.rangeBand())
            .attr("y", function(d) { return y(d.I); })
            .attr("height", function(d) { return height - y(d.I); });

    }


    render(incidence);

    function simulate() {
        render(outbreak());
    }

  </script>
  <button onclick="simulate()">Click me</button>

</body>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<head>
	<style>
	.enter {
	fill: green;
	}

	.update {
	fill: #333;
	}

	</style>
	</head>

	<body>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript">
	var max_t = 20;
	N = 100;
	b = 1.1
	total_id = 0;

	function outbreak() {
	var S = N-1;
	var I = 1;
	var done = 0;
	var incidence = [{t:0, I:I, name: String(0)}];
	for (t = 1; t < max_t; t++) {
	var p_inf = 1.0-Math.exp(-b*I/N);
	var new_I = 0;
	for (i = 0; i < S; i++) {
	if (Math.random() < p_inf) {
	new_I++;
	}
	}
	if (new_I == 0) {
	break;
	done = 1;
	}
	incidence.push({t:t, I:new_I, name:String(t)});
	total_id++;
	S -= new_I;
	I = new_I;
	}
	return(incidence);
	}

	incidence = outbreak();



	var margin = {top: 20, right: 20, bottom: 70, left: 40},
	width = 600 - margin.left - margin.right,
	height = 300 - margin.top - margin.bottom;

	// Parse the date / time

	var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
	var y = d3.scale.linear().range([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.ticks(10);

	var svg = d3.select("body").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 + ")");


	xvals = [];
	for (i = 0; i <= 20; i++){
	xvals.push(i);
	}

	x.domain(xvals);
	y.domain([0, 20]);




	function render(zz) {
	console.log(zz)

	var bar = svg.selectAll("bar")
	.data(zz, function(d) { return d.name;});

	bar.exit().remove();


	bar.attr("class", "update")
	.attr("x", function(d) { return x(d.t); })
	.attr("width", x.rangeBand())
	.attr("y", function(d) { return y(d.I); })
	.attr("height", function(d) { return height - y(d.I); });


	console.log("UPDATE", bar)
	console.log("ENTER", bar.enter())

	bar.enter().append("rect")

	.attr("class", "enter")
	.attr("x", function(d) { return x(d.t); })
	.attr("width", x.rangeBand())
	.attr("y", function(d) { return y(d.I); })
	.attr("height", function(d) { return height - y(d.I); });

	bar
	.attr("x", function(d) { return x(d.t); })
	.attr("width", x.rangeBand())
	.attr("y", function(d) { return y(d.I); })
	.attr("height", function(d) { return height - y(d.I); });

	}



	render(incidence);

	function simulate() {
	render(outbreak());
	}

	</script>
	<button onclick="simulate()">Click me</button>

	</body>