Old school D3 from simpler times

All examples By author By category About

SpaceActuary

Full window Github gist

Distributions

Recreation of wikipedia's gamma distribution plots in d3.

Powered using d3.js, jStat, and d3-legend.

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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.6.0/d3-legend.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
    
    path {
				stroke-width: 1;
				fill: none;
    }
			
    .axis { 
      	stroke: lightgrey;
      	shape-rendering: crispEdges; 
    }

.x.axis line { stroke: lightgrey; }

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

.x.axis path { stroke: lightgrey; }

.y.axis line, .y.axis path {
      fill: none;
      stroke: #000;
    }
    
  </style>
</head>

<body>
  <script>
    var margin = {top: 60, right: 20, bottom: 60, left: 50, inner: 60};
    var width = 960 - margin.left - margin.inner - 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)
    
    var svg1 = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        
    var svg2 = svg.append("g")
      .attr("transform", "translate(" + (width/2 + margin.left + margin.inner) 
            + "," + margin.top + ")");

var i = 1000;
    var p = 0.001;
    
    var gamma = function(shape, scale){
      return {
        "cdf": function(x){ return jStat.gamma.cdf(x, shape, scale); },
        "pdf": function(x){ return jStat.gamma.pdf(x, shape, scale); },
        "inv": function(p){ return jStat.gamma.inv(p, shape, scale); },
        "label": "Gamma(α = " + shape + ", θ = " + scale + ")"
      };
    }
    
    var lognormal = function(mu, sigma){
      return {
        "cdf": function(x){ return jStat.lognormal.inv(x, mu, sigma); },
        "pdf": function(x){ return jStat.lognormal.pdf(x, mu, sigma); }
      };
    }
    
    var dists = [
      gamma(1, 2),
      gamma(2, 2),
      gamma(3, 2),
      gamma(5, 1),
      gamma(9, 0.5),
      gamma(7.5, 1)
    ]
    
    var x = d3.scale.linear()
    	.range([0, width / 2])
    	.domain([0, d3.max(dists.map(function(dist){
        return dist.inv(1 - p);
      }))])
      .nice();
 
    var points = d3.range(x.domain()[0],
                          x.domain()[1], p);
      
		var y1 = d3.scale.linear()
    	.range([height, 0])
      .domain([0, d3.max(dists.map(function(dist){
        return d3.max(points, function(pt){ return dist.pdf(pt); })
      }))])
      .nice();
    
		var y2 = d3.scale.linear()
    	.range([height, 0])
 			.domain([0, 1]);
    
    var color = d3.scale.category10();

var xAxis = d3.svg.axis().scale(x).orient("bottom");
    svg1.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
    svg2.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
       .call(xAxis);
    
    var y1Axis = d3.svg.axis().scale(y1).orient("left");
    var y2Axis = d3.svg.axis().scale(y2).orient("left");
    svg1.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0,0)")
        .call(y1Axis);
    svg2.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0,0)")
        .call(y2Axis);
    
    var pdf_line = function(dist){
      return d3.svg.line()
      	.x(function(d) { return x(d); })
      	.y(function(d) { return y1(dist.pdf(d)); })
      	.interpolate("linear");
    }
    
    var cdf_line = function(dist){
      return d3.svg.line()
      	.x(function(d) { return x(d); })
      	.y(function(d) { return y2(dist.cdf(d)); })
      	.interpolate("linear");
    }
    
    var pdf_lines = dists.map(pdf_line);
    var cdf_lines = dists.map(cdf_line);
    
    svg1.selectAll("path.pdf")
        .data(pdf_lines)
    	.enter()
    		.append("path").attr("class", "pdf")
	      .attr("d", function(dist){ return dist(d3.range(0, 20, p)); })
    		.attr("stroke", function(dist, i){ return color(i); });
    
    svg2.selectAll("path.cdf")
        .data(cdf_lines)
    	.enter()
    		.append("path").attr("class", "cdf")
	      .attr("d", function(dist){ return dist(d3.range(0, 20, p)); })
    		.attr("stroke", function(dist, i){ return color(i); });
    
    svg1.append("g")
        .attr("class", "legendOrdinal")
        .attr("transform", "translate(" + (width / 4) + ",20)");

var legendOrdinal = d3.legend.color()
        .shape("circle")
    		.shapeRadius(7)
    		.shapePadding(10)
        .scale(color)
    		.labels(dists.map(function(dist){ return dist.label; }));

svg.select(".legendOrdinal")
  .call(legendOrdinal);
  </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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.6.0/d3-legend.js