Assorted style improvements

UkkonenVisualization.elm

@@ -119,12 +119,12 @@ stringUpdates =
 
 leftButton : Bool -> Html
 leftButton enabled =
-    Html.button [ onClick currentStepUpdates.address Back, disabled <| not enabled ] [ text "◀" ]
+    Html.button [ onClick currentStepUpdates.address Back, disabled <| not enabled ] [ text "◄" ]
 
 
 rightButton : Bool -> Html
 rightButton enabled =
-    Html.button [ onClick currentStepUpdates.address Forward, disabled <| not enabled ] [ text "▶" ]
+    Html.button [ onClick currentStepUpdates.address Forward, disabled <| not enabled ] [ text "►" ]
 
 
 currentStepUpdates : Signal.Mailbox Action
@@ -180,8 +180,6 @@ introText =
 [Ukkonen's algorithm](https://en.wikipedia.org/wiki/Ukkonen's_algorithm) is a method of constructing the [suffix tree](https://en.wikipedia.org/wiki/Suffix_tree) of a string in linear time. Suffix trees are useful because they can efficiently answer many questions about a string, such as how many times a given substring occurs within the string. Enter an input string below and you'll be able to watch step-by-step as Ukkonen's algorithm builds a suffix tree.
 
 I was inspired to build this visualization after reading [this great explanation](http://stackoverflow.com/a/9513423) of Ukkonen's algorithm. I'd recommend first reading that for an overview of how the algorithm works and then playing around with this visualization. Also quite helpful is the explanation given in [this video](https://www.youtube.com/watch?v=aPRqocoBsFQ).
-
-This page was created using [Elm](http://elm-lang.org) and [d3](https://d3js.org/). Here's the [source code](https://github.com/brenden/ukkonen-animation).
 """
 
 

index.html

@@ -56,9 +56,8 @@
     var treeGraph = document.getElementById('tree-graph');
 
     // Set up d3 tree visualization
-    var margin = {top: 20, right: 20, bottom: 10, left: 20};
-    var width = 960 - margin.right - margin.left;
-    var height = 700 - margin.top - margin.bottom;
+    var width = 760;
+    var height = 600;
     var duration = 750;
     var tree = d3.layout.tree()
       .size([height, width])
@@ -72,10 +71,10 @@
     });
 
     var svg = d3.select("#steps-wrapper").append("svg")
-      .attr("width", width + margin.right + margin.left)
-      .attr("height", height + margin.top + margin.bottom)
+      .attr("width", width)
+      .attr("height", height)
       .append("g")
-      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+      .attr("transform", "translate(20,0)");
 
     var suffixLinkGroup = svg.append("g")
       .attr("class", "suffix-link-group");
@@ -342,7 +341,7 @@
         .select("text > tspan:nth-child(2)")
         .text(function(d) {
           if (d.target.childNumber == d.source.activeEdgeChild) {
-            return "⚫"
+            return "|"
           } else {
             return "";
           }

style.css

@@ -20,6 +20,7 @@ a:hover {
 
 p {
   line-height: 20px;
+  font-size: .9em;
 }
 
 button {
@@ -54,7 +55,7 @@ svg {
 
 #heading {
   background-color: #F9F9F9;
-  padding: 20px;
+  padding: 10px 0 10px 20px;
   border-bottom: 1px solid #999999;
 }
 
@@ -65,7 +66,7 @@ svg {
 }
 
 #heading p {
-  width: 760px;
+  width: 770px;
 }
 
 #navigation {