Reticle sizing and dragging finished.

data/map/places.prj

@@ -0,0 +1 @@
+GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.017453292519943295]]

index.html

@@ -10,7 +10,7 @@
 <div class="main">
     <svg id='map'></svg>
 
-    <input type="range" title='Reticle Size' class='reticle-sizer'>
+    <input type="range" title='Reticle Size' class='reticle-sizer' value='10'>
 
     <div class="bar-display">
         <div class="toggle toggle1 selected"></div>
@@ -30,20 +30,20 @@
     <div id="year-labels"></div>
 </div>
 
-- MAP major major cities
-- UI reticle sizing
-- UI reticle drag
+- MAP harbors
+- DATA optimize properties
+- DATA remove less informative stations
 
 
 <!-- <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> -->
 <script src="d3.min.js"></script>
 <script src="topojson.min.js"></script>
 
-<script src="client/data.js"></script>
-<script src="client/map.js"></script>
-<script src="client/behaviors.js"></script>
-<script src="client/chart.js"></script>
-<script src="client/init.js"></script>
+<script src="js/data.js"></script>
+<script src="js/map.js"></script>
+<script src="js/behaviors.js"></script>
+<script src="js/chart.js"></script>
+<script src="js/init.js"></script>
 
 <!-- <script src="gradients-v1.js"></script> -->
 <!-- <script src="gradients-v2.js"></script> -->
@@ -67,7 +67,8 @@ feImage
 
 ogr2ogr -f "esri shapefile" -where "sov_a3 = 'MEX'" C:/dev/bb/buoy-analysis/data/map/merged.shp C:/dev/bb/buoy-analysis/data/map/countries.shp
 ogr2ogr -f "esri shapefile" -update -append C:/dev/bb/buoy-analysis/data/map/merged.shp C:/dev/bb/buoy-analysis/data/map/states.shp
-ogr2ogr -f GeoJSON -clipsrc -105 30 -125 43 C:/dev/bb/buoy-analysis/client/_map.json C:/dev/bb/buoy-analysis/data/map/merged.shp
+ogr2ogr -f GeoJSON -clipsrc -105 30 -125 43 C:/dev/bb/buoy-analysis/data/map.json C:/dev/bb/buoy-analysis/data/map/merged.shp
+ogr2ogr -f GeoJSON C:/dev/bb/buoy-analysis/data/map/places.json C:/dev/bb/buoy-analysis/data/map/places.shp
 topojson -o test.json _map.json
 
 http://dvisvgm.bplaced.net/Gradients

js/behaviors.js

@@ -1,18 +1,29 @@
 'use strict';
 
 var BuoyAnalysisBehaviors = {
-
     /**
      *
      */
     reticleDrag: function(d) {
+        d.x += d3.event.dx;
+        d.y += d3.event.dy;
+
+        d3.select(this).attr("transform", function(d) {
+            return "translate(" + [ d.x, d.y ] + ")"
+        });
 
+        BuoyAnalysisMap.findStationsUnderReticle();
+        BuoyAnalysisChart.draw();
     },
 
     /**
      *
      */
-    reticleDragEnd: function() {
+    reticleClick: function() {
+        if (d3.event.defaultPrevented) {
+            return;
+        }
+
         var x = d3.mouse(this)[0];
         var y = d3.mouse(this)[1];
 
@@ -24,14 +35,11 @@ var BuoyAnalysisBehaviors = {
             x = 800;
         }
 
-
         var d = d3.select('.reticle').data()[0];
-        d.x = x;
-        d.y = y;
+        d.x = d3.event.x;
+        d.y = d3.event.y;
 
         d3.select('.reticle')
-            .transition()
-            .duration(300)
             .attr('transform', 'translate(' + [ d.x, d.y ] + ')')
 
         BuoyAnalysisMap.findStationsUnderReticle();
@@ -42,7 +50,11 @@ var BuoyAnalysisBehaviors = {
      *
      */
     reticleResize: function() {
+        d3.select('.reticle')
+            .attr('r', BuoyAnalysisMap.reticle.scale(this.value));
 
+        BuoyAnalysisMap.findStationsUnderReticle();
+        BuoyAnalysisChart.draw();
     },
 
     /**
@@ -106,58 +118,17 @@ var BuoyAnalysisBehaviors = {
      */
     attachBehaviors: function() {
         d3.select('#map')
-            .on('click', BuoyAnalysisBehaviors.reticleDragEnd)
-            // .call(d3.behavior.drag()
-            //     .on('drag', BuoyAnalysisBehaviors.reticleDrag)
-            //     .on('dragend', BuoyAnalysisBehaviors.reticleDragEnd)
-            // );
+            .on('click', BuoyAnalysisBehaviors.reticleClick);
+
+        d3.select('.reticle')
+            .call(d3.behavior.drag().on('drag', BuoyAnalysisBehaviors.reticleDrag));
 
         d3.selectAll('.bar-display .toggle')
             .on('click', BuoyAnalysisBehaviors.barDisplayClick);
 
         d3.selectAll('.column-display .toggle')
             .on('click', BuoyAnalysisBehaviors.columnDisplayClick);
+
+        d3.select(".reticle-sizer").on("input", BuoyAnalysisBehaviors.reticleResize);
     }
 };
-
-        // d3.selectAll('.detail')
-            // .on('mouseover', startAnimateStation)
-            // .on('mouseout', stopAnimateStation);
-
-//     function startAnimateStation() {
-//         var id = d3.event.target.id || d3.event.target.parentNode.id;
-//         var selector = '#' + id.split('-')[1];
-
-//         d3.select(selector)
-//             .transition()
-//             .attr('r', '10')
-//             .duration(200)
-//     };
-
-//     function stopAnimateStation() {
-//         var id = d3.event.target.id || d3.event.target.parentNode.id;
-//         var selector = '#' + id.split('-')[1];
-
-//         d3.select(selector)
-//             .transition()
-//             .attr('r', '3')
-//             .duration(200)
-//     };
-
-//     /**
-//      *
-//      */
-//     function startAnimateDetail() {
-//         var id = d3.event.target.id;
-//         d3.select('#detail-' + id)
-//             .classed('active', true)
-//     }
-
-//     /**
-//      *
-//      */
-//     function stopAnimateDetail() {
-//         var id = d3.event.target.id;
-//         d3.select('#detail-' + id)
-//             .classed('active', false)
-//     }

js/chart.js

@@ -18,8 +18,8 @@ var BuoyAnalysisChart = {
         imperialLabel: null,
         metricLabel: null,
 
-        smallHexValue: null,
-        largeHexValue: null
+        bottomHexValue: null,
+        topHexValue: null
     },
 
     axis: {
@@ -63,12 +63,12 @@ var BuoyAnalysisChart = {
 
         gradient.append("svg:stop")
             .attr("offset", "0%")
-            .attr("stop-color", BuoyAnalysisChart.bars.largeHexValue)
+            .attr("stop-color", BuoyAnalysisChart.bars.bottomHexValue)
             .attr("stop-opacity", 1);
 
         gradient.append("svg:stop")
             .attr("offset", "100%")
-            .attr("stop-color", BuoyAnalysisChart.bars.smallHexValue)
+            .attr("stop-color", BuoyAnalysisChart.bars.topHexValue)
             .attr("stop-opacity", 1);
     },
 
@@ -137,8 +137,8 @@ var BuoyAnalysisChart = {
                 BuoyAnalysisChart.bars.imperialLabel = 'F';
                 BuoyAnalysisChart.bars.metricLabel = 'C';
 
-                BuoyAnalysisChart.bars.smallHexValue = '#40596F';
-                BuoyAnalysisChart.bars.largeHexValue = '#6cf7ce';
+                BuoyAnalysisChart.bars.topHexValue = '#a7dde6';
+                BuoyAnalysisChart.bars.bottomHexValue = '#f75c5c';
                 break;
 
             case 'WTMP':
@@ -147,8 +147,8 @@ var BuoyAnalysisChart = {
                 BuoyAnalysisChart.bars.imperialLabel = 'F';
                 BuoyAnalysisChart.bars.metricLabel = 'C';
 
-                BuoyAnalysisChart.bars.smallHexValue = '#40596F';
-                BuoyAnalysisChart.bars.largeHexValue = '#6cf7ce';
+                BuoyAnalysisChart.bars.topHexValue = '#a7dde6';
+                BuoyAnalysisChart.bars.bottomHexValue = '#f75c5c';
                 break;
 
             case 'WVHT':
@@ -157,9 +157,9 @@ var BuoyAnalysisChart = {
                 BuoyAnalysisChart.bars.imperialLabel = 'FT';
                 BuoyAnalysisChart.bars.metricLabel = 'M';
 
-                BuoyAnalysisChart.bars.smallHexValue = '#f00';
-                BuoyAnalysisChart.bars.largeHexValue = '#C8EBF4';
-                // BuoyAnalysisChart.bars.largeHexValue = '#ff0';
+                BuoyAnalysisChart.bars.topHexValue = '#c3fd98';
+                BuoyAnalysisChart.bars.bottomHexValue = '#f00';
+                // BuoyAnalysisChart.bars.bottomHexValue = '#ff0';
                 break;
 
             case 'WPER':
@@ -168,8 +168,8 @@ var BuoyAnalysisChart = {
                 BuoyAnalysisChart.bars.imperialLabel = 'SEC';
                 BuoyAnalysisChart.bars.metricLabel = 'SEC';
 
-                BuoyAnalysisChart.bars.smallHexValue = '#20a';
-                BuoyAnalysisChart.bars.largeHexValue = '#a02';
+                BuoyAnalysisChart.bars.topHexValue = '#9c90ca';
+                BuoyAnalysisChart.bars.bottomHexValue = '#a8747e';
                 break;
 
             case 'WSPD':
@@ -178,8 +178,8 @@ var BuoyAnalysisChart = {
                 BuoyAnalysisChart.bars.imperialLabel = 'FT/S';
                 BuoyAnalysisChart.bars.metricLabel = 'M/S';
 
-                BuoyAnalysisChart.bars.smallHexValue = '#f00';
-                BuoyAnalysisChart.bars.largeHexValue = '#0f0';
+                BuoyAnalysisChart.bars.topHexValue = '#f3cab8';
+                BuoyAnalysisChart.bars.bottomHexValue = '#e6dea5';
                 break;
         };
     },

js/data.js

@@ -17,7 +17,7 @@ var BuoyAnalysisData = {
      */
     populateMapData: function() {
         return new Promise(function(resolve) {
-            d3.json('client/_map-topo.json', function(error, json) {
+            d3.json('data/map.json', function(error, json) {
                 BuoyAnalysisData.mapJson = json;
                 resolve();
             });
@@ -29,7 +29,7 @@ var BuoyAnalysisData = {
      */
     populateSrcFile: function() {
         return new Promise(function(resolve) {
-            d3.json('client/_stations.json', function(error, json) {
+            d3.json('data/stations.json', function(error, json) {
                 BuoyAnalysisData.stationJson = json;
                 resolve();
             });

js/map.js

@@ -7,7 +7,10 @@ var BuoyAnalysisMap = {
     reticle: {
         stations: [],
         x: 400,
-        y: 300
+        y: 300,
+        scale: d3.scale.linear()
+            .domain([0, 100])
+            .range([20, 350])
     },
 
     /**
@@ -64,10 +67,11 @@ var BuoyAnalysisMap = {
      *
      */
     drawReticle: function() {
+        var r = BuoyAnalysisMap.reticle.scale(d3.select('.reticle-sizer').property('value'));
+
         d3.select("svg#map").append('circle')
-            .attr('r', 50)
+            .attr('r', r)
             .attr('fill', 'rgba(200, 200, 200, 0.5)')
-            // .attr('stroke', '#f00')
             .attr("transform", "translate(" + BuoyAnalysisMap.reticle.x + "," + BuoyAnalysisMap.reticle.y + ")")
             .data([ {"x": BuoyAnalysisMap.reticle.x, "y": BuoyAnalysisMap.reticle.y } ])
             .classed('reticle', true);
@@ -77,20 +81,20 @@ var BuoyAnalysisMap = {
      *
      */
     findStationsUnderReticle: function() {
-        var reticle = d3.select('.reticle').data()[0];
+        var reticle = d3.select('.reticle');
         var dX, dY, squares, distance, station;
         var stations = [];
 
         for (var s in BuoyAnalysisData.stationJson) {
             station = BuoyAnalysisData.stationJson[s];
 
-            dX = reticle.x - station.x;
-            dY = reticle.y - station.y;
+            dX = reticle.data()[0].x - station.x;
+            dY = reticle.data()[0].y - station.y;
 
             squares = Math.pow(dX, 2) + Math.pow(dY, 2)
             distance = Math.pow(squares, 0.5);
 
-            if (distance < 50) {
+            if (distance < reticle.attr('r')) {
                 stations.push(s);
             }
         };

sass/map.scss

@@ -13,6 +13,7 @@
 }
 
 .reticle {
+    cursor:move;
     fill: rgba(153, 173, 40, 0.2);
     stroke: #5D5336;
 }