Normal Distribution - Angular, d3.js, simple statistic.

https://github.com/camilortte/normalDistributionAngular

by camilortte

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstat/1.7.1/jstat.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simple-statistics/1.0.1/simple_statistics.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <title>Probabilidad</title>
    <meta name="description" content="website description" />
    <meta name="keywords" content="website keywords, website keywords" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <!-- <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/camilortte/normalDistributionAngular/js/d3.v3.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/camilortte/normalDistributionAngular/js/textures.min.js"></script>
  </head>

  <body>
    <div class="container" ng-app="discretasApp" ng-controller="discretasController">
      <div class="row">
        <h1 class="text-center">Distribución Normal</h1>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="form-group">
            <label for="">Recta1<span class=""> X1({{ rectas.recta1 }})</span>:</label
            >
            <input
              type="range"
              ng-model="rectas.recta1"
              step="0.1"
              min="{{ xmin }}"
              max="{{ xmax }}"
              id="fader"
              ng-change="changeRect()"
            />
          </div>

          <div class="form-group">
            <label for=""
              >Recta2<span class=""> X2({{ rectas.recta2 }})</span></label
            >
            <input
              type="range"
              ng-model="rectas.recta2"
          ...

CSS

input[type="range"] {
  -webkit-appearance: none;
  margin: 5px 0 15px 0;
  width: 100%;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #004f65;
  border-radius: 25px;
  border: 0px solid #000101;
}

input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: black;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #004f65;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #004f65;
  border-radius: 25px;
  border: 0px solid #000101;
}

input[type="range"]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: black;
  cursor: pointer;
}

input[type="range"]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}

input[type="range"]::-ms-fill-lower {
  background: #004f65;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

input[type="range"]::-ms-fill-upper {
  background: #004f65;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

input[type="range"]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: black;
  cursor:...

JavaScript

var discretasApp = angular.module("discretasApp", []);

angular
  .module("discretasApp")
  .controller("discretasController", discretasController);

discretasController.$inject = ["$scope"];

function discretasController($scope) {
  var vm = $scope;

  vm.para = {
    mu1: 3,
    sigma1: 3,
    df: 3
  };

  var rectas = {
    recta1: vm.para.mu1,
    recta2: vm.para.mu1 + 1
  };

  vm.rectas = rectas;
  vm.viewZ = true;

  var bodyw = parseInt(d3.select("body").style("width"), 10);
  if (bodyw < 767) {
    var aspect = 0.6;
    var margin = {
      top: 40,
      right: 15,
      bottom: 20,
      left: 15
    };
  } else {
    var aspect = 0.4;
    var margin = {
      top: 40,
      right: 20,
      bottom: 30,
      left: 20
    };
  }

  var w = parseInt(d3.select("#viz").style("width"), 10);
  w = w - margin.left - margin.right;
  var h = aspect * w - margin.top - margin.left;

  var xmin = -15,
    xmax = 15;
  vm.cosa1 = xmin;
  vm.cosa2 = xmax;
  vm.xmin = xmin;
  vm.xmax = xmax;

  // x.values
  var x = [];
  for (var i = xmin; i <= xmax; i += 0.01) {
    x.push(i);
  }

  // Generates data
  function genData(mu, sigma) {
    var y = [];
    for (var i = 0; i < x.length; i++) {
      y.push(jStat.normal.pdf(x[i], mu, sigma));
    }
    var tmp = [];
    for (var i = 0; i < x.length; i++) {
      tmp.push([x[i], y[i]]);
    }
    var data = {
      data: tmp,
      x: x,
      y: y
    };
    return data;
  }

  function genDataT(df) {
    var y = [];
    for (var i = 0; i < x.length; i++) {
      y.push(jStat.studentt.pdf(x[i], df));
    }

    var tmp = [];
    for (var i = 0; i < x.length; i++) {
      tmp.push([x[i], y[i]]);
    }
    tmp.unshift([xmin, 0]);
    tmp.push([xmax, 0]);
    var data = {
      data: tmp,
      x: x,
      y: y
    };
    return data;
  }

  // Data sets
  var data1 = genData(vm.para.mu1, vm.para.sigma1),
    data2 = genData(0, vm.para.sigma1);

  function genDataPoly() {
    var poly = [];
    for (var i = 0; i <...