diff --git a/css/index.css b/css/index.css
index 81ada5d..9c14fcd 100644
--- a/css/index.css
+++ b/css/index.css
@@ -7,8 +7,8 @@
 
 .main {
   height: 920px;
-  margin: 10px auto;
-  padding: 20px;
+  margin: 10px auto 100px auto;
+  padding: 50px 20px;
   position: relative;
   width: 800px; }
 
@@ -18,7 +18,7 @@
   left: 540px;
   position: absolute;
   top: 20px;
-  width: 240px; }
+  width: 220px; }
   #chart svg {
     margin-left: 30px;
     height: 100%;
diff --git a/index.html b/index.html
index d942936..531cd9c 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,35 @@
     <meta charset="UTF-8">
     <title></title>
     <link href='css/index.css' rel='stylesheet' type='text/css'>
+    <script src='/bb-2016/js/ui.js'></script>
 </head>
 <body>
 
+<h1>Buoy Analysis</h1>
+<h2>NOAA data for stations off the California coast from 1982 to 2015</h2>
+<hr>
+
+<h3>Project Goal</h3>
+
+<blockquote>
+    Create visualization of California coastal ocean temperature data to find monthly and yearly trends.
+    <br><br>
+    Visualization should invite interaction to create and answer questions such as:
+    <ul>
+        <li>Are ocean temperatures increasing?</li>
+        <li>What are the visible effects of El Nino?</li>
+        <li>What is the temperature of the ocean near San Francisco?</li>
+    </ul>
+</blockquote>
+
+<p>
+    Data source: <a href="http://www.ndbc.noaa.gov/">National Data Buoy Center</a>. Historical data, such as <a href="http://www.ndbc.noaa.gov/station_history.php?station=46213">46213 Cape Mendocino</a>, is mostly available since 1982. Extract, transform, and reduce scripts run on Node, publically available in <a href="http://gogs.benburlingham.com/ben.burlingham/buoy-analysis">source code</a>.
+</p>
+
+<p>
+    This visualization is created using D3 and Three.js libraries.
+</p>
+
 <div class="main">
     <div id='map'><svg></svg></div>
 
@@ -32,9 +58,6 @@
     <div id="chart3"></div>
 </div>
 
-- MAP harbors
-
-
 <!-- <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> -->
 <!-- <script src="//d3js.org/topojson.v1.min.js"></script> -->
 <!-- https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js -->
@@ -53,20 +76,9 @@
 <script src="js/chart3.js"></script>
 <script src="js/init.js"></script>
 
-<!-- <script src="gradients-v1.js"></script> -->
-<!-- <script src="gradients-v2.js"></script> -->
-<!-- <script src="gradients-v3.js"></script> -->
-<!-- <script src="gradients-v4.js"></script> -->
-
 <!--
-
-        var camX = -20;
-        var camY = -300;
-        var camZ = 150;
-
-        var tgtX = 425;
-        var tgtY = 300;
-        var tgtZ = -20;
+Deploy!
+Pong!
 
 https://css-tricks.com/svg-line-animation-works/
 
diff --git a/js/behaviors.js b/js/behaviors.js
index 42c99cc..8115bb3 100644
--- a/js/behaviors.js
+++ b/js/behaviors.js
@@ -13,6 +13,7 @@ var BuoyAnalysisBehaviors = {
         });
 
         BuoyAnalysisMap.findStationsUnderReticle();
+        BuoyAnalysisChart.updateColor();
         BuoyAnalysisChart.draw();
         BuoyAnalysisChart3.draw();
     },
@@ -33,6 +34,7 @@ var BuoyAnalysisBehaviors = {
             .attr('transform', 'translate(' + [ d.x, d.y ] + ')')
 
         BuoyAnalysisMap.findStationsUnderReticle();
+        BuoyAnalysisChart.updateColor();
         BuoyAnalysisChart.draw();
         BuoyAnalysisChart3.draw();
     },
@@ -86,23 +88,24 @@ var BuoyAnalysisBehaviors = {
         e.classed('selected', true);
 
         if (e.classed('toggle1')) {
-            BuoyAnalysisChart.bars.property = 'at';
+            BuoyAnalysisData.property = 'at';
         }
         else if (e.classed('toggle2')) {
-            BuoyAnalysisChart.bars.property = 'wt';
+            BuoyAnalysisData.property = 'wt';
         }
         else if (e.classed('toggle3')) {
-            BuoyAnalysisChart.bars.property = 'wh';
+            BuoyAnalysisData.property = 'wh';
         }
         else if (e.classed('toggle4')) {
-            BuoyAnalysisChart.bars.property = 'wp';
+            BuoyAnalysisData.property = 'wp';
         }
         else if (e.classed('toggle5')) {
-            BuoyAnalysisChart.bars.property = 'ws';
+            BuoyAnalysisData.property = 'ws';
         }
 
         BuoyAnalysisChart.updateAxes();
         BuoyAnalysisChart.draw();
+        BuoyAnalysisChart3.draw();
     },
 
     /**
diff --git a/js/chart.js b/js/chart.js
index 1deb612..17ce6ba 100644
--- a/js/chart.js
+++ b/js/chart.js
@@ -8,19 +8,16 @@ var BuoyAnalysisChart = {
         padding: 15,
         spacing: 2,
         height: 23,
-        width: 210,
+        width: 190,
+        color: '#f00',
 
         showMonths: true,
         showYears: true,
 
-        property: 'wt',
         tickValues: null,
 
         imperialLabel: null,
         metricLabel: null,
-
-        leftHexValue: null,
-        rightHexValue: null
     },
 
     axis: {
@@ -45,33 +42,8 @@ var BuoyAnalysisChart = {
         return year * BuoyAnalysisChart.bars.height + BuoyAnalysisChart.bars.padding + year * BuoyAnalysisChart.bars.spacing + (i % 12) * 2;
     },
 
-
     /**
-     *
-     */
-    // appendGradient: function() {
-    //     var chart = d3.select('#chart svg');
-    //     var id = 'gradient-year';
-
-    //     chart.selectAll('#' + id).remove();
-
-    //     var gradient = chart.append("svg:defs")
-    //                         .append("svg:linearGradient")
-    //                         .attr("id", id)
-
-    //     gradient.append("svg:stop")
-    //         .attr("offset", "0%")
-    //         .attr("stop-color", BuoyAnalysisChart.bars.leftHexValue)
-    //         .attr("stop-opacity", 1);
-
-    //     gradient.append("svg:stop")
-    //         .attr("offset", "100%")
-    //         .attr("stop-color", BuoyAnalysisChart.bars.rightHexValue)
-    //         .attr("stop-opacity", 1);
-    // },
-
-    /**
-     *
+     * DOM init.
      */
     appendYearLabels: function() {
         var years = BuoyAnalysisData.calculateYearlyAverages(BuoyAnalysisMap.reticle.stations);
@@ -89,7 +61,7 @@ var BuoyAnalysisChart = {
     },
 
     /**
-     *
+     * DOM init.
      */
     appendAxes: function() {
         var chart = d3.select('#chart svg');
@@ -114,22 +86,44 @@ var BuoyAnalysisChart = {
             .classed('label-axis-x', true)
             .attr('text-anchor', 'middle')
             .text(BuoyAnalysisChart.bars.imperialLabel)
-            .attr('x', 200)
+            .attr('x', 180)
             .attr('y', 10)
 
         chart.append('text')
             .classed('label-axis-x', true)
             .attr('text-anchor', 'middle')
             .text(BuoyAnalysisChart.bars.metricLabel)
-            .attr('x', 200)
+            .attr('x', 180)
             .attr('y', 876)
     },
 
     /**
-     *
+     * Updates the color of the bars to an average of current station colors.
+     */
+    updateColor: function() {
+        var r, g, b, station, tmp;
+        r = g = b = 0;
+
+        function avg(val) {
+            return Math.round(val / BuoyAnalysisMap.reticle.stations.length);
+        }
+
+        BuoyAnalysisMap.reticle.stations.forEach(function(s) {
+            station = BuoyAnalysisData.stationJson[s];
+            tmp = BuoyAnalysisMap.stationColorScale(station.lat).substr(1).match(/.{1,2}/g);
+            r += parseInt(tmp[0], 16);
+            g += parseInt(tmp[1], 16);
+            b += parseInt(tmp[2], 16);
+        });
+
+        BuoyAnalysisChart.bars.color = 'rgba(' + avg(r) + ',' + avg(g) + ',' + avg(b) + ', 0.1)';
+    },
+
+    /**
+     * Handles unit and scale changes.
      */
     updateAxes: function() {
-        switch(BuoyAnalysisChart.bars.property) {
+        switch(BuoyAnalysisData.property) {
             case 'at':
                 BuoyAnalysisChart.bars.tickValues = [8, 12, 16, 20];
 
@@ -194,11 +188,9 @@ var BuoyAnalysisChart = {
 
         var len = BuoyAnalysisData.years.end - BuoyAnalysisData.years.start + 1;
         var h = (BuoyAnalysisChart.bars.height + BuoyAnalysisChart.bars.spacing) * len + BuoyAnalysisChart.bars.padding;
-        // alert(BuoyAnalysisData.bars.height + ' ' + BuoyAnalysisChart.bars.spacing)
 
         BuoyAnalysisData.setAxisProperties();
         BuoyAnalysisChart.appendAxes();
-        // BuoyAnalysisChart.appendGradient();
         BuoyAnalysisChart.appendYearLabels();
 
         chart.selectAll('.bar-year').remove();
@@ -231,30 +223,13 @@ var BuoyAnalysisChart = {
             chart.selectAll('.bar-year').data(years).enter()
                 .append('rect')
                     .classed('bar-year', true)
-                    // .attr('fill', 'url("#gradient-year")')
-                    .attr('fill', '#f0f0ff')
+                    .attr('fill', BuoyAnalysisChart.bars.color)
                     .attr('height', 23)
-                    // .attr('width', BuoyAnalysisChart.bars.width)
                     .attr('width', function(d) {
                         return BuoyAnalysisChart.axis.scale(d.average);
                     })
                     .attr('x', 0)
                     .attr('y', BuoyAnalysisChart.barYearY)
-
-            // chart.selectAll('.mask-year').data(years).enter()
-            //     .append('rect')
-            //         .classed('.mask-year', true)
-            //         .attr('fill', '#fff')
-            //         .attr('height', 23)
-            //         .attr('width', function(d) {
-            //             return Math.max(0, BuoyAnalysisChart.bars.width - BuoyAnalysisChart.axis.scale(d.average));
-            //         })
-            //         .attr('x', function(d) {
-                        // return BuoyAnalysisChart.axis.scale(d.average);
-            //         })
-            //         .attr('y', function(d, i) {
-            //             return BuoyAnalysisChart.barYearY(d, i);
-            //         })
         }
 
         if (BuoyAnalysisChart.bars.showMonths === true) {
diff --git a/js/chart3.js b/js/chart3.js
index 60fb26a..847cf26 100644
--- a/js/chart3.js
+++ b/js/chart3.js
@@ -131,7 +131,7 @@ var BuoyAnalysisChart3 = {
             var geo = new THREE.PlaneGeometry(40, 300, 1, BuoyAnalysisData.years.end - BuoyAnalysisData.years.start);
 
             for (var year = BuoyAnalysisData.years.start, i = 0; year <= BuoyAnalysisData.years.end; year++, i++) {
-                h = BuoyAnalysisData.stationJson[station]['a' + year]['wt']['y'] * 10 || h;
+                h = BuoyAnalysisData.stationJson[station]['a' + year][BuoyAnalysisData.property]['y'] * 10 || h;
 
                 geo.vertices[2 * i].z = h;
                 geo.vertices[2 * i + 1].z = h;
diff --git a/js/data.js b/js/data.js
index 44840bf..dd0acf5 100644
--- a/js/data.js
+++ b/js/data.js
@@ -7,6 +7,8 @@ var BuoyAnalysisData = {
 
     stationJson: {},
 
+    property: 'wt',
+
     years: {
         start: 1982,
         end: 2015
@@ -39,9 +41,9 @@ var BuoyAnalysisData = {
     /**
      *
      */
-    setAxisProperties: function(property, tickValues) {
+    setAxisProperties: function() {
         var json = BuoyAnalysisData.stationJson;
-        var property = BuoyAnalysisChart.bars.property;
+        var property = BuoyAnalysisData.property;
         var tickValues = BuoyAnalysisChart.bars.tickValues;
 
         BuoyAnalysisChart.axis.min = 100;
@@ -68,16 +70,13 @@ var BuoyAnalysisData = {
         BuoyAnalysisChart.axis.scale = d3.scale.linear().domain([0, BuoyAnalysisChart.axis.max])
                                         .range([0, BuoyAnalysisChart.bars.width]);
 
-        // BuoyAnalysisChart.axis.scaleInverted = d3.scale.linear().domain([0, BuoyAnalysisChart.axis.max])
-        //                                 .range([BuoyAnalysisChart.bars.width, 0]);
-
         BuoyAnalysisChart.axis.imperial = d3.svg.axis()
                                         .scale(BuoyAnalysisChart.axis.scale)
                                         .orient("top")
                                         .tickFormat(function(d) {
                                             var val;
 
-                                            switch(BuoyAnalysisChart.bars.property) {
+                                            switch(BuoyAnalysisData.property) {
                                                 case 'at':
                                                 case 'wt':
                                                     val = Math.round(d * 9 / 5 + 32);
@@ -115,7 +114,7 @@ var BuoyAnalysisData = {
             count = 0;
 
             stations.forEach(function(id) {
-                data = BuoyAnalysisData.stationJson[id]['a' + year][BuoyAnalysisChart.bars.property];
+                data = BuoyAnalysisData.stationJson[id]['a' + year][BuoyAnalysisData.property];
 
                 if (data === undefined || data.y === 0) {
                     return;
@@ -144,7 +143,7 @@ var BuoyAnalysisData = {
                 count = 0;
 
                 stations.forEach(function(id) {
-                    data = BuoyAnalysisData.stationJson[id]['a' + year][BuoyAnalysisChart.bars.property];
+                    data = BuoyAnalysisData.stationJson[id]['a' + year][BuoyAnalysisData.property];
 
                     if (data === undefined || data.m[month] === 0) {
                         return;
diff --git a/js/init.js b/js/init.js
index 6b50df8..aecffb0 100644
--- a/js/init.js
+++ b/js/init.js
@@ -16,6 +16,7 @@
         .then(BuoyAnalysisBehaviors.attachBehaviors)
 
         .then(BuoyAnalysisChart.updateAxes)
+        .then(BuoyAnalysisChart.updateColor)
         .then(BuoyAnalysisChart.draw)
 
         .then(BuoyAnalysisChart3.init)
diff --git a/sass/chart.scss b/sass/chart.scss
index 9cea60c..d1a0fe5 100644
--- a/sass/chart.scss
+++ b/sass/chart.scss
@@ -7,7 +7,7 @@
     left:540px;
     position:absolute;
     top:20px;
-    width:240px;
+    width:220px;
 
     svg {
         margin-left:$axisW;
diff --git a/sass/index.scss b/sass/index.scss
index 9e2783c..124f638 100644
--- a/sass/index.scss
+++ b/sass/index.scss
@@ -13,8 +13,8 @@ $mainW: 800px;
 
 .main {
     height:$mainH;
-    margin:10px auto;
-    padding:20px;
+    margin:10px auto 100px auto;
+    padding:50px 20px;
     position:relative;
     width:$mainW;
 }
