vogievetsky · myou · Feb 13, 2013 · Feb 13, 2013 · Feb 15, 2013 · Feb 15, 2013
diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@ A DVL variable is considered invalid if its value is set to `null`. It is perfec
 
 **dvl.apply**
 
-One of the most useful functions in DVL, the apply function creates a new DVL variable the value of which tracks the result of the given function as applied to the supplied parameters.
+The apply function is one of the most useful functions in DVL. It creates a new DVL variable, the value of which tracks the result of the given function as applied to the supplied parameters.
 
 ```javascript
 var a = dvl(5);
@@ -67,7 +67,7 @@ console.log(c.value()) //=> 5
 
 **dvl.applyAlways**
 
-Auto invalidation is often the desired behavior and a convenience since the arguments within the 'worker function' will never be null, but sometimes it does make scenes for the result of the apply to be something valid even if some of the arguments are invalid.
+Auto invalidation is often the desired behavior and a convenience since the arguments within the 'worker function' will never be null, but sometimes it does make sense for the result of the apply to be something valid even if some of the arguments are invalid.
 
 ```javascript
 var who = dvl('Jason');
@@ -94,7 +94,7 @@ console.log(likes.value()) //=> null
 
 **dvl.register**
 
-Registers a low level function that registers a function to be called reactively when a DVL variable changes. The `apply` and `applyAlways` functions are just convenience wrappers around a register.
+Registers a low level function that registers a function to be called reactively when a DVL variable changes. The `apply` and `applyAlways` functions are just convenience wrappers around a call to `dvl.register`.
 
 ```javascript
 var a = dvl(5);
@@ -122,9 +122,9 @@ b.value(4);
 console.log(c.value()); //=> 5
 ```
 
-The above example is equvelant to the first `dvl.apply` example.
+The above example is equivalent to the first `dvl.apply` example.
 
-We must explicitly declare that the function being registered will be changing `c`. This is important for DVL to calculate the dependency graph and ensure that it is acyclic. Modifying a variable without specifying that it might be modified will throw an error.
+We must explicitly declare that the function being `register`ed will be changing `c`. This is important for DVL to calculate the dependency graph and ensure that it is acyclic. Modifying a variable without specifying that it might be modified will throw an error.
 
 ## Credits
 

diff --git a/d3/d3.v3.min.js b/d3/d3.v3.min.js
diff --git a/examples/htmlUIComponents/htmlUICompoments.html b/examples/htmlUIComponents/htmlUICompoments.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>DVL HTML UI Components</title>
+		<script src="../../d3/d3.v2.js"></script>
+		<script src="../../dvl.js"></script>
+	</head>
+
+	<body>
+		<script src="uiComponents.js"></script>
+	</body>
+
+</html>
diff --git a/examples/htmlUIComponents/uiComponents.js b/examples/htmlUIComponents/uiComponents.js
@@ -0,0 +1,11 @@
+var body = d3.select("body").append("h1").text("DVL UI Components")
+
+var myData = [1, 2, 3, 4, 5]
+
+var thing = {
+	parent: body, 
+	data: myData,
+	classStr: "myDropdown",
+	selections: ["sel1", "sel2", "sel3"]
+}
+var dropDown = dvl.html.dropdown(thing)
diff --git a/examples/time/mouse.html b/examples/time/mouse.html
@@ -3,11 +3,11 @@
   <head>
     <title>DVL Random Walk</title>
     <link type="text/css"         href="../../css/smoothness/jquery-ui-1.8.7.custom.css" rel="Stylesheet" />
-    <script type="text/javascript" src="../../js/jquery-1.6.2.min.js"></script>
-    <script type="text/javascript" src="../../js/jquery-ui-1.8.7.custom.js"></script>
-    <script type="text/javascript" src="../../d3.v2.js"></script>
-    <script type="text/javascript" src="../../protovis-r3.2.js"></script>
-    <script type="text/javascript" src="../../sprintf.js"></script>
+    <script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
+    <script type="text/javascript" src="../../js/jquery-ui-1.10.1.custom.min.js"></script>
+    <script type="text/javascript" src="../../js/d3.v2.js"></script>
+    <script type="text/javascript" src="../../js/protovis.min.js"></script>
+    <script type="text/javascript" src="../../js/sprintf.js"></script>
     <script type="text/javascript" src="../../dvl.js"></script>
     <style type="text/css">
 
@@ -27,15 +27,15 @@
 .line {
   stroke: red;
 }
-
     </style>
 
   </head>
   <body>
+
     <div>
     </div>
-  </body>
-  <script type="text/javascript">
+
+      <script type="text/javascript">
 
   var random = dvl.random({
     walk: 0.1,
@@ -51,119 +51,14 @@
     max: 100
   })
 
-	var getX = dvl.acc('time');
-	var getY = dvl.acc('value');
-
-	var margin = dvl({ top: 30, bottom: 70, left: 70, right: 30 }, "margin");
-
-  var panel = dvl.svg.canvas({
-    selector:'body',
-    width: 800,
-    height: 500,
-    margin:margin
-  });
-
-  var sx = dvl.scale.linear({
-    name: "scale_x",
-    domain: { data:data, acc:getX, sorted:true },
-    rangeFrom: 0,
-    rangeTo: panel.width,
-    padding: 10
-  })
-
-  var sy = dvl.scale.linear({
-    name: "scale_y",
-    domain: { data:data, acc:getY },
-    rangeFrom: 0,
-    rangeTo: panel.height,
-    padding: 10
-  });
-
-  var scaledTicksX = dvl.gen.fromArray(sx.ticks, null, sx.scale),
-      scaledTicksY = dvl.gen.fromArray(sy.ticks, null, sy.scale);
-
-  dvl.svg.lines({
-    panel: panel,
-    duration: 400,
-    props: {
-      key: sx.ticks,
-      left: scaledTicksX,
-      top1: 0,
-      bottom2: 0
-    }
-  });
-
-  dvl.svg.lines({
-    panel: panel,
-    duration: 400,
-    props: {
-      key: sy.ticks,
-      bottom: scaledTicksY,
-      left1: 0,
-      right2: 0
-    }
-  });
-
-  dvl.svg.labels({
-    panel: panel,
-    duration: 400,
-    props: {
-      key: sx.ticks,
-      left: scaledTicksX,
-      bottom: -3,
-      text: dvl.gen.fromArray(sx.ticks, null, sx.format),
-      baseline: "top",
-      align: "middle"
-    }
-  });
-
-  dvl.svg.labels({
-    panel: panel,
-    duration: 400,
-    props: {
-      key: sy.ticks,
-      left: -3,
-      bottom:  scaledTicksY,
-      text: dvl.gen.fromArray(sy.ticks, null, sy.format),
-      align: "end",
-      baseline: "middle"
-    }
-  });
-
-  dvl.svg.line({
-    panel: panel,
-    duration: 400,
-    props: {
-      key: dvl.gen.fromArray(data, getX),
-      left: dvl.gen.fromArray(data, getX, sx.scale),
-      bottom: dvl.gen.fromArray(data, getY, sy.scale)
-    }
-  });
+  var getX = dvl.acc('time');
+  var getY = dvl.acc('value');
 
-  mouse = dvl.svg.mouse({
-    panel: panel,
-    fnX: sx.invert,
-    fnY: sy.invert,
-    flipY: true
-  })
+  var margin = dvl({ top: 30, bottom: 70, left: 70, right: 30 }, "margin");
 
-  snap = dvl.snap({
-    data: data,
-    acc: getX,
-    value: mouse.x
-  })
-
-  dvl.svg.dots({
-    panel: panel,
-    duration: 0,
-    classStr: 'dot',
-    props: {
-      left:   dvl.gen.fromValue(snap, getX, sx.scale),
-      bottom: dvl.gen.fromValue(snap, getY, sy.scale),
-      radius: 3,
-      fill: 'red'
-    }
-  });
+
 
   </script>
+  </body>
+
 </html>