styling update, info/instructions

bebebebebe · Apr 30, 2013 · 860f2bd · 860f2bd
1 parent 18d6d48
commit 860f2bd
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 77 deletions.
diff --git a/lib/tree.rb b/lib/tree.rb
@@ -2,14 +2,14 @@ module Tree
 
   def self.structure(root)
     hash = structure1(root)
-    hash[:name] = "global environment"
+    hash[:name] = "Global Environment.<br>"
     hash
   end
 
   def self.structure1(root)
     { id: root.id,
       frame: process_frame(root.frame, root.label), 
-      children: root.children.map{ |i| structure(i) }}
+      children: root.children.map{ |i| structure1(i) }}
   end
 
   # def self.process_frame(frame, label)
@@ -24,6 +24,7 @@ def self.process_frame(frame, label)
     frame2 = frame2.each { |k,v| frame2[k] = schemify(label[k]) if v.class == Proc }
     #frame2 = frame2.each { |k,v|  }
     string = frame2.to_s.delete('":{}').gsub("=>", ": ").gsub(", ", "<br>")
+    #string.gsub(/:\s<br>(?!<)/, ", ")
   end
 
   def self.schemify(exp)

diff --git a/public/pictures.html b/public/pictures.html
@@ -8,22 +8,32 @@
 
     <style>
       .link {
-        fill: none;
-        stroke: #ccc;
-        stroke-width: 2px;
-      }
-       div.tooltip {
-                position: absolute;
-                text-align: center;
-                width: 200px;
-                height: 20px;
-                padding: 8px;
-                font: 14px sans-serif;
-                background: lightsteelblue; /*#ffff99;*/
-                border: none; /*solid 1px #aaa;*/
-                border-radius: 8px;
-                pointer-events: none;
-
+    fill: none;
+    stroke: #ccc;
+    stroke-width: 1.5px;
+    }
+
+.node {
+  stroke: red;
+  stroke-width: 2px;
+}
+
+
+div.tooltip {
+    position: absolute;
+    text-align: center;
+    width: 200px;
+    height: 30px;
+    padding: 8px;
+    font: 12px sans-serif;
+    font-weight: 700;
+    background: white;
+    text-align: left;
+    /*background: lightsteelblue;*/
+    /*opacity: 0.50;*/
+    border: none;
+    border-radius: 8px;
+    pointer-events: none;
             }
     </style>
   </head>
@@ -34,7 +44,9 @@
 
     <script type="text/javascript">
 
-    var treeData = {"frame":"{car: , cdr: , cons: , +: , -: , *: , **: , =: , >: , <: , acc: (lambda (start) (lambda (supplement) (set! start (+ start supplement)) start)), A: (acc 5), B: (acc 0)}","children":[{"frame":"{start: 35}","children":[{"frame":"{supplement: 10}","children":[]},{"frame":"{supplement: 10}","children":[]},{"frame":"{supplement: 10}","children":[]}]},{"frame":"{start: 3}","children":[{"frame":"{supplement: 1}","children":[]},{"frame":"{supplement: 2}","children":[]}]}]};
+    var treeData = {"id":0,"frame":"car: <br>cdr: <br>cons: <br>+: <br>-: <br>*: <br>/: <br>**: <br>=: <br>>: <br><: <br>adder: (lambda (c) (lambda (x) (+ x c)))<br>plus1: (adder 1)<br>plus3: (adder 3)","children":[{"id":1,"frame":"c: 1","children":[]},{"id":2,"frame":"c: 3","children":[]}],"name":"Global Environment"};
+
+    var treeData7 = {"frame":"{car: , cdr: , cons: , +: , -: , *: , **: , =: , >: , <: , acc: (lambda (start) (lambda (supplement) (set! start (+ start supplement)) start)), A: (acc 5), B: (acc 0)}","children":[{"frame":"{start: 35}","children":[{"frame":"{supplement: 10}","children":[]},{"frame":"{supplement: 10}","children":[]},{"frame":"{supplement: 10}","children":[]}]},{"frame":"{start: 3}","children":[{"frame":"{supplement: 1}","children":[]},{"frame":"{supplement: 2}","children":[]}]}]};
 
     var treeData6 = {"frame":"{:car=>\"lambda\", :cdr=>\"lambda\", :cons=>\"lambda\", :+=>\"lambda\", :-=>\"lambda\", :*=>\"lambda\", :**=>\"lambda\", :\"=\"=>\"lambda\", :>=>\"lambda\", :<=>\"lambda\", :acc=>\"lambda\", :A=>\"lambda\", :B=>\"lambda\"}","children":[{"frame":"{:start=>35}","children":[{"frame":"{:supplement=>10}","children":[]},{"frame":"{:supplement=>10}","children":[]},{"frame":"{:supplement=>10}","children":[]}]},{"frame":"{:start=>3}","children":[{"frame":"{:supplement=>1}","children":[]},{"frame":"{:supplement=>2}","children":[]}]}],"name":"global env"};
 
@@ -67,89 +79,73 @@
                           ]}] }
                       ]};
 
-
 
       var vis = d3.select("#viz").append("svg:svg")
-                                .attr("width", 500)
-                                .attr("height", 300)
-                                .append("svg:g")
-                                .attr("transform", "translate(150, 0)");
-
+                .attr("width", 400)
+                .attr("height", 300)
+                .append("svg:g")
+                .attr("transform", "translate(40, 0)");
 
-    var div = d3.select("body").append("div")
+      //tooltips
+      var div = d3.select("body").append("div")
                 .attr("class", "tooltip")
                 .style("opacity", 1e-6);
 
-
-
       var tree = d3.layout.tree()
-                          .size([300,200]);
+                .size([300,150]);
 
       var diagonal = d3.svg.diagonal()
-                                              .projection(function(d) { return [d.y, d.x]; });
+                .projection(function(d) { return [d.y, d.x]; });
 
       var nodes = tree.nodes(treeData);
-      var link = vis.selectAll("pathlink")
-                    .data(tree.links(nodes))
-                    .enter().append("svg:path")
-                    .attr("class", "link")
-                    .attr("d", diagonal);
 
-///////////////
+      var link = vis.selectAll("pathlink")
+                .data(tree.links(nodes))
+                .enter().append("svg:path")
+                .attr("class", "link")
+                .attr("d", diagonal);
 
-    var node = vis.selectAll("g.node")
-                    .data(nodes)
-                    .enter().append("svg:g")
-                    .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
+      var node = vis.selectAll("g.node")
+                .data(nodes)
+                .enter().append("svg:g")
+                .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
 
-    node.append("svg:circle")
+      node.append("svg:circle")
             .on("mouseover", mouseover)
             .on("mousemove", function(d){mousemove(d);})
             .on("mouseout", mouseout)
             .attr("fill","red")
-            .attr("r", 5.5);
+            .attr("r", 4.5);
+
+      // label: global environment
+      // node.append("text")
+      //       .html(function(d) {
+      //         return d.name;
+      //       });
+
 
             function mouseover() {
                 div.transition()
                 .duration(300)
-                .style("opacity", 1);
+                .style("opacity", 0.9);
             }
 
             function mousemove(d) {
                 div
-                .text(d.frame)
-                .style("left", (d3.event.pageX ) + "px")
-                .style("top", (d3.event.pageY) + "px");
+                //.text(d.frame)
+                //.html("Bindings" + "<br>" + d.frame)
+                .html(d.frame)
+                //.style("color", "darkblue")
+                .style("left", (d3.event.pageX) + "px")
+                .style("top", (d3.event.pageY) + "px");      
             }
- 
+
             function mouseout() {
                 div.transition()
                 .duration(300)
                 .style("opacity", 1e-6);
             };
 
-
-
-                    // node.append("svg:circle")
-                    // .attr("r", 4)
-                    // .style("fill", "red");
-
-
-
-
-
-
-
-// .append("title")
-// .text(function(d) {
-//         return d.frame;
-
-//     });
-
-
-
-
-
     </script>
   </body>
 </html>
diff --git a/public/style.css b/public/style.css
@@ -1,3 +1,4 @@
+
 /*    for pictures.js    */
 
 
@@ -39,14 +40,14 @@ div.tooltip {
  width:500px;
  height: 220px;
  background: #eee;
- margin: 10px;
+ margin: 10px 30px 10px 10px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  border: 1px solid #aaa;
 }
 
 #console div.jquery-console-inner {
- width:500px;
+ width:480px;
  height:200px;
  margin: 10px 10px;
  overflow:auto;
@@ -85,14 +86,11 @@ div.tooltip {
 }
 
 
-
-
-
-
+/* ***** change body width from 640px to 800px */
 
 body {  
     margin: 35px auto;  
-    width: 640px;  
+    width: 800px;  
 }  
 
 header {  

diff --git a/views/index.erb b/views/index.erb
@@ -14,14 +14,44 @@
 
   <section id="add">
 
-    <div id="console" class="console"></div>
+    <div style="width: 100%; overflow: hidden;">
+
+      <div id="console" class="console" style="float: left"></div>
+
+      <div style="margin-left: 550px;"> 
+        <p style="text-align: left"> Type a Scheme expression into the console to see the resulting environment structure. The first node produced is the global environment. Hover over environments to see their bindings.
+        </p>
+
+      <p style="font-size: 12px; font-weight: bold"> Suggested example:</p>
+      <p style="font-family: monospace; font-size: 11px">
+       > (define make-count (lambda (total) (lambda (extra) (begin (set! total (+ total extra)) total)))) <br>
+      > (define counterA (make-count 0)) <br>
+      > (counterA 1) <br>
+      > (counterA 1) <br>
+      > (define counterB (make-count 5)) <br>
+      > (counterB 1) <br>
+      > (counterA 1) <br>
+    </p>
+      </div>
+
+    </div>
+
+    <!-- <div id="console" class="console"></div> -->
 
     <div id="viz"></div>
 
    </section>
 
 <script>
 
+// <div style="width: 100%; overflow: hidden;">
+//     <div style="width: 600px; float: left;"> Left </div>
+//     <div style="margin-left: 620px;"> Right </div>
+// </div>
+
+
+
+
   // var vis = d3.select("#viz").append("svg:svg")
   //               .attr("width", 400)
   //               .attr("height", 300)