Merge pull request poloclub#11 from minsukkahng/element-labels

Add element ids and minor code fixes
lipheris · Jun 11, 2019 · e93e027 · e93e027
2 parents bef305f + 922159d
commit e93e027
Showing 6 changed files with 54 additions and 94 deletions.
diff --git a/demo/ganlab.html b/demo/ganlab.html
@@ -492,14 +492,6 @@
       stroke-width: 1;
     }
 
-    .contour {
-      fill: none;
-      opacity: 0.5;
-      stroke: #bbb;
-      stroke-width: 0.5;
-      stroke-linejoin: round;
-    }
-
     #model-visualization-container.any-highlighted .model-component {
       opacity: 0.4;
     }
@@ -638,31 +630,36 @@
           <div class="top-column-title">Data Distribution</div>
           <div id="distribution-image-list">
             <div class="distribution-image">
-              <img class="distribution-item" 
+              <img class="distribution-item"
+                id="distribution-item-line" 
                 data-distribution-name="line" 
                 title="Simple line"
                 src="images/distribution-line.png" />
             </div>
             <div class="distribution-image">
               <img class="distribution-item selected" 
+                id="distribution-item-gaussians" 
                 data-distribution-name="gaussians" 
                 title="Mixture of Gaussians" 
                 src="images/distribution-gaussians.png" />
             </div>
             <div class="distribution-image">
               <img class="distribution-item" 
+                id="distribution-item-ring" 
                 data-distribution-name="ring"
                 title="Ring" 
                 src="images/distribution-ring.png" />
             </div>
             <div class="distribution-image">
               <img class="distribution-item" 
+                id="distribution-item-disjoint" 
                 data-distribution-name="disjoint" 
                 title="3 disjoint regions" 
                 src="images/distribution-disjoint.png" />
             </div>
             <div class="distribution-image">
               <i class="distribution-item material-icons" 
+                id="distribution-item-drawing" 
                 data-distribution-name="drawing"
                 title="Draw one by yourself">brush</i>
             </div>
@@ -680,24 +677,26 @@
           <button 
             class="mdl-button mdl-js-button mdl-button--icon ui-resetButton"
             id="reset-button" title="Reset the model">
-            <i class="material-icons">replay</i>
+            <i class="material-icons" id="button-top-reset">replay</i>
           </button>
           <button class="mdl-button mdl-js-button mdl-button--fab 
             mdl-button--colored ui-playButton"
             id="play-pause-button" title="Run/Pause training">
-            <i class="material-icons">play_arrow</i>
-            <i class="material-icons">pause</i>
+            <i class="material-icons" id="button-top-play">play_arrow</i>
+            <i class="material-icons" id="button-top-pause">pause</i>
           </button>
           <button class="mdl-button mdl-js-button mdl-button--icon"
             id="slow-step" title="Slow-motion mode" 
             style="margin-left: 5px">
-            <i class="material-icons">slow_motion_video</i>
+            <i class="material-icons" id="button-top-slow">
+              slow_motion_video
+            </i>
           </button>
           <button 
             class="mdl-button mdl-js-button mdl-button--icon ui-stepButton"
             id="next-step-button" title="Train for one epoch" 
             style="margin-left: 5px">
-            <i class="material-icons">skip_next</i>
+            <i class="material-icons" id="button-top-next">skip_next</i>
           </button>
 
           <div id="step-buttons" style="display: none">
@@ -738,7 +737,7 @@
             Model Overview Graph
             <button class="mdl-button mdl-js-button mdl-button--icon"
               id="edit-model-button" title="Show/hide hyperparameters">
-              <i class="material-icons">mode_edit</i>
+              <i class="material-icons" id="button-graph-edit">mode_edit</i>
             </button>
           </div>
 
@@ -816,13 +815,17 @@
                     <button class="mdl-button mdl-js-button mdl-button--icon"
                       id="k-d-steps-add-button" 
                       title="Increase a step per epoch">
-                      <i class="material-icons">keyboard_arrow_up</i>
+                      <i class="material-icons" id="button-k-d-steps-up">
+                        keyboard_arrow_up
+                      </i>
                     </button>
                     <br />
                     <button class="mdl-button mdl-js-button mdl-button--icon"
                       id="k-d-steps-remove-button" 
                       title="Decrease a step per iter">
-                      <i class="material-icons">keyboard_arrow_down</i>
+                      <i class="material-icons" id="button-k-d-steps-down">
+                        keyboard_arrow_down
+                      </i>
                     </button>
                   </div>
                   <div class="up-down-buttons">
@@ -839,13 +842,17 @@
                     <button class="mdl-button mdl-js-button mdl-button--icon"
                       id="k-g-steps-add-button" 
                       title="Increase a step per epoch">
-                      <i class="material-icons">keyboard_arrow_up</i>
+                      <i class="material-icons" id="button-k-g-steps-up">
+                        keyboard_arrow_up
+                      </i>
                     </button>
                     <br />
                     <button class="mdl-button mdl-js-button mdl-button--icon"
                       id="k-g-steps-remove-button" 
                       title="Decrease a step per epoch">
-                      <i class="material-icons">keyboard_arrow_down</i>
+                      <i class="material-icons" id="button-k-g-steps-down">
+                        keyboard_arrow_down
+                      </i>
                     </button>
                   </div>
                   <div class="up-down-buttons">
@@ -973,12 +980,16 @@
                   <div class="up-down-buttons">
                     <button class="mdl-button mdl-js-button mdl-button--icon"
                       id="d-layers-add-button" title="Add a layer">
-                      <i class="material-icons">keyboard_arrow_up</i>
+                      <i class="material-icons" id="button-d-layers-up">
+                        keyboard_arrow_up
+                      </i>
                     </button>
                     <br />
                     <button class="mdl-button mdl-js-button mdl-button--icon"
                       id="d-layers-remove-button" title="Remove a layer">
-                      <i class="material-icons">keyboard_arrow_down</i>
+                      <i class="material-icons" id="button-d-layers-down">
+                        keyboard_arrow_down
+                      </i>
                     </button>
                   </div>
                   <div class="up-down-buttons">
@@ -989,13 +1000,17 @@
                     <button class="mdl-button mdl-js-button mdl-button--icon"
                       id="d-neurons-add-button" 
                       title="Add a neuron for each layer">
-                      <i class="material-icons">keyboard_arrow_up</i>
+                      <i class="material-icons" id="button-d-neurons-up">
+                        keyboard_arrow_up
+                      </i>
                     </button>
                     <br />
                     <button class="mdl-button mdl-js-button mdl-button--icon"
                       id="d-neurons-remove-button" 
                       title="Remove a neuron for each layer">
-                      <i class="material-icons">keyboard_arrow_down</i>
+                      <i class="material-icons" id="button-d-neurons-down">
+                        keyboard_arrow_down
+                      </i>
                     </button>
                   </div>
                   <div class="up-down-buttons">
@@ -1024,12 +1039,16 @@
                   <div class="up-down-buttons">
                     <button class="mdl-button mdl-js-button mdl-button--icon"
                       id="g-layers-add-button" title="Add a layer">
-                      <i class="material-icons">keyboard_arrow_up</i>
+                      <i class="material-icons" id="button-g-layer-up">
+                        keyboard_arrow_up
+                      </i>
                     </button>
                     <br />
                     <button class="mdl-button mdl-js-button mdl-button--icon"
                       id="g-layers-remove-button" title="Remove a layer">
-                      <i class="material-icons">keyboard_arrow_down</i>
+                      <i class="material-icons" id="button-g-layer-down">
+                        keyboard_arrow_down
+                      </i>
                     </button>
                   </div>
                   <div class="up-down-buttons">
@@ -1040,13 +1059,17 @@
                     <button class="mdl-button mdl-js-button mdl-button--icon"
                       id="g-neurons-add-button" 
                       title="Add a neuron for each layer">
-                      <i class="material-icons">keyboard_arrow_up</i>
+                      <i class="material-icons" id="button-g-neurons-up">
+                        keyboard_arrow_up
+                      </i>
                     </button>
                     <br />
                     <button class="mdl-button mdl-js-button mdl-button--icon"
                       id="g-neurons-remove-button" 
                       title="Remove a neuron for each layer">
-                      <i class="material-icons">keyboard_arrow_down</i>
+                      <i class="material-icons" id="button-g-neurons-down">
+                        keyboard_arrow_down
+                      </i>
                     </button>
                   </div>
                   <div class="up-down-buttons">
@@ -1075,18 +1098,6 @@
                 </div>
               </div>
 
-              <div id="component-true-distribution" class="model-component"
-                style="top: 105px; left: 285px; width: 55px; display: none;">
-                <div>
-                  <div id="t-contour-toggle" class="checkbox-toggle"
-                    title="show/hide real samples' density contour"
-                    style="right: 1px; top: 6px">
-                    <paper-checkbox type="checkbox" id="show-t-contour">
-                    </paper-checkbox>
-                  </div>
-                </div>
-              </div>
-
               <div id="component-true-samples" class="model-component"
                 style="top: 136px; left: 255px">
                 <div class="component-sub-label">Real
@@ -1209,12 +1220,10 @@
             <svg id="vis-svg" width="400" height="400">
               <g id="vis-area">
                 <g id="vis-discriminator-output" class="vis-panel">
-                  <rect class="plot-bg" 
+                  <rect class="plot-bg" id="vis-plot-bg"
                     width="400" height="400" x="0" y="0"></rect>
                 </g>
                 <g id="vis-samples" class="vis-panel">
-                  <g id="vis-true-samples-contour" class="contour" 
-                    style="visibility: hidden"></g>
                   <g id="vis-true-samples"></g>
                   <g id="vis-generator-gradients"></g>
                   <g id="vis-generated-samples"></g>

diff --git a/demo/ganlab.ts b/demo/ganlab.ts
@@ -1,6 +1,4 @@
 import * as d3 from 'd3-selection';
-import { contourDensity } from 'd3-contour';
-import { geoPath } from 'd3-geo';
 import { scaleSequential } from 'd3-scale';
 import { interpolateGreens, interpolatePRGn } from 'd3-scale-chromatic';
 import { line } from 'd3-shape';
@@ -351,14 +349,6 @@ class GANLab extends GANLabPolymer {
         }
       });
     });
-    this.querySelector('#show-t-contour')!.addEventListener(
-      'change', (event: Event) => {
-        const container =
-          this.querySelector('#vis-true-samples-contour') as SVGGElement;
-        // tslint:disable-next-line:no-any
-        container.style.visibility =
-          (event.target as any).checked ? 'visible' : 'hidden';
-      });
 
     // Pre-trained checkbox.
     this.usePretrained = true;
@@ -457,7 +447,6 @@ class GANLab extends GANLabPolymer {
       d3.select('#vis-true-samples').selectAll('.true-dot'),
       d3.select('#svg-true-samples').selectAll('.true-dot'),
       d3.select('#svg-true-prediction').selectAll('.true-dot'),
-      d3.select('#vis-true-samples-contour').selectAll('path'),
       d3.select('#svg-noise').selectAll('.noise-dot'),
       d3.select('#vis-generated-samples').selectAll('.generated-dot'),
       d3.select('#svg-generated-samples').selectAll('.generated-dot'),
@@ -594,22 +583,6 @@ class GANLab extends GANLabPolymer {
       trueDistribution.push([values[0], values[1]]);
     }
 
-    const contour = contourDensity()
-      .x((d: number[]) => d[0] * this.plotSizePx)
-      .y((d: number[]) => (1.0 - d[1]) * this.plotSizePx)
-      .size([this.plotSizePx, this.plotSizePx])
-      .bandwidth(15)
-      .thresholds(5);
-
-    d3.select('#vis-true-samples-contour')
-      .selectAll('path')
-      .data(contour(trueDistribution))
-      .enter()
-      .append('path')
-      .attr('fill', (d: any) => color(d.value))
-      .attr('data-value', (d: any) => d.value)
-      .attr('d', geoPath());
-
     const trueDotsElementList = [
       '#vis-true-samples',
       '#svg-true-samples',
@@ -1676,7 +1649,7 @@ class GANLab extends GANLabPolymer {
 
   private updateChartData(data: ChartData[][], xVal: number, yList: number[]) {
     for (let i = 0; i < yList.length; ++i) {
-      data[i].push({ x: xVal, y: yList[i].toFixed(3) });
+      data[i].push({ x: xVal, y: yList[i] ? yList[i].toFixed(3) : null});
     }
   }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ganlab",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "An Interactive, Visual Experimentation Tool for GANs",
   "private": false,
   "dependencies": {
@@ -62,17 +62,14 @@
   },
   "devDependencies": {
     "@types/d3": "~4.10.0",
-    "@types/d3-contour": "~1.1.2",
     "@types/d3-scale-chromatic": "~1.1.0",
     "@types/d3-transition": "~1.1.1",
     "@types/polymer": "~1.1.31",
     "browserify": "~14.4.0",
     "clang-format": "~1.2.2",
     "cross-spawn": "~5.1.0",
     "d3-array": "~1.2.1",
-    "d3-contour": "~1.1.2",
     "d3-format": "~1.2.1",
-    "d3-geo": "~1.9.1",
     "d3-scale": "~1.0.7",
     "d3-scale-chromatic": "~1.1.1",
     "d3-selection": "~1.2.0",

diff --git a/scripts/build-demo b/scripts/build-demo
diff --git a/scripts/deploy-demo b/scripts/deploy-demo
diff --git a/yarn.lock b/yarn.lock
@@ -250,13 +250,6 @@
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-1.0.5.tgz#cad755f0fc6de7b70fa6e5e08afa81ef4c2248de"
 
-"@types/d3-contour@~1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-contour/-/d3-contour-1.1.2.tgz#8b1597f45bbb5c178c4aa9035d1d1fe8fd92d9c4"
-  dependencies:
-    "@types/d3-array" "*"
-    "@types/geojson" "*"
-
 "@types/d3-dispatch@*":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/d3-dispatch/-/d3-dispatch-1.0.5.tgz#f1f9187b538ecb05157569d8dc2f70dfb04f1b52"
@@ -2517,7 +2510,7 @@ cyclist@~0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
 
-d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0, d3-array@~1.2.1:
+d3-array@^1.2.0, d3-array@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.1.tgz#d1ca33de2f6ac31efadb8e050a021d7e2396d5dc"
 
@@ -2529,12 +2522,6 @@ d3-color@1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.0.3.tgz#bc7643fca8e53a8347e2fbdaffa236796b58509b"
 
-d3-contour@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-1.1.2.tgz#21f5456fcf57645922d69a27a58e782c91f842b3"
-  dependencies:
-    d3-array "^1.1.1"
-
 d3-dispatch@1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.3.tgz#46e1491eaa9b58c358fce5be4e8bed626e7871f8"
@@ -2547,12 +2534,6 @@ d3-format@1, d3-format@~1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.2.2.tgz#1a39c479c8a57fe5051b2e67a3bee27061a74e7a"
 
-d3-geo@~1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.9.1.tgz#157e3b0f917379d0f73bebfff3be537f49fa7356"
-  dependencies:
-    d3-array "1"
-
 d3-interpolate@1:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.1.6.tgz#2cf395ae2381804df08aa1bf766b7f97b5f68fb6"