SpaceActuary/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jstat/1.5.0/jstat.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }

    path {
				stroke: steelblue;
				stroke-width: 1;
				fill: none;
    }

    .axis { shape-rendering: crispEdges; }

    .x.axis line { stroke: lightgrey; }

    .x.axis .minor { stroke-opacity: .5; }

    .x.axis path { display: none; }

    .y.axis line, .y.axis path {
      fill: none;
      stroke: #000;
    }

  </style>
</head>

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


    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 + ")");

    var gammaShape = 100,
        gammaScale = 1000;

    var c = 100;
    var l = 100000;

    console.log("sample", jStat.gamma.sample(gammaShape,
                                gammaScale));

    var data = d3.range(1, c).map(function(i){
      var n = jStat.poisson.sample(10);
      var c = d3.range(1, n).map(function(j){
        x = jStat.gamma.sample(gammaShape,
                               gammaScale);
        x_cap = Math.min(x, l);
        return {
          "x": x,
          "x_cap": x_cap
        };
      })

      var s = d3.sum(c, function(d){ return d.x; }),
          s_cap = d3.sum(c, function(d){ return d.x_cap; });

      return {
        "i": i,
        "n": n,
        "c": c,
        "s": s,
        "s_cap": s_cap
      }
    });


    console.log("data", data[2]);

    var x = d3.scale.linear()
    	.range([0, width])
    	.domain(d3.extent(data, function(d){ return d.i; }));

    var xbar = d3.scale.ordinal()
    	.rangeBands([0, width], 0.1)
    	.domain(d3.range(c));

		var y = d3.scale.linear()
    	.range([0, height])
 			.domain([0, d3.max(data, function(d){ return d.s; })]);

    //console.log("unsorted x", data.map(function(d){ return d.x; }))
    data.sort(function(a, b){ return a.s - b.s; });
    //console.log("sorted x", data.map(function(d){ return d.x; }))

    var grps = svg.selectAll("g.c")
    		.data(data)
    	.enter()
    		.append("g")
    		.attr("class", "c");

    grps.selectAll("rect.capped")
        .data(data)
      .enter()
				.append("rect")
    		.attr("class", "capped")
        .attr("x", function(d, i){ return xbar(i); })
        .attr("y", function(d, i){ return height - y(d.s_cap); })
    		.attr("height", function(d, i){ return y(d.s_cap); })
    		.attr("width", xbar.rangeBand())
    		.attr("fill", "lightsteelblue")
    ;

    grps.selectAll("rect.excess")
        .data(data)
      .enter()
				.append("rect")
    		.attr("class", "excess")
        .attr("x", function(d, i){ return xbar(i); })
        .attr("y", function(d, i){ return height - y(d.s); })
    		.attr("height", function(d, i){ return y(d.s) - y(d.s_cap); })
    		.attr("width", xbar.rangeBand())
    		.attr("fill", "steelblue")
    ;

    /*
    svg.selectAll("circle")
        .data(data)
      .enter()
				.append("circle")
        .attr("cx", function(d, i){ return i * 50 + 5; })
        .attr("cy", function(d, i){ return height - y(i * 500); })
    		.attr("height", function(d, i){ return y(i * 500); })
    		.attr("r", 5)
    		.attr("fill", "tomato")
    ;
		*/

    var line = d3.svg.line()
      .x(function(d, i) { return xbar(i) + xbar.rangeBand()/2; })
      .y(function(d) { return height - y(d.s); })
      .interpolate("linear");

    svg.append("svg:path").attr("d", line(data));

    //console.log("gamma mean", jStat.gamma.mean(5, 2));
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="https://cdn.jsdelivr.net/jstat/1.5.0/jstat.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg { width: 100%; height: 100%; }

	path {
	stroke: steelblue;
	stroke-width: 1;
	fill: none;
	}

	.axis { shape-rendering: crispEdges; }

	.x.axis line { stroke: lightgrey; }

	.x.axis .minor { stroke-opacity: .5; }

	.x.axis path { display: none; }

	.y.axis line, .y.axis path {
	fill: none;
	stroke: #000;
	}

	</style>
	</head>

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


	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 + ")");

	var gammaShape = 100,
	gammaScale = 1000;

	var c = 100;
	var l = 100000;

	console.log("sample", jStat.gamma.sample(gammaShape,
	gammaScale));

	var data = d3.range(1, c).map(function(i){
	var n = jStat.poisson.sample(10);
	var c = d3.range(1, n).map(function(j){
	x = jStat.gamma.sample(gammaShape,
	gammaScale);
	x_cap = Math.min(x, l);
	return {
	"x": x,
	"x_cap": x_cap
	};
	})

	var s = d3.sum(c, function(d){ return d.x; }),
	s_cap = d3.sum(c, function(d){ return d.x_cap; });

	return {
	"i": i,
	"n": n,
	"c": c,
	"s": s,
	"s_cap": s_cap
	}
	});


	console.log("data", data[2]);

	var x = d3.scale.linear()
	.range([0, width])
	.domain(d3.extent(data, function(d){ return d.i; }));

	var xbar = d3.scale.ordinal()
	.rangeBands([0, width], 0.1)
	.domain(d3.range(c));

	var y = d3.scale.linear()
	.range([0, height])
	.domain([0, d3.max(data, function(d){ return d.s; })]);

	//console.log("unsorted x", data.map(function(d){ return d.x; }))
	data.sort(function(a, b){ return a.s - b.s; });
	//console.log("sorted x", data.map(function(d){ return d.x; }))

	var grps = svg.selectAll("g.c")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "c");

	grps.selectAll("rect.capped")
	.data(data)
	.enter()
	.append("rect")
	.attr("class", "capped")
	.attr("x", function(d, i){ return xbar(i); })
	.attr("y", function(d, i){ return height - y(d.s_cap); })
	.attr("height", function(d, i){ return y(d.s_cap); })
	.attr("width", xbar.rangeBand())
	.attr("fill", "lightsteelblue")
	;

	grps.selectAll("rect.excess")
	.data(data)
	.enter()
	.append("rect")
	.attr("class", "excess")
	.attr("x", function(d, i){ return xbar(i); })
	.attr("y", function(d, i){ return height - y(d.s); })
	.attr("height", function(d, i){ return y(d.s) - y(d.s_cap); })
	.attr("width", xbar.rangeBand())
	.attr("fill", "steelblue")
	;

	/*
	svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function(d, i){ return i * 50 + 5; })
	.attr("cy", function(d, i){ return height - y(i * 500); })
	.attr("height", function(d, i){ return y(i * 500); })
	.attr("r", 5)
	.attr("fill", "tomato")
	;
	*/

	var line = d3.svg.line()
	.x(function(d, i) { return xbar(i) + xbar.rangeBand()/2; })
	.y(function(d) { return height - y(d.s); })
	.interpolate("linear");

	svg.append("svg:path").attr("d", line(data));

	//console.log("gamma mean", jStat.gamma.mean(5, 2));
	</script>
	</body>