Old school D3 from simpler times

All examples By author By category About

SpaceActuary

Full window Github gist

Loss Limiting

Built with blockbuilder.org

<!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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdn.jsdelivr.net/jstat/1.5.0/jstat.min.js