Skip to content

N
nexpie-grafana-theme
Commit 1dcf9d65 by Zachary Tong
Options

Cleaning up, commenting

parent 88609fbe
Showing with 73 additions and 138 deletions
panels/map2/display/binning.js
function displayBinning(scope, dimensions, projection, path) {
/**
* Hexbin-specific setup
/**
* Hexagonal binning
* Rendered as normally projected svg paths, which mean they *do not*
* clip on spheres appropriately. To fix this, we would need to translate
* the svg path into a geo-path
*/
function displayBinning(scope, dimensions) {
var hexbin = d3.hexbin()
.size(dimensions)
.radius(scope.panel.display.binning.hexagonSize);
......@@ -16,10 +17,13 @@ function displayBinning(scope, dimensions, projection, path) {
if (scope.panel.display.binning.enabled) {
//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
/**
* 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 = 50/max;
......@@ -27,12 +31,11 @@ function displayBinning(scope, dimensions, projection, path) {
_.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]));
binPoints.push(scope.projection([decoded.longitude, decoded.latitude]));
})
});
} else {
binPoints = scope.projectedPoints;
}
......@@ -43,6 +46,8 @@ function displayBinning(scope, dimensions, projection, path) {
//clean up some memory
binPoints = [];
} else {
//not enabled, so just set an empty array. D3.exit will take care of the rest
binnedPoints = [];
binRange = 0;
}
......@@ -59,10 +64,6 @@ function displayBinning(scope, dimensions, projection, path) {
.interpolate(d3.interpolateLab);
/**
* D3 Drawing
*/
var hex = scope.g.selectAll(".hexagon")
.data(binnedPoints);
......
panels/map2/display/bullseye.js
function displayBullseye(scope, projection, path) {
/**
* Renders bullseyes as geo-json poly gon entities
* Allows for them to clip on spheres correctly
*/
function displayBullseye(scope, path) {
var degrees = 180 / Math.PI
var circle = d3.geo.circle();
var data = [];
if (scope.panel.display.bullseye.enabled) {
......@@ -13,11 +14,9 @@ function displayBullseye(scope, projection, path) {
];
}
var arcs = scope.g.selectAll(".arc")
.data(data);
arcs.enter().append("path")
.datum(function(d) {
return circle.origin([d.lon, d.lat]).angle(1000 / 6371 * degrees)();
......
panels/map2/display/geopoints.js
/**
* Renders geopoints as geo-json poly gon entities
* Allows for them to clip on spheres correctly
*/
function displayGeopoints(scope, path) {
/*
var points = {};
var points = [];
var circle = d3.geo.circle();
var degrees = 180 / Math.PI;
if (scope.panel.display.geopoints.enabled) {
//points = scope.points;
var features = _.map(scope.points, function(coords) {
return {
feature: circle.origin(scope.projection([coords[0], coords[1]]))
.angle(scope.panel.display.geopoints.pointSize / 6371 * degrees)()
};
});
console.log("features", features);
points = {
type: "FeatureCollection",
features: features
};
console.log("points", points);
}
console.log("points2", points);
scope.svg.append("path")
.datum(points)
.attr("d", d3.geo.path());
*/
var degrees = 180 / Math.PI
var points = []
if (scope.panel.display.geopoints.enabled) {
points = scope.points;
}
var circle = d3.geo.circle();
var degrees = 180 / Math.PI
var geopoints = scope.g.selectAll(".geopoint")
.data(points);
......
panels/map2/module.js
......@@ -186,7 +186,6 @@ angular.module('kibana.map2', [])
.directive('map2', function () {
return {
restrict: 'A',
template: '<div class="loading"><center><img src="common/img/load_big.gif" style="display:none"></center></div><div id="{{uuid}}"></div>',
link: function (scope, elem, attrs) {
......@@ -215,20 +214,9 @@ angular.module('kibana.map2', [])
};
//These should be moved to utility classes
var s4 = function() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
};
scope.uuid = s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
/**
* Initialize the panels if new, or render existing panels
*/
scope.init_or_render = function() {
if (typeof scope.svg === 'undefined') {
console.log("init");
......@@ -245,19 +233,25 @@ angular.module('kibana.map2', [])
};
// Receive render events
/**
* Receive render events
*/
scope.$on('render', function () {
console.log("$on render");
scope.init_or_render();
});
// Or if the window is resized
/**
* On window resize, re-render the panel
*/
angular.element(window).bind('resize', function () {
console.log("resize render");
scope.init_or_render();
});
/**
* Load the various panel-specific scripts, map data, then initialize
* the svg and set appropriate D3 settings
*/
function init_panel() {
scope.initializing = true;
......@@ -281,9 +275,6 @@ angular.module('kibana.map2', [])
scope.worldData = world;
scope.worldNames = names;
console.log('initializing svg');
//Better way to get these values? Seems kludgy to use jQuery on the div...
var width = $(elem[0]).width(),
......@@ -299,6 +290,7 @@ angular.module('kibana.map2', [])
.on("zoom", translate_map);
//used by choropleth
//@todo change domain so that it reflects the domain of the data
scope.quantize = d3.scale.quantize()
.domain([0, 1000])
.range(d3.range(9).map(function(i) { return "q" + (i+1); }));
......@@ -319,100 +311,68 @@ angular.module('kibana.map2', [])
});
//remove our old svg...is there a better way to update than remove/append?
//d3.select("#" + scope.uuid).select("svg").remove();
//create the new svg
scope.svg = d3.select(elem[0]).append("svg")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.call(scope.zoom);
scope.g = scope.svg.append("g");
console.log("finished initing");
scope.initializing = false;
render_panel();
});
});
}
/**
* Render updates to the SVG. Typically happens when the data changes (time, query)
* or when new options are selected
*/
function render_panel() {
console.log("render_panel scope.svg", scope.svg);
var width = $(elem[0]).width(),
height = $(elem[0]).height();
/**
* D3 and general config section
*/
scope.projection;
//Projection is dependant on the map-type
if (scope.panel.display.data.type === 'mercator') {
scope.projection = d3.geo.mercator()
.translate([width/2, height/2])
.scale(scope.scale);
} else if (scope.panel.display.data.type === 'orthographic') {
scope.projection = d3.geo.orthographic()
.translate([width/2, height/2])
.scale(100)
.clipAngle(90);
var λ = d3.scale.linear()
.domain([0, width])
.range([-180, 180]);
//recenters the sphere more towards the US...not really necessary
scope.projection.rotate([100 / 2, 20 / 2, scope.projection.rotate()[2]]);
var φ = d3.scale.linear()
.domain([0, height])
.range([90, -90]);
}
var path = d3.geo.path()
.projection(scope.projection);
//Geocoded points are decoded into lat/lon, then projected onto x/y
//Geocoded points are decoded into lonlat
scope.points = _.map(scope.data, function (k, v) {
var decoded = geohash.decode(v);
return [decoded.longitude, decoded.latitude];
});
//And also projected projected to x/y. Both sets of points are used
//by different functions
scope.projectedPoints = _.map(scope.points, function (coords) {
return scope.projection(coords);
});
//set up listener for ctrl key
//scope.svg
//Overlay is used so that the entire map is draggable, not just the locations
//where countries are
scope.svg.select(".overlay").remove();
scope.svg.append("rect")
......@@ -421,12 +381,11 @@ angular.module('kibana.map2', [])
.attr("height", height)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
//Draw the countries, if this is a choropleth, draw with fancy colors
var countryPath = scope.g.selectAll(".land")
.data(scope.countries);
countryPath.enter().append("path")
.attr("class", function(d) {
if (scope.panel.display.choropleth.enabled) {
......@@ -450,9 +409,10 @@ angular.module('kibana.map2', [])
//If this is a sphere, set up drag and keypress listeners
//@todo implement a global "keypress service", since this fails if there are >1 spheres
if (scope.panel.display.data.type === 'orthographic') {
//set up some key listeners for our sphere dragging
window.focus();
d3.select(window)
.on("keydown", function() {
......@@ -465,35 +425,32 @@ angular.module('kibana.map2', [])
scope.svg.style("cursor", "move")
.call(d3.behavior.drag()
.origin(function() { var rotate = projection.rotate(); return {x: 2 * rotate[0], y: -2 * rotate[1]}; })
.origin(function() { var rotate = scope.projection.rotate(); return {x: 2 * rotate[0], y: -2 * rotate[1]}; })
.on("drag", function() {
if ( scope.ctrlKey) {
projection.rotate([d3.event.x / 2, -d3.event.y / 2, projection.rotate()[2]]);
scope.projection.rotate([d3.event.x / 2, -d3.event.y / 2, scope.projection.rotate()[2]]);
scope.svg.selectAll("path").attr("d", path);
//displayBinning(scope, dimensions, projection, path);
}
}));
}
/**
* Display Options
* Display option rendering
* Order is important to render order here!
*/
//Hexagonal Binning
//@todo fix this
var dimensions = [width, height];
displayBinning(scope, dimensions, scope.projection, path);
displayBinning(scope, dimensions);
displayGeopoints(scope, path);
displayBullseye(scope, scope.projection, path);
displayBullseye(scope, path);
//d3.select(elem[0]).select(".loading").remove();
/**
* Zoom Functionality
*/
//If the panel scale is not default (e.g. the user has moved the maps around)
//set the scale and position to the last saved config
if (scope.panel.display.scale != -1) {
scope.zoom.scale(scope.panel.display.scale).translate(scope.panel.display.translate);
scope.g.style("stroke-width", 1 / scope.panel.display.scale).attr("transform", "translate(" + scope.panel.display.translate + ") scale(" + scope.panel.display.scale + ")");
......@@ -502,6 +459,12 @@ angular.module('kibana.map2', [])
}
/**
* On D3 zoom events, pan/zoom the map
* Only applies if the ctrl-key is not pressed, so it doesn't clobber
* sphere dragging
*/
function translate_map() {
var width = $(elem[0]).width(),
......
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