update

css/custom.css

@@ -31,7 +31,8 @@ a {
 }
 
 .traj-sel {
-    stroke: #e72444 !important;
+    stroke: #ff5000 !important;
+    /*stroke: #e72444 !important;*/
     opacity: 1 !important;
     stroke-width: 4px !important;
 }

css/skeleton.css

@@ -311,7 +311,7 @@ input[type="submit"],
 input[type="reset"],
 input[type="button"] {
     display: inline-block;
-    height: 60px;
+    height: 54px;
     /*width: 100px;*/
     padding: 0 10px;
     color: #555;

index.html

@@ -54,7 +54,7 @@
 <div class="container" style="position: relative; min-width: 1200px">
 
     <div style="width: 35px;height: auto;display: inline-block;margin-right: 20px;position: absolute;left: 515.7px;top: 122px;z-index: 50">
-        <img class="play" style="width: 35px;position: absolute;left: 0px;top:-38px" src="assets/play-sign.svg">
+        <img class="play" style="width: 35px;position: absolute;left: 0;top:-38px" src="assets/play-sign.svg">
         <input id="timebar" type="range" min="0" max="66" step="1" value="0"
                style="width: 295px;position: absolute;top: 14px;">
         <p id="stepctn"
@@ -64,16 +64,15 @@
     <div class="row" style="margin-top: 15px">
         <div class="five  columns" style="position: relative">
             <h5> What if we Reduced the Memory of an Artificial Doom Player?</h5>
-            <p style="max-height: 100px;">We trained an artificial DOOM player <img src="assets/agent.png" class="arrow-icon" height="57px"> using Deep Reinforcement learning.
+            <p style="max-height: 100px;">We trained an artificial Doom player <img src="assets/agent.png" class="arrow-icon" height="57px"> using Deep Reinforcement learning.
                 It has to gather items in a specific order: <br>Green Armor <img src="assets/armorGreen.png"
                                                                                  class="item-icon" height="57px"> <img
                         src="assets/arrow.png" class="arrow-icon"> Red Armor
                 <img src="assets/armorRed.png" class="item-icon"> <img src="assets/arrow.png" class="arrow-icon"> Health
                 Pack <img src="assets/hp.png" class="item-icon"> <img src="assets/arrow.png" class="arrow-icon">
-                Soul-sphere <img src="assets/soul.png"
-                                 class="item-icon" style="width: 20px"> , with the
+                Soul-sphere <img src="assets/soul.png" class="item-icon" style="width: 20px"> , with the
                 shortest path possible.
-                Let’s explore how reducing the memory of a trained agent influences its trajectory!
+                Let’s explore how reducing <img src="assets/red.png" class="arrow-icon"> the memory of a trained agent influences its trajectory!
             </p>
 
         </div>

js/drawVector.js

@@ -25,12 +25,6 @@ function ve_init_rows(svg, data, height, width, mask, elem) {
 
     let g = svg.append('g').attr('class', 'hiddensgrp').attr('id', 'hiddensgrp');
 
-/*    if (width < 1000) {
-        hst = (710 * width) / 1200;
-        hst += 42
-    }
-
-    console.log(hst);*/
     ve_h = Math.min(((height - 140) / data[0].length), 60);
     ve_w = Math.min((width - hst - 10) / data.length, 13);
 
@@ -252,7 +246,7 @@ function svg_click() {
 
         if (Math.min(...sels) !== -1) {
 
-            sels.shift()
+            sels.shift();
             sels.push(parseInt(index))
 
         } else {

js/stage.js

@@ -21,10 +21,10 @@ let stages_txt = [
     'What if we go further and remove more memory elements? Having smaller models would be useful as they may be more interpretable, but also requiring less computing power and have a lower energy consumption footprint.     ' +
     '<br>',
 
-    'A naive approach is to randomly remove memory elements regardless of their activation. Here, they each have 1 chance out of 2 to be erased. ' +
+    'A naive approach is to randomly remove memory elements regardless of their activation. In this scenario here, they each have 1 chance out of 2 to be erased. ' +
     'We generated 3 different random memory reductions: <a onclick="meta_switch(0)">Random #1</a>, <a onclick="meta_switch(3)">Random #2</a> and <a onclick="meta_switch(10)">Random #3</a>.' +
     '<br><br>' +
-    'In <a onclick="meta_switch(0)">Random #1</a>, the agent only has  31% of its memory. In resulting trajectory, it gathered the soul-sphere before gathering the health pack which ended the game (fail). ' +
+    'In <a onclick="meta_switch(0)">Random #1</a>, the agent only has  31% of its memory. In the resulting trajectory, it gathered the soul-sphere before gathering the health pack which ended the game (fail). ' +
     '<br><br>' +
     ' In <a onclick="meta_switch(3)">Random #2</a> the agent\'s memory is reduced to 59% which made it turn left instead of right after it gathered the red armor, and therefore failed to gather all items in the given time.   ' +
     '<br><br>' +
@@ -55,8 +55,11 @@ let stages_txt = [
     'active at the end</a>. We selected those elements because they are active when only the health pack is in the agent\'s field of view, and thus may encode its presence. ' +
     'In <a onclick="meta_switch(0)"> the resulting trajectory</a>, the agent was able to gather the health pack, which indicates the added elements may be related to it. ' +
     ' <br><br>' +
-    'To go further, the next goal is to make the agent also gather the soul-spehre. To do so, we continued to add <a onmouseover="highelems([10, 3, 0])" onmouseout="resetelems()">3 elements also active at the end</a>. We can observe that the <a onclick="meta_switch(1)">agent\'s trajectory</a>  ' +
-    'it gathered all items in the correct order. And therefore we can conclude that the agent is able to solve its task, in the current configuration (walls, items, and agent initiate position), while only using 13 elements' +
+    'To go further, the next goal is to make the agent also gather the soul-sphere. To do so, we continued to add <a onmouseover="highelems([10, 3, 0])" onmouseout="resetelems()">3 elements also active at the end</a>. We can observe that the <a onclick="meta_switch(1)">agent\'s trajectory</a>  ' +
+    ' made it gather all items in the correct order. And therefore we can conclude that the agent is able to solve its task, in the current configuration (walls, items, and agent initiate position), while only using 13 elements.' +
+    ' We would like to point out the obvious, namely that the task has been\n' +
+    'solved for a single episode, and that this selection will normally need to\n' +
+    'be confirmed on a larger hold out set of episodes.' +
     ' <br><br>'
     /* 'The combination of those <a onmouseover="highelems( [1, 10, 4, 3, 22, 0, 17, 5])" onmouseout="resetelems()">both reductions</a>, outputs a <a onclick="meta_switch(2)">trajectory</a> in which the agent moved towards the health pack instead of the armor. ' +
      'This provides clues that those elements may indeed encode information related to the armor.' +
@@ -65,7 +68,7 @@ let stages_txt = [
      'This can be interpreted as the agent needing other memory elements to gather the armor, perhaps some encoding whether the agent is close to an item or not.  ',
 
  */,
-    'You can remove up to 2 elements by clicking on them, and replay the generated trajectory. Such proccess is limited to 2 elements at the' +
+    'You can remove up to 2 elements by clicking on them, and replay the generated trajectory. Such a process is limited to 2 elements at the' +
     'same time because each combination is pre-generated and therefore, the complete set of memory reduction is not computable. <br><br> ' +
     'The reduction of both <a onmouseover="highelems( [10, 23])" onmouseout="resetelems()" onclick="meta_change(\'nDIY/red10_23.json\', [10,23])"> elements 10 and 23 </a> ' +
     'is enough to make the agent move turn left after gathering the red armor healh pack. ' +

js/trajectory.js

@@ -52,21 +52,29 @@ function draw_traj(data, svg, width, height, cs, cla) {
 
     } else {
         let g = svg.select('.traj');
-        g.append("path")
+        let tpath = g.append("path")
             .data([data])
             .attr("d", line)
             .attr('class', cla)
             .style('opacity', '0.3')
             .attr('stroke', 'steelblue')
-            .style("fill", "none")
-    }
+            .style("fill", "none");
+
+        var totalLength = tpath.node().getTotalLength();
+
+        tpath.attr("stroke-dasharray", totalLength + " " + totalLength)
+            .attr("stroke-dashoffset", totalLength)
+            .transition()
+            .duration(3000)
+            .attr("stroke-dashoffset", 0)
+            }
 
 
-    d3.select('.traj_bg').moveToFront()
-    d3.select('.traj_top').moveToFront()
-    d3.select('.traj-sel').moveToFront()
-    d3.selectAll('.item').moveToFront()
 
+d3.select('.traj_bg').moveToFront();
+d3.select('.traj_top').moveToFront();
+d3.select('.traj-sel').moveToFront();
+d3.selectAll('.item').moveToFront();
 }