Recreation of wikipedia's gamma distribution plots in d3.
Powered using d3.js, jStat, and d3-legend.
Built with blockbuilder.org.
forked from SpaceActuary's block: Distributions
forked from SpaceActuary's block: Distributions 2
Recreation of wikipedia's gamma distribution plots in d3.
Powered using d3.js, jStat, and d3-legend.
Built with blockbuilder.org.
forked from SpaceActuary's block: Distributions
forked from SpaceActuary's block: Distributions 2
<!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; | |
font-family: Arial, Helvetica, sans-serif | |
} | |
svg { | |
width: 100%; | |
height: 100%; | |
} | |
path { | |
stroke-width: 1; | |
fill: none; | |
} | |
.axis { | |
/*stroke: lightgrey;*/ | |
shape-rendering: crispEdges; | |
} | |
.x.axis line { stroke: silver; } | |
.x.axis .minor { stroke-opacity: .5; } | |
.x.axis path { stroke: silver; } | |
.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 = 1; | |
var max_p = 0.01; | |
var tweedie = function(shape, scale){ | |
return { | |
"cdf": function(x){ return jStat.negbin.cdf(x, shape, scale/(scale+1)); }, | |
"pdf": function(x){ return jStat.negbin.pdf(x, shape, scale/(scale+1)); }, | |
"inv": function(p){ return jStat.gamma.inv(p, shape, scale/(scale+1)); }, | |
"label": "NegBin(r = " + d3.round(shape, 3) + ", " + | |
"p = " + d3.round(scale/(scale+1), 3) + ")" | |
}; | |
} | |
var dists = [ | |
tweedie(500, 2), | |
] | |
console.log("pareto mean", jStat.pareto.mean(2.5, 2)) | |
var x = d3.scale.linear() | |
.range([0, width / 2]) | |
.domain([0, d3.max(dists.map(function(dist){ | |
return dist.inv(1 - max_p); | |
}))]) | |
.nice(); | |
var points = d3.range(x.domain()[0], | |
x.domain()[1], p); | |
console.log("points", points) | |
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(points); }) | |
.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(points); }) | |
.attr("stroke", function(dist, i){ return color(i); }); | |
svg1.append("g") | |
.attr("class", "legendOrdinal") | |
.attr("transform", "translate(" + (width / 5) + ",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> |