-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
82 lines (77 loc) · 5.61 KB
/
index.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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="An application for calculating the dependency of migration based on certian limiting features.">
<meta name="author" content="Shawn Tabrizi">
<title>Feature Dependent Migration Calculator</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="feature_calculator.css" rel="stylesheet">
</head>
<body>
<!-- Begin page content -->
<div class="container-fluid">
<div class="page-header">
<h1>Feature Dependent Migration Calculator</h1>
</div>
<div class="row">
<div class="col-lg-4" id="sidebar">
<label class="btn btn-primary btn-file">
Select a Local CSV File <input type="file" id="csv" style="display:none;">
</label>
<br /><br />
<div id="key">
<h3>Read Me:</h3>
<p>This app will allow you to observe how certain features allow you to migrate from one state to another.</p>
<p>The app expects a CSV file. The first row should be composed of table headers, and then you can have any number of columns with data.</p>
<p>Columns where you want to track data should only have the values "True" or "False". All other columns are ignored. This is calibrated based on the first row of data in the CSV.</p>
<h3>Example</h3>
<p>Let's say you have a bunch of different birds all in different cages for their specific needs.</p>
<p>Your goal is to create a super-cage which can hold them all.</p>
<p>To do this, you must track all the different needs of these birds, and what features your cage currently has. As you add a feature to the cage, some subset of birds should be able to move into the cage.</p>
<p>Looking at the data from this perspective may help you decide which features are most important and will affect the most birds.</p>
<a href="birds.csv" download="birds.csv" class="btn btn-outline-primary" role="button">Download Example Data</a>
<h3>Notes</h3>
<p>Note that there are two ways to observe data using this page:</p>
<ol>
<li>Starting with everything selected, and then removing features to see the density of the population dependent on those features. <b>(default)</b></li>
<li>Starting with nothing selected, and then adding features to see the number you would be able to migrate if you implemented those features.</li>
</ol>
<p>With the example data, starting with everything selected, and removing water, you will see that a huge density of the birds would be unable to migrate. So clearly this is an important feature.</p>
<p>However, if you start with no features selected, and then just select water, you will see again that almost no birds can migrate, because many of them have additional dependencies.</p>
<p>You will need to use both perspectives to make decisions about the most important features required for migration. Play around and see!</p>
</div>
<h2 id="percent"></h2>
<div id="featureOrder"></div>
</div>
<div class="col-lg-8">
<canvas id="myChart" width="400" height="800"></canvas>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table id="out" class="table table-condensed table-bordered table-hover"></table>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Created by <a href="http://shawntabrizi.com">Shawn Tabrizi</a> - June 2017 - using <a href="https://github.com/evanplaice/jquery-csv">JQuery CSV</a> and <a href="https://github.com/chartjs/Chart.js">Chart.JS</a> - <a href="https://msaonboarding.blob.core.windows.net/analysis/v1_v2_feature_parity_analysis.html">inspired</a> by <a href="https://github.com/dstrockis">Danny Strockis</a></p>
</div>
</footer>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Chart JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<!-- JQuery CSV -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.8.8/jquery.csv.min.js"></script>
<!--Custom JS-->
<script src="feature_calculator.js"></script>
</body>
</html>