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
Last active
December 1, 2015 17:47
-
-
Save SpaceActuary/6ff5abbfe376d1fea529 to your computer and use it in GitHub Desktop.
Distributions 3
This file contains hidden or 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; | |
| 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment