├── .gitignore
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── analytics.js
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── dataset.ts
    ├── heatmap.ts
    ├── linechart.ts
    ├── nn.ts
    ├── playground.ts
    ├── seedrandom.d.ts
    └── state.ts
├── styles.css
├── tsconfig.json
└── tslint.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 | *.log
4 | .vscode
5 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | Want to contribute? Great! First, read this page (including the small print at the end).
 2 | 
 3 | ### Before you contribute
 4 | Before we can use your code, you must sign the
 5 | [Google Individual Contributor License Agreement]
 6 | (https://cla.developers.google.com/about/google-individual)
 7 | (CLA), which you can do online. The CLA is necessary mainly because you own the
 8 | copyright to your changes, even after your contribution becomes part of our
 9 | codebase, so we need your permission to use and distribute your code. We also
10 | need to be sure of various other things—for instance that you'll tell us if you
11 | know that your code infringes on other people's patents. You don't have to sign
12 | the CLA until after you've submitted your code for review and a member has
13 | approved it, but you must do it before we can put your code into our codebase.
14 | Before you start working on a larger contribution, you should get in touch with
15 | us first through the issue tracker with your idea so that we can help out and
16 | possibly guide you. Coordinating up front makes it much easier to avoid
17 | frustration later on.
18 | 
19 | ### Code reviews
20 | All submissions, including submissions by project members, require review. We
21 | use Github pull requests for this purpose.
22 | 
23 | ### The small print
24 | Contributions made by corporations are covered by a different agreement than
25 | the one above, the
26 | [Software Grant and Corporate Contributor License Agreement]
27 | (https://cla.developers.google.com/about/google-corporate).
28 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | 
  2 |                                  Apache License
  3 |                            Version 2.0, January 2004
  4 |                         http://www.apache.org/licenses/
  5 | 
  6 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  7 | 
  8 |    1. Definitions.
  9 | 
 10 |       "License" shall mean the terms and conditions for use, reproduction,
 11 |       and distribution as defined by Sections 1 through 9 of this document.
 12 | 
 13 |       "Licensor" shall mean the copyright owner or entity authorized by
 14 |       the copyright owner that is granting the License.
 15 | 
 16 |       "Legal Entity" shall mean the union of the acting entity and all
 17 |       other entities that control, are controlled by, or are under common
 18 |       control with that entity. For the purposes of this definition,
 19 |       "control" means (i) the power, direct or indirect, to cause the
 20 |       direction or management of such entity, whether by contract or
 21 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 22 |       outstanding shares, or (iii) beneficial ownership of such entity.
 23 | 
 24 |       "You" (or "Your") shall mean an individual or Legal Entity
 25 |       exercising permissions granted by this License.
 26 | 
 27 |       "Source" form shall mean the preferred form for making modifications,
 28 |       including but not limited to software source code, documentation
 29 |       source, and configuration files.
 30 | 
 31 |       "Object" form shall mean any form resulting from mechanical
 32 |       transformation or translation of a Source form, including but
 33 |       not limited to compiled object code, generated documentation,
 34 |       and conversions to other media types.
 35 | 
 36 |       "Work" shall mean the work of authorship, whether in Source or
 37 |       Object form, made available under the License, as indicated by a
 38 |       copyright notice that is included in or attached to the work
 39 |       (an example is provided in the Appendix below).
 40 | 
 41 |       "Derivative Works" shall mean any work, whether in Source or Object
 42 |       form, that is based on (or derived from) the Work and for which the
 43 |       editorial revisions, annotations, elaborations, or other modifications
 44 |       represent, as a whole, an original work of authorship. For the purposes
 45 |       of this License, Derivative Works shall not include works that remain
 46 |       separable from, or merely link (or bind by name) to the interfaces of,
 47 |       the Work and Derivative Works thereof.
 48 | 
 49 |       "Contribution" shall mean any work of authorship, including
 50 |       the original version of the Work and any modifications or additions
 51 |       to that Work or Derivative Works thereof, that is intentionally
 52 |       submitted to Licensor for inclusion in the Work by the copyright owner
 53 |       or by an individual or Legal Entity authorized to submit on behalf of
 54 |       the copyright owner. For the purposes of this definition, "submitted"
 55 |       means any form of electronic, verbal, or written communication sent
 56 |       to the Licensor or its representatives, including but not limited to
 57 |       communication on electronic mailing lists, source code control systems,
 58 |       and issue tracking systems that are managed by, or on behalf of, the
 59 |       Licensor for the purpose of discussing and improving the Work, but
 60 |       excluding communication that is conspicuously marked or otherwise
 61 |       designated in writing by the copyright owner as "Not a Contribution."
 62 | 
 63 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 64 |       on behalf of whom a Contribution has been received by Licensor and
 65 |       subsequently incorporated within the Work.
 66 | 
 67 |    2. Grant of Copyright License. Subject to the terms and conditions of
 68 |       this License, each Contributor hereby grants to You a perpetual,
 69 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 70 |       copyright license to reproduce, prepare Derivative Works of,
 71 |       publicly display, publicly perform, sublicense, and distribute the
 72 |       Work and such Derivative Works in Source or Object form.
 73 | 
 74 |    3. Grant of Patent License. Subject to the terms and conditions of
 75 |       this License, each Contributor hereby grants to You a perpetual,
 76 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 77 |       (except as stated in this section) patent license to make, have made,
 78 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 79 |       where such license applies only to those patent claims licensable
 80 |       by such Contributor that are necessarily infringed by their
 81 |       Contribution(s) alone or by combination of their Contribution(s)
 82 |       with the Work to which such Contribution(s) was submitted. If You
 83 |       institute patent litigation against any entity (including a
 84 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 85 |       or a Contribution incorporated within the Work constitutes direct
 86 |       or contributory patent infringement, then any patent licenses
 87 |       granted to You under this License for that Work shall terminate
 88 |       as of the date such litigation is filed.
 89 | 
 90 |    4. Redistribution. You may reproduce and distribute copies of the
 91 |       Work or Derivative Works thereof in any medium, with or without
 92 |       modifications, and in Source or Object form, provided that You
 93 |       meet the following conditions:
 94 | 
 95 |       (a) You must give any other recipients of the Work or
 96 |           Derivative Works a copy of this License; and
 97 | 
 98 |       (b) You must cause any modified files to carry prominent notices
 99 |           stating that You changed the files; and
100 | 
101 |       (c) You must retain, in the Source form of any Derivative Works
102 |           that You distribute, all copyright, patent, trademark, and
103 |           attribution notices from the Source form of the Work,
104 |           excluding those notices that do not pertain to any part of
105 |           the Derivative Works; and
106 | 
107 |       (d) If the Work includes a "NOTICE" text file as part of its
108 |           distribution, then any Derivative Works that You distribute must
109 |           include a readable copy of the attribution notices contained
110 |           within such NOTICE file, excluding those notices that do not
111 |           pertain to any part of the Derivative Works, in at least one
112 |           of the following places: within a NOTICE text file distributed
113 |           as part of the Derivative Works; within the Source form or
114 |           documentation, if provided along with the Derivative Works; or,
115 |           within a display generated by the Derivative Works, if and
116 |           wherever such third-party notices normally appear. The contents
117 |           of the NOTICE file are for informational purposes only and
118 |           do not modify the License. You may add Your own attribution
119 |           notices within Derivative Works that You distribute, alongside
120 |           or as an addendum to the NOTICE text from the Work, provided
121 |           that such additional attribution notices cannot be construed
122 |           as modifying the License.
123 | 
124 |       You may add Your own copyright statement to Your modifications and
125 |       may provide additional or different license terms and conditions
126 |       for use, reproduction, or distribution of Your modifications, or
127 |       for any such Derivative Works as a whole, provided Your use,
128 |       reproduction, and distribution of the Work otherwise complies with
129 |       the conditions stated in this License.
130 | 
131 |    5. Submission of Contributions. Unless You explicitly state otherwise,
132 |       any Contribution intentionally submitted for inclusion in the Work
133 |       by You to the Licensor shall be under the terms and conditions of
134 |       this License, without any additional terms or conditions.
135 |       Notwithstanding the above, nothing herein shall supersede or modify
136 |       the terms of any separate license agreement you may have executed
137 |       with Licensor regarding such Contributions.
138 | 
139 |    6. Trademarks. This License does not grant permission to use the trade
140 |       names, trademarks, service marks, or product names of the Licensor,
141 |       except as required for reasonable and customary use in describing the
142 |       origin of the Work and reproducing the content of the NOTICE file.
143 | 
144 |    7. Disclaimer of Warranty. Unless required by applicable law or
145 |       agreed to in writing, Licensor provides the Work (and each
146 |       Contributor provides its Contributions) on an "AS IS" BASIS,
147 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
148 |       implied, including, without limitation, any warranties or conditions
149 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
150 |       PARTICULAR PURPOSE. You are solely responsible for determining the
151 |       appropriateness of using or redistributing the Work and assume any
152 |       risks associated with Your exercise of permissions under this License.
153 | 
154 |    8. Limitation of Liability. In no event and under no legal theory,
155 |       whether in tort (including negligence), contract, or otherwise,
156 |       unless required by applicable law (such as deliberate and grossly
157 |       negligent acts) or agreed to in writing, shall any Contributor be
158 |       liable to You for damages, including any direct, indirect, special,
159 |       incidental, or consequential damages of any character arising as a
160 |       result of this License or out of the use or inability to use the
161 |       Work (including but not limited to damages for loss of goodwill,
162 |       work stoppage, computer failure or malfunction, or any and all
163 |       other commercial damages or losses), even if such Contributor
164 |       has been advised of the possibility of such damages.
165 | 
166 |    9. Accepting Warranty or Additional Liability. While redistributing
167 |       the Work or Derivative Works thereof, You may choose to offer,
168 |       and charge a fee for, acceptance of support, warranty, indemnity,
169 |       or other liability obligations and/or rights consistent with this
170 |       License. However, in accepting such obligations, You may act only
171 |       on Your own behalf and on Your sole responsibility, not on behalf
172 |       of any other Contributor, and only if You agree to indemnify,
173 |       defend, and hold each Contributor harmless for any liability
174 |       incurred by, or claims asserted against, such Contributor by reason
175 |       of your accepting any such warranty or additional liability.
176 | 
177 |    END OF TERMS AND CONDITIONS
178 | 
179 |    APPENDIX: How to apply the Apache License to your work.
180 | 
181 |       To apply the Apache License to your work, attach the following
182 |       boilerplate notice, with the fields enclosed by brackets "[]"
183 |       replaced with your own identifying information. (Don't include
184 |       the brackets!)  The text should be enclosed in the appropriate
185 |       comment syntax for the file format. We also recommend that a
186 |       file or class name and description of purpose be included on the
187 |       same "printed page" as the copyright notice for easier
188 |       identification within third-party archives.
189 | 
190 |    Copyright [yyyy] [name of copyright owner]
191 | 
192 |    Licensed under the Apache License, Version 2.0 (the "License");
193 |    you may not use this file except in compliance with the License.
194 |    You may obtain a copy of the License at
195 | 
196 |        http://www.apache.org/licenses/LICENSE-2.0
197 | 
198 |    Unless required by applicable law or agreed to in writing, software
199 |    distributed under the License is distributed on an "AS IS" BASIS,
200 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
201 |    See the License for the specific language governing permissions and
202 |    limitations under the License.
203 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Deep playground
 2 | 
 3 | Deep playground is an interactive visualization of neural networks, written in
 4 | TypeScript using d3.js. We use GitHub issues for tracking new requests and bugs.
 5 | Your feedback is highly appreciated!
 6 | 
 7 | **If you'd like to contribute, be sure to review the [contribution guidelines](CONTRIBUTING.md).**
 8 | 
 9 | ## Development
10 | 
11 | To run the visualization locally, run:
12 | - `npm i` to install dependencies
13 | - `npm run build` to compile the app and place it in the `dist/` directory
14 | - `npm run serve` to serve from the `dist/` directory and open a page on your browser.
15 | 
16 | For a fast edit-refresh cycle when developing run `npm run serve-watch`.
17 | This will start an http server and automatically re-compile the TypeScript,
18 | HTML and CSS files whenever they change.
19 | 
20 | ## For owners
21 | To push to production: `git subtree push --prefix dist origin gh-pages`.
22 | 
23 | This is not an official Google product.
24 | 


--------------------------------------------------------------------------------
/analytics.js:
--------------------------------------------------------------------------------
1 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
2 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
3 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
4 | })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
5 | 
6 | var ANALYTICS_ID = 'Add your own analytics ID here';
7 | ga('create', ANALYTICS_ID, 'auto');


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <!-- Copyright 2016 Google Inc. All Rights Reserved.
  3 | 
  4 | Licensed under the Apache License, Version 2.0 (the "License");
  5 | you may not use this file except in compliance with the License.
  6 | You may obtain a copy of the License at
  7 | 
  8 |     http://www.apache.org/licenses/LICENSE-2.0
  9 | 
 10 | Unless required by applicable law or agreed to in writing, software
 11 | distributed under the License is distributed on an "AS IS" BASIS,
 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 | See the License for the specific language governing permissions and
 14 | limitations under the License.
 15 | ==============================================================================-->
 16 | <html>
 17 | <head lang="en">
 18 |   <link rel="icon" type="image/png" href="favicon.png">
 19 |   <meta charset="utf-8">
 20 |   <meta name="viewport" content="width=1024">
 21 |   <meta name="keywords" content="neural networks,machine learning,javascript">
 22 | 
 23 |   <meta property="og:type" content="article"/>
 24 |   <meta property="og:title" content="Tensorflow — Neural Network Playground"/>
 25 |   <meta property="og:description" content="Tinker with a real neural network right here in your browser.">
 26 |   <meta property="og:url" content="http://playground.tensorflow.org"/>
 27 |   <meta property="og:image" content="http://playground.tensorflow.org/preview.png"/>
 28 | 
 29 |   <meta name="twitter:card" value="summary_large_image">
 30 |   <meta name="twitter:title" content="Tensorflow — Neural Network Playground">
 31 |   <meta name="twitter:description" content="Tinker with a real neural network right here in your browser.">
 32 |   <meta name="twitter:url" content="http://playground.tensorflow.org">
 33 |   <meta name="twitter:image" content="http://playground.tensorflow.org/preview.png">
 34 |   <meta name="twitter:image:width" content="560">
 35 |   <meta name="twitter:image:height" content="295">
 36 | 
 37 |   <meta name="author" content="Daniel Smilkov and Shan Carter">
 38 |   <title>A Neural Network Playground</title>
 39 |   <link rel="stylesheet" href="bundle.css" type="text/css">
 40 |   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons" rel="stylesheet" type="text/css">
 41 |   <script src="lib.js"></script>
 42 | </head>
 43 | <body>
 44 |   <!-- GitHub link -->
 45 |   <a class="github-link" href="https://github.com/tensorflow/playground" title="Source on GitHub" target="_blank">
 46 |     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60.5 60.5" width="60" height="60">
 47 |       <polygon class="bg" points="60.5,60.5 0,0 60.5,0 "/>
 48 |       <path class="icon" d="M43.1,5.8c-6.6,0-12,5.4-12,12c0,5.3,3.4,9.8,8.2,11.4c0.6,0.1,0.8-0.3,0.8-0.6c0-0.3,0-1,0-2c-3.3,0.7-4-1.6-4-1.6c-0.5-1.4-1.3-1.8-1.3-1.8c-1.1-0.7,0.1-0.7,0.1-0.7c1.2,0.1,1.8,1.2,1.8,1.2c1.1,1.8,2.8,1.3,3.5,1c0.1-0.8,0.4-1.3,0.8-1.6c-2.7-0.3-5.5-1.3-5.5-5.9c0-1.3,0.5-2.4,1.2-3.2c-0.1-0.3-0.5-1.5,0.1-3.2c0,0,1-0.3,3.3,1.2c1-0.3,2-0.4,3-0.4c1,0,2,0.1,3,0.4c2.3-1.6,3.3-1.2,3.3-1.2c0.7,1.7,0.2,2.9,0.1,3.2c0.8,0.8,1.2,1.9,1.2,3.2c0,4.6-2.8,5.6-5.5,5.9c0.4,0.4,0.8,1.1,0.8,2.2c0,1.6,0,2.9,0,3.3c0,0.3,0.2,0.7,0.8,0.6c4.8-1.6,8.2-6.1,8.2-11.4C55.1,11.2,49.7,5.8,43.1,5.8z"/>
 49 |     </svg>
 50 |   </a>
 51 |   <!-- Header -->
 52 |   <header>
 53 |     <h1 class="l--page">Tinker With a <b>Neural Network</b> <span class="optional">Right Here </span>in Your Browser.<br>Don’t Worry, You Can’t Break It. We Promise.</h1>
 54 |   </header>
 55 | 
 56 |   <!-- Top Controls -->
 57 |   <div id="top-controls">
 58 |     <div class="container l--page">
 59 |       <div class="timeline-controls">
 60 |         <button class="mdl-button mdl-js-button mdl-button--icon ui-resetButton" id="reset-button" title="Reset the network">
 61 |           <i class="material-icons">replay</i>
 62 |         </button>
 63 |         <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored ui-playButton" id="play-pause-button" title="Run/Pause">
 64 |           <i class="material-icons">play_arrow</i>
 65 |           <i class="material-icons">pause</i>
 66 |         </button>
 67 |         <button class="mdl-button mdl-js-button mdl-button--icon ui-stepButton" id="next-step-button" title="Step">
 68 |           <i class="material-icons">skip_next</i>
 69 |         </button>
 70 |       </div>
 71 |       <div class="control">
 72 |         <span class="label">Epoch</span>
 73 |         <span class="value" id="iter-number"></span>
 74 |       </div>
 75 |       <div class="control ui-learningRate">
 76 |         <label for="learningRate">Learning rate</label>
 77 |         <div class="select">
 78 |           <select id="learningRate">
 79 |             <option value="0.00001">0.00001</option>
 80 |             <option value="0.0001">0.0001</option>
 81 |             <option value="0.001">0.001</option>
 82 |             <option value="0.003">0.003</option>
 83 |             <option value="0.01">0.01</option>
 84 |             <option value="0.03">0.03</option>
 85 |             <option value="0.1">0.1</option>
 86 |             <option value="0.3">0.3</option>
 87 |             <option value="1">1</option>
 88 |             <option value="3">3</option>
 89 |             <option value="10">10</option>
 90 |           </select>
 91 |         </div>
 92 |       </div>
 93 |       <div class="control ui-activation">
 94 |         <label for="activations">Activation</label>
 95 |         <div class="select">
 96 |           <select id="activations">
 97 |             <option value="relu">ReLU</option>
 98 |             <option value="tanh">Tanh</option>
 99 |             <option value="sigmoid">Sigmoid</option>
100 |             <option value="linear">Linear</option>
101 |           </select>
102 |         </div>
103 |       </div>
104 |       <div class="control ui-regularization">
105 |         <label for="regularizations">Regularization</label>
106 |         <div class="select">
107 |           <select id="regularizations">
108 |             <option value="none">None</option>
109 |             <option value="L1">L1</option>
110 |             <option value="L2">L2</option>
111 |           </select>
112 |         </div>
113 |       </div>
114 |       <div class="control ui-regularizationRate">
115 |         <label for="regularRate">Regularization rate</label>
116 |         <div class="select">
117 |           <select id="regularRate">
118 |             <option value="0">0</option>
119 |             <option value="0.001">0.001</option>
120 |             <option value="0.003">0.003</option>
121 |             <option value="0.01">0.01</option>
122 |             <option value="0.03">0.03</option>
123 |             <option value="0.1">0.1</option>
124 |             <option value="0.3">0.3</option>
125 |             <option value="1">1</option>
126 |             <option value="3">3</option>
127 |             <option value="10">10</option>
128 |           </select>
129 |         </div>
130 |       </div>
131 |       <div class="control ui-problem">
132 |         <label for="problem">Problem type</label>
133 |         <div class="select">
134 |           <select id="problem">
135 |             <option value="classification">Classification</option>
136 |             <option value="regression">Regression</option>
137 |           </select>
138 |         </div>
139 |       </div>
140 |     </div>
141 |   </div>
142 | 
143 |   <!-- Main Part -->
144 |   <div id="main-part" class="l--page">
145 | 
146 |     <!--  Data Column-->
147 |     <div class="column data">
148 |       <h4>
149 |         <span>Data</span>
150 |       </h4>
151 |       <div class="ui-dataset">
152 |         <p>Which dataset do you want to use?</p>
153 |         <div class="dataset-list">
154 |           <div class="dataset" title="Circle">
155 |             <canvas class="data-thumbnail" data-dataset="circle"></canvas>
156 |           </div>
157 |           <div class="dataset" title="Exclusive or">
158 |             <canvas class="data-thumbnail" data-dataset="xor"></canvas>
159 |           </div>
160 |           <div class="dataset" title="Gaussian">
161 |             <canvas class="data-thumbnail" data-dataset="gauss"></canvas>
162 |           </div>
163 |           <div class="dataset" title="Spiral">
164 |             <canvas class="data-thumbnail" data-dataset="spiral"></canvas>
165 |           </div>
166 |           <div class="dataset" title="Plane">
167 |             <canvas class="data-thumbnail" data-regDataset="reg-plane"></canvas>
168 |           </div>
169 |           <div class="dataset" title="Multi gaussian">
170 |             <canvas class="data-thumbnail" data-regDataset="reg-gauss"></canvas>
171 |           </div>
172 |         </div>
173 |       </div>
174 |       <div>
175 |         <div class="ui-percTrainData">
176 |           <label for="percTrainData">Ratio of training to test data:&nbsp;&nbsp;<span class="value">XX</span>%</label>
177 |           <p class="slider">
178 |             <input class="mdl-slider mdl-js-slider" type="range" id="percTrainData" min="10" max="90" step="10">
179 |           </p>
180 |         </div>
181 |         <div class="ui-noise">
182 |           <label for="noise">Noise:&nbsp;&nbsp;<span class="value">XX</span></label>
183 |           <p class="slider">
184 |             <input class="mdl-slider mdl-js-slider" type="range" id="noise" min="0" max="50" step="5">
185 |           </p>
186 |         </div>
187 |         <div class="ui-batchSize">
188 |           <label for="batchSize">Batch size:&nbsp;&nbsp;<span class="value">XX</span></label>
189 |           <p class="slider">
190 |             <input class="mdl-slider mdl-js-slider" type="range" id="batchSize" min="1" max="30" step="1">
191 |           </p>
192 |         </div>
193 |           <button class="basic-button" id="data-regen-button" title="Regenerate data">
194 |             Regenerate
195 |           </button>
196 |       </div>
197 |     </div>
198 | 
199 |     <!-- Features Column -->
200 |     <div class="column features">
201 |       <h4>Features</h4>
202 |       <p>Which properties do you want to feed in?</p>
203 |       <div id="network">
204 |         <svg id="svg" width="510" height="450">
205 |           <defs>
206 |             <marker id="markerArrow" markerWidth="7" markerHeight="13" refX="1" refY="6" orient="auto" markerUnits="userSpaceOnUse">
207 |               <path d="M2,11 L7,6 L2,2" />
208 |             </marker>
209 |           </defs>
210 |         </svg>
211 |         <!-- Hover card -->
212 |         <div id="hovercard">
213 |           <div style="font-size:10px">Click anywhere to edit.</div>
214 |           <div><span class="type">Weight/Bias</span> is <span class="value">0.2</span><span><input type="number"/></span>.</div>
215 |         </div>
216 |         <div class="callout thumbnail">
217 |           <svg viewBox="0 0 30 30">
218 |             <defs>
219 |               <marker id="arrow" markerWidth="5" markerHeight="5" refx="5" refy="2.5" orient="auto" markerUnits="userSpaceOnUse">
220 |                 <path d="M0,0 L5,2.5 L0,5 z"/>
221 |               </marker>
222 |             </defs>
223 |             <path d="M12,30C5,20 2,15 12,0" marker-end="url(#arrow)">
224 |           </svg>
225 |           <div class="label">
226 |             This is the output from one <b>neuron</b>. Hover to see it larger.
227 |           </div>
228 |         </div>
229 |         <div class="callout weights">
230 |           <svg viewBox="0 0 30 30">
231 |             <defs>
232 |               <marker id="arrow" markerWidth="5" markerHeight="5" refx="5" refy="2.5" orient="auto" markerUnits="userSpaceOnUse">
233 |                 <path d="M0,0 L5,2.5 L0,5 z"/>
234 |               </marker>
235 |             </defs>
236 |             <path d="M12,30C5,20 2,15 12,0" marker-end="url(#arrow)">
237 |           </svg>
238 |           <div class="label">
239 |             The outputs are mixed with varying <b>weights</b>, shown by the thickness of the lines.
240 |           </div>
241 |         </div>
242 |       </div>
243 |     </div>
244 | 
245 |     <!-- Hidden Layers Column -->
246 |     <div class="column hidden-layers">
247 |       <h4>
248 |         <div class="ui-numHiddenLayers">
249 |           <button id="add-layers" class="mdl-button mdl-js-button mdl-button--icon">
250 |             <i class="material-icons">add</i>
251 |           </button>
252 |           <button id="remove-layers" class="mdl-button mdl-js-button mdl-button--icon">
253 |             <i class="material-icons">remove</i>
254 |           </button>
255 |         </div>
256 |         <span id="num-layers"></span>
257 |         <span id="layers-label"></span>
258 |       </h4>
259 |       <div class="bracket"></div>
260 |     </div>
261 | 
262 |     <!-- Output Column -->
263 |     <div class="column output">
264 |       <h4>Output</h4>
265 |       <div class="metrics">
266 |         <div class="output-stats ui-percTrainData">
267 |           <span>Test loss</span>
268 |           <div class="value" id="loss-test"></div>
269 |         </div>
270 |         <div class="output-stats train">
271 |           <span>Training loss</span>
272 |           <div class="value" id="loss-train"></div>
273 |         </div>
274 |         <div id="linechart"></div>
275 |       </div>
276 |       <div id="heatmap"></div>
277 |       <div style="float:left;margin-top:20px">
278 |         <div style="display:flex; align-items:center;">
279 | 
280 |           <!-- Gradient color scale -->
281 |           <div class="label" style="width:105px; margin-right: 10px">
282 |             Colors shows data, neuron and weight values.
283 |           </div>
284 |           <svg width="150" height="30" id="colormap">
285 |             <defs>
286 |               <linearGradient id="gradient" x1="0%" y1="100%" x2="100%" y2="100%">
287 |                 <stop offset="0%" stop-color="#f59322" stop-opacity="1"></stop>
288 |                 <stop offset="50%" stop-color="#e8eaeb" stop-opacity="1"></stop>
289 |                 <stop offset="100%" stop-color="#0877bd" stop-opacity="1"></stop>
290 |               </linearGradient>
291 |             </defs>
292 |             <g class="core" transform="translate(3, 0)">
293 |               <rect width="144" height="10" style="fill: url('#gradient');"></rect>
294 |             </g>
295 |           </svg>
296 |         </div>
297 |         <br/>
298 |         <div style="display:flex;">
299 |           <label class="ui-showTestData mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="show-test-data">
300 |             <input type="checkbox" id="show-test-data" class="mdl-checkbox__input" checked>
301 |             <span class="mdl-checkbox__label label">Show test data</span>
302 |           </label>
303 |           <label class="ui-discretize mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="discretize">
304 |             <input type="checkbox" id="discretize" class="mdl-checkbox__input" checked>
305 |             <span class="mdl-checkbox__label label">Discretize output</span>
306 |           </label>
307 |         </div>
308 |       </div>
309 |     </div>
310 | 
311 |   </div>
312 | 
313 |   <!-- More -->
314 |   <div class="more">
315 |     <!-- <button class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons">keyboard_arrow_down</i></button> -->
316 |     <button class="mdl-button mdl-js-button mdl-button--fab">
317 |       <i class="material-icons">keyboard_arrow_down</i>
318 |     </button>
319 |   </div>
320 |   <!-- Article -->
321 | 
322 |   <article id="article-text">
323 |     <div class="l--body">
324 |       <h2>Um, What Is a Neural Network?</h2>
325 |       <p>It’s a technique for building a computer program that learns from data. It is based very loosely on how we think the human brain works. First, a collection of software “neurons” are created and connected together, allowing them to send messages to each other. Next, the network is asked to solve a problem, which it attempts to do over and over, each time strengthening the connections that lead to success and diminishing those that lead to failure. For a more detailed introduction to neural networks, Michael Nielsen’s <a href="http://neuralnetworksanddeeplearning.com/index.html">Neural Networks and Deep Learning</a> is a good place to start. For a more technical overview, try <a href="http://www.deeplearningbook.org/">Deep Learning</a> by Ian Goodfellow, Yoshua Bengio, and Aaron Courville.</p>
326 |     </div>
327 | 
328 |     <div class="l--body">
329 |       <h2>This Is Cool, Can I Repurpose It?</h2>
330 |       <p>Please do! We’ve open sourced it on <a href="https://github.com/tensorflow/playground">GitHub</a> with the hope that it can make neural networks a little more accessible and easier to learn. You’re free to use it in any way that follows our <a href="https://github.com/tensorflow/playground/blob/master/LICENSE">Apache License</a>. And if you have any suggestions for additions or changes, please <a href="https://github.com/tensorflow/playground/issues">let us know</a>.</p>
331 |       <p>We’ve also provided some controls below to enable you tailor the playground to a specific topic or lesson. Just choose which features you’d like to be visible below then save <a class="hide-controls-link" href="#">this link</a>, or <a href="javascript:location.reload();">refresh</a> the page.</p>
332 |       <div class="hide-controls"></div>
333 |     </div>
334 | 
335 |     <div class="l--body">
336 |       <h2>What Do All the Colors Mean?</h2>
337 |       <p>Orange and blue are used throughout the visualization in slightly different ways, but in general orange shows negative values while blue shows positive values.</p>
338 |       <p>The data points (represented by small circles) are initially colored orange or blue, which correspond to positive one and negative one.</p>
339 |       <p>In the hidden layers, the lines are colored by the weights of the connections between neurons. Blue shows a positive weight, which means the network is using that output of the neuron as given. An orange line shows that the network is assiging a negative weight.</p>
340 |       <p>In the output layer, the dots are colored orange or blue depending on their original values. The background color shows what the network is predicting for a particular area. The intensity of the color shows how confident that prediction is.</p>
341 |     </div>
342 | 
343 |     <div class="l--body">
344 |       <h2>What Library Are You Using?</h2>
345 |       <p>We wrote a tiny neural network <a href="https://github.com/tensorflow/playground/blob/master/src/nn.ts">library</a>
346 |       that meets the demands of this educational visualization. For real-world applications, consider the
347 |       <a href="https://www.tensorflow.org/">TensorFlow</a> library.
348 |       </p>
349 |     </div>
350 | 
351 |     <div class="l--body">
352 |       <h2>Credits</h2>
353 |       <p>
354 |         This was created by Daniel Smilkov and Shan Carter.
355 |         This is a continuation of many people’s previous work — most notably Andrej Karpathy’s <a href="http://cs.stanford.edu/people/karpathy/convnetjs/demo/classify2d.html">convnet.js demo</a>
356 |         and Chris Olah’s <a href="http://colah.github.io/posts/2014-03-NN-Manifolds-Topology/">articles</a> about neural networks.
357 |         Many thanks also to D. Sculley for help with the original idea and to Fernanda Viégas and Martin Wattenberg and the rest of the
358 |         <a href="https://research.google.com/bigpicture/">Big Picture</a> and <a href="https://research.google.com/teams/brain/">Google Brain</a> teams for feedback and guidance.
359 |       </p>
360 |     </div>
361 |   </article>
362 | 
363 |   <!-- Footer -->
364 |   <footer>
365 |     <div class="l--body">
366 |       <a href="https://www.tensorflow.org/" class="logo">
367 |         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 528 87" xml:space="preserve">
368 |         	<path d="M37.4,15.5v70.3H25V15.5H1V3.4h60.4v12.1H37.4z"/>
369 |         	<path d="M149,85.8v-35c0-12.5-4.7-16.9-12.7-16.9c-8.1,0-12.7,5.8-12.7,15.8v36.1h-12.1V24h12.1v5.9c3.1-4.5,9.2-7.2,15.5-7.2
370 |         		c14.4,0,22,9.4,22,27.7v35.4H149z"/>
371 |         	<path d="M188.7,87.1c-8.4,0-17.4-3.3-23.7-7.9l5.5-9.2c5.8,4,12.2,6.1,18,6.1c7.7,0,11.3-2.5,11.3-6.8c0-4.7-5.4-6.9-14.4-10.4
372 |         		c-13.3-5.2-18.1-9.7-18.1-19.4c0-11.1,8.7-16.8,21.1-16.8c7.8,0,15.4,2.8,21,6.8l-5.3,9.3c-5.1-3.5-10.1-5.3-16-5.3
373 |         		c-5.9,0-8.5,2.4-8.5,5.7c0,3.1,2.1,5.3,11.4,8.9c13.8,5.3,20.8,9.1,20.8,20.7C211.9,82.5,200.8,87.1,188.7,87.1z"/>
374 |         	<path d="M242,87.1c-15.5,0-27.2-12.8-27.2-32.1c0-20.2,12-32.3,27.5-32.3c15.8,0,27.5,12.6,27.5,31.9
375 |         		C269.9,75.1,257.9,87.1,242,87.1z M241.9,34.3c-9.2,0-14.8,8.1-14.8,20.4c0,13.5,6.2,21,15.4,21c9.2,0,15.2-9.3,15.2-20.6
376 |         		C257.7,42.4,251.7,34.3,241.9,34.3z"/>
377 |         	<path d="M310,36.8c-2.6-1.4-5.3-2.2-9.3-2.2c-7.7,0-12.1,5.4-12.1,15.9v35.3h-12.1V24h12.1v5.9c2.8-4.1,8-7.2,14.1-7.2
378 |         		c4.9,0,8,0.9,10.5,2.6L310,36.8z"/>
379 |         	<path d="M330.3,15.5v21.5H354v12.1h-23.7v36.6H318V3.4h50.3v12.1H330.3z"/>
380 |         	<path d="M374.5,85.8V6.4L386.6,0v85.8H374.5z"/>
381 |         	<path d="M421.9,87.1c-15.5,0-27.2-12.8-27.2-32.1c0-20.2,12-32.3,27.5-32.3c15.8,0,27.5,12.6,27.5,31.9
382 |         		C449.8,75.1,437.7,87.1,421.9,87.1z M421.7,34.3c-9.2,0-14.8,8.1-14.8,20.4c0,13.5,6.2,21,15.4,21c9.2,0,15.2-9.3,15.2-20.6
383 |         		C437.5,42.4,431.5,34.3,421.7,34.3z"/>
384 |         	<path d="M510.9,85.8h-10.4l-8.4-31.2c-1.3-4.7-2.6-10.2-3.2-13.2c-0.6,2.9-1.9,8.6-3.2,13.3l-8.2,31.1h-10.4L450.3,24h12l7.3,30
385 |         		c1.2,4.7,2.5,10.6,3.1,13.5c0.7-3.1,2.1-8.7,3.4-13.5l8.2-30h9.8l8.4,30.1c1.3,4.8,2.6,10.4,3.3,13.4c0.7-3.1,1.9-8.8,3.1-13.5
386 |         		l7.3-30h12L510.9,85.8z"/>
387 |         	<path d="M79.1,76.2c-6.7,0-12.7-4-14.9-13.2l40.5-12.2c-0.2-2.8-0.6-5.4-1.3-8c-3-11.6-11.1-20.1-24.7-20.1
388 |         		c-16,0-27.1,11.3-27.1,32.3c0,20.5,12.2,32.1,26.7,32.1c9.4,0,15.9-2.9,21.3-8.1l-7.2-7.8C88.4,74.3,84.3,76.2,79.1,76.2z
389 |         	 M78,33.7c7.9,0,12.1,4.5,13.8,10.5l-27.9,8.5l0-3.5C64.9,39.3,69.8,33.7,78,33.7z"/>
390 |         </svg>
391 |       </a>
392 |       <div class="links">
393 |         <a href="https://github.com/tensorflow/playground">Source on GitHub</a>
394 |       </div>
395 |     </div>
396 |   </footer>
397 |   <script src="bundle.js"></script>
398 |   <!-- Google analytics -->
399 |   <script src="analytics.js"></script>
400 | </body>
401 | </html>
402 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "deep-playground-prototype",
 3 |   "version": "2016.3.10",
 4 |   "description": "",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "clean": "rimraf dist",
 8 |     "start": "npm run serve-watch",
 9 |     "prep": "copyfiles analytics.js dist && concat node_modules/material-design-lite/material.min.js node_modules/seedrandom/seedrandom.min.js > dist/lib.js",
10 |     "build-css": "concat node_modules/material-design-lite/material.min.css styles.css > dist/bundle.css",
11 |     "watch-css": "concat node_modules/material-design-lite/material.min.css styles.css -o dist/bundle.css",
12 |     "build-html": "copyfiles index.html dist",
13 |     "watch-html": "concat index.html -o dist/index.html",
14 |     "build-js": "browserify src/playground.ts -p [tsify] | uglifyjs -c > dist/bundle.js",
15 |     "watch-js": "watchify src/playground.ts -p [tsify] -v --debug -o dist/bundle.js",
16 |     "build": "npm run prep && npm run build-js && npm run build-css && npm run build-html",
17 |     "watch": "npm run prep && concurrently \"npm run watch-js\" \"npm run watch-css\" \"npm run watch-html\"",
18 |     "serve": "npx serve dist/",
19 |     "serve-watch": "concurrently \"npx serve dist/\" \"npm run watch\""
20 |   },
21 |   "devDependencies": {
22 |     "@types/d3": "^3.5.34",
23 |     "concat": "^1.0.3",
24 |     "concurrently": "3.1.0",
25 |     "copyfiles": "1.0.0",
26 |     "rimraf": "2.5.4",
27 |     "serve": "^11.3.0",
28 |     "tsify": "^4.0.0",
29 |     "typescript": "^2.9",
30 |     "uglify-js": "^2.8.29",
31 |     "watchify": "^4.0.0"
32 |   },
33 |   "dependencies": {
34 |     "d3": "^3.5.16",
35 |     "material-design-lite": "^1.3.0",
36 |     "seedrandom": "^2.4.3"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/dataset.ts:
--------------------------------------------------------------------------------
  1 | /* Copyright 2016 Google Inc. All Rights Reserved.
  2 | 
  3 | Licensed under the Apache License, Version 2.0 (the "License");
  4 | you may not use this file except in compliance with the License.
  5 | You may obtain a copy of the License at
  6 | 
  7 |     http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 | Unless required by applicable law or agreed to in writing, software
 10 | distributed under the License is distributed on an "AS IS" BASIS,
 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | See the License for the specific language governing permissions and
 13 | limitations under the License.
 14 | ==============================================================================*/
 15 | 
 16 | import * as d3 from 'd3';
 17 | 
 18 | /**
 19 |  * A two dimensional example: x and y coordinates with the label.
 20 |  */
 21 | export type Example2D = {
 22 |   x: number,
 23 |   y: number,
 24 |   label: number
 25 | };
 26 | 
 27 | type Point = {
 28 |   x: number,
 29 |   y: number
 30 | };
 31 | 
 32 | /**
 33 |  * Shuffles the array using Fisher-Yates algorithm. Uses the seedrandom
 34 |  * library as the random generator.
 35 |  */
 36 | export function shuffle(array: any[]): void {
 37 |   let counter = array.length;
 38 |   let temp = 0;
 39 |   let index = 0;
 40 |   // While there are elements in the array
 41 |   while (counter > 0) {
 42 |     // Pick a random index
 43 |     index = Math.floor(Math.random() * counter);
 44 |     // Decrease counter by 1
 45 |     counter--;
 46 |     // And swap the last element with it
 47 |     temp = array[counter];
 48 |     array[counter] = array[index];
 49 |     array[index] = temp;
 50 |   }
 51 | }
 52 | 
 53 | export type DataGenerator = (numSamples: number, noise: number) => Example2D[];
 54 | 
 55 | export function classifyTwoGaussData(numSamples: number, noise: number):
 56 |     Example2D[] {
 57 |   let points: Example2D[] = [];
 58 | 
 59 |   let varianceScale = d3.scale.linear().domain([0, .5]).range([0.5, 4]);
 60 |   let variance = varianceScale(noise);
 61 | 
 62 |   function genGauss(cx: number, cy: number, label: number) {
 63 |     for (let i = 0; i < numSamples / 2; i++) {
 64 |       let x = normalRandom(cx, variance);
 65 |       let y = normalRandom(cy, variance);
 66 |       points.push({x, y, label});
 67 |     }
 68 |   }
 69 | 
 70 |   genGauss(2, 2, 1); // Gaussian with positive examples.
 71 |   genGauss(-2, -2, -1); // Gaussian with negative examples.
 72 |   return points;
 73 | }
 74 | 
 75 | export function regressPlane(numSamples: number, noise: number):
 76 |   Example2D[] {
 77 |   let radius = 6;
 78 |   let labelScale = d3.scale.linear()
 79 |     .domain([-10, 10])
 80 |     .range([-1, 1]);
 81 |   let getLabel = (x, y) => labelScale(x + y);
 82 | 
 83 |   let points: Example2D[] = [];
 84 |   for (let i = 0; i < numSamples; i++) {
 85 |     let x = randUniform(-radius, radius);
 86 |     let y = randUniform(-radius, radius);
 87 |     let noiseX = randUniform(-radius, radius) * noise;
 88 |     let noiseY = randUniform(-radius, radius) * noise;
 89 |     let label = getLabel(x + noiseX, y + noiseY);
 90 |     points.push({x, y, label});
 91 |   }
 92 |   return points;
 93 | }
 94 | 
 95 | export function regressGaussian(numSamples: number, noise: number):
 96 |   Example2D[] {
 97 |   let points: Example2D[] = [];
 98 | 
 99 |   let labelScale = d3.scale.linear()
100 |     .domain([0, 2])
101 |     .range([1, 0])
102 |     .clamp(true);
103 | 
104 |   let gaussians = [
105 |     [-4, 2.5, 1],
106 |     [0, 2.5, -1],
107 |     [4, 2.5, 1],
108 |     [-4, -2.5, -1],
109 |     [0, -2.5, 1],
110 |     [4, -2.5, -1]
111 |   ];
112 | 
113 |   function getLabel(x, y) {
114 |     // Choose the one that is maximum in abs value.
115 |     let label = 0;
116 |     gaussians.forEach(([cx, cy, sign]) => {
117 |       let newLabel = sign * labelScale(dist({x, y}, {x: cx, y: cy}));
118 |       if (Math.abs(newLabel) > Math.abs(label)) {
119 |         label = newLabel;
120 |       }
121 |     });
122 |     return label;
123 |   }
124 |   let radius = 6;
125 |   for (let i = 0; i < numSamples; i++) {
126 |     let x = randUniform(-radius, radius);
127 |     let y = randUniform(-radius, radius);
128 |     let noiseX = randUniform(-radius, radius) * noise;
129 |     let noiseY = randUniform(-radius, radius) * noise;
130 |     let label = getLabel(x + noiseX, y + noiseY);
131 |     points.push({x, y, label});
132 |   };
133 |   return points;
134 | }
135 | 
136 | export function classifySpiralData(numSamples: number, noise: number):
137 |     Example2D[] {
138 |   let points: Example2D[] = [];
139 |   let n = numSamples / 2;
140 | 
141 |   function genSpiral(deltaT: number, label: number) {
142 |     for (let i = 0; i < n; i++) {
143 |       let r = i / n * 5;
144 |       let t = 1.75 * i / n * 2 * Math.PI + deltaT;
145 |       let x = r * Math.sin(t) + randUniform(-1, 1) * noise;
146 |       let y = r * Math.cos(t) + randUniform(-1, 1) * noise;
147 |       points.push({x, y, label});
148 |     }
149 |   }
150 | 
151 |   genSpiral(0, 1); // Positive examples.
152 |   genSpiral(Math.PI, -1); // Negative examples.
153 |   return points;
154 | }
155 | 
156 | export function classifyCircleData(numSamples: number, noise: number):
157 |     Example2D[] {
158 |   let points: Example2D[] = [];
159 |   let radius = 5;
160 |   function getCircleLabel(p: Point, center: Point) {
161 |     return (dist(p, center) < (radius * 0.5)) ? 1 : -1;
162 |   }
163 | 
164 |   // Generate positive points inside the circle.
165 |   for (let i = 0; i < numSamples / 2; i++) {
166 |     let r = randUniform(0, radius * 0.5);
167 |     let angle = randUniform(0, 2 * Math.PI);
168 |     let x = r * Math.sin(angle);
169 |     let y = r * Math.cos(angle);
170 |     let noiseX = randUniform(-radius, radius) * noise;
171 |     let noiseY = randUniform(-radius, radius) * noise;
172 |     let label = getCircleLabel({x: x + noiseX, y: y + noiseY}, {x: 0, y: 0});
173 |     points.push({x, y, label});
174 |   }
175 | 
176 |   // Generate negative points outside the circle.
177 |   for (let i = 0; i < numSamples / 2; i++) {
178 |     let r = randUniform(radius * 0.7, radius);
179 |     let angle = randUniform(0, 2 * Math.PI);
180 |     let x = r * Math.sin(angle);
181 |     let y = r * Math.cos(angle);
182 |     let noiseX = randUniform(-radius, radius) * noise;
183 |     let noiseY = randUniform(-radius, radius) * noise;
184 |     let label = getCircleLabel({x: x + noiseX, y: y + noiseY}, {x: 0, y: 0});
185 |     points.push({x, y, label});
186 |   }
187 |   return points;
188 | }
189 | 
190 | export function classifyXORData(numSamples: number, noise: number):
191 |     Example2D[] {
192 |   function getXORLabel(p: Point) { return p.x * p.y >= 0 ? 1 : -1; }
193 | 
194 |   let points: Example2D[] = [];
195 |   for (let i = 0; i < numSamples; i++) {
196 |     let x = randUniform(-5, 5);
197 |     let padding = 0.3;
198 |     x += x > 0 ? padding : -padding;  // Padding.
199 |     let y = randUniform(-5, 5);
200 |     y += y > 0 ? padding : -padding;
201 |     let noiseX = randUniform(-5, 5) * noise;
202 |     let noiseY = randUniform(-5, 5) * noise;
203 |     let label = getXORLabel({x: x + noiseX, y: y + noiseY});
204 |     points.push({x, y, label});
205 |   }
206 |   return points;
207 | }
208 | 
209 | /**
210 |  * Returns a sample from a uniform [a, b] distribution.
211 |  * Uses the seedrandom library as the random generator.
212 |  */
213 | function randUniform(a: number, b: number) {
214 |   return Math.random() * (b - a) + a;
215 | }
216 | 
217 | /**
218 |  * Samples from a normal distribution. Uses the seedrandom library as the
219 |  * random generator.
220 |  *
221 |  * @param mean The mean. Default is 0.
222 |  * @param variance The variance. Default is 1.
223 |  */
224 | function normalRandom(mean = 0, variance = 1): number {
225 |   let v1: number, v2: number, s: number;
226 |   do {
227 |     v1 = 2 * Math.random() - 1;
228 |     v2 = 2 * Math.random() - 1;
229 |     s = v1 * v1 + v2 * v2;
230 |   } while (s > 1);
231 | 
232 |   let result = Math.sqrt(-2 * Math.log(s) / s) * v1;
233 |   return mean + Math.sqrt(variance) * result;
234 | }
235 | 
236 | /** Returns the eucledian distance between two points in space. */
237 | function dist(a: Point, b: Point): number {
238 |   let dx = a.x - b.x;
239 |   let dy = a.y - b.y;
240 |   return Math.sqrt(dx * dx + dy * dy);
241 | }
242 | 


--------------------------------------------------------------------------------
/src/heatmap.ts:
--------------------------------------------------------------------------------
  1 | /* Copyright 2016 Google Inc. All Rights Reserved.
  2 | 
  3 | Licensed under the Apache License, Version 2.0 (the "License");
  4 | you may not use this file except in compliance with the License.
  5 | You may obtain a copy of the License at
  6 | 
  7 |     http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 | Unless required by applicable law or agreed to in writing, software
 10 | distributed under the License is distributed on an "AS IS" BASIS,
 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | See the License for the specific language governing permissions and
 13 | limitations under the License.
 14 | ==============================================================================*/
 15 | 
 16 | import {Example2D} from "./dataset";
 17 | import * as d3 from 'd3';
 18 | 
 19 | export interface HeatMapSettings {
 20 |   [key: string]: any;
 21 |   showAxes?: boolean;
 22 |   noSvg?: boolean;
 23 | }
 24 | 
 25 | /** Number of different shades (colors) when drawing a gradient heatmap */
 26 | const NUM_SHADES = 30;
 27 | 
 28 | /**
 29 |  * Draws a heatmap using canvas. Used for showing the learned decision
 30 |  * boundary of the classification algorithm. Can also draw data points
 31 |  * using an svg overlayed on top of the canvas heatmap.
 32 |  */
 33 | export class HeatMap {
 34 |   private settings: HeatMapSettings = {
 35 |     showAxes: false,
 36 |     noSvg: false
 37 |   };
 38 |   private xScale;
 39 |   private yScale;
 40 |   private numSamples: number;
 41 |   private color;
 42 |   private canvas;
 43 |   private svg;
 44 | 
 45 |   constructor(
 46 |       width: number, numSamples: number, xDomain: [number, number],
 47 |       yDomain: [number, number], container,
 48 |       userSettings?: HeatMapSettings) {
 49 |     this.numSamples = numSamples;
 50 |     let height = width;
 51 |     let padding = userSettings.showAxes ? 20 : 0;
 52 | 
 53 |     if (userSettings != null) {
 54 |       // overwrite the defaults with the user-specified settings.
 55 |       for (let prop in userSettings) {
 56 |         this.settings[prop] = userSettings[prop];
 57 |       }
 58 |     }
 59 | 
 60 |     this.xScale = d3.scale.linear()
 61 |       .domain(xDomain)
 62 |       .range([0, width - 2 * padding]);
 63 | 
 64 |     this.yScale = d3.scale.linear()
 65 |       .domain(yDomain)
 66 |       .range([height - 2 * padding, 0]);
 67 | 
 68 |     // Get a range of colors.
 69 |     let tmpScale = d3.scale.linear<string, number>()
 70 |         .domain([0, .5, 1])
 71 |         .range(["#f59322", "#e8eaeb", "#0877bd"])
 72 |         .clamp(true);
 73 |     // Due to numerical error, we need to specify
 74 |     // d3.range(0, end + small_epsilon, step)
 75 |     // in order to guarantee that we will have end/step entries with
 76 |     // the last element being equal to end.
 77 |     let colors = d3.range(0, 1 + 1E-9, 1 / NUM_SHADES).map(a => {
 78 |       return tmpScale(a);
 79 |     });
 80 |     this.color = d3.scale.quantize()
 81 |                      .domain([-1, 1])
 82 |                      .range(colors);
 83 | 
 84 |     container = container.append("div")
 85 |       .style({
 86 |         width: `${width}px`,
 87 |         height: `${height}px`,
 88 |         position: "relative",
 89 |         top: `-${padding}px`,
 90 |         left: `-${padding}px`
 91 |       });
 92 |     this.canvas = container.append("canvas")
 93 |       .attr("width", numSamples)
 94 |       .attr("height", numSamples)
 95 |       .style("width", (width - 2 * padding) + "px")
 96 |       .style("height", (height - 2 * padding) + "px")
 97 |       .style("position", "absolute")
 98 |       .style("top", `${padding}px`)
 99 |       .style("left", `${padding}px`);
100 | 
101 |     if (!this.settings.noSvg) {
102 |       this.svg = container.append("svg").attr({
103 |           "width": width,
104 |           "height": height
105 |       }).style({
106 |         // Overlay the svg on top of the canvas.
107 |         "position": "absolute",
108 |         "left": "0",
109 |         "top": "0"
110 |       }).append("g")
111 |         .attr("transform", `translate(${padding},${padding})`);
112 | 
113 |       this.svg.append("g").attr("class", "train");
114 |       this.svg.append("g").attr("class", "test");
115 |     }
116 | 
117 |     if (this.settings.showAxes) {
118 |       let xAxis = d3.svg.axis()
119 |         .scale(this.xScale)
120 |         .orient("bottom");
121 | 
122 |       let yAxis = d3.svg.axis()
123 |         .scale(this.yScale)
124 |         .orient("right");
125 | 
126 |       this.svg.append("g")
127 |         .attr("class", "x axis")
128 |         .attr("transform", `translate(0,${height - 2 * padding})`)
129 |         .call(xAxis);
130 | 
131 |       this.svg.append("g")
132 |         .attr("class", "y axis")
133 |         .attr("transform", "translate(" + (width - 2 * padding) + ",0)")
134 |         .call(yAxis);
135 |     }
136 |   }
137 | 
138 |   updateTestPoints(points: Example2D[]): void {
139 |     if (this.settings.noSvg) {
140 |       throw Error("Can't add points since noSvg=true");
141 |     }
142 |     this.updateCircles(this.svg.select("g.test"), points);
143 |   }
144 | 
145 |   updatePoints(points: Example2D[]): void {
146 |     if (this.settings.noSvg) {
147 |       throw Error("Can't add points since noSvg=true");
148 |     }
149 |     this.updateCircles(this.svg.select("g.train"), points);
150 |   }
151 | 
152 |   updateBackground(data: number[][], discretize: boolean): void {
153 |     let dx = data[0].length;
154 |     let dy = data.length;
155 | 
156 |     if (dx !== this.numSamples || dy !== this.numSamples) {
157 |       throw new Error(
158 |           "The provided data matrix must be of size " +
159 |           "numSamples X numSamples");
160 |     }
161 | 
162 |     // Compute the pixel colors; scaled by CSS.
163 |     let context = (this.canvas.node() as HTMLCanvasElement).getContext("2d");
164 |     let image = context.createImageData(dx, dy);
165 | 
166 |     for (let y = 0, p = -1; y < dy; ++y) {
167 |       for (let x = 0; x < dx; ++x) {
168 |         let value = data[x][y];
169 |         if (discretize) {
170 |           value = (value >= 0 ? 1 : -1);
171 |         }
172 |         let c = d3.rgb(this.color(value));
173 |         image.data[++p] = c.r;
174 |         image.data[++p] = c.g;
175 |         image.data[++p] = c.b;
176 |         image.data[++p] = 160;
177 |       }
178 |     }
179 |     context.putImageData(image, 0, 0);
180 |   }
181 | 
182 |   private updateCircles(container, points: Example2D[]) {
183 |     // Keep only points that are inside the bounds.
184 |     let xDomain = this.xScale.domain();
185 |     let yDomain = this.yScale.domain();
186 |     points = points.filter(p => {
187 |       return p.x >= xDomain[0] && p.x <= xDomain[1]
188 |         && p.y >= yDomain[0] && p.y <= yDomain[1];
189 |     });
190 | 
191 |     // Attach data to initially empty selection.
192 |     let selection = container.selectAll("circle").data(points);
193 | 
194 |     // Insert elements to match length of points array.
195 |     selection.enter().append("circle").attr("r", 3);
196 | 
197 |     // Update points to be in the correct position.
198 |     selection
199 |       .attr({
200 |         cx: (d: Example2D) => this.xScale(d.x),
201 |         cy: (d: Example2D) => this.yScale(d.y),
202 |       })
203 |       .style("fill", d => this.color(d.label));
204 | 
205 |     // Remove points if the length has gone down.
206 |     selection.exit().remove();
207 |   }
208 | }  // Close class HeatMap.
209 | 
210 | export function reduceMatrix(matrix: number[][], factor: number): number[][] {
211 |   if (matrix.length !== matrix[0].length) {
212 |     throw new Error("The provided matrix must be a square matrix");
213 |   }
214 |   if (matrix.length % factor !== 0) {
215 |     throw new Error("The width/height of the matrix must be divisible by " +
216 |         "the reduction factor");
217 |   }
218 |   let result: number[][] = new Array(matrix.length / factor);
219 |   for (let i = 0; i < matrix.length; i += factor) {
220 |     result[i / factor] = new Array(matrix.length / factor);
221 |     for (let j = 0; j < matrix.length; j += factor) {
222 |       let avg = 0;
223 |       // Sum all the values in the neighborhood.
224 |       for (let k = 0; k < factor; k++) {
225 |         for (let l = 0; l < factor; l++) {
226 |           avg += matrix[i + k][j + l];
227 |         }
228 |       }
229 |       avg /= (factor * factor);
230 |       result[i / factor][j / factor] = avg;
231 |     }
232 |   }
233 |   return result;
234 | }
235 | 


--------------------------------------------------------------------------------
/src/linechart.ts:
--------------------------------------------------------------------------------
  1 | /* Copyright 2016 Google Inc. All Rights Reserved.
  2 | 
  3 | Licensed under the Apache License, Version 2.0 (the "License");
  4 | you may not use this file except in compliance with the License.
  5 | You may obtain a copy of the License at
  6 | 
  7 |     http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 | Unless required by applicable law or agreed to in writing, software
 10 | distributed under the License is distributed on an "AS IS" BASIS,
 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | See the License for the specific language governing permissions and
 13 | limitations under the License.
 14 | ==============================================================================*/
 15 | 
 16 | import * as d3 from 'd3';
 17 | 
 18 | type DataPoint = {
 19 |   x: number;
 20 |   y: number[];
 21 | };
 22 | 
 23 | /**
 24 |  * A multi-series line chart that allows you to append new data points
 25 |  * as data becomes available.
 26 |  */
 27 | export class AppendingLineChart {
 28 |   private numLines: number;
 29 |   private data: DataPoint[] = [];
 30 |   private svg;
 31 |   private xScale;
 32 |   private yScale;
 33 |   private paths;
 34 |   private lineColors: string[];
 35 | 
 36 |   private minY = Number.MAX_VALUE;
 37 |   private maxY = Number.MIN_VALUE;
 38 | 
 39 |   constructor(container, lineColors: string[]) {
 40 |     this.lineColors = lineColors;
 41 |     this.numLines = lineColors.length;
 42 |     let node = container.node() as HTMLElement;
 43 |     let totalWidth = node.offsetWidth;
 44 |     let totalHeight = node.offsetHeight;
 45 |     let margin = {top: 2, right: 0, bottom: 2, left: 2};
 46 |     let width = totalWidth - margin.left - margin.right;
 47 |     let height = totalHeight - margin.top - margin.bottom;
 48 | 
 49 |     this.xScale = d3.scale.linear()
 50 |       .domain([0, 0])
 51 |       .range([0, width]);
 52 | 
 53 |     this.yScale = d3.scale.linear()
 54 |       .domain([0, 0])
 55 |       .range([height, 0]);
 56 | 
 57 |     this.svg = container.append("svg")
 58 |       .attr("width", width + margin.left + margin.right)
 59 |       .attr("height", height + margin.top + margin.bottom)
 60 |       .append("g")
 61 |         .attr("transform", `translate(${margin.left},${margin.top})`);
 62 | 
 63 |     this.paths = new Array(this.numLines);
 64 |     for (let i = 0; i < this.numLines; i++) {
 65 |       this.paths[i] = this.svg.append("path")
 66 |         .attr("class", "line")
 67 |         .style({
 68 |           "fill": "none",
 69 |           "stroke": lineColors[i],
 70 |           "stroke-width": "1.5px"
 71 |         });
 72 |     }
 73 |   }
 74 | 
 75 |   reset() {
 76 |     this.data = [];
 77 |     this.redraw();
 78 |     this.minY = Number.MAX_VALUE;
 79 |     this.maxY = Number.MIN_VALUE;
 80 |   }
 81 | 
 82 |   addDataPoint(dataPoint: number[]) {
 83 |     if (dataPoint.length !== this.numLines) {
 84 |       throw Error("Length of dataPoint must equal number of lines");
 85 |     }
 86 |     dataPoint.forEach(y => {
 87 |       this.minY = Math.min(this.minY, y);
 88 |       this.maxY = Math.max(this.maxY, y);
 89 |     });
 90 | 
 91 |     this.data.push({x: this.data.length + 1, y: dataPoint});
 92 |     this.redraw();
 93 |   }
 94 | 
 95 |   private redraw() {
 96 |     // Adjust the x and y domain.
 97 |     this.xScale.domain([1, this.data.length]);
 98 |     this.yScale.domain([this.minY, this.maxY]);
 99 |     // Adjust all the <path> elements (lines).
100 |     let getPathMap = (lineIndex: number) => {
101 |       return d3.svg.line<{x: number, y:number}>()
102 |       .x(d => this.xScale(d.x))
103 |       .y(d => this.yScale(d.y[lineIndex]));
104 |     };
105 |     for (let i = 0; i < this.numLines; i++) {
106 |       this.paths[i].datum(this.data).attr("d", getPathMap(i));
107 |     }
108 |   }
109 | }
110 | 


--------------------------------------------------------------------------------
/src/nn.ts:
--------------------------------------------------------------------------------
  1 | /* Copyright 2016 Google Inc. All Rights Reserved.
  2 | 
  3 | Licensed under the Apache License, Version 2.0 (the "License");
  4 | you may not use this file except in compliance with the License.
  5 | You may obtain a copy of the License at
  6 | 
  7 |     http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 | Unless required by applicable law or agreed to in writing, software
 10 | distributed under the License is distributed on an "AS IS" BASIS,
 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | See the License for the specific language governing permissions and
 13 | limitations under the License.
 14 | ==============================================================================*/
 15 | 
 16 | /**
 17 |  * A node in a neural network. Each node has a state
 18 |  * (total input, output, and their respectively derivatives) which changes
 19 |  * after every forward and back propagation run.
 20 |  */
 21 | export class Node {
 22 |   id: string;
 23 |   /** List of input links. */
 24 |   inputLinks: Link[] = [];
 25 |   bias = 0.1;
 26 |   /** List of output links. */
 27 |   outputs: Link[] = [];
 28 |   totalInput: number;
 29 |   output: number;
 30 |   /** Error derivative with respect to this node's output. */
 31 |   outputDer = 0;
 32 |   /** Error derivative with respect to this node's total input. */
 33 |   inputDer = 0;
 34 |   /**
 35 |    * Accumulated error derivative with respect to this node's total input since
 36 |    * the last update. This derivative equals dE/db where b is the node's
 37 |    * bias term.
 38 |    */
 39 |   accInputDer = 0;
 40 |   /**
 41 |    * Number of accumulated err. derivatives with respect to the total input
 42 |    * since the last update.
 43 |    */
 44 |   numAccumulatedDers = 0;
 45 |   /** Activation function that takes total input and returns node's output */
 46 |   activation: ActivationFunction;
 47 | 
 48 |   /**
 49 |    * Creates a new node with the provided id and activation function.
 50 |    */
 51 |   constructor(id: string, activation: ActivationFunction, initZero?: boolean) {
 52 |     this.id = id;
 53 |     this.activation = activation;
 54 |     if (initZero) {
 55 |       this.bias = 0;
 56 |     }
 57 |   }
 58 | 
 59 |   /** Recomputes the node's output and returns it. */
 60 |   updateOutput(): number {
 61 |     // Stores total input into the node.
 62 |     this.totalInput = this.bias;
 63 |     for (let j = 0; j < this.inputLinks.length; j++) {
 64 |       let link = this.inputLinks[j];
 65 |       this.totalInput += link.weight * link.source.output;
 66 |     }
 67 |     this.output = this.activation.output(this.totalInput);
 68 |     return this.output;
 69 |   }
 70 | }
 71 | 
 72 | /**
 73 |  * An error function and its derivative.
 74 |  */
 75 | export interface ErrorFunction {
 76 |   error: (output: number, target: number) => number;
 77 |   der: (output: number, target: number) => number;
 78 | }
 79 | 
 80 | /** A node's activation function and its derivative. */
 81 | export interface ActivationFunction {
 82 |   output: (input: number) => number;
 83 |   der: (input: number) => number;
 84 | }
 85 | 
 86 | /** Function that computes a penalty cost for a given weight in the network. */
 87 | export interface RegularizationFunction {
 88 |   output: (weight: number) => number;
 89 |   der: (weight: number) => number;
 90 | }
 91 | 
 92 | /** Built-in error functions */
 93 | export class Errors {
 94 |   public static SQUARE: ErrorFunction = {
 95 |     error: (output: number, target: number) =>
 96 |                0.5 * Math.pow(output - target, 2),
 97 |     der: (output: number, target: number) => output - target
 98 |   };
 99 | }
100 | 
101 | /** Polyfill for TANH */
102 | (Math as any).tanh = (Math as any).tanh || function(x) {
103 |   if (x === Infinity) {
104 |     return 1;
105 |   } else if (x === -Infinity) {
106 |     return -1;
107 |   } else {
108 |     let e2x = Math.exp(2 * x);
109 |     return (e2x - 1) / (e2x + 1);
110 |   }
111 | };
112 | 
113 | /** Built-in activation functions */
114 | export class Activations {
115 |   public static TANH: ActivationFunction = {
116 |     output: x => (Math as any).tanh(x),
117 |     der: x => {
118 |       let output = Activations.TANH.output(x);
119 |       return 1 - output * output;
120 |     }
121 |   };
122 |   public static RELU: ActivationFunction = {
123 |     output: x => Math.max(0, x),
124 |     der: x => x <= 0 ? 0 : 1
125 |   };
126 |   public static SIGMOID: ActivationFunction = {
127 |     output: x => 1 / (1 + Math.exp(-x)),
128 |     der: x => {
129 |       let output = Activations.SIGMOID.output(x);
130 |       return output * (1 - output);
131 |     }
132 |   };
133 |   public static LINEAR: ActivationFunction = {
134 |     output: x => x,
135 |     der: x => 1
136 |   };
137 | }
138 | 
139 | /** Build-in regularization functions */
140 | export class RegularizationFunction {
141 |   public static L1: RegularizationFunction = {
142 |     output: w => Math.abs(w),
143 |     der: w => w < 0 ? -1 : (w > 0 ? 1 : 0)
144 |   };
145 |   public static L2: RegularizationFunction = {
146 |     output: w => 0.5 * w * w,
147 |     der: w => w
148 |   };
149 | }
150 | 
151 | /**
152 |  * A link in a neural network. Each link has a weight and a source and
153 |  * destination node. Also it has an internal state (error derivative
154 |  * with respect to a particular input) which gets updated after
155 |  * a run of back propagation.
156 |  */
157 | export class Link {
158 |   id: string;
159 |   source: Node;
160 |   dest: Node;
161 |   weight = Math.random() - 0.5;
162 |   isDead = false;
163 |   /** Error derivative with respect to this weight. */
164 |   errorDer = 0;
165 |   /** Accumulated error derivative since the last update. */
166 |   accErrorDer = 0;
167 |   /** Number of accumulated derivatives since the last update. */
168 |   numAccumulatedDers = 0;
169 |   regularization: RegularizationFunction;
170 | 
171 |   /**
172 |    * Constructs a link in the neural network initialized with random weight.
173 |    *
174 |    * @param source The source node.
175 |    * @param dest The destination node.
176 |    * @param regularization The regularization function that computes the
177 |    *     penalty for this weight. If null, there will be no regularization.
178 |    */
179 |   constructor(source: Node, dest: Node,
180 |       regularization: RegularizationFunction, initZero?: boolean) {
181 |     this.id = source.id + "-" + dest.id;
182 |     this.source = source;
183 |     this.dest = dest;
184 |     this.regularization = regularization;
185 |     if (initZero) {
186 |       this.weight = 0;
187 |     }
188 |   }
189 | }
190 | 
191 | /**
192 |  * Builds a neural network.
193 |  *
194 |  * @param networkShape The shape of the network. E.g. [1, 2, 3, 1] means
195 |  *   the network will have one input node, 2 nodes in first hidden layer,
196 |  *   3 nodes in second hidden layer and 1 output node.
197 |  * @param activation The activation function of every hidden node.
198 |  * @param outputActivation The activation function for the output nodes.
199 |  * @param regularization The regularization function that computes a penalty
200 |  *     for a given weight (parameter) in the network. If null, there will be
201 |  *     no regularization.
202 |  * @param inputIds List of ids for the input nodes.
203 |  */
204 | export function buildNetwork(
205 |     networkShape: number[], activation: ActivationFunction,
206 |     outputActivation: ActivationFunction,
207 |     regularization: RegularizationFunction,
208 |     inputIds: string[], initZero?: boolean): Node[][] {
209 |   let numLayers = networkShape.length;
210 |   let id = 1;
211 |   /** List of layers, with each layer being a list of nodes. */
212 |   let network: Node[][] = [];
213 |   for (let layerIdx = 0; layerIdx < numLayers; layerIdx++) {
214 |     let isOutputLayer = layerIdx === numLayers - 1;
215 |     let isInputLayer = layerIdx === 0;
216 |     let currentLayer: Node[] = [];
217 |     network.push(currentLayer);
218 |     let numNodes = networkShape[layerIdx];
219 |     for (let i = 0; i < numNodes; i++) {
220 |       let nodeId = id.toString();
221 |       if (isInputLayer) {
222 |         nodeId = inputIds[i];
223 |       } else {
224 |         id++;
225 |       }
226 |       let node = new Node(nodeId,
227 |           isOutputLayer ? outputActivation : activation, initZero);
228 |       currentLayer.push(node);
229 |       if (layerIdx >= 1) {
230 |         // Add links from nodes in the previous layer to this node.
231 |         for (let j = 0; j < network[layerIdx - 1].length; j++) {
232 |           let prevNode = network[layerIdx - 1][j];
233 |           let link = new Link(prevNode, node, regularization, initZero);
234 |           prevNode.outputs.push(link);
235 |           node.inputLinks.push(link);
236 |         }
237 |       }
238 |     }
239 |   }
240 |   return network;
241 | }
242 | 
243 | /**
244 |  * Runs a forward propagation of the provided input through the provided
245 |  * network. This method modifies the internal state of the network - the
246 |  * total input and output of each node in the network.
247 |  *
248 |  * @param network The neural network.
249 |  * @param inputs The input array. Its length should match the number of input
250 |  *     nodes in the network.
251 |  * @return The final output of the network.
252 |  */
253 | export function forwardProp(network: Node[][], inputs: number[]): number {
254 |   let inputLayer = network[0];
255 |   if (inputs.length !== inputLayer.length) {
256 |     throw new Error("The number of inputs must match the number of nodes in" +
257 |         " the input layer");
258 |   }
259 |   // Update the input layer.
260 |   for (let i = 0; i < inputLayer.length; i++) {
261 |     let node = inputLayer[i];
262 |     node.output = inputs[i];
263 |   }
264 |   for (let layerIdx = 1; layerIdx < network.length; layerIdx++) {
265 |     let currentLayer = network[layerIdx];
266 |     // Update all the nodes in this layer.
267 |     for (let i = 0; i < currentLayer.length; i++) {
268 |       let node = currentLayer[i];
269 |       node.updateOutput();
270 |     }
271 |   }
272 |   return network[network.length - 1][0].output;
273 | }
274 | 
275 | /**
276 |  * Runs a backward propagation using the provided target and the
277 |  * computed output of the previous call to forward propagation.
278 |  * This method modifies the internal state of the network - the error
279 |  * derivatives with respect to each node, and each weight
280 |  * in the network.
281 |  */
282 | export function backProp(network: Node[][], target: number,
283 |     errorFunc: ErrorFunction): void {
284 |   // The output node is a special case. We use the user-defined error
285 |   // function for the derivative.
286 |   let outputNode = network[network.length - 1][0];
287 |   outputNode.outputDer = errorFunc.der(outputNode.output, target);
288 | 
289 |   // Go through the layers backwards.
290 |   for (let layerIdx = network.length - 1; layerIdx >= 1; layerIdx--) {
291 |     let currentLayer = network[layerIdx];
292 |     // Compute the error derivative of each node with respect to:
293 |     // 1) its total input
294 |     // 2) each of its input weights.
295 |     for (let i = 0; i < currentLayer.length; i++) {
296 |       let node = currentLayer[i];
297 |       node.inputDer = node.outputDer * node.activation.der(node.totalInput);
298 |       node.accInputDer += node.inputDer;
299 |       node.numAccumulatedDers++;
300 |     }
301 | 
302 |     // Error derivative with respect to each weight coming into the node.
303 |     for (let i = 0; i < currentLayer.length; i++) {
304 |       let node = currentLayer[i];
305 |       for (let j = 0; j < node.inputLinks.length; j++) {
306 |         let link = node.inputLinks[j];
307 |         if (link.isDead) {
308 |           continue;
309 |         }
310 |         link.errorDer = node.inputDer * link.source.output;
311 |         link.accErrorDer += link.errorDer;
312 |         link.numAccumulatedDers++;
313 |       }
314 |     }
315 |     if (layerIdx === 1) {
316 |       continue;
317 |     }
318 |     let prevLayer = network[layerIdx - 1];
319 |     for (let i = 0; i < prevLayer.length; i++) {
320 |       let node = prevLayer[i];
321 |       // Compute the error derivative with respect to each node's output.
322 |       node.outputDer = 0;
323 |       for (let j = 0; j < node.outputs.length; j++) {
324 |         let output = node.outputs[j];
325 |         node.outputDer += output.weight * output.dest.inputDer;
326 |       }
327 |     }
328 |   }
329 | }
330 | 
331 | /**
332 |  * Updates the weights of the network using the previously accumulated error
333 |  * derivatives.
334 |  */
335 | export function updateWeights(network: Node[][], learningRate: number,
336 |     regularizationRate: number) {
337 |   for (let layerIdx = 1; layerIdx < network.length; layerIdx++) {
338 |     let currentLayer = network[layerIdx];
339 |     for (let i = 0; i < currentLayer.length; i++) {
340 |       let node = currentLayer[i];
341 |       // Update the node's bias.
342 |       if (node.numAccumulatedDers > 0) {
343 |         node.bias -= learningRate * node.accInputDer / node.numAccumulatedDers;
344 |         node.accInputDer = 0;
345 |         node.numAccumulatedDers = 0;
346 |       }
347 |       // Update the weights coming into this node.
348 |       for (let j = 0; j < node.inputLinks.length; j++) {
349 |         let link = node.inputLinks[j];
350 |         if (link.isDead) {
351 |           continue;
352 |         }
353 |         let regulDer = link.regularization ?
354 |             link.regularization.der(link.weight) : 0;
355 |         if (link.numAccumulatedDers > 0) {
356 |           // Update the weight based on dE/dw.
357 |           link.weight = link.weight -
358 |               (learningRate / link.numAccumulatedDers) * link.accErrorDer;
359 |           // Further update the weight based on regularization.
360 |           let newLinkWeight = link.weight -
361 |               (learningRate * regularizationRate) * regulDer;
362 |           if (link.regularization === RegularizationFunction.L1 &&
363 |               link.weight * newLinkWeight < 0) {
364 |             // The weight crossed 0 due to the regularization term. Set it to 0.
365 |             link.weight = 0;
366 |             link.isDead = true;
367 |           } else {
368 |             link.weight = newLinkWeight;
369 |           }
370 |           link.accErrorDer = 0;
371 |           link.numAccumulatedDers = 0;
372 |         }
373 |       }
374 |     }
375 |   }
376 | }
377 | 
378 | /** Iterates over every node in the network/ */
379 | export function forEachNode(network: Node[][], ignoreInputs: boolean,
380 |     accessor: (node: Node) => any) {
381 |   for (let layerIdx = ignoreInputs ? 1 : 0;
382 |       layerIdx < network.length;
383 |       layerIdx++) {
384 |     let currentLayer = network[layerIdx];
385 |     for (let i = 0; i < currentLayer.length; i++) {
386 |       let node = currentLayer[i];
387 |       accessor(node);
388 |     }
389 |   }
390 | }
391 | 
392 | /** Returns the output node in the network. */
393 | export function getOutputNode(network: Node[][]) {
394 |   return network[network.length - 1][0];
395 | }
396 | 


--------------------------------------------------------------------------------
/src/playground.ts:
--------------------------------------------------------------------------------
   1 | /* Copyright 2016 Google Inc. All Rights Reserved.
   2 | 
   3 | Licensed under the Apache License, Version 2.0 (the "License");
   4 | you may not use this file except in compliance with the License.
   5 | You may obtain a copy of the License at
   6 | 
   7 |     http://www.apache.org/licenses/LICENSE-2.0
   8 | 
   9 | Unless required by applicable law or agreed to in writing, software
  10 | distributed under the License is distributed on an "AS IS" BASIS,
  11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12 | See the License for the specific language governing permissions and
  13 | limitations under the License.
  14 | ==============================================================================*/
  15 | 
  16 | import * as nn from "./nn";
  17 | import {HeatMap, reduceMatrix} from "./heatmap";
  18 | import {
  19 |   State,
  20 |   datasets,
  21 |   regDatasets,
  22 |   activations,
  23 |   problems,
  24 |   regularizations,
  25 |   getKeyFromValue,
  26 |   Problem
  27 | } from "./state";
  28 | import {Example2D, shuffle} from "./dataset";
  29 | import {AppendingLineChart} from "./linechart";
  30 | import * as d3 from 'd3';
  31 | 
  32 | let mainWidth;
  33 | 
  34 | // More scrolling
  35 | d3.select(".more button").on("click", function() {
  36 |   let position = 800;
  37 |   d3.transition()
  38 |     .duration(1000)
  39 |     .tween("scroll", scrollTween(position));
  40 | });
  41 | 
  42 | function scrollTween(offset) {
  43 |   return function() {
  44 |     let i = d3.interpolateNumber(window.pageYOffset ||
  45 |         document.documentElement.scrollTop, offset);
  46 |     return function(t) { scrollTo(0, i(t)); };
  47 |   };
  48 | }
  49 | 
  50 | const RECT_SIZE = 30;
  51 | const BIAS_SIZE = 5;
  52 | const NUM_SAMPLES_CLASSIFY = 500;
  53 | const NUM_SAMPLES_REGRESS = 1200;
  54 | const DENSITY = 100;
  55 | 
  56 | enum HoverType {
  57 |   BIAS, WEIGHT
  58 | }
  59 | 
  60 | interface InputFeature {
  61 |   f: (x: number, y: number) => number;
  62 |   label?: string;
  63 | }
  64 | 
  65 | let INPUTS: {[name: string]: InputFeature} = {
  66 |   "x": {f: (x, y) => x, label: "X_1"},
  67 |   "y": {f: (x, y) => y, label: "X_2"},
  68 |   "xSquared": {f: (x, y) => x * x, label: "X_1^2"},
  69 |   "ySquared": {f: (x, y) => y * y,  label: "X_2^2"},
  70 |   "xTimesY": {f: (x, y) => x * y, label: "X_1X_2"},
  71 |   "sinX": {f: (x, y) => Math.sin(x), label: "sin(X_1)"},
  72 |   "sinY": {f: (x, y) => Math.sin(y), label: "sin(X_2)"},
  73 | };
  74 | 
  75 | let HIDABLE_CONTROLS = [
  76 |   ["Show test data", "showTestData"],
  77 |   ["Discretize output", "discretize"],
  78 |   ["Play button", "playButton"],
  79 |   ["Step button", "stepButton"],
  80 |   ["Reset button", "resetButton"],
  81 |   ["Learning rate", "learningRate"],
  82 |   ["Activation", "activation"],
  83 |   ["Regularization", "regularization"],
  84 |   ["Regularization rate", "regularizationRate"],
  85 |   ["Problem type", "problem"],
  86 |   ["Which dataset", "dataset"],
  87 |   ["Ratio train data", "percTrainData"],
  88 |   ["Noise level", "noise"],
  89 |   ["Batch size", "batchSize"],
  90 |   ["# of hidden layers", "numHiddenLayers"],
  91 | ];
  92 | 
  93 | class Player {
  94 |   private timerIndex = 0;
  95 |   private isPlaying = false;
  96 |   private callback: (isPlaying: boolean) => void = null;
  97 | 
  98 |   /** Plays/pauses the player. */
  99 |   playOrPause() {
 100 |     if (this.isPlaying) {
 101 |       this.isPlaying = false;
 102 |       this.pause();
 103 |     } else {
 104 |       this.isPlaying = true;
 105 |       if (iter === 0) {
 106 |         simulationStarted();
 107 |       }
 108 |       this.play();
 109 |     }
 110 |   }
 111 | 
 112 |   onPlayPause(callback: (isPlaying: boolean) => void) {
 113 |     this.callback = callback;
 114 |   }
 115 | 
 116 |   play() {
 117 |     this.pause();
 118 |     this.isPlaying = true;
 119 |     if (this.callback) {
 120 |       this.callback(this.isPlaying);
 121 |     }
 122 |     this.start(this.timerIndex);
 123 |   }
 124 | 
 125 |   pause() {
 126 |     this.timerIndex++;
 127 |     this.isPlaying = false;
 128 |     if (this.callback) {
 129 |       this.callback(this.isPlaying);
 130 |     }
 131 |   }
 132 | 
 133 |   private start(localTimerIndex: number) {
 134 |     d3.timer(() => {
 135 |       if (localTimerIndex < this.timerIndex) {
 136 |         return true;  // Done.
 137 |       }
 138 |       oneStep();
 139 |       return false;  // Not done.
 140 |     }, 0);
 141 |   }
 142 | }
 143 | 
 144 | let state = State.deserializeState();
 145 | 
 146 | // Filter out inputs that are hidden.
 147 | state.getHiddenProps().forEach(prop => {
 148 |   if (prop in INPUTS) {
 149 |     delete INPUTS[prop];
 150 |   }
 151 | });
 152 | 
 153 | let boundary: {[id: string]: number[][]} = {};
 154 | let selectedNodeId: string = null;
 155 | // Plot the heatmap.
 156 | let xDomain: [number, number] = [-6, 6];
 157 | let heatMap =
 158 |     new HeatMap(300, DENSITY, xDomain, xDomain, d3.select("#heatmap"),
 159 |         {showAxes: true});
 160 | let linkWidthScale = d3.scale.linear()
 161 |   .domain([0, 5])
 162 |   .range([1, 10])
 163 |   .clamp(true);
 164 | let colorScale = d3.scale.linear<string, number>()
 165 |                      .domain([-1, 0, 1])
 166 |                      .range(["#f59322", "#e8eaeb", "#0877bd"])
 167 |                      .clamp(true);
 168 | let iter = 0;
 169 | let trainData: Example2D[] = [];
 170 | let testData: Example2D[] = [];
 171 | let network: nn.Node[][] = null;
 172 | let lossTrain = 0;
 173 | let lossTest = 0;
 174 | let player = new Player();
 175 | let lineChart = new AppendingLineChart(d3.select("#linechart"),
 176 |     ["#777", "black"]);
 177 | 
 178 | function makeGUI() {
 179 |   d3.select("#reset-button").on("click", () => {
 180 |     reset();
 181 |     userHasInteracted();
 182 |     d3.select("#play-pause-button");
 183 |   });
 184 | 
 185 |   d3.select("#play-pause-button").on("click", function () {
 186 |     // Change the button's content.
 187 |     userHasInteracted();
 188 |     player.playOrPause();
 189 |   });
 190 | 
 191 |   player.onPlayPause(isPlaying => {
 192 |     d3.select("#play-pause-button").classed("playing", isPlaying);
 193 |   });
 194 | 
 195 |   d3.select("#next-step-button").on("click", () => {
 196 |     player.pause();
 197 |     userHasInteracted();
 198 |     if (iter === 0) {
 199 |       simulationStarted();
 200 |     }
 201 |     oneStep();
 202 |   });
 203 | 
 204 |   d3.select("#data-regen-button").on("click", () => {
 205 |     generateData();
 206 |     parametersChanged = true;
 207 |   });
 208 | 
 209 |   let dataThumbnails = d3.selectAll("canvas[data-dataset]");
 210 |   dataThumbnails.on("click", function() {
 211 |     let newDataset = datasets[this.dataset.dataset];
 212 |     if (newDataset === state.dataset) {
 213 |       return; // No-op.
 214 |     }
 215 |     state.dataset =  newDataset;
 216 |     dataThumbnails.classed("selected", false);
 217 |     d3.select(this).classed("selected", true);
 218 |     generateData();
 219 |     parametersChanged = true;
 220 |     reset();
 221 |   });
 222 | 
 223 |   let datasetKey = getKeyFromValue(datasets, state.dataset);
 224 |   // Select the dataset according to the current state.
 225 |   d3.select(`canvas[data-dataset=${datasetKey}]`)
 226 |     .classed("selected", true);
 227 | 
 228 |   let regDataThumbnails = d3.selectAll("canvas[data-regDataset]");
 229 |   regDataThumbnails.on("click", function() {
 230 |     let newDataset = regDatasets[this.dataset.regdataset];
 231 |     if (newDataset === state.regDataset) {
 232 |       return; // No-op.
 233 |     }
 234 |     state.regDataset =  newDataset;
 235 |     regDataThumbnails.classed("selected", false);
 236 |     d3.select(this).classed("selected", true);
 237 |     generateData();
 238 |     parametersChanged = true;
 239 |     reset();
 240 |   });
 241 | 
 242 |   let regDatasetKey = getKeyFromValue(regDatasets, state.regDataset);
 243 |   // Select the dataset according to the current state.
 244 |   d3.select(`canvas[data-regDataset=${regDatasetKey}]`)
 245 |     .classed("selected", true);
 246 | 
 247 |   d3.select("#add-layers").on("click", () => {
 248 |     if (state.numHiddenLayers >= 6) {
 249 |       return;
 250 |     }
 251 |     state.networkShape[state.numHiddenLayers] = 2;
 252 |     state.numHiddenLayers++;
 253 |     parametersChanged = true;
 254 |     reset();
 255 |   });
 256 | 
 257 |   d3.select("#remove-layers").on("click", () => {
 258 |     if (state.numHiddenLayers <= 0) {
 259 |       return;
 260 |     }
 261 |     state.numHiddenLayers--;
 262 |     state.networkShape.splice(state.numHiddenLayers);
 263 |     parametersChanged = true;
 264 |     reset();
 265 |   });
 266 | 
 267 |   let showTestData = d3.select("#show-test-data").on("change", function() {
 268 |     state.showTestData = this.checked;
 269 |     state.serialize();
 270 |     userHasInteracted();
 271 |     heatMap.updateTestPoints(state.showTestData ? testData : []);
 272 |   });
 273 |   // Check/uncheck the checkbox according to the current state.
 274 |   showTestData.property("checked", state.showTestData);
 275 | 
 276 |   let discretize = d3.select("#discretize").on("change", function() {
 277 |     state.discretize = this.checked;
 278 |     state.serialize();
 279 |     userHasInteracted();
 280 |     updateUI();
 281 |   });
 282 |   // Check/uncheck the checbox according to the current state.
 283 |   discretize.property("checked", state.discretize);
 284 | 
 285 |   let percTrain = d3.select("#percTrainData").on("input", function() {
 286 |     state.percTrainData = this.value;
 287 |     d3.select("label[for='percTrainData'] .value").text(this.value);
 288 |     generateData();
 289 |     parametersChanged = true;
 290 |     reset();
 291 |   });
 292 |   percTrain.property("value", state.percTrainData);
 293 |   d3.select("label[for='percTrainData'] .value").text(state.percTrainData);
 294 | 
 295 |   let noise = d3.select("#noise").on("input", function() {
 296 |     state.noise = this.value;
 297 |     d3.select("label[for='noise'] .value").text(this.value);
 298 |     generateData();
 299 |     parametersChanged = true;
 300 |     reset();
 301 |   });
 302 |   let currentMax = parseInt(noise.property("max"));
 303 |   if (state.noise > currentMax) {
 304 |     if (state.noise <= 80) {
 305 |       noise.property("max", state.noise);
 306 |     } else {
 307 |       state.noise = 50;
 308 |     }
 309 |   } else if (state.noise < 0) {
 310 |     state.noise = 0;
 311 |   }
 312 |   noise.property("value", state.noise);
 313 |   d3.select("label[for='noise'] .value").text(state.noise);
 314 | 
 315 |   let batchSize = d3.select("#batchSize").on("input", function() {
 316 |     state.batchSize = this.value;
 317 |     d3.select("label[for='batchSize'] .value").text(this.value);
 318 |     parametersChanged = true;
 319 |     reset();
 320 |   });
 321 |   batchSize.property("value", state.batchSize);
 322 |   d3.select("label[for='batchSize'] .value").text(state.batchSize);
 323 | 
 324 |   let activationDropdown = d3.select("#activations").on("change", function() {
 325 |     state.activation = activations[this.value];
 326 |     parametersChanged = true;
 327 |     reset();
 328 |   });
 329 |   activationDropdown.property("value",
 330 |       getKeyFromValue(activations, state.activation));
 331 | 
 332 |   let learningRate = d3.select("#learningRate").on("change", function() {
 333 |     state.learningRate = +this.value;
 334 |     state.serialize();
 335 |     userHasInteracted();
 336 |     parametersChanged = true;
 337 |   });
 338 |   learningRate.property("value", state.learningRate);
 339 | 
 340 |   let regularDropdown = d3.select("#regularizations").on("change",
 341 |       function() {
 342 |     state.regularization = regularizations[this.value];
 343 |     parametersChanged = true;
 344 |     reset();
 345 |   });
 346 |   regularDropdown.property("value",
 347 |       getKeyFromValue(regularizations, state.regularization));
 348 | 
 349 |   let regularRate = d3.select("#regularRate").on("change", function() {
 350 |     state.regularizationRate = +this.value;
 351 |     parametersChanged = true;
 352 |     reset();
 353 |   });
 354 |   regularRate.property("value", state.regularizationRate);
 355 | 
 356 |   let problem = d3.select("#problem").on("change", function() {
 357 |     state.problem = problems[this.value];
 358 |     generateData();
 359 |     drawDatasetThumbnails();
 360 |     parametersChanged = true;
 361 |     reset();
 362 |   });
 363 |   problem.property("value", getKeyFromValue(problems, state.problem));
 364 | 
 365 |   // Add scale to the gradient color map.
 366 |   let x = d3.scale.linear().domain([-1, 1]).range([0, 144]);
 367 |   let xAxis = d3.svg.axis()
 368 |     .scale(x)
 369 |     .orient("bottom")
 370 |     .tickValues([-1, 0, 1])
 371 |     .tickFormat(d3.format("d"));
 372 |   d3.select("#colormap g.core").append("g")
 373 |     .attr("class", "x axis")
 374 |     .attr("transform", "translate(0,10)")
 375 |     .call(xAxis);
 376 | 
 377 |   // Listen for css-responsive changes and redraw the svg network.
 378 | 
 379 |   window.addEventListener("resize", () => {
 380 |     let newWidth = document.querySelector("#main-part")
 381 |         .getBoundingClientRect().width;
 382 |     if (newWidth !== mainWidth) {
 383 |       mainWidth = newWidth;
 384 |       drawNetwork(network);
 385 |       updateUI(true);
 386 |     }
 387 |   });
 388 | 
 389 |   // Hide the text below the visualization depending on the URL.
 390 |   if (state.hideText) {
 391 |     d3.select("#article-text").style("display", "none");
 392 |     d3.select("div.more").style("display", "none");
 393 |     d3.select("header").style("display", "none");
 394 |   }
 395 | }
 396 | 
 397 | function updateBiasesUI(network: nn.Node[][]) {
 398 |   nn.forEachNode(network, true, node => {
 399 |     d3.select(`rect#bias-${node.id}`).style("fill", colorScale(node.bias));
 400 |   });
 401 | }
 402 | 
 403 | function updateWeightsUI(network: nn.Node[][], container) {
 404 |   for (let layerIdx = 1; layerIdx < network.length; layerIdx++) {
 405 |     let currentLayer = network[layerIdx];
 406 |     // Update all the nodes in this layer.
 407 |     for (let i = 0; i < currentLayer.length; i++) {
 408 |       let node = currentLayer[i];
 409 |       for (let j = 0; j < node.inputLinks.length; j++) {
 410 |         let link = node.inputLinks[j];
 411 |         container.select(`#link${link.source.id}-${link.dest.id}`)
 412 |             .style({
 413 |               "stroke-dashoffset": -iter / 3,
 414 |               "stroke-width": linkWidthScale(Math.abs(link.weight)),
 415 |               "stroke": colorScale(link.weight)
 416 |             })
 417 |             .datum(link);
 418 |       }
 419 |     }
 420 |   }
 421 | }
 422 | 
 423 | function drawNode(cx: number, cy: number, nodeId: string, isInput: boolean,
 424 |     container, node?: nn.Node) {
 425 |   let x = cx - RECT_SIZE / 2;
 426 |   let y = cy - RECT_SIZE / 2;
 427 | 
 428 |   let nodeGroup = container.append("g")
 429 |     .attr({
 430 |       "class": "node",
 431 |       "id": `node${nodeId}`,
 432 |       "transform": `translate(${x},${y})`
 433 |     });
 434 | 
 435 |   // Draw the main rectangle.
 436 |   nodeGroup.append("rect")
 437 |     .attr({
 438 |       x: 0,
 439 |       y: 0,
 440 |       width: RECT_SIZE,
 441 |       height: RECT_SIZE,
 442 |     });
 443 |   let activeOrNotClass = state[nodeId] ? "active" : "inactive";
 444 |   if (isInput) {
 445 |     let label = INPUTS[nodeId].label != null ?
 446 |         INPUTS[nodeId].label : nodeId;
 447 |     // Draw the input label.
 448 |     let text = nodeGroup.append("text").attr({
 449 |       class: "main-label",
 450 |       x: -10,
 451 |       y: RECT_SIZE / 2, "text-anchor": "end"
 452 |     });
 453 |     if (/[_^]/.test(label)) {
 454 |       let myRe = /(.*?)([_^])(.)/g;
 455 |       let myArray;
 456 |       let lastIndex;
 457 |       while ((myArray = myRe.exec(label)) != null) {
 458 |         lastIndex = myRe.lastIndex;
 459 |         let prefix = myArray[1];
 460 |         let sep = myArray[2];
 461 |         let suffix = myArray[3];
 462 |         if (prefix) {
 463 |           text.append("tspan").text(prefix);
 464 |         }
 465 |         text.append("tspan")
 466 |         .attr("baseline-shift", sep === "_" ? "sub" : "super")
 467 |         .style("font-size", "9px")
 468 |         .text(suffix);
 469 |       }
 470 |       if (label.substring(lastIndex)) {
 471 |         text.append("tspan").text(label.substring(lastIndex));
 472 |       }
 473 |     } else {
 474 |       text.append("tspan").text(label);
 475 |     }
 476 |     nodeGroup.classed(activeOrNotClass, true);
 477 |   }
 478 |   if (!isInput) {
 479 |     // Draw the node's bias.
 480 |     nodeGroup.append("rect")
 481 |       .attr({
 482 |         id: `bias-${nodeId}`,
 483 |         x: -BIAS_SIZE - 2,
 484 |         y: RECT_SIZE - BIAS_SIZE + 3,
 485 |         width: BIAS_SIZE,
 486 |         height: BIAS_SIZE,
 487 |       }).on("mouseenter", function() {
 488 |         updateHoverCard(HoverType.BIAS, node, d3.mouse(container.node()));
 489 |       }).on("mouseleave", function() {
 490 |         updateHoverCard(null);
 491 |       });
 492 |   }
 493 | 
 494 |   // Draw the node's canvas.
 495 |   let div = d3.select("#network").insert("div", ":first-child")
 496 |     .attr({
 497 |       "id": `canvas-${nodeId}`,
 498 |       "class": "canvas"
 499 |     })
 500 |     .style({
 501 |       position: "absolute",
 502 |       left: `${x + 3}px`,
 503 |       top: `${y + 3}px`
 504 |     })
 505 |     .on("mouseenter", function() {
 506 |       selectedNodeId = nodeId;
 507 |       div.classed("hovered", true);
 508 |       nodeGroup.classed("hovered", true);
 509 |       updateDecisionBoundary(network, false);
 510 |       heatMap.updateBackground(boundary[nodeId], state.discretize);
 511 |     })
 512 |     .on("mouseleave", function() {
 513 |       selectedNodeId = null;
 514 |       div.classed("hovered", false);
 515 |       nodeGroup.classed("hovered", false);
 516 |       updateDecisionBoundary(network, false);
 517 |       heatMap.updateBackground(boundary[nn.getOutputNode(network).id],
 518 |           state.discretize);
 519 |     });
 520 |   if (isInput) {
 521 |     div.on("click", function() {
 522 |       state[nodeId] = !state[nodeId];
 523 |       parametersChanged = true;
 524 |       reset();
 525 |     });
 526 |     div.style("cursor", "pointer");
 527 |   }
 528 |   if (isInput) {
 529 |     div.classed(activeOrNotClass, true);
 530 |   }
 531 |   let nodeHeatMap = new HeatMap(RECT_SIZE, DENSITY / 10, xDomain,
 532 |       xDomain, div, {noSvg: true});
 533 |   div.datum({heatmap: nodeHeatMap, id: nodeId});
 534 | 
 535 | }
 536 | 
 537 | // Draw network
 538 | function drawNetwork(network: nn.Node[][]): void {
 539 |   let svg = d3.select("#svg");
 540 |   // Remove all svg elements.
 541 |   svg.select("g.core").remove();
 542 |   // Remove all div elements.
 543 |   d3.select("#network").selectAll("div.canvas").remove();
 544 |   d3.select("#network").selectAll("div.plus-minus-neurons").remove();
 545 | 
 546 |   // Get the width of the svg container.
 547 |   let padding = 3;
 548 |   let co = d3.select(".column.output").node() as HTMLDivElement;
 549 |   let cf = d3.select(".column.features").node() as HTMLDivElement;
 550 |   let width = co.offsetLeft - cf.offsetLeft;
 551 |   svg.attr("width", width);
 552 | 
 553 |   // Map of all node coordinates.
 554 |   let node2coord: {[id: string]: {cx: number, cy: number}} = {};
 555 |   let container = svg.append("g")
 556 |     .classed("core", true)
 557 |     .attr("transform", `translate(${padding},${padding})`);
 558 |   // Draw the network layer by layer.
 559 |   let numLayers = network.length;
 560 |   let featureWidth = 118;
 561 |   let layerScale = d3.scale.ordinal<number, number>()
 562 |       .domain(d3.range(1, numLayers - 1))
 563 |       .rangePoints([featureWidth, width - RECT_SIZE], 0.7);
 564 |   let nodeIndexScale = (nodeIndex: number) => nodeIndex * (RECT_SIZE + 25);
 565 | 
 566 | 
 567 |   let calloutThumb = d3.select(".callout.thumbnail").style("display", "none");
 568 |   let calloutWeights = d3.select(".callout.weights").style("display", "none");
 569 |   let idWithCallout = null;
 570 |   let targetIdWithCallout = null;
 571 | 
 572 |   // Draw the input layer separately.
 573 |   let cx = RECT_SIZE / 2 + 50;
 574 |   let nodeIds = Object.keys(INPUTS);
 575 |   let maxY = nodeIndexScale(nodeIds.length);
 576 |   nodeIds.forEach((nodeId, i) => {
 577 |     let cy = nodeIndexScale(i) + RECT_SIZE / 2;
 578 |     node2coord[nodeId] = {cx, cy};
 579 |     drawNode(cx, cy, nodeId, true, container);
 580 |   });
 581 | 
 582 |   // Draw the intermediate layers.
 583 |   for (let layerIdx = 1; layerIdx < numLayers - 1; layerIdx++) {
 584 |     let numNodes = network[layerIdx].length;
 585 |     let cx = layerScale(layerIdx) + RECT_SIZE / 2;
 586 |     maxY = Math.max(maxY, nodeIndexScale(numNodes));
 587 |     addPlusMinusControl(layerScale(layerIdx), layerIdx);
 588 |     for (let i = 0; i < numNodes; i++) {
 589 |       let node = network[layerIdx][i];
 590 |       let cy = nodeIndexScale(i) + RECT_SIZE / 2;
 591 |       node2coord[node.id] = {cx, cy};
 592 |       drawNode(cx, cy, node.id, false, container, node);
 593 | 
 594 |       // Show callout to thumbnails.
 595 |       let numNodes = network[layerIdx].length;
 596 |       let nextNumNodes = network[layerIdx + 1].length;
 597 |       if (idWithCallout == null &&
 598 |           i === numNodes - 1 &&
 599 |           nextNumNodes <= numNodes) {
 600 |         calloutThumb.style({
 601 |           display: null,
 602 |           top: `${20 + 3 + cy}px`,
 603 |           left: `${cx}px`
 604 |         });
 605 |         idWithCallout = node.id;
 606 |       }
 607 | 
 608 |       // Draw links.
 609 |       for (let j = 0; j < node.inputLinks.length; j++) {
 610 |         let link = node.inputLinks[j];
 611 |         let path: SVGPathElement = drawLink(link, node2coord, network,
 612 |             container, j === 0, j, node.inputLinks.length).node() as any;
 613 |         // Show callout to weights.
 614 |         let prevLayer = network[layerIdx - 1];
 615 |         let lastNodePrevLayer = prevLayer[prevLayer.length - 1];
 616 |         if (targetIdWithCallout == null &&
 617 |             i === numNodes - 1 &&
 618 |             link.source.id === lastNodePrevLayer.id &&
 619 |             (link.source.id !== idWithCallout || numLayers <= 5) &&
 620 |             link.dest.id !== idWithCallout &&
 621 |             prevLayer.length >= numNodes) {
 622 |           let midPoint = path.getPointAtLength(path.getTotalLength() * 0.7);
 623 |           calloutWeights.style({
 624 |             display: null,
 625 |             top: `${midPoint.y + 5}px`,
 626 |             left: `${midPoint.x + 3}px`
 627 |           });
 628 |           targetIdWithCallout = link.dest.id;
 629 |         }
 630 |       }
 631 |     }
 632 |   }
 633 | 
 634 |   // Draw the output node separately.
 635 |   cx = width + RECT_SIZE / 2;
 636 |   let node = network[numLayers - 1][0];
 637 |   let cy = nodeIndexScale(0) + RECT_SIZE / 2;
 638 |   node2coord[node.id] = {cx, cy};
 639 |   // Draw links.
 640 |   for (let i = 0; i < node.inputLinks.length; i++) {
 641 |     let link = node.inputLinks[i];
 642 |     drawLink(link, node2coord, network, container, i === 0, i,
 643 |         node.inputLinks.length);
 644 |   }
 645 |   // Adjust the height of the svg.
 646 |   svg.attr("height", maxY);
 647 | 
 648 |   // Adjust the height of the features column.
 649 |   let height = Math.max(
 650 |     getRelativeHeight(calloutThumb),
 651 |     getRelativeHeight(calloutWeights),
 652 |     getRelativeHeight(d3.select("#network"))
 653 |   );
 654 |   d3.select(".column.features").style("height", height + "px");
 655 | }
 656 | 
 657 | function getRelativeHeight(selection) {
 658 |   let node = selection.node() as HTMLAnchorElement;
 659 |   return node.offsetHeight + node.offsetTop;
 660 | }
 661 | 
 662 | function addPlusMinusControl(x: number, layerIdx: number) {
 663 |   let div = d3.select("#network").append("div")
 664 |     .classed("plus-minus-neurons", true)
 665 |     .style("left", `${x - 10}px`);
 666 | 
 667 |   let i = layerIdx - 1;
 668 |   let firstRow = div.append("div").attr("class", `ui-numNodes${layerIdx}`);
 669 |   firstRow.append("button")
 670 |       .attr("class", "mdl-button mdl-js-button mdl-button--icon")
 671 |       .on("click", () => {
 672 |         let numNeurons = state.networkShape[i];
 673 |         if (numNeurons >= 8) {
 674 |           return;
 675 |         }
 676 |         state.networkShape[i]++;
 677 |         parametersChanged = true;
 678 |         reset();
 679 |       })
 680 |     .append("i")
 681 |       .attr("class", "material-icons")
 682 |       .text("add");
 683 | 
 684 |   firstRow.append("button")
 685 |       .attr("class", "mdl-button mdl-js-button mdl-button--icon")
 686 |       .on("click", () => {
 687 |         let numNeurons = state.networkShape[i];
 688 |         if (numNeurons <= 1) {
 689 |           return;
 690 |         }
 691 |         state.networkShape[i]--;
 692 |         parametersChanged = true;
 693 |         reset();
 694 |       })
 695 |     .append("i")
 696 |       .attr("class", "material-icons")
 697 |       .text("remove");
 698 | 
 699 |   let suffix = state.networkShape[i] > 1 ? "s" : "";
 700 |   div.append("div").text(
 701 |     state.networkShape[i] + " neuron" + suffix
 702 |   );
 703 | }
 704 | 
 705 | function updateHoverCard(type: HoverType, nodeOrLink?: nn.Node | nn.Link,
 706 |     coordinates?: [number, number]) {
 707 |   let hovercard = d3.select("#hovercard");
 708 |   if (type == null) {
 709 |     hovercard.style("display", "none");
 710 |     d3.select("#svg").on("click", null);
 711 |     return;
 712 |   }
 713 |   d3.select("#svg").on("click", () => {
 714 |     hovercard.select(".value").style("display", "none");
 715 |     let input = hovercard.select("input");
 716 |     input.style("display", null);
 717 |     input.on("input", function() {
 718 |       if (this.value != null && this.value !== "") {
 719 |         if (type === HoverType.WEIGHT) {
 720 |           (nodeOrLink as nn.Link).weight = +this.value;
 721 |         } else {
 722 |           (nodeOrLink as nn.Node).bias = +this.value;
 723 |         }
 724 |         updateUI();
 725 |       }
 726 |     });
 727 |     input.on("keypress", () => {
 728 |       if ((d3.event as any).keyCode === 13) {
 729 |         updateHoverCard(type, nodeOrLink, coordinates);
 730 |       }
 731 |     });
 732 |     (input.node() as HTMLInputElement).focus();
 733 |   });
 734 |   let value = (type === HoverType.WEIGHT) ?
 735 |     (nodeOrLink as nn.Link).weight :
 736 |     (nodeOrLink as nn.Node).bias;
 737 |   let name = (type === HoverType.WEIGHT) ? "Weight" : "Bias";
 738 |   hovercard.style({
 739 |     "left": `${coordinates[0] + 20}px`,
 740 |     "top": `${coordinates[1]}px`,
 741 |     "display": "block"
 742 |   });
 743 |   hovercard.select(".type").text(name);
 744 |   hovercard.select(".value")
 745 |     .style("display", null)
 746 |     .text(value.toPrecision(2));
 747 |   hovercard.select("input")
 748 |     .property("value", value.toPrecision(2))
 749 |     .style("display", "none");
 750 | }
 751 | 
 752 | function drawLink(
 753 |     input: nn.Link, node2coord: {[id: string]: {cx: number, cy: number}},
 754 |     network: nn.Node[][], container,
 755 |     isFirst: boolean, index: number, length: number) {
 756 |   let line = container.insert("path", ":first-child");
 757 |   let source = node2coord[input.source.id];
 758 |   let dest = node2coord[input.dest.id];
 759 |   let datum = {
 760 |     source: {
 761 |       y: source.cx + RECT_SIZE / 2 + 2,
 762 |       x: source.cy
 763 |     },
 764 |     target: {
 765 |       y: dest.cx - RECT_SIZE / 2,
 766 |       x: dest.cy + ((index - (length - 1) / 2) / length) * 12
 767 |     }
 768 |   };
 769 |   let diagonal = d3.svg.diagonal().projection(d => [d.y, d.x]);
 770 |   line.attr({
 771 |     "marker-start": "url(#markerArrow)",
 772 |     class: "link",
 773 |     id: "link" + input.source.id + "-" + input.dest.id,
 774 |     d: diagonal(datum, 0)
 775 |   });
 776 | 
 777 |   // Add an invisible thick link that will be used for
 778 |   // showing the weight value on hover.
 779 |   container.append("path")
 780 |     .attr("d", diagonal(datum, 0))
 781 |     .attr("class", "link-hover")
 782 |     .on("mouseenter", function() {
 783 |       updateHoverCard(HoverType.WEIGHT, input, d3.mouse(this));
 784 |     }).on("mouseleave", function() {
 785 |       updateHoverCard(null);
 786 |     });
 787 |   return line;
 788 | }
 789 | 
 790 | /**
 791 |  * Given a neural network, it asks the network for the output (prediction)
 792 |  * of every node in the network using inputs sampled on a square grid.
 793 |  * It returns a map where each key is the node ID and the value is a square
 794 |  * matrix of the outputs of the network for each input in the grid respectively.
 795 |  */
 796 | function updateDecisionBoundary(network: nn.Node[][], firstTime: boolean) {
 797 |   if (firstTime) {
 798 |     boundary = {};
 799 |     nn.forEachNode(network, true, node => {
 800 |       boundary[node.id] = new Array(DENSITY);
 801 |     });
 802 |     // Go through all predefined inputs.
 803 |     for (let nodeId in INPUTS) {
 804 |       boundary[nodeId] = new Array(DENSITY);
 805 |     }
 806 |   }
 807 |   let xScale = d3.scale.linear().domain([0, DENSITY - 1]).range(xDomain);
 808 |   let yScale = d3.scale.linear().domain([DENSITY - 1, 0]).range(xDomain);
 809 | 
 810 |   let i = 0, j = 0;
 811 |   for (i = 0; i < DENSITY; i++) {
 812 |     if (firstTime) {
 813 |       nn.forEachNode(network, true, node => {
 814 |         boundary[node.id][i] = new Array(DENSITY);
 815 |       });
 816 |       // Go through all predefined inputs.
 817 |       for (let nodeId in INPUTS) {
 818 |         boundary[nodeId][i] = new Array(DENSITY);
 819 |       }
 820 |     }
 821 |     for (j = 0; j < DENSITY; j++) {
 822 |       // 1 for points inside the circle, and 0 for points outside the circle.
 823 |       let x = xScale(i);
 824 |       let y = yScale(j);
 825 |       let input = constructInput(x, y);
 826 |       nn.forwardProp(network, input);
 827 |       nn.forEachNode(network, true, node => {
 828 |         boundary[node.id][i][j] = node.output;
 829 |       });
 830 |       if (firstTime) {
 831 |         // Go through all predefined inputs.
 832 |         for (let nodeId in INPUTS) {
 833 |           boundary[nodeId][i][j] = INPUTS[nodeId].f(x, y);
 834 |         }
 835 |       }
 836 |     }
 837 |   }
 838 | }
 839 | 
 840 | function getLoss(network: nn.Node[][], dataPoints: Example2D[]): number {
 841 |   let loss = 0;
 842 |   for (let i = 0; i < dataPoints.length; i++) {
 843 |     let dataPoint = dataPoints[i];
 844 |     let input = constructInput(dataPoint.x, dataPoint.y);
 845 |     let output = nn.forwardProp(network, input);
 846 |     loss += nn.Errors.SQUARE.error(output, dataPoint.label);
 847 |   }
 848 |   return loss / dataPoints.length;
 849 | }
 850 | 
 851 | function updateUI(firstStep = false) {
 852 |   // Update the links visually.
 853 |   updateWeightsUI(network, d3.select("g.core"));
 854 |   // Update the bias values visually.
 855 |   updateBiasesUI(network);
 856 |   // Get the decision boundary of the network.
 857 |   updateDecisionBoundary(network, firstStep);
 858 |   let selectedId = selectedNodeId != null ?
 859 |       selectedNodeId : nn.getOutputNode(network).id;
 860 |   heatMap.updateBackground(boundary[selectedId], state.discretize);
 861 | 
 862 |   // Update all decision boundaries.
 863 |   d3.select("#network").selectAll("div.canvas")
 864 |       .each(function(data: {heatmap: HeatMap, id: string}) {
 865 |     data.heatmap.updateBackground(reduceMatrix(boundary[data.id], 10),
 866 |         state.discretize);
 867 |   });
 868 | 
 869 |   function zeroPad(n: number): string {
 870 |     let pad = "000000";
 871 |     return (pad + n).slice(-pad.length);
 872 |   }
 873 | 
 874 |   function addCommas(s: string): string {
 875 |     return s.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 876 |   }
 877 | 
 878 |   function humanReadable(n: number): string {
 879 |     return n.toFixed(3);
 880 |   }
 881 | 
 882 |   // Update loss and iteration number.
 883 |   d3.select("#loss-train").text(humanReadable(lossTrain));
 884 |   d3.select("#loss-test").text(humanReadable(lossTest));
 885 |   d3.select("#iter-number").text(addCommas(zeroPad(iter)));
 886 |   lineChart.addDataPoint([lossTrain, lossTest]);
 887 | }
 888 | 
 889 | function constructInputIds(): string[] {
 890 |   let result: string[] = [];
 891 |   for (let inputName in INPUTS) {
 892 |     if (state[inputName]) {
 893 |       result.push(inputName);
 894 |     }
 895 |   }
 896 |   return result;
 897 | }
 898 | 
 899 | function constructInput(x: number, y: number): number[] {
 900 |   let input: number[] = [];
 901 |   for (let inputName in INPUTS) {
 902 |     if (state[inputName]) {
 903 |       input.push(INPUTS[inputName].f(x, y));
 904 |     }
 905 |   }
 906 |   return input;
 907 | }
 908 | 
 909 | function oneStep(): void {
 910 |   iter++;
 911 |   trainData.forEach((point, i) => {
 912 |     let input = constructInput(point.x, point.y);
 913 |     nn.forwardProp(network, input);
 914 |     nn.backProp(network, point.label, nn.Errors.SQUARE);
 915 |     if ((i + 1) % state.batchSize === 0) {
 916 |       nn.updateWeights(network, state.learningRate, state.regularizationRate);
 917 |     }
 918 |   });
 919 |   // Compute the loss.
 920 |   lossTrain = getLoss(network, trainData);
 921 |   lossTest = getLoss(network, testData);
 922 |   updateUI();
 923 | }
 924 | 
 925 | export function getOutputWeights(network: nn.Node[][]): number[] {
 926 |   let weights: number[] = [];
 927 |   for (let layerIdx = 0; layerIdx < network.length - 1; layerIdx++) {
 928 |     let currentLayer = network[layerIdx];
 929 |     for (let i = 0; i < currentLayer.length; i++) {
 930 |       let node = currentLayer[i];
 931 |       for (let j = 0; j < node.outputs.length; j++) {
 932 |         let output = node.outputs[j];
 933 |         weights.push(output.weight);
 934 |       }
 935 |     }
 936 |   }
 937 |   return weights;
 938 | }
 939 | 
 940 | function reset(onStartup=false) {
 941 |   lineChart.reset();
 942 |   state.serialize();
 943 |   if (!onStartup) {
 944 |     userHasInteracted();
 945 |   }
 946 |   player.pause();
 947 | 
 948 |   let suffix = state.numHiddenLayers !== 1 ? "s" : "";
 949 |   d3.select("#layers-label").text("Hidden layer" + suffix);
 950 |   d3.select("#num-layers").text(state.numHiddenLayers);
 951 | 
 952 |   // Make a simple network.
 953 |   iter = 0;
 954 |   let numInputs = constructInput(0 , 0).length;
 955 |   let shape = [numInputs].concat(state.networkShape).concat([1]);
 956 |   let outputActivation = (state.problem === Problem.REGRESSION) ?
 957 |       nn.Activations.LINEAR : nn.Activations.TANH;
 958 |   network = nn.buildNetwork(shape, state.activation, outputActivation,
 959 |       state.regularization, constructInputIds(), state.initZero);
 960 |   lossTrain = getLoss(network, trainData);
 961 |   lossTest = getLoss(network, testData);
 962 |   drawNetwork(network);
 963 |   updateUI(true);
 964 | };
 965 | 
 966 | function initTutorial() {
 967 |   if (state.tutorial == null || state.tutorial === '' || state.hideText) {
 968 |     return;
 969 |   }
 970 |   // Remove all other text.
 971 |   d3.selectAll("article div.l--body").remove();
 972 |   let tutorial = d3.select("article").append("div")
 973 |     .attr("class", "l--body");
 974 |   // Insert tutorial text.
 975 |   d3.html(`tutorials/${state.tutorial}.html`, (err, htmlFragment) => {
 976 |     if (err) {
 977 |       throw err;
 978 |     }
 979 |     tutorial.node().appendChild(htmlFragment);
 980 |     // If the tutorial has a <title> tag, set the page title to that.
 981 |     let title = tutorial.select("title");
 982 |     if (title.size()) {
 983 |       d3.select("header h1").style({
 984 |         "margin-top": "20px",
 985 |         "margin-bottom": "20px",
 986 |       })
 987 |       .text(title.text());
 988 |       document.title = title.text();
 989 |     }
 990 |   });
 991 | }
 992 | 
 993 | function drawDatasetThumbnails() {
 994 |   function renderThumbnail(canvas, dataGenerator) {
 995 |     let w = 100;
 996 |     let h = 100;
 997 |     canvas.setAttribute("width", w);
 998 |     canvas.setAttribute("height", h);
 999 |     let context = canvas.getContext("2d");
1000 |     let data = dataGenerator(200, 0);
1001 |     data.forEach(function(d) {
1002 |       context.fillStyle = colorScale(d.label);
1003 |       context.fillRect(w * (d.x + 6) / 12, h * (d.y + 6) / 12, 4, 4);
1004 |     });
1005 |     d3.select(canvas.parentNode).style("display", null);
1006 |   }
1007 |   d3.selectAll(".dataset").style("display", "none");
1008 | 
1009 |   if (state.problem === Problem.CLASSIFICATION) {
1010 |     for (let dataset in datasets) {
1011 |       let canvas: any =
1012 |           document.querySelector(`canvas[data-dataset=${dataset}]`);
1013 |       let dataGenerator = datasets[dataset];
1014 |       renderThumbnail(canvas, dataGenerator);
1015 |     }
1016 |   }
1017 |   if (state.problem === Problem.REGRESSION) {
1018 |     for (let regDataset in regDatasets) {
1019 |       let canvas: any =
1020 |           document.querySelector(`canvas[data-regDataset=${regDataset}]`);
1021 |       let dataGenerator = regDatasets[regDataset];
1022 |       renderThumbnail(canvas, dataGenerator);
1023 |     }
1024 |   }
1025 | }
1026 | 
1027 | function hideControls() {
1028 |   // Set display:none to all the UI elements that are hidden.
1029 |   let hiddenProps = state.getHiddenProps();
1030 |   hiddenProps.forEach(prop => {
1031 |     let controls = d3.selectAll(`.ui-${prop}`);
1032 |     if (controls.size() === 0) {
1033 |       console.warn(`0 html elements found with class .ui-${prop}`);
1034 |     }
1035 |     controls.style("display", "none");
1036 |   });
1037 | 
1038 |   // Also add checkbox for each hidable control in the "use it in classrom"
1039 |   // section.
1040 |   let hideControls = d3.select(".hide-controls");
1041 |   HIDABLE_CONTROLS.forEach(([text, id]) => {
1042 |     let label = hideControls.append("label")
1043 |       .attr("class", "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect");
1044 |     let input = label.append("input")
1045 |       .attr({
1046 |         type: "checkbox",
1047 |         class: "mdl-checkbox__input",
1048 |       });
1049 |     if (hiddenProps.indexOf(id) === -1) {
1050 |       input.attr("checked", "true");
1051 |     }
1052 |     input.on("change", function() {
1053 |       state.setHideProperty(id, !this.checked);
1054 |       state.serialize();
1055 |       userHasInteracted();
1056 |       d3.select(".hide-controls-link")
1057 |         .attr("href", window.location.href);
1058 |     });
1059 |     label.append("span")
1060 |       .attr("class", "mdl-checkbox__label label")
1061 |       .text(text);
1062 |   });
1063 |   d3.select(".hide-controls-link")
1064 |     .attr("href", window.location.href);
1065 | }
1066 | 
1067 | function generateData(firstTime = false) {
1068 |   if (!firstTime) {
1069 |     // Change the seed.
1070 |     state.seed = Math.random().toFixed(5);
1071 |     state.serialize();
1072 |     userHasInteracted();
1073 |   }
1074 |   Math.seedrandom(state.seed);
1075 |   let numSamples = (state.problem === Problem.REGRESSION) ?
1076 |       NUM_SAMPLES_REGRESS : NUM_SAMPLES_CLASSIFY;
1077 |   let generator = state.problem === Problem.CLASSIFICATION ?
1078 |       state.dataset : state.regDataset;
1079 |   let data = generator(numSamples, state.noise / 100);
1080 |   // Shuffle the data in-place.
1081 |   shuffle(data);
1082 |   // Split into train and test data.
1083 |   let splitIndex = Math.floor(data.length * state.percTrainData / 100);
1084 |   trainData = data.slice(0, splitIndex);
1085 |   testData = data.slice(splitIndex);
1086 |   heatMap.updatePoints(trainData);
1087 |   heatMap.updateTestPoints(state.showTestData ? testData : []);
1088 | }
1089 | 
1090 | let firstInteraction = true;
1091 | let parametersChanged = false;
1092 | 
1093 | function userHasInteracted() {
1094 |   if (!firstInteraction) {
1095 |     return;
1096 |   }
1097 |   firstInteraction = false;
1098 |   let page = 'index';
1099 |   if (state.tutorial != null && state.tutorial !== '') {
1100 |     page = `/v/tutorials/${state.tutorial}`;
1101 |   }
1102 |   ga('set', 'page', page);
1103 |   ga('send', 'pageview', {'sessionControl': 'start'});
1104 | }
1105 | 
1106 | function simulationStarted() {
1107 |   ga('send', {
1108 |     hitType: 'event',
1109 |     eventCategory: 'Starting Simulation',
1110 |     eventAction: parametersChanged ? 'changed' : 'unchanged',
1111 |     eventLabel: state.tutorial == null ? '' : state.tutorial
1112 |   });
1113 |   parametersChanged = false;
1114 | }
1115 | 
1116 | drawDatasetThumbnails();
1117 | initTutorial();
1118 | makeGUI();
1119 | generateData(true);
1120 | reset(true);
1121 | hideControls();
1122 | 


--------------------------------------------------------------------------------
/src/seedrandom.d.ts:
--------------------------------------------------------------------------------
 1 | /* Copyright 2016 Google Inc. All Rights Reserved.
 2 | 
 3 | Licensed under the Apache License, Version 2.0 (the "License");
 4 | you may not use this file except in compliance with the License.
 5 | You may obtain a copy of the License at
 6 | 
 7 |     http://www.apache.org/licenses/LICENSE-2.0
 8 | 
 9 | Unless required by applicable law or agreed to in writing, software
10 | distributed under the License is distributed on an "AS IS" BASIS,
11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | See the License for the specific language governing permissions and
13 | limitations under the License.
14 | ==============================================================================*/
15 | 
16 | interface Math {
17 |   seedrandom: (seed: string) => void;
18 | }
19 | 
20 | declare let ga: any;


--------------------------------------------------------------------------------
/src/state.ts:
--------------------------------------------------------------------------------
  1 | /* Copyright 2016 Google Inc. All Rights Reserved.
  2 | 
  3 | Licensed under the Apache License, Version 2.0 (the "License");
  4 | you may not use this file except in compliance with the License.
  5 | You may obtain a copy of the License at
  6 | 
  7 |     http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 | Unless required by applicable law or agreed to in writing, software
 10 | distributed under the License is distributed on an "AS IS" BASIS,
 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | See the License for the specific language governing permissions and
 13 | limitations under the License.
 14 | ==============================================================================*/
 15 | 
 16 | import * as nn from "./nn";
 17 | import * as dataset from "./dataset";
 18 | 
 19 | /** Suffix added to the state when storing if a control is hidden or not. */
 20 | const HIDE_STATE_SUFFIX = "_hide";
 21 | 
 22 | /** A map between names and activation functions. */
 23 | export let activations: {[key: string]: nn.ActivationFunction} = {
 24 |   "relu": nn.Activations.RELU,
 25 |   "tanh": nn.Activations.TANH,
 26 |   "sigmoid": nn.Activations.SIGMOID,
 27 |   "linear": nn.Activations.LINEAR
 28 | };
 29 | 
 30 | /** A map between names and regularization functions. */
 31 | export let regularizations: {[key: string]: nn.RegularizationFunction} = {
 32 |   "none": null,
 33 |   "L1": nn.RegularizationFunction.L1,
 34 |   "L2": nn.RegularizationFunction.L2
 35 | };
 36 | 
 37 | /** A map between dataset names and functions that generate classification data. */
 38 | export let datasets: {[key: string]: dataset.DataGenerator} = {
 39 |   "circle": dataset.classifyCircleData,
 40 |   "xor": dataset.classifyXORData,
 41 |   "gauss": dataset.classifyTwoGaussData,
 42 |   "spiral": dataset.classifySpiralData,
 43 | };
 44 | 
 45 | /** A map between dataset names and functions that generate regression data. */
 46 | export let regDatasets: {[key: string]: dataset.DataGenerator} = {
 47 |   "reg-plane": dataset.regressPlane,
 48 |   "reg-gauss": dataset.regressGaussian
 49 | };
 50 | 
 51 | export function getKeyFromValue(obj: any, value: any): string {
 52 |   for (let key in obj) {
 53 |     if (obj[key] === value) {
 54 |       return key;
 55 |     }
 56 |   }
 57 |   return undefined;
 58 | }
 59 | 
 60 | function endsWith(s: string, suffix: string): boolean {
 61 |   return s.substr(-suffix.length) === suffix;
 62 | }
 63 | 
 64 | function getHideProps(obj: any): string[] {
 65 |   let result: string[] = [];
 66 |   for (let prop in obj) {
 67 |     if (endsWith(prop, HIDE_STATE_SUFFIX)) {
 68 |       result.push(prop);
 69 |     }
 70 |   }
 71 |   return result;
 72 | }
 73 | 
 74 | /**
 75 |  * The data type of a state variable. Used for determining the
 76 |  * (de)serialization method.
 77 |  */
 78 | export enum Type {
 79 |   STRING,
 80 |   NUMBER,
 81 |   ARRAY_NUMBER,
 82 |   ARRAY_STRING,
 83 |   BOOLEAN,
 84 |   OBJECT
 85 | }
 86 | 
 87 | export enum Problem {
 88 |   CLASSIFICATION,
 89 |   REGRESSION
 90 | }
 91 | 
 92 | export let problems = {
 93 |   "classification": Problem.CLASSIFICATION,
 94 |   "regression": Problem.REGRESSION
 95 | };
 96 | 
 97 | export interface Property {
 98 |   name: string;
 99 |   type: Type;
100 |   keyMap?: {[key: string]: any};
101 | };
102 | 
103 | // Add the GUI state.
104 | export class State {
105 | 
106 |   private static PROPS: Property[] = [
107 |     {name: "activation", type: Type.OBJECT, keyMap: activations},
108 |     {name: "regularization", type: Type.OBJECT, keyMap: regularizations},
109 |     {name: "batchSize", type: Type.NUMBER},
110 |     {name: "dataset", type: Type.OBJECT, keyMap: datasets},
111 |     {name: "regDataset", type: Type.OBJECT, keyMap: regDatasets},
112 |     {name: "learningRate", type: Type.NUMBER},
113 |     {name: "regularizationRate", type: Type.NUMBER},
114 |     {name: "noise", type: Type.NUMBER},
115 |     {name: "networkShape", type: Type.ARRAY_NUMBER},
116 |     {name: "seed", type: Type.STRING},
117 |     {name: "showTestData", type: Type.BOOLEAN},
118 |     {name: "discretize", type: Type.BOOLEAN},
119 |     {name: "percTrainData", type: Type.NUMBER},
120 |     {name: "x", type: Type.BOOLEAN},
121 |     {name: "y", type: Type.BOOLEAN},
122 |     {name: "xTimesY", type: Type.BOOLEAN},
123 |     {name: "xSquared", type: Type.BOOLEAN},
124 |     {name: "ySquared", type: Type.BOOLEAN},
125 |     {name: "cosX", type: Type.BOOLEAN},
126 |     {name: "sinX", type: Type.BOOLEAN},
127 |     {name: "cosY", type: Type.BOOLEAN},
128 |     {name: "sinY", type: Type.BOOLEAN},
129 |     {name: "collectStats", type: Type.BOOLEAN},
130 |     {name: "tutorial", type: Type.STRING},
131 |     {name: "problem", type: Type.OBJECT, keyMap: problems},
132 |     {name: "initZero", type: Type.BOOLEAN},
133 |     {name: "hideText", type: Type.BOOLEAN}
134 |   ];
135 | 
136 |   [key: string]: any;
137 |   learningRate = 0.03;
138 |   regularizationRate = 0;
139 |   showTestData = false;
140 |   noise = 0;
141 |   batchSize = 10;
142 |   discretize = false;
143 |   tutorial: string = null;
144 |   percTrainData = 50;
145 |   activation = nn.Activations.TANH;
146 |   regularization: nn.RegularizationFunction = null;
147 |   problem = Problem.CLASSIFICATION;
148 |   initZero = false;
149 |   hideText = false;
150 |   collectStats = false;
151 |   numHiddenLayers = 1;
152 |   hiddenLayerControls: any[] = [];
153 |   networkShape: number[] = [4, 2];
154 |   x = true;
155 |   y = true;
156 |   xTimesY = false;
157 |   xSquared = false;
158 |   ySquared = false;
159 |   cosX = false;
160 |   sinX = false;
161 |   cosY = false;
162 |   sinY = false;
163 |   dataset: dataset.DataGenerator = dataset.classifyCircleData;
164 |   regDataset: dataset.DataGenerator = dataset.regressPlane;
165 |   seed: string;
166 | 
167 |   /**
168 |    * Deserializes the state from the url hash.
169 |    */
170 |   static deserializeState(): State {
171 |     let map: {[key: string]: string} = {};
172 |     for (let keyvalue of window.location.hash.slice(1).split("&")) {
173 |       let [name, value] = keyvalue.split("=");
174 |       map[name] = value;
175 |     }
176 |     let state = new State();
177 | 
178 |     function hasKey(name: string): boolean {
179 |       return name in map && map[name] != null && map[name].trim() !== "";
180 |     }
181 | 
182 |     function parseArray(value: string): string[] {
183 |       return value.trim() === "" ? [] : value.split(",");
184 |     }
185 | 
186 |     // Deserialize regular properties.
187 |     State.PROPS.forEach(({name, type, keyMap}) => {
188 |       switch (type) {
189 |         case Type.OBJECT:
190 |           if (keyMap == null) {
191 |             throw Error("A key-value map must be provided for state " +
192 |                 "variables of type Object");
193 |           }
194 |           if (hasKey(name) && map[name] in keyMap) {
195 |             state[name] = keyMap[map[name]];
196 |           }
197 |           break;
198 |         case Type.NUMBER:
199 |           if (hasKey(name)) {
200 |             // The + operator is for converting a string to a number.
201 |             state[name] = +map[name];
202 |           }
203 |           break;
204 |         case Type.STRING:
205 |           if (hasKey(name)) {
206 |             state[name] = map[name];
207 |           }
208 |           break;
209 |         case Type.BOOLEAN:
210 |           if (hasKey(name)) {
211 |             state[name] = (map[name] === "false" ? false : true);
212 |           }
213 |           break;
214 |         case Type.ARRAY_NUMBER:
215 |           if (name in map) {
216 |             state[name] = parseArray(map[name]).map(Number);
217 |           }
218 |           break;
219 |         case Type.ARRAY_STRING:
220 |           if (name in map) {
221 |             state[name] = parseArray(map[name]);
222 |           }
223 |           break;
224 |         default:
225 |           throw Error("Encountered an unknown type for a state variable");
226 |       }
227 |     });
228 | 
229 |     // Deserialize state properties that correspond to hiding UI controls.
230 |     getHideProps(map).forEach(prop => {
231 |       state[prop] = (map[prop] === "true") ? true : false;
232 |     });
233 |     state.numHiddenLayers = state.networkShape.length;
234 |     if (state.seed == null) {
235 |       state.seed = Math.random().toFixed(5);
236 |     }
237 |     Math.seedrandom(state.seed);
238 |     return state;
239 |   }
240 | 
241 |   /**
242 |    * Serializes the state into the url hash.
243 |    */
244 |   serialize() {
245 |     // Serialize regular properties.
246 |     let props: string[] = [];
247 |     State.PROPS.forEach(({name, type, keyMap}) => {
248 |       let value = this[name];
249 |       // Don't serialize missing values.
250 |       if (value == null) {
251 |         return;
252 |       }
253 |       if (type === Type.OBJECT) {
254 |         value = getKeyFromValue(keyMap, value);
255 |       } else if (type === Type.ARRAY_NUMBER ||
256 |           type === Type.ARRAY_STRING) {
257 |         value = value.join(",");
258 |       }
259 |       props.push(`${name}=${value}`);
260 |     });
261 |     // Serialize properties that correspond to hiding UI controls.
262 |     getHideProps(this).forEach(prop => {
263 |       props.push(`${prop}=${this[prop]}`);
264 |     });
265 |     window.location.hash = props.join("&");
266 |   }
267 | 
268 |   /** Returns all the hidden properties. */
269 |   getHiddenProps(): string[] {
270 |     let result: string[] = [];
271 |     for (let prop in this) {
272 |       if (endsWith(prop, HIDE_STATE_SUFFIX) && String(this[prop]) === "true") {
273 |         result.push(prop.replace(HIDE_STATE_SUFFIX, ""));
274 |       }
275 |     }
276 |     return result;
277 |   }
278 | 
279 |   setHideProperty(name: string, hidden: boolean) {
280 |     this[name + HIDE_STATE_SUFFIX] = hidden;
281 |   }
282 | }
283 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
  1 | /* Copyright 2016 Google Inc. All Rights Reserved.
  2 | 
  3 | Licensed under the Apache License, Version 2.0 (the "License");
  4 | you may not use this file except in compliance with the License.
  5 | You may obtain a copy of the License at
  6 | 
  7 |     http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 | Unless required by applicable law or agreed to in writing, software
 10 | distributed under the License is distributed on an "AS IS" BASIS,
 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | See the License for the specific language governing permissions and
 13 | limitations under the License.
 14 | ==============================================================================*/
 15 | 
 16 | /* General Type */
 17 | 
 18 | body {
 19 |   font-family: "Helvetica", "Arial", sans-serif;
 20 |   background-color: #f7f7f7;
 21 | }
 22 | 
 23 | h1 {
 24 |   font-size: 34px;
 25 | }
 26 | 
 27 | header h1 {
 28 |   line-height: 1.45em;
 29 |   font-weight: 300;
 30 |   color: rgba(255, 255, 255, 0.7);
 31 | }
 32 | 
 33 | h1 b {
 34 |   font-weight: 400;
 35 |   color: rgba(255, 255, 255, 1);
 36 | }
 37 | 
 38 | h2 {
 39 |   margin: 5px 0;
 40 |   font-weight: 300;
 41 |   font-size: 18px;
 42 | }
 43 | 
 44 | h3 {
 45 |   margin: 10px 0;
 46 | }
 47 | 
 48 | p a {
 49 |   color: #0D658C;
 50 | }
 51 | 
 52 | /* Layout */
 53 | 
 54 | body {
 55 |   margin: 0;
 56 | }
 57 | 
 58 | .l--body {
 59 |   width: 550px;
 60 |   margin-left: auto;
 61 |   margin-right: auto;
 62 | }
 63 | 
 64 | .l--page {
 65 |   width: 944px;
 66 |   margin-left: auto;
 67 |   margin-right: auto;
 68 | }
 69 | 
 70 | @media (min-width: 1180px) {
 71 |   .l--page {
 72 |     width: 1100px;
 73 |   }
 74 | }
 75 | 
 76 | @media (min-width: 1400px) {
 77 |   .l--page {
 78 |     width: 1220px;
 79 |   }
 80 | }
 81 | 
 82 | /* Buttons */
 83 | 
 84 | #main-part .mdl-button {
 85 |   background-color: rgba(158,158,158,.1);
 86 |   width: 28px;
 87 |   height: 28px;
 88 |   min-width: 28px;
 89 | }
 90 | 
 91 | #main-part .mdl-button:hover {
 92 |   background-color: rgba(158,158,158,.3);
 93 | }
 94 | 
 95 | #main-part .mdl-button:focus:not(:active) {
 96 |     background-color: rgba(158,158,158,.4);
 97 | }
 98 | 
 99 | #main-part .mdl-button:active {
100 |     background-color: rgba(158,158,158,.5);
101 | }
102 | 
103 | #main-part .mdl-button .material-icons {
104 |   font-size: 20px;
105 |   color: rgba(0, 0, 0, 0.7);
106 | }
107 | 
108 | 
109 | .button {
110 |   cursor: pointer;
111 |   display: -webkit-box;
112 |   display: -moz-box;
113 |   display: -ms-flexbox;
114 |   display: -webkit-flex;
115 |   display: flex;
116 |   align-items: center;
117 |   -webkit-justify-content: center;
118 |   justify-content: center;
119 |   width: 24px;
120 |   height: 24px;
121 |   font-size: 18px;
122 |   border-radius: 50%;
123 |   margin: 0 1px;
124 |   background-color: rgba(0,0,0,0.05);
125 |   outline: none;
126 |   border: none;
127 |   padding: 0;
128 |   color: #666;
129 |   transition: background-color 0.3s, color 0.3s;
130 | }
131 | 
132 | .button:hover {
133 |   background-color: rgba(0,0,0,0.1);
134 | 
135 | }
136 | 
137 | .button:active {
138 |   background-color: rgba(0,0,0,0.15);
139 |   color: #333;
140 | }
141 | 
142 | .button i {
143 |   font-size: 16px;
144 | }
145 | 
146 | .hide-button {
147 |   cursor: pointer;
148 |   padding: 6px 4px 8px 4px;
149 |   border-left: 1px solid #2c2c2c;
150 |   border-bottom: 1px solid #2c2c2c;
151 |   position: fixed;
152 |   right: 0px;
153 |   background: #1a1a1a;
154 |   color: #eee;
155 |   font: 11px 'Lucida Grande', sans-serif;
156 |   display: table;
157 | }
158 | 
159 | /* Header */
160 | 
161 | .github-link {
162 |   width: 60px;
163 |   height: 60px;
164 |   position: absolute;
165 |   display: block;
166 |   top: 0;
167 |   right: 0;
168 |   z-index: 1000;
169 | }
170 | 
171 | .github-link .bg {
172 |   fill: #fff;
173 |   fill-opacity: 0.2;
174 | }
175 | 
176 | .github-link:hover .bg {
177 |   fill-opacity: 0.3;
178 | }
179 | 
180 | .github-link .icon {
181 |   fill: #fff;
182 |   fill-opacity: 0.6;
183 | }
184 | 
185 | .github-link:hover .icon {
186 |   fill-opacity: 0.7;
187 | }
188 | 
189 | header {
190 |   border-bottom: solid 1px rgba(0,0,0,0.4);
191 |   background-color: #183D4E;
192 |   color: white;
193 |   overflow: hidden;
194 |   box-shadow: 0 2px 4px rgba(0,0,0,0.2);
195 |   position: relative;
196 | }
197 | 
198 | header h1 {
199 |   font-size: 30px;
200 |   text-align: center;
201 |   margin-top: 30px;
202 |   margin-bottom: 30px;
203 |   -webkit-font-smoothing: antialiased;
204 | }
205 | 
206 | header h1 .optional {
207 |   display: none;
208 | }
209 | 
210 | @media (min-width: 1064px) {
211 |   header h1 .optional {
212 |     display: inline;
213 |   }
214 | }
215 | 
216 | @media (min-height: 700px) {
217 |   header h1 {
218 |     margin-top: 40px;
219 |     margin-bottom: 40px;
220 |   }
221 | }
222 | 
223 | @media (min-height: 800px) {
224 |   header h1 {
225 |     font-size: 34px;
226 |     margin-top: 60px;
227 |     margin-bottom: 60px;
228 |   }
229 | }
230 | 
231 | /* Top Controls */
232 | 
233 | #top-controls {
234 |   border-bottom: 1px solid #ddd;
235 |   padding: 18px 0;
236 |   box-shadow: 0 1px 4px rgba(0,0,0,0.08);
237 |   background: white;
238 | }
239 | 
240 | @media (min-height: 700px) {
241 |   #top-controls {
242 |     padding: 24px 0;
243 |   }
244 | }
245 | 
246 | #top-controls .container {
247 |   display: -webkit-box;
248 |   display: -moz-box;
249 |   display: -ms-flexbox;
250 |   display: -webkit-flex;
251 |   display: flex;
252 |   -webkit-justify-content: space-betweenspace-between;
253 |   justify-content: space-between;
254 | }
255 | 
256 | #top-controls .timeline-controls {
257 |   display: -webkit-box;
258 |   display: -moz-box;
259 |   display: -ms-flexbox;
260 |   display: -webkit-flex;
261 |   display: flex;
262 |   align-items: center;
263 |   margin-right: 20px;
264 |   width: 140px;
265 | }
266 | 
267 | #play-pause-button .material-icons {
268 |   color: white;
269 |   font-size: 36px;
270 |   transform: translate(-18px,-12px);
271 | }
272 | 
273 | 
274 | #play-pause-button .material-icons:nth-of-type(2) {
275 |   display: none;
276 | }
277 | 
278 | #play-pause-button.playing .material-icons:nth-of-type(1) {
279 |   display: none;
280 | }
281 | 
282 | #play-pause-button.playing .material-icons:nth-of-type(2) {
283 |   display: inherit;
284 | }
285 | 
286 | #top-controls .control {
287 |   flex-grow: 1;
288 |   max-width: 180px;
289 |   min-width: 110px;
290 |   margin-left: 30px;
291 |   margin-top: 6px;
292 | }
293 | 
294 | #top-controls .control .label,
295 | #top-controls .control label {
296 |   color: #777;
297 |   font-size: 13px;
298 |   display: block;
299 |   margin-bottom: 6px;
300 |   font-weight: 300;
301 | }
302 | 
303 | #top-controls .control .value {
304 |   font-size: 24px;
305 |   margin: 0;
306 |   font-weight: 300;
307 | }
308 | 
309 | #top-controls .control .select {
310 |   position: relative;
311 | }
312 | 
313 | #top-controls .control select {
314 |   -webkit-appearance: none;
315 |   -moz-appearance: none;
316 |   appearance: none;
317 |   display: block;
318 |   background: none;
319 |   border: none;
320 |   border-radius: 0;
321 |   padding: 6px 0;
322 |   width: 100%;
323 |   font-size: 14px;
324 |   border-bottom: solid 1px #ccc;
325 |   color: #333;
326 |   outline: none;
327 | }
328 | 
329 | #top-controls .control select:focus {
330 |   border-bottom-color: #183D4E;
331 | }
332 | 
333 | #top-controls .control .select::after {
334 |   class: "material-icons";
335 |   content: "arrow_drop_down";
336 |   color: #999;
337 |   font-family: 'Material Icons';
338 |   font-weight: normal;
339 |   font-style: normal;
340 |   font-size: 18px;
341 |   line-height: 1;
342 |   letter-spacing: normal;
343 |   text-transform: none;
344 |   display: inline-block;
345 |   white-space: nowrap;
346 |   word-wrap: normal;
347 |   direction: ltr;
348 |   position: absolute;
349 |   right: 0;
350 |   top: 6px;
351 |   pointer-events: none;
352 | }
353 | 
354 | /* Hover card */
355 | #hovercard {
356 |   display: none;
357 |   position: absolute;
358 |   padding: 5px;
359 |   border: 1px solid #aaa;
360 |   z-index: 1000;
361 |   background: #fff;
362 |   cursor: default;
363 |   border-radius: 5px;
364 |   left: 240px;
365 |   width: 150px;
366 |   top: -20px;
367 | }
368 | 
369 | #hovercard input {
370 |   width: 60px;
371 | }
372 | 
373 | /* Main Part*/
374 | 
375 | #main-part {
376 |   display: -webkit-box;
377 |   display: -moz-box;
378 |   display: -ms-flexbox;
379 |   display: -webkit-flex;
380 |   display: flex;
381 |   -webkit-justify-content: space-between;
382 |   justify-content: space-between;
383 |   margin-top: 30px;
384 |   margin-bottom: 50px;
385 |   padding-top: 2px;
386 |   position: relative;
387 | }
388 | 
389 | @media (min-height: 700px) {
390 |   #main-part {
391 |     margin-top: 50px;
392 |   }
393 | }
394 | 
395 | #main-part h4 {
396 |   display: -webkit-box;
397 |   display: -moz-box;
398 |   display: -ms-flexbox;
399 |   display: -webkit-flex;
400 |   display: flex;
401 |   align-items: center;
402 |   font-weight: 400;
403 |   font-size: 16px;
404 |   text-transform: uppercase;
405 |   position: relative;
406 |   padding-bottom: 8px;
407 |   margin: 0;
408 |   line-height: 1.4em;
409 | }
410 | 
411 | #main-part p,
412 | #main-part .column .label,
413 | #main-part .column label {
414 |   font-weight: 300;
415 |   line-height: 1.38em;
416 |   margin: 0;
417 |   color: #777;
418 |   font-size: 13px;
419 | }
420 | 
421 | .more {
422 |   position: absolute;
423 |   left: 50%;
424 | }
425 | 
426 | .more button {
427 |   position: absolute;
428 |   left: -28px;
429 |   top: -28px;
430 |   background: white;
431 | }
432 | 
433 | .more button:hover,
434 | .more button:active,
435 | .more button:focus,
436 | .more button:focus:not(:active) {
437 |   background: white;
438 | }
439 | 
440 | svg text {
441 |   dominant-baseline: middle;
442 | }
443 | 
444 | canvas {
445 |   display: block;
446 | }
447 | 
448 | .link {
449 |   fill: none;
450 |   stroke: #aaa;
451 |   stroke-width: 1;
452 | }
453 | 
454 | g.column rect {
455 |   stroke: none;
456 | }
457 | 
458 | #heatmap {
459 |   position: relative;
460 |   float: left;
461 |   margin-top: 10px;
462 | }
463 | 
464 | #heatmap .tick line {
465 |   stroke: #ddd;
466 | }
467 | 
468 | #heatmap .tick text {
469 |   fill: #bbb;
470 |   dominant-baseline: auto;
471 | }
472 | 
473 | #heatmap .tick:nth-child(7) text {
474 |   fill: #333;
475 | }
476 | 
477 | #heatmap .tick:nth-child(7) line {
478 |   stroke: #999;
479 | }
480 | 
481 | /* Data column */
482 | 
483 | .vcenter {
484 |   display: -webkit-box;
485 |   display: -moz-box;
486 |   display: -ms-flexbox;
487 |   display: -webkit-flex;
488 |   display: flex;
489 |   align-items: center;
490 | }
491 | 
492 | .data.column {
493 |   width: 10%;
494 | }
495 | 
496 | .data.column .dataset-list {
497 |   margin: 20px 0 10px;
498 |   overflow: hidden;
499 | }
500 | 
501 | .data.column .dataset {
502 |   position: relative;
503 |   float: left;
504 |   width: 34px;
505 |   height: 34px;
506 |   margin: 0 14px 14px 0;
507 | }
508 | 
509 | .data.column .dataset:nth-of-type(2n) {
510 |   margin-right: 0;
511 | }
512 | 
513 | .data.column .data-thumbnail {
514 |   cursor: pointer;
515 |   width: 100%;
516 |   height: 100%;
517 |   opacity: 0.2;
518 |   border: 2px solid rgba(0,0,0,0.1);
519 |   border-radius: 3px;
520 | }
521 | 
522 | /*.data.column .dataset:first-of-type {
523 |   margin-top: 8px;
524 | }
525 | 
526 | .data.column .dataset:last-of-type {
527 |   margin-bottom: 20px;
528 | }*/
529 | 
530 | .data.column .data-thumbnail:hover {
531 |   border: 2px solid #999;
532 | }
533 | 
534 | .data.column .data-thumbnail.selected {
535 |   border: 2px solid black;
536 |   opacity: 1;
537 |   box-shadow: 0 1px 5px rgba(0,0,0,0.2);
538 |   background-color: white;
539 | }
540 | 
541 | #main-part .data.column .dataset .label {
542 |   position: absolute;
543 |   left: 48px;
544 |   top: calc(50% - 9px);
545 |   display: none;
546 | }
547 | 
548 | #main-part .data.column p.slider {
549 |   margin: 0 -25px 20px;
550 | }
551 | 
552 | #main-part .basic-button {
553 |   font-family: "Roboto", "Helvetica", "Arial", sans-serif;
554 |   margin-top: 25px;
555 |   height: 34px;
556 |   margin-right: 0;
557 |   width: 100%;
558 |   display: block;
559 |   color: rgba(0, 0, 0, 0.5);
560 |   border: none;
561 |   background: rgba(158,158,158,.1);
562 |   border-radius: 3px;
563 |   padding: 5px;
564 |   font-size: 12px;
565 |   text-transform: uppercase;
566 |   font-weight: 500;
567 |   outline: none;
568 |   transition: background 0.3s linear;
569 |   cursor: pointer;
570 | }
571 | 
572 | #main-part .basic-button:hover {
573 |   background: rgba(158,158,158,.3);
574 |   color: rgba(0, 0, 0, 0.6);
575 | }
576 | 
577 | #main-part .basic-button:focus {
578 |   background: rgba(158,158,158,.4);
579 |   color: rgba(0, 0, 0, 0.7);
580 | }
581 | 
582 | #main-part .basic-button:active {
583 |   background: rgba(158,158,158,.5);
584 |   color: rgba(0, 0, 0, 0.8);
585 | }
586 | 
587 | /* Features column */
588 | 
589 | .features.column {
590 |   width: 10%;
591 |   position: relative;
592 | }
593 | 
594 | .features.column .plus-minus-neurons {
595 |   position: absolute;
596 |   text-align: center;
597 |   line-height: 28px;
598 |   top: -58px;
599 |   width: 65px;
600 |   height: 44px;
601 |   font-size: 12px;
602 |   z-index: 100;
603 | }
604 | 
605 | .plus-minus-neurons .mdl-button:first-of-type {
606 |   margin-right: 5px;
607 | }
608 | 
609 | .features.column .callout {
610 |   position: absolute;
611 |   width: 95px;
612 |   font-style: italic;
613 | }
614 | 
615 | .features.column .callout svg {
616 |   position: absolute;
617 |   left: -15px;
618 |   width: 30px;
619 |   height: 30px;
620 | }
621 | 
622 | .features.column .callout svg path {
623 |   fill: none;
624 |   stroke: black;
625 |   stroke-opacity: 0.4;
626 | }
627 | 
628 | .features.column .callout svg defs path {
629 |   fill: black;
630 |   stroke: none;
631 |   fill-opacity: 0.4;
632 | }
633 | 
634 | #main-part .features.column .callout .label {
635 |   position: absolute;
636 |   top: 24px;
637 |   left: 3px;
638 |   font-size: 11px;
639 | }
640 | 
641 | /* Network (inside features column) */
642 | 
643 | #network {
644 |   position: absolute;
645 |   top: 110px;
646 |   left: 0;
647 |   z-index: 100;
648 | }
649 | 
650 | #network svg .main-label {
651 |   font-size: 13px;
652 |   fill: #333;
653 |   font-weight: 300;
654 | }
655 | 
656 | .axis line {
657 |   fill: none;
658 |   stroke: #777;
659 |   shape-rendering: crispEdges;
660 | }
661 | 
662 | .axis text {
663 |   fill: #777;
664 |   font-size: 10px;
665 | }
666 | 
667 | .axis path {
668 |   display: none;
669 | }
670 | 
671 | #network svg .active .main-label {
672 |   fill: #333
673 | }
674 | 
675 | #network svg #markerArrow {
676 |   fill: black;
677 |   stroke: black;
678 |   stroke-opacity: 0.2;
679 | }
680 | 
681 | #network .node {
682 |   cursor: default;
683 | }
684 | 
685 | #network .node rect {
686 |   fill: white;
687 |   stroke-width: 0;
688 | }
689 | 
690 | #network .node.inactive {
691 |   opacity: 0.5;
692 | }
693 | 
694 | #network .node.hovered {
695 |   opacity: 1.0;
696 | }
697 | 
698 | @-webkit-keyframes flowing {
699 |   from { stroke-dashoffset: 0; } to { stroke-dashoffset: -10; }
700 | }
701 | 
702 | #network .core .link {
703 |   stroke-dasharray: 9 1;
704 |   stroke-dashoffset: 1;
705 |   /*-webkit-animation: 0.5s linear 0s infinite flowing;*/
706 | }
707 | 
708 | /** Invisible thick links used for showing weight values on mouse hover. */
709 | #network .core .link-hover {
710 |   stroke-width: 8;
711 |   stroke: black;
712 |   fill: none;
713 |   opacity: 0;
714 | }
715 | 
716 | #network .canvas canvas {
717 |   position: absolute;
718 |   top: -2px;
719 |   left: -2px;
720 |   border: 2px solid black;
721 |   border-radius: 3px;
722 |   box-shadow: 0 2px 5px rgba(0,0,0,0.2);
723 | }
724 | 
725 | #network .canvas.inactive canvas {
726 |   box-shadow: inherit;
727 | }
728 | 
729 | #network .canvas.inactive canvas {
730 |   opacity: 0.4;
731 |   border: 0;
732 |   top: 0;
733 |   left: 0;
734 | }
735 | 
736 | #network .canvas.hovered canvas {
737 |   opacity: 1.0;
738 |   border: 2px solid #666;
739 |   top: -2px;
740 |   left: -2px;
741 | }
742 | 
743 | /* Hidden layers column */
744 | 
745 | .hidden-layers.column {
746 |   width: 40%;
747 | }
748 | 
749 | #main-part .hidden-layers h4 {
750 |   -webkit-justify-content: center;
751 |   justify-content: center;
752 |   margin-top: -5px;
753 | }
754 | 
755 | .hidden-layers #layers-label {
756 |   width: 125px;
757 |   display: inline-block;
758 | }
759 | 
760 | .hidden-layers #num-layers {
761 |   margin: 0 10px;
762 |   width: 10px;
763 |   display: inline-block;
764 | }
765 | 
766 | .hidden-layers h4 .mdl-button {
767 |   margin-right: 5px;
768 | }
769 | 
770 | .bracket {
771 |   margin-top: 5px;
772 |   border: solid 1px rgba(0, 0, 0, 0.2);
773 |   border-bottom: 0;
774 |   height: 4px;
775 | }
776 | 
777 | .bracket.reverse {
778 |   border-bottom: solid 1px rgba(0, 0, 0, 0.2);
779 |   border-top: 0;
780 |   margin-top: 0;
781 |   margin-bottom: 5px;
782 | }
783 | 
784 | /* Output column */
785 | 
786 | .output.column {
787 |   width: 275px;
788 | }
789 | 
790 | .metrics {
791 |   position: relative;
792 |   font-weight: 300;
793 |   font-size: 13px;
794 |   height: 60px;
795 | }
796 | 
797 | #linechart {
798 |   position: absolute;
799 |   top: 0;
800 |   right: 0;
801 |   width: 50%;
802 |   height: 55px;
803 | }
804 | .metrics .train {
805 |   color: #777;
806 | }
807 | 
808 | #loss-test {
809 |   color: black;
810 | }
811 | 
812 | .output .output-stats .value {
813 |   color: rgba(0, 0, 0, 0.6);
814 |   /*font-size: 20px;*/
815 |   font-weight: 300;
816 |   display: inline;
817 | 
818 | }
819 | 
820 | g.train circle {
821 |   stroke: white;
822 |   stroke-width: 1;
823 |   stroke-opacity: 0.8;
824 |   fill-opacity: 0.9;
825 | }
826 | 
827 |  g.test circle {
828 |   stroke-width: 1;
829 |   stroke: black;
830 |   stroke-opacity: 0.6;
831 |   fill-opacity: 0.9;
832 | }
833 | 
834 | #main-part .output .mdl-checkbox__label.label {
835 |   line-height: 1.7em;
836 | }
837 | 
838 | /* Article */
839 | 
840 | article {
841 |   background: white;
842 |   padding: 80px 0;
843 |   box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
844 |   /*border-top: 1px solid rgba(0, 0, 0, 0.08);*/
845 | }
846 | 
847 | article h2, article h3 {
848 |   margin: 60px 0 20px 0;
849 |   font-size: 22px;
850 |   font-weight: 500;
851 |   line-height: 1.45em;
852 |   color: rgba(0, 0, 0, 0.7);
853 | }
854 | 
855 | article h3 {
856 |   margin: 40px 0 20px 0;
857 |   font-size: 18px;
858 | }
859 | 
860 | article :first-child h2 {
861 |   margin-top: 0;
862 | }
863 | 
864 | article p {
865 |   font-weight: 400;
866 |   font-size: 17px;
867 |   line-height: 1.6;
868 |   color: rgba(0, 0, 0, 0.7);
869 | 
870 | }
871 | 
872 | /* Footer */
873 | 
874 | footer {
875 |   border-top: solid 1px #eee;
876 |   color: #ccc;
877 |   font-weight: 300;
878 |   padding: 40px 0;
879 |   height: 30px;
880 | }
881 | 
882 | footer svg {
883 |   margin-top: 2px;
884 |   float: left;
885 |   width: 110px;
886 |   height: 18px;
887 |   fill: #aaa;
888 | }
889 | 
890 | footer .links {
891 |   float: right;
892 |   font-size: 13px;
893 |   height: 30px;
894 |   line-height: 30px;
895 |   margin-left: 20px;
896 | }
897 | 
898 | footer .links a {
899 |   margin-right: 15px;
900 |   text-decoration: none;
901 |   color: #999;
902 | }
903 | 
904 | footer .links a:hover {
905 |   text-decoration: underline;
906 | }
907 | 
908 | .hide-controls {
909 |   display: -webkit-box;
910 |   display: -moz-box;
911 |   display: -ms-flexbox;
912 |   display: -webkit-flex;
913 |   display: flex;
914 |   flex-wrap: wrap;
915 |   -webkit-justify-content: space-between;
916 |   justify-content: space-between;
917 | }
918 | 
919 | .hide-controls label.mdl-checkbox {
920 |   width: 145px;
921 |   height: 30px;
922 | }
923 | 
924 | .hide-controls .mdl-checkbox__label {
925 |   font-size: 13px;
926 | }
927 | 
928 | /* Material Overrides */
929 | 
930 | /* Buttons */
931 | 
932 | .mdl-button--fab.mdl-button--colored,
933 | .mdl-button--fab.mdl-button--colored:hover,
934 | .mdl-button--fab.mdl-button--colored:active,
935 | .mdl-button--fab.mdl-button--colored:focus,
936 | .mdl-button--fab.mdl-button--colored:focus:not(:active) {
937 |     background: #183D4E;
938 | }
939 | 
940 | /* Checkbox */
941 | 
942 | .mdl-checkbox__box-outline {
943 |   border-color: rgba(0, 0, 0, 0.5);
944 | }
945 | 
946 | .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
947 |   background-color: #183D4E;
948 | }
949 | 
950 | .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
951 |   background-color: #183D4E;
952 | }
953 | 
954 | .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
955 |   border-color: #183D4E;
956 | }
957 | 
958 | .mdl-checkbox__ripple-container .mdl-ripple {
959 |   background-color: #183D4E;
960 | }
961 | 
962 | /* Slider */
963 | 
964 | #main-part .mdl-slider.is-upgraded {
965 |   color: #183D4E;
966 | }
967 | 
968 | #main-part .mdl-slider__background-lower {
969 |   background-color: #183D4E;
970 | }
971 | 
972 | #main-part .mdl-slider.is-upgraded::-webkit-slider-thumb {
973 |   background-color: #183D4E;
974 | }
975 | 
976 | #main-part .mdl-slider.is-upgraded::-moz-range-thumb {
977 |   background-color: #183D4E;
978 | }
979 | 
980 | #main-part .mdl-slider.is-upgraded::-ms-thumb {
981 |   background-color: #183D4E;
982 | }
983 | 
984 | #main-part .mdl-slider.is-upgraded.is-lowest-value::-webkit-slider-thumb {
985 |   border-color: #183D4E;
986 | }
987 | 
988 | #main-part .mdl-slider.is-upgraded.is-lowest-value::-moz-range-thumb {
989 |   border-color: #183D4E;
990 | }
991 | /* Keep grey focus circle for non-start values */
992 | #main-part .mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb {
993 |   box-shadow: 0 0 0 10px rgba(0,0,0, 0.12);
994 | }
995 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "module": "commonjs",
 4 |     "removeComments": true,
 5 |     "preserveConstEnums": true
 6 |   },
 7 |   "exclude": [
 8 |     "node_modules" 
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "rules": {
 3 |         "class-name": true,
 4 |         "comment-format": [
 5 |             true,
 6 |             "check-space"
 7 |         ],
 8 |         "max-line-length": [true, 80],
 9 |         "indent": [
10 |             true,
11 |             "spaces"
12 |         ],
13 |         "no-duplicate-variable": true,
14 |         "no-eval": true,
15 |         "no-internal-module": true,
16 |         "no-trailing-whitespace": true,
17 |         "no-var-keyword": true,
18 |         "no-unused-variable": true,
19 |         "no-unused-expression": true,
20 |         "no-switch-case-fall-through": true,
21 |         "no-unreachable": true,
22 |         "one-line": [
23 |             true,
24 |             "check-open-brace",
25 |             "check-whitespace"
26 |         ],
27 |         "forin": false,
28 |         "quotemark": [
29 |             true,
30 |             "double"
31 |         ],
32 |         "semicolon": [
33 |             true,
34 |             "always"
35 |         ],
36 |         "triple-equals": false,
37 |         "typedef-whitespace": [
38 |             true,
39 |             {
40 |                 "call-signature": "nospace",
41 |                 "index-signature": "nospace",
42 |                 "parameter": "nospace",
43 |                 "property-declaration": "nospace",
44 |                 "variable-declaration": "nospace"
45 |             }
46 |         ],
47 |         "variable-name": [
48 |             true,
49 |             "ban-keywords"
50 |         ],
51 |         "whitespace": [
52 |             true,
53 |             "check-branch",
54 |             "check-decl",
55 |             "check-operator",
56 |             "check-separator",
57 |             "check-type"
58 |         ]
59 |     }
60 | }
61 | 


--------------------------------------------------------------------------------