Refactoring

panels/map2/display/binning.js

+
+function displayBinning() {
+    /**
+     * Hexbin-specific setup
+     */
+    var hexbin = d3.hexbin()
+        .size([width, height])
+        .radius(scope.panel.display.binning.hexagonSize);
+
+
+    var binPoints = [];
+
+    //primary field is just binning raw counts
+    //secondary field is binning some metric like mean/median/total.  Hexbins doesn't support that,
+    //so we cheat a little and just add more points to compensate.
+    //However, we don't want to add a million points, so normalize against the largest value
+    if (scope.panel.display.binning.areaEncodingField === 'secondary') {
+        var max = Math.max.apply(Math, _.map(scope.data, function(k,v){return k;})),
+            scale = 10/max;
+
+        _.map(scope.data, function (k, v) {
+            var decoded = geohash.decode(v);
+            return _.map(_.range(0, k*scale), function(a,b) {
+                binPoints.push(projection([decoded.longitude, decoded.latitude]));
+            })
+        });
+
+    } else {
+        binPoints = points;
+    }
+
+    //bin and sort the points, so we can set the various ranges appropriately
+    var binnedPoints = hexbin(binPoints).sort(function(a, b) { return b.length - a.length; });;
+
+    //clean up some memory
+    binPoints = [];
+
+    var radius = d3.scale.sqrt()
+        .domain([0, binnedPoints[0].length])
+        .range([0, scope.panel.display.binning.hexagonSize]);
+
+    var color = d3.scale.linear()
+        .domain([0,binnedPoints[0].length])
+        .range(["white", "steelblue"])
+        .interpolate(d3.interpolateLab);
+
+
+    /**
+     * D3 Drawing
+     */
+
+
+    g.selectAll(".hexagon")
+        .data(binnedPoints)
+        .enter().append("path")
+        .attr("d", function (d) {
+            if (scope.panel.display.binning.areaEncoding === false) {
+                return hexbin.hexagon();
+            } else {
+                return hexbin.hexagon(radius(d.length));
+            }
+        })
+        .attr("class", "hexagon")
+        .attr("transform", function (d) {
+            return "translate(" + d.x + "," + d.y + ")";
+        })
+        .style("fill", function (d) {
+            if (scope.panel.display.binning.colorEncoding === false) {
+                return color(binnedPoints[0].length / 2);
+            } else {
+                return color(d.length);
+            }
+        })
+        .attr("opacity", scope.panel.display.binning.hexagonAlpha);
+}
\ No newline at end of file

panels/map2/display/geopoints.js

+function displayGeopoints() {
+    g.selectAll("circles.points")
+        .data(points)
+        .enter()
+        .append("circle")
+        .attr("r", scope.panel.display.geopoints.pointSize)
+        .attr("opacity", scope.panel.display.geopoints.pointAlpha)
+        .attr("transform", function (d) {
+            return "translate(" + d[0] + "," + d[1] + ")";
+        });
+}
\ No newline at end of file