From 77b55fa06f854aefc1cb20b7c3a4b768994fd09a Mon Sep 17 00:00:00 2001
From: wassname <wassname@wassname.org>
Date: Mon, 28 Mar 2016 15:11:37 +0800
Subject: [PATCH] Initial attempt at gh-pages demo

---
 index.html | 547 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 547 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..31dd37c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,547 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>Statistical Distributions</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.css" rel="stylesheet">
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sugar/1.4.1/sugar-full.development.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.js"></script>
+    <script type="text/javascript" src="/src/random.js"></script>
+    <!-- <script type="text/javascript" src="/web/20140418143337js_/http://blog.codinglabs.org/demo/s/js/v/distributions.js"></script> -->
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.10/highcharts.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.js"></script>
+    <style>
+    body {
+  font: 10px sans-serif;
+}
+
+.bar rect {
+  fill: steelblue;
+  shape-rendering: crispEdges;
+}
+
+.bar text {
+  fill: #fff;
+}
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+.plotLab {
+  font-size: 28px;
+  font-family: "Helvetica";
+}
+
+.grid line {
+  stroke: #C8D5DA;
+  stroke-dasharray: 1 1;
+}
+
+.line {
+  fill: none;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
+
+    </style>
+</head>
+
+<body>
+
+    <div class="container">
+        <h2 id="diName"></h2>
+        <div class="row-fluid">
+            <div class="span8">
+                <h4>Density Histogram</h4>
+                <!-- <div id="density" style="width:100%;height:400px"></div> -->
+                <h4>Distribution Histogram</h4>
+                <!-- <div id="distribution" style="width:100%;height:400px"></div> -->
+            </div>
+            <div class="span4">
+                <form>
+                    <fieldset>
+                        <legend>Parameters</legend>
+                        <div class="control-group">
+                            <label class="control-label" for="sd">statistical distributions</label>
+                            <div class="controls">
+                                <select id="sd"></select>
+                            </div>
+                        </div>
+
+                        <div class="control-group">
+                            <label class="control-label" for="total">number of points</label>
+                            <div class="controls">
+                                <input type="number" value="10000" min="1" max="10000000" id="total" />
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label" for="intval">intval</label>
+                            <div class="controls">
+                                <input type="number" value="0.1" min="0.1" step="0.1" id="intval" />
+                            </div>
+                        </div>
+                        <div id="diParams"></div>
+                        <div class="control-group">
+                            <div class="controls">
+                                <button id="gen" type="button" class="btn btn-success"><i class="icon-play icon-white"></i> Generate</button>
+                            </div>
+                        </div>
+                    </fieldset>
+                </form>
+            </div>
+        </div>
+    </div>
+    <script type="text/javascript">
+        var distributions = {
+            "arcsine": {
+                "argDefaults": [0, 1],
+                "argNames": ["min", "max"]
+            },
+            "beta": {
+                "argDefaults": [1, 1, 0, 1],
+                "argNames": ["v", "w", "min", "max"]
+            },
+            "cauchy": {
+                "argDefaults": [1, 1],
+                "argNames": ["a", "b"]
+            },
+            "chiSquare": {
+                "argDefaults": [1],
+                "argNames": ["df"]
+            },
+            "cosine": {
+                "argDefaults": [0, 1],
+                "argNames": ["min", "max"]
+            },
+            "doubleLog": {
+                "argDefaults": [0, 1],
+                "argNames": ["min", "max"]
+            },
+            "erlang": {
+                "argDefaults": [1, 1],
+                "argNames": ["b", "c"]
+            },
+            "exponential": {
+                "argDefaults": [1, 1],
+                "argNames": ["a", "b"]
+            },
+            "extremeValue": {
+                "argDefaults": [0.5, 5, 0, 1],
+                "argNames": ["a", "b"]
+            },
+            "fRatio": {
+                "argDefaults": [1, 1],
+                "argNames": ["v", "w"]
+            },
+            "gamma": {
+                "argDefaults": [1, 1, 1],
+                "argNames": ["a", "b", "c"]
+            },
+            "laplace": {
+                "argDefaults": [1, 1],
+                "argNames": ["a", "b"]
+            },
+            "logarithmic": {
+                "argDefaults": [0, 1],
+                "argNames": ["min", "max"]
+            },
+            "logistic": {
+                "argDefaults": [1, 1],
+                "argNames": ["a", "b"]
+            },
+            "lognormal": {
+                "argDefaults": [1, 1, 1],
+                "argNames": ["a", "mu", "sigma"]
+            },
+            "normal": {
+                "argDefaults": [1, 1],
+                "argNames": ["mu", "sigma"]
+            },
+            "parabolic": {
+                "argDefaults": [0, 1],
+                "argNames": ["min", "max"]
+            },
+            "pareto": {
+                "argDefaults": [1],
+                "argNames": ["c"]
+            },
+            "pearson5": {
+                "argDefaults": [1, 1],
+                "argNames": ["b", "c"]
+            },
+            "pearson6": {
+                "argDefaults": [1, 1, 1],
+                "argNames": ["b", "v", "w"]
+            },
+            "power": {
+                "argDefaults": [1],
+                "argNames": ["c"]
+            },
+            "rayleigh": {
+                "argDefaults": [1, 1],
+                "argNames": ["a", "b"]
+            },
+            "studentT": {
+                "argDefaults": [1],
+                "argNames": ["df"]
+            },
+            "triangular": {
+                "argDefaults": [0, 1, 1],
+                "argNames": ["min", "max", "c"]
+            },
+            "uniform": {
+                "argDefaults": [0, 1],
+                "argNames": ["min", "max"]
+            },
+            "weibull": {
+                "argDefaults": [1, 1, 1],
+                "argNames": ["a", "b", "c"]
+            },
+            "bernoulli": {
+                "argDefaults": [0.5],
+                "argNames": ["p"]
+            },
+            "binomial": {
+                "argDefaults": [10, 0.5],
+                "argNames": ["n", "p"]
+            },
+            "geometric": {
+                "argDefaults": [0.5],
+                "argNames": ["p"]
+            },
+            "hypergeometric": {
+                "argDefaults": [6, 10, 4],
+                "argNames": ["n", "N", "K"]
+            },
+            "negativeBinomial": {
+                "argDefaults": [5, 0.5],
+                "argNames": ["s", "p"]
+            },
+            "pascal": {
+                "argDefaults": [5, 0.5],
+                "argNames": ["s", "p"]
+            },
+            "poisson": {
+                "argDefaults": [5],
+                "argNames": ["mu"]
+            },
+            "uniformDiscrete": {
+                "argDefaults": [1, 10],
+                "argNames": ["i", "j"]
+            }
+        }
+
+
+        var bins = 40
+        var numPoints = 5500
+
+        function line(values, name) {
+            // http://bl.ocks.org/phil-pedruco/88cb8a51cdce45f13c7e
+            // line chart based on http://bl.ocks.org/mbostock/3883245
+            var margin = {
+                    top: 20,
+                    right: 20,
+                    bottom: 30,
+                    left: 50
+                },
+                width = 960 - margin.left - margin.right,
+                height = 500 - margin.top - margin.bottom;
+            var flatVals = _(values).values().flatten().value()
+            var max = _.max(flatVals)
+            var min = _.min(flatVals)
+            max=_.clamp(max,0,40)
+            min=_.clamp(min,-40,0)
+
+
+
+            var x = d3.scale.linear()
+                .domain([min, max])
+                .range([0, width]);
+
+            var y = d3.scale.linear()
+                .range([height, 0]);
+
+            var xAxis = d3.svg.axis()
+                .scale(x)
+                .orient("bottom");
+
+            var yAxis = d3.svg.axis()
+                .scale(y)
+                .orient("left");
+
+            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 + ")");
+
+            x.domain(d3.extent([min,max]));
+            y.domain([0, 1]);
+
+            svg.append("g")
+                .attr("class", "x axis")
+                .attr("transform", "translate(0," + height + ")")
+                .call(xAxis);
+
+            svg.append("g")
+                .attr("class", "y axis")
+                .call(yAxis);
+
+
+            // legend
+            var colors = d3.scale.category10()
+            var names = Object.keys(values)
+            var ordinal = d3.scale.category10()
+                .domain(names)
+
+            svg.append("g")
+                .attr("class", "legendOrdinal")
+                .attr("transform", "translate(" + width * 0.8 + ",20)");
+
+            var legendOrdinal = d3.legend.color()
+                .shape("path", d3.svg.symbol().type("triangle-up").size(150)())
+                .shapePadding(10)
+                .scale(ordinal);
+
+            svg.select(".legendOrdinal")
+                .call(legendOrdinal);
+
+            var allData = {}
+            for (var name in values) {
+                var nameInd = Object.keys(values).indexOf(name)
+                var vals = values[name]
+                var dmin = _.min(vals)
+                var dmax = _.max(vals)
+                dmax=_.clamp(dmax,min,max)
+                dmin=_.clamp(dmin,min,max)
+                var nbins = vals.length / 100
+                var dsteps = (dmax - dmin) / nbins
+                var dbins = d3.range(dmin, dmax, dsteps)
+                allData[name] = d3.layout.histogram()
+                    .bins(dbins)
+                    (vals);
+
+                // normalise counts
+
+                // scale by bin width and total count
+                allData[name] = allData[name]
+                    .map(v => {
+                        v.y = v.y / values[name].length * ((dmax - dmin) / v.dx);
+                        return v;
+                    })
+
+                // scale by max y
+                var maxy = _(allData[name]).map(v => v.y).max()
+                allData[name] = allData[name]
+                    .map(v => {
+                        v.y = v.y / maxy;
+                        return v;
+                    })
+
+                var line = d3.svg.line()
+                    .x(function(d) {
+                        return x(d.x);
+                    })
+                    .y(function(d) {
+                        return y(d.y);
+                    })
+                    .interpolate('basis')
+
+                svg.append("path")
+                    .datum(allData[name])
+                    .attr("class", "line")
+                    .attr("d", line)
+                    .style("stroke", colors(nameInd));
+
+                console.log(
+                    name,
+                    _(allData[name]).map(r => r.x).min(),
+                    _(allData[name]).map(r => r.x).max(),
+                    _(allData[name]).map(r => r.y).min(),
+                    _(allData[name]).map(r => r.y).max()
+                )
+            }
+
+        }
+
+
+        /* graph from http://bl.ocks.org/mbostock/3048450*/
+        function hist(values, nbins, name) {
+            if (!nbins) nbins = bins || 20
+
+            // A formatter for counts.
+            var formatCount = d3.format(",.0f");
+            var min = Math.min.apply(null, values);
+            var max = Math.max.apply(null, values);
+
+            var margin = {
+                    top: 10,
+                    right: 30,
+                    bottom: 30,
+                    left: 30
+                },
+                width = 960 - margin.left - margin.right,
+                height = 500 - margin.top - margin.bottom;
+
+            var x = d3.scale.linear()
+                .domain([min, max])
+                .range([0, width]);
+
+            // Generate a histogram using N uniformly-spaced bins.
+            var data = d3.layout.histogram()
+                .bins(x.ticks(bins))
+                (values);
+
+            var y = d3.scale.linear()
+                .domain([d3.min(data, function(d) {
+                    return d.y;
+                }), d3.max(data, function(d) {
+                    return d.y;
+                })])
+                .range([height, 0]);
+
+            var xAxis = d3.svg.axis()
+                .scale(x)
+                .orient("bottom");
+
+            var yAxis = d3.svg.axis()
+                .scale(y)
+                .orient("left");
+
+            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 bar = svg.selectAll(".bar")
+                .data(data)
+                .enter().append("g")
+                .attr("class", "bar")
+                .attr("transform", function(d) {
+                    return "translate(" + x(d.x) + "," + y(d.y) + ")";
+                });
+
+            bar.append("rect")
+                .attr("x", 1)
+                .attr("width", x(data[0].dx) - 1)
+                .attr("height", function(d) {
+                    return height - y(d.y);
+                });
+
+            // bind labels
+            bar.append("text")
+                .attr("dy", ".75em")
+                .attr("y", 6)
+                .attr("x", x(data[0].dx) / 2)
+                .attr("text-anchor", "middle")
+                .text(function(d) {
+                    return formatCount(d.y);
+                });
+
+            svg.append("g")
+                .attr("class", "x axis")
+                .attr("transform", "translate(0," + height + ")")
+                .call(xAxis);
+
+            svg.append("g")
+                .attr("class", "y axis")
+                .call(yAxis);
+
+            var g = svg.append("g")
+                //.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+            var gridX = g.append("g")
+                .attr("class", "grid")
+                .attr("transform", "translate(0," + height + ")")
+                .call(xAxis
+                    .tickSize(-height, 0, 0)
+                    .tickFormat("")
+                );
+
+            var gridY = g.append("g")
+                .attr("class", "grid")
+                .call(yAxis
+                    .tickSize(-width, 0, 0)
+                    .tickFormat("")
+                );
+
+            var label = g.append("svg:text")
+                .attr("class", "plotLab")
+                .attr("text-anchor", "middle")
+                .attr("x", width / 2)
+                .attr("y", height / 20)
+                .text(name);
+        }
+
+        $(function() {
+
+
+
+            /** generate random numbers **/
+            function gen() {
+
+                // get values from buttons
+                var sd = $('#sd').val()
+                var total = $('#total').val()
+                // var intval = $('#intval').val()
+
+                var f = random[sd]
+                var argDefaults = distributions[sd].argDefaults
+                var vals = genVals(sd,total)
+
+                hist(vals,20,sd)
+
+                // var o={}
+                // o[sd]=vals
+                // line(o)
+            }
+
+            function genVals(sd,total){
+                var intval = $('#intval').val()
+
+                var f = random[sd]
+                var argDefaults = distributions[sd].argDefaults
+                var vals = []
+                for (var i = 0; i < total; i++) {
+                    vals.push(f.apply(random, argDefaults))
+                }
+                return vals
+            }
+
+            var total = $('#total').val()
+            var allVals={}
+            for (var sd in distributions) {
+                if (distributions.hasOwnProperty(sd)) {
+                    allVals[sd]=genVals(sd,total)
+                }
+            }
+            line(allVals)
+
+            /** change Distribution **/
+            function changeDi(event) {
+                var dist = $('#sd').val()
+            }
+
+            var diMeta = Object.keys(random)
+            $.each(diMeta, function(i, e) {
+                $('#sd').append('<option value="' + e + '">' + e + '</option>');
+            });
+            $('#sd').on('change', changeDi);
+            $('#gen').on('click', gen);
+
+            changeDi();
+        });
+    </script>
+</body>
+
+</html>
