Binning encoding types

panels/map2/editor.html

@@ -138,6 +138,16 @@
                            value="{{panel.display.binning.hexagonAlpha}}" />
                 </td>
             </tr>
+            <tr>
+                <td>Encoding</td>
+                <td>
+                    <div class="btn-group" ng-model="panel.display.binning.encoding" bs-buttons-radio ng-change="$emit('render')">
+                        <button type="button" class="btn" value="areacolor" >Area + Color</button>
+                        <button type="button" class="btn" value="area">Area</button>
+                        <button type="button" class="btn" value="color">Color</button>
+                    </div>
+                </td>
+            </tr>
             </tbody>
         </table>
     </div>

panels/map2/module.js

@@ -24,8 +24,8 @@ angular.module('kibana.map2', [])
                 binning: {
                     enabled: true,
                     hexagonSize: 10,
-                    hexagonAlpha: 1.0
-
+                    hexagonAlpha: 1.0,
+                    encoding: "color"
                 }
             },
             displayTabs: ["Geopoints", "Binning", "Data"],
@@ -235,27 +235,44 @@ angular.module('kibana.map2', [])
                             //hexagonal binning
                             if (scope.panel.display.binning.enabled) {
 
-                                var color = d3.scale.linear()
-                                    .domain([0, 20])
-                                    .range(["white", "steelblue"])
-                                    .interpolate(d3.interpolateLab);
-
                                 var hexbin = d3.hexbin()
                                     .size([width, height])
                                     .radius(scope.panel.display.binning.hexagonSize);
 
+                                var binnedPoints = hexbin(points).sort(function(a, b) { return b.length - a.length; });
+                                console.log(binnedPoints);
+
+
+                                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);
+
                                 g.selectAll(".hexagon")
-                                    .data(hexbin(points))
+                                    .data(binnedPoints)
                                     .enter().append("path")
                                     .attr("d", function (d) {
+                                        if (scope.panel.display.binning.encoding === 'color') {
                                             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.encoding === 'area') {
+                                            return color(10);
+                                        } else {
                                             return color(d.length);
+                                        }
                                     })
                                     .attr("opacity", scope.panel.display.binning.hexagonAlpha);
                             }