Binning settings, data settings

panels/map2/editor.html

@@ -54,54 +54,112 @@
     </div>
 </div>
 
-<div class="row-fluid">
-    <div class="span8 offset1 tabDetails">
-        <div ng-show="isActive('geopoints')">
-            <table>
-                <tbody  >
-                <tr>
-                    <td>Geopoints</td>
-                    <td>
-                        <button type="button" class="btn" bs-button
-                            ng-change="$emit('render')"
-                            ng-class="{'btn-success': panel.display.geopoints.enabled}"
-                            ng-model="panel.display.geopoints.enabled">{{panel.display.geopoints.enabled|enabledText}}</button>
-                    </td>
-                </tr>
-                <tr>
-                    <td>Point size</td>
-                    <td>
-                        <input type="text" style="width:100px"
+<div class="row-fluid tabDetails" ng-show="isActive('geopoints')">
+    <div class="span8 offset1">
+        <table>
+            <tbody  >
+            <tr>
+                <td>Geopoints</td>
+                <td>
+                    <button type="button" class="btn" bs-button
+                        ng-change="$emit('render')"
+                        ng-class="{'btn-success': panel.display.geopoints.enabled}"
+                        ng-model="panel.display.geopoints.enabled">{{panel.display.geopoints.enabled|enabledText}}</button>
+                </td>
+            </tr>
+            <tr>
+                <td>Point size</td>
+                <td>
+                    <input type="text" style="width:100px"
+                        ng-change="$emit('render')"
+                        data-placement="right"
+                        bs-tooltip="'Controls the size of the geopoints on the map'"
+                        ng-model="panel.display.geopoints.pointSize"
+                        value="{{panel.display.geopoints.pointSize}}" />
+                </td>
+            </tr>
+            <tr>
+                <td>Point Transparency</td>
+                <td>
+                    <input type="text" style="width:100px"
+                           ng-change="$emit('render')"
+                           data-placement="right"
+                           bs-tooltip="'Controls the transparency of geopoints. Valid numbers are between 0.0 and 1.0'"
+                           ng-model="panel.display.geopoints.pointAlpha"
+                           value="{{panel.display.geopoints.pointAlpha}}" />
+                </td>
+            </tr>
+            <tr>
+                <td>Autosizing</td>
+                <td>
+                    <input type="checkbox"
+                           ng-change="$emit('render')"
+                           data-placement="right"
+                           bs-tooltip="'Allows point sizes to scale as you zoom in and out of the map.'" />
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<div class="row-fluid tabDetails" ng-show="isActive('binning')">
+    <div class="span8 offset1">
+        <table>
+            <tbody  >
+            <tr>
+                <td>Binning</td>
+                <td>
+                    <button type="button" class="btn" bs-button
                             ng-change="$emit('render')"
-                            data-placement="right"
-                            bs-tooltip="'Controls the size of the geopoints on the map'"
-                            ng-model="panel.display.geopoints.pointSize"
-                            value="{{panel.display.geopoints.pointSize}}" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>Point Transparency</td>
-                    <td>
-                        <input type="text" style="width:100px"
-                               ng-change="$emit('render')"
-                               data-placement="right"
-                               bs-tooltip="'Controls the transparency of geopoints. Valid numbers are between 0.0 and 1.0'"
-                               ng-model="panel.display.geopoints.pointAlpha"
-                               value="{{panel.display.geopoints.pointAlpha}}" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>Autosizing</td>
-                    <td>
-                        <input type="checkbox"
-                               ng-change="$emit('render')"
-                               data-placement="right"
-                               bs-tooltip="'Allows point sizes to scale as you zoom in and out of the map.'" />
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-        </div>
+                            ng-class="{'btn-success': panel.display.binning.enabled}"
+                            ng-model="panel.display.binning.enabled">{{panel.display.binning.enabled|enabledText}}</button>
+                </td>
+            </tr>
+            <tr>
+                <td>Hexagon size</td>
+                <td>
+                    <input type="text" style="width:100px"
+                           ng-change="$emit('render')"
+                           data-placement="right"
+                           bs-tooltip="'Controls the size of the hexagonal binning'"
+                           ng-model="panel.display.binning.hexagonSize"
+                           value="{{panel.display.binning.hexagonSize}}" />
+                </td>
+            </tr>
+            <tr>
+                <td>Hexagon Transparency</td>
+                <td>
+                    <input type="text" style="width:100px"
+                           ng-change="$emit('render')"
+                           data-placement="right"
+                           bs-tooltip="'Controls the transparency of hexagonal bins. Valid numbers are between 0.0 and 1.0'"
+                           ng-model="panel.display.binning.hexagonAlpha"
+                           value="{{panel.display.binning.hexagonAlpha}}" />
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<div class="row-fluid tabDetails" ng-show="isActive('data')">
+    <div class="span8 offset1">
+        <table>
+            <tbody  >
+            <tr>
+                <td>Data Points</td>
+                <td>
+                    <input type="text" style="width:100px"
+                           ng-change="get_data()"
+                           data-placement="right"
+                           bs-tooltip="'Controls the number of samples used in the map. Be careful with this value!'"
+                           ng-model="panel.display.data.samples"
+                           value="{{panel.display.data.samples}}" />
+                </td>
+            </tr>
+            </tbody>
+        </table>
     </div>
 </div>
 

panels/map2/module.js

@@ -6,12 +6,15 @@ angular.module('kibana.map2', [])
             query: "*",
             map: "world",
             colors: ['#C8EEFF', '#0071A4'],
-            size: 1000,
+            size: 100,
             exclude: [],
             spyable: true,
             group: "default",
             index_limit: 0,
             display: {
+                data: {
+                  samples: 1000
+                },
                 geopoints: {
                     enabled: true,
                     enabledText: "Enabled",
@@ -19,10 +22,13 @@ angular.module('kibana.map2', [])
                     pointAlpha: 0.6
                 },
                 binning: {
+                    enabled: true,
+                    hexagonSize: 10,
+                    hexagonAlpha: 1.0
 
                 }
             },
-            displayTabs: ["Geopoints", "Binning"],
+            displayTabs: ["Geopoints", "Binning", "Data"],
             activeDisplayTab:"Geopoints"
         };
 
@@ -59,7 +65,7 @@ angular.module('kibana.map2', [])
 
             var facet = $scope.ejs.TermsFacet('map')
                 .field($scope.panel.field)
-                .size(1000)
+                .size($scope.panel.display.data.samples)
                 .exclude($scope.panel.exclude)
                 .facetFilter(ejs.QueryFilter(
                     ejs.FilteredQuery(
@@ -218,42 +224,45 @@ angular.module('kibana.map2', [])
                                 .attr("class", "boundary")
                                 .attr("d", path);
 
+
+                            //Geocoded points are decoded into lat/lon, then projected onto x/y
                             var points = _.map(scope.data, function (k, v) {
                                 var decoded = geohash.decode(v);
                                 return projection([decoded.longitude, decoded.latitude]);
                             });
 
 
+                            //hexagonal binning
+                            if (scope.panel.display.binning.enabled) {
 
-                            var color = d3.scale.linear()
-                                .domain([0, 20])
-                                .range(["white", "steelblue"])
-                                .interpolate(d3.interpolateLab);
+                                var color = d3.scale.linear()
+                                    .domain([0, 20])
+                                    .range(["white", "steelblue"])
+                                    .interpolate(d3.interpolateLab);
 
-                            var hexbin = d3.hexbin()
-                                .size([width, height])
-                                .radius(10);
+                                var hexbin = d3.hexbin()
+                                    .size([width, height])
+                                    .radius(scope.panel.display.binning.hexagonSize);
 
-                            g.selectAll(".hexagon")
-                                .data(hexbin(points))
-                                .enter().append("path")
-                                .attr("d", function (d) {
-                                    return hexbin.hexagon();
-                                })
-                                .attr("class", "hexagon")
-                                .attr("transform", function (d) {
-                                    return "translate(" + d.x + "," + d.y + ")";
-                                })
-                                .style("fill", function (d) {
-                                    return color(d.length);
-                                })
-                                .attr("opacity", 1);
+                                g.selectAll(".hexagon")
+                                    .data(hexbin(points))
+                                    .enter().append("path")
+                                    .attr("d", function (d) {
+                                        return hexbin.hexagon();
+                                    })
+                                    .attr("class", "hexagon")
+                                    .attr("transform", function (d) {
+                                        return "translate(" + d.x + "," + d.y + ")";
+                                    })
+                                    .style("fill", function (d) {
+                                        return color(d.length);
+                                    })
+                                    .attr("opacity", scope.panel.display.binning.hexagonAlpha);
+                            }
 
-                            /* raw geopoints */
 
+                            //Raw geopoints
                             if (scope.panel.display.geopoints.enabled) {
-
-
                                 g.selectAll("circles.points")
                                     .data(points)
                                     .enter()