Commit 5be94741 by Zachary Tong

Binning encoding types

parent 54bc5ddb
...@@ -138,6 +138,16 @@ ...@@ -138,6 +138,16 @@
value="{{panel.display.binning.hexagonAlpha}}" /> value="{{panel.display.binning.hexagonAlpha}}" />
</td> </td>
</tr> </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> </tbody>
</table> </table>
</div> </div>
......
...@@ -24,8 +24,8 @@ angular.module('kibana.map2', []) ...@@ -24,8 +24,8 @@ angular.module('kibana.map2', [])
binning: { binning: {
enabled: true, enabled: true,
hexagonSize: 10, hexagonSize: 10,
hexagonAlpha: 1.0 hexagonAlpha: 1.0,
encoding: "color"
} }
}, },
displayTabs: ["Geopoints", "Binning", "Data"], displayTabs: ["Geopoints", "Binning", "Data"],
...@@ -235,27 +235,44 @@ angular.module('kibana.map2', []) ...@@ -235,27 +235,44 @@ angular.module('kibana.map2', [])
//hexagonal binning //hexagonal binning
if (scope.panel.display.binning.enabled) { if (scope.panel.display.binning.enabled) {
var color = d3.scale.linear()
.domain([0, 20])
.range(["white", "steelblue"])
.interpolate(d3.interpolateLab);
var hexbin = d3.hexbin() var hexbin = d3.hexbin()
.size([width, height]) .size([width, height])
.radius(scope.panel.display.binning.hexagonSize); .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") g.selectAll(".hexagon")
.data(hexbin(points)) .data(binnedPoints)
.enter().append("path") .enter().append("path")
.attr("d", function (d) { .attr("d", function (d) {
if (scope.panel.display.binning.encoding === 'color') {
return hexbin.hexagon(); return hexbin.hexagon();
} else {
return hexbin.hexagon(radius(d.length));
}
}) })
.attr("class", "hexagon") .attr("class", "hexagon")
.attr("transform", function (d) { .attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")"; return "translate(" + d.x + "," + d.y + ")";
}) })
.style("fill", function (d) { .style("fill", function (d) {
if (scope.panel.display.binning.encoding === 'area') {
return color(10);
} else {
return color(d.length); return color(d.length);
}
}) })
.attr("opacity", scope.panel.display.binning.hexagonAlpha); .attr("opacity", scope.panel.display.binning.hexagonAlpha);
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment