GUI -- Clarified math used for computing scaling and translation of US map.

 - Increased zoom bounds to be able to zoom out further, and zoom in further.

Change-Id: I4ad3dca8edd1986034dec57cad6d19f80753daea

@@ -108,12 +108,6 @@
             charge: {
             charge: {
                 device: -8000,
                 device: -8000,
                 host: -5000
                 host: -5000
-            },
-            pad: 20,
-            translate: function() {
-                return 'translate(' +
-                    config.force.pad + ',' +
-                    config.force.pad + ')';
             }
             }
         },
         },
         // see below in creation of viewBox on main svg
         // see below in creation of viewBox on main svg
@@ -231,7 +225,7 @@
         mask;
         mask;
 
 
     // the projection for the map background
     // the projection for the map background
-    var geoMapProjection;
+    var geoMapProj;
 
 
     // the zoom function
     // the zoom function
     var zoom;
     var zoom;
@@ -1614,7 +1608,7 @@
 
 
         var location = node.location;
         var location = node.location;
         if (location && location.type === 'latlng') {
         if (location && location.type === 'latlng') {
-            var coord = geoMapProjection([location.lng, location.lat]);
+            var coord = geoMapProj([location.lng, location.lat]);
             node.fixed = true;
             node.fixed = true;
             node.px = node.x = coord[0];
             node.px = node.x = coord[0];
             node.py = node.y = coord[1];
             node.py = node.y = coord[1];
@@ -2578,7 +2572,7 @@
         zoom = d3.behavior.zoom()
         zoom = d3.behavior.zoom()
             .translate([0, 0])
             .translate([0, 0])
             .scale(1)
             .scale(1)
-            .scaleExtent([1, 8])
+            .scaleExtent([0.25, 10])
             .on("zoom", zoomed);
             .on("zoom", zoomed);
 
 
         svg.call(zoom);
         svg.call(zoom);
@@ -2631,7 +2625,7 @@
             ll;
             ll;
 
 
         if (store) {
         if (store) {
-            ll = geoMapProjection.invert([d.x, d.y]);
+            ll = geoMapProj.invert([d.x, d.y]);
             metaUi = {
             metaUi = {
                 x: d.x,
                 x: d.x,
                 y: d.y,
                 y: d.y,
@@ -2653,9 +2647,7 @@
     function preload(view, ctx, flags) {
     function preload(view, ctx, flags) {
         var w = view.width(),
         var w = view.width(),
             h = view.height(),
             h = view.height(),
-            fcfg = config.force,
-            fpad = fcfg.pad,
-            forceDim = [w - 2*fpad, h - 2*fpad];
+            fcfg = config.force;
 
 
         // NOTE: view.$div is a D3 selection of the view's div
         // NOTE: view.$div is a D3 selection of the view's div
         var viewBox = '0 0 ' + config.logicalSize + ' ' + config.logicalSize;
         var viewBox = '0 0 ' + config.logicalSize + ' ' + config.logicalSize;
@@ -2671,8 +2663,7 @@
 
 
         // group for the topology
         // group for the topology
         topoG = panZoomContainer.append('g')
         topoG = panZoomContainer.append('g')
-            .attr('id', 'topo-G')
-            .attr('transform', fcfg.translate());
+            .attr('id', 'topo-G');
 
 
         // subgroups for links, link labels, and nodes
         // subgroups for links, link labels, and nodes
         linkG = topoG.append('g').attr('id', 'links');
         linkG = topoG.append('g').attr('id', 'links');
@@ -2720,7 +2711,7 @@
 
 
         // set up the force layout
         // set up the force layout
         network.force = d3.layout.force()
         network.force = d3.layout.force()
-            .size(forceDim)
+            .size([w, h])
             .nodes(network.nodes)
             .nodes(network.nodes)
             .links(network.links)
             .links(network.links)
             .gravity(0.4)
             .gravity(0.4)
@@ -2856,6 +2847,31 @@
             });
             });
     }
     }
 
 
+    function setProjForView(path, topoData) {
+        var dim = config.logicalSize;
+
+        // start with unit scale, no translation..
+        geoMapProj.scale(1).translate([0, 0]);
+
+        // figure out dimensions of map data..
+        var b = path.bounds(topoData),
+            x1 = b[0][0],
+            y1 = b[0][1],
+            x2 = b[1][0],
+            y2 = b[1][1],
+            dx = x2 - x1,
+            dy = y2 - y1,
+            x = (x1 + x2) / 2,
+            y = (y1 + y2) / 2;
+
+        // size map to 95% of minimum dimension to fill space..
+        var s = .95 / Math.min(dx / dim, dy / dim);
+        var t = [dim / 2 - s * x, dim / 2 - s * y];
+
+        // set new scale, translation on the projection..
+        geoMapProj.scale(s).translate(t);
+    }
+
     function loadGeoMap() {
     function loadGeoMap() {
         fnTrace('loadGeoMap', geoJsonUrl);
         fnTrace('loadGeoMap', geoJsonUrl);
 
 
@@ -2863,22 +2879,10 @@
         var topoData = topojson.feature(geoJson, geoJson.objects.states);
         var topoData = topojson.feature(geoJson, geoJson.objects.states);
 
 
         // see: http://bl.ocks.org/mbostock/4707858
         // see: http://bl.ocks.org/mbostock/4707858
-        geoMapProjection = d3.geo.mercator();
-        var path = d3.geo.path().projection(geoMapProjection);
-
-        geoMapProjection
-            .scale(1)
-            .translate([0, 0]);
-
-        // [[x1,y1],[x2,y2]]
-        var b = path.bounds(topoData);
-        // size map to 95% of minimum dimension to fill space
-        var s = .95 / Math.min((b[1][0] - b[0][0]) / config.logicalSize, (b[1][1] - b[0][1]) / config.logicalSize);
-        var t = [(config.logicalSize - s * (b[1][0] + b[0][0])) / 2, (config.logicalSize - s * (b[1][1] + b[0][1])) / 2];
+        geoMapProj = d3.geo.mercator();
+        var path = d3.geo.path().projection(geoMapProj);
 
 
-        geoMapProjection
-            .scale(s)
-            .translate(t);
+        setProjForView(path, topoData);
 
 
         bgImg = panZoomContainer.insert("g", '#topo-G');
         bgImg = panZoomContainer.insert("g", '#topo-G');
         bgImg.attr('id', 'map').selectAll('path')
         bgImg.attr('id', 'map').selectAll('path')