Recreation of wikipedia's gamma distribution plots in d3.
Powered using d3.js, jStat, and d3-legend.
Built with blockbuilder.org.
Last active
November 28, 2015 22:14
-
-
Save SpaceActuary/a0d2efed63aeefce5cb0 to your computer and use it in GitHub Desktop.
Distributions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment