-
Notifications
You must be signed in to change notification settings - Fork 11
/
demo.html
66 lines (62 loc) · 2.98 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="autoencoder.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="demo.js"></script>
<style>
.bar rect {
fill: steelblue;
shape-rendering: crispEdges;
}
.bar text {
fill: #fff;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.chart-header {
height: 36px;
}
.chart {
height: 128px;
}
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="ChartsController" data-ng-init="init()">
<div class="row">
<div class="col-md-2" ng-repeat="example in examples">
<h2><a href="#{{ example }}" ng-click="setData(example)">{{ example }}</a></h2>
</div>
</div>
<div class="row">
<div class="col-md-3" ng-repeat="header in headers">
<h4 class="chart-header">{{ header }}</h4>
<div class="chart" render-chart></div>
</div>
</div>
<h2>What is this?</h2>
<ul>
<li/>This lets you visualize marginal distributions of a complex joint distribution.
<li/>Click on any of the data sets above to visualize it.
<li/>The black lines are the marginal distribution <i>P(x<sub>i</sub>)</i> of each parameter <i>i</i>.
<li/>If you hold your mouse over chart <i>j</i>, it will compute the marginal distributions <i>P(x<sub>i</sub> | x<sub>j</sub>)</i> in green.
<li/>The shaded area under the green curve represent the 50% confidence interval around the median.
<li/>Click on any parameter to fix it to a certain value so you can compute <i>P(x<sub>i</sub> | x<sub>j</sub>, x<sub>k</sub>, ...)</i> etc.
</ul>
<h2>Counterintuitive stuff</h2>
<ul>
<li>Why doesn't it render <i>P(x<sub>i</sub> | x<sub>i</sub>)</i> as single point? (or a <a href="http://en.wikipedia.org/wiki/Dirac_delta_function">Dirac delta</a>). Because the projection to the low dimensional manifold is lossy and not invertible.
<li/>You can think of it as computing the marginal distribution of human attributes conditional on the human height being 2.4m. In that case there's so few examples it's better to look at people who are slightly less tall.
<li/>Why doesn't the 50% confidence interval of <i>P(x<sub>i</sub>)</i> always include the point <i>x<sub>i</sub></i>? Same reason as above.
<li/>Why are there negative probabilities sometimes? Because the predicted CDF ends up being decreasing. This probably just means training wasn't long enough.
<li/>The PDF is computed from the CDF by thinking of the split points as step functions. To make it more visually pleasing we smooth them by replacing them with sigmoids instead.
</div>
</body>
</html>