Update playground

wagenaartje · May 8, 2017 · 34a731a · 34a731a
1 parent 605cda1
commit 34a731a
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 92 deletions.
diff --git a/docs/articles/playground/graph.css b/docs/articles/playground/graph.css
@@ -1,18 +1,85 @@
 .node {
-  stroke: #fff;
+  cursor: move;
   stroke-width: 1.5px;
-    cursor: move;
 }
 .link {
   fill: none;
-  stroke: #ccc;
+  stroke: #BDBDBD;
   stroke-width: 1.5px;
   opacity: 0.4;
   marker-end: url(#end-arrow);
 }
 .label {
-    fill: #CCCCCC;
-    font-size: 12px;
-    text-anchor: middle;
-    cursor: move;
+  fill: #CCCCCC;
+  font-size: 9px;
+  text-anchor: middle;
+  cursor: move;
+  font-family: Arial;
+}
+#end-arrow{
+  opacity: 0.4;
+}
+.INPUT{
+  fill: #ff6666;
+  stroke:  #ff4d4d;
+}
+.OUTPUT{
+  fill : #ff8c66;
+  stroke: #ff794d;
+}
+.LOGISTIC{
+  fill: #ffb366;
+  stroke: #ffa64d;
+}
+.TANH{
+  fill: #ffd966;
+  stroke: #ffd24d;
+}
+.IDENTITY{
+  fill: #ffff66;
+  stroke: #ffff4d;
+}
+.STEP{
+  fill: #d9ff66;
+  stroke: #d2ff4d;
+}
+.RELU{
+  fill: #b3ff66;
+  stroke: #a6ff4d;
+}
+.SOFTSIGN{
+  fill: #8cff66;
+  stroke: #79ff4d;
+}
+.SINUSOID{
+  fill: #66ff66;
+  stroke: #4dff4d;
+}
+.GAUSSIAN{
+  fill: #66ff8c;
+  stroke: #4dff79;
+}
+.BENT_IDENTITY{
+  fill: #66ffd9;
+  stroke: #4dffd2;
+}
+.BIPOLAR{
+  fill: #66d9ff;
+  stroke: #4dd2ff;
+}
+.BIPOLAR_SIGMOID{
+  fill: #66b3ff;
+  stroke: #4da6ff;
+}
+.HARD_TANH{
+  fill: #668cff;
+  stroke: #4d79ff;
+}
+.ABSOLUTE{
+  fill: #6666ff;
+  stroke: #4d4dff;
+}
+.GATE{
+  fill: #003300;
+  stroke: #001a00;
 }
diff --git a/docs/articles/playground/graph.js b/docs/articles/playground/graph.js
@@ -1,48 +1,15 @@
-var colorTable = [
-  '#2124FF', // input
-  '#FF2718', // output
-  '#1F22C1', // logistic sigmoid
-  '#EE8A2A', // tanh
-  '#B17516', // identity
-  '#B1B0AA', // hlim
-  '#2CB11F', // relu
-  '#C5B12C', // softsign
-  '#E685E7', // sinusoid
-  '#257580', // gaussian
-  '#B0484B', // softplus
-  '#4CB148',  // bent_identity
-  '#000000'  // GATE
-];
-
-var activationColor = function(value, max){
-  var power = Math.min(value/max, 1);
-  if(0 <= power < 0.5){
-    var g = 1.0
-    var r = 2 * power
-  } else {
-    var r = 1.0
-    var g = 1.0 - 2 * (power - 0.5)
-  }
-
-  r = Math.round(255 * r);
-  g = Math.round(255 * g);
-  var b = 0;
-
-  return "rgb(" + r + "," + g + "," + b + ")";
-}
-
 var NODE_RADIUS = 7;
-var REPEL_FORCE = 10;
+var REPEL_FORCE = 0;
 var LINK_DISTANCE = 100;
 
-var WIDTH = $('.draw').width();
-var HEIGHT = $('.draw').height();
+var WIDTH = 1000;
+var HEIGHT = 500;
 
 var d3cola = cola.d3adaptor()
       .avoidOverlaps(true)
       .size([WIDTH, HEIGHT]);
 
-var drawGraph = function(graph, panel, activation) {
+var drawGraph = function(graph, panel) {
     var svg = d3.select(panel);
 
     d3.selectAll(panel + "> *").remove();
@@ -52,12 +19,11 @@ var drawGraph = function(graph, panel, activation) {
         .attr('id', 'end-arrow')
         .attr('viewBox', '0 -5 10 10')
         .attr('refX', 6)
-        .attr('markerWidth', 5)
-        .attr('markerHeight', 5)
+        .attr('markerWidth', 4)
+        .attr('markerHeight', 4)
         .attr('orient', 'auto')
         .append('svg:path')
         .attr('d', 'M0,-5L10,0L0,5')
-        .attr('fill', '#000');
 
     graph.nodes.forEach(function (v) { v.height = v.width = 2 * NODE_RADIUS; });
 
@@ -73,48 +39,39 @@ var drawGraph = function(graph, panel, activation) {
         .data(graph.links)
         .enter().append('svg:path')
         .attr('class', 'link')
-        .style("stroke-width", function (d) {
-          if(activation){
-            return 1.5;
-          } else {
-            return 1.5 + Math.sqrt(d.weight * 5);
-          }
-          })
-        .style("stroke", function (d) {
-              if(activation){
-                return activationColor(d.source.activation * d.weight, graph.main.maxActivation * graph.main.maxWeight);
-              } else if(d.gate){
-                if(d.source.activation){
-                  return activationColor(d.source.activation, graph.main.maxActivation);
-                } else{
-                  return 'rgb(255,0,0)';
-                }
-              }
-          });
+
+    path.append("title")
+      .text(function (d) {
+        var text = "";
+        text += "Weight: " + Math.round(d.weight*1000)/1000 + "\n";;
+        text += "Source: " + d.source.id + "\n";;
+        text += "Target: " + d.target.id;
+        return text;
+      });
 
     var node = svg.selectAll(".node")
         .data(graph.nodes)
         .enter().append("circle")
-        .attr("class", "node")
+        .attr("class", function(d){
+          return "node " + d.name;
+        })
         .attr("r", function(d) { return NODE_RADIUS; })
-        .style("fill", function (d) {
-              if(activation){
-                return activationColor(d.activation, graph.main.maxActivation);
-              } else {
-                return colorTable[d.type];
-              }
-
-          })
+
         .call(d3cola.drag);
 
     node.append("title")
-        .text(function (d) { return d.id; });
+        .text(function (d){
+           var text = "";
+           text += "Activation: " + Math.round(d.activation*1000)/1000 + "\n";
+           text += "Position: " + d.id;
+           return text;
+         });
 
     var label = svg.selectAll(".label")
           .data(graph.nodes)
           .enter().append("text")
           .attr("class", "label")
-          .text(function (d) { return '(' + d.index + ') ' + d.name; })
+          .text(function (d){return '(' + d.index + ') ' + d.name; })
           .call(d3cola.drag)
 
     d3cola.on("tick", function () {
@@ -147,22 +104,10 @@ var drawGraph = function(graph, panel, activation) {
                 if (d.source.x === d.target.x && d.source.y === d.target.y) {
                   drx = dist;
                   dry = dist;
-                  // Fiddle with this angle to get loop oriented.
                   xRotation = -45;
-
-                  // Needs to be 1.
                   largeArc = 1;
-
-                  // Change sweep to change orientation of loop.
-                  //sweep = 0;
-
-                  // Make drx and dry different to get an ellipse
-                  // instead of a circle.
                   drx = 20;
                   dry = 20;
-
-                  // For whatever reason the arc collapses to a point if the beginning
-                  // and ending points of the arc are the same, so kludge it.
                   targetX = targetX + 1;
                   targetY = targetY + 1;
                 }

diff --git a/docs/articles/playground/neural.js b/docs/articles/playground/neural.js
@@ -22,12 +22,10 @@ function activate(){
   if(in1 > 1 || in1 < 0 || in2 > 1 || in2 < 0){
     alert('Inputs must be between 0 and 1!');
   }
-
-  var output = network.activate([in1, in2]);
 
+  var output = network.activate([in1, in2]);
   $('.output').text(output);
 }
 function refresh(){
-  console.log( );
-  drawGraph(network.graph($('.draw').width() / 1.4, $('.draw').height() / 1), '.draw');
+  drawGraph(network.graph($('.draw').width() / 1.4, $('.draw').height() / 1.4), '.draw');
 }