|
|
@@ -1,489 +1,489 @@
|
|
|
angular.module('kibana.map2', [])
|
|
|
- .controller('map2', function ($scope, eventBus, keylistener) {
|
|
|
-
|
|
|
- // Set and populate defaults
|
|
|
- var _d = {
|
|
|
- query: "*",
|
|
|
- map: "world",
|
|
|
- colors: ['#C8EEFF', '#0071A4'],
|
|
|
- size: 100,
|
|
|
- exclude: [],
|
|
|
- spyable: true,
|
|
|
- group: "default",
|
|
|
- index_limit: 0,
|
|
|
- display: {
|
|
|
- translate:[0, 0],
|
|
|
- scale:-1,
|
|
|
- data: {
|
|
|
- samples: 1000,
|
|
|
- type: "mercator"
|
|
|
- },
|
|
|
- geopoints: {
|
|
|
- enabled: false,
|
|
|
- enabledText: "Enabled",
|
|
|
- pointSize: 0.3,
|
|
|
- pointAlpha: 0.6
|
|
|
- },
|
|
|
- binning: {
|
|
|
- enabled: false,
|
|
|
- hexagonSize: 2,
|
|
|
- hexagonAlpha: 1.0,
|
|
|
- areaEncoding: true,
|
|
|
- areaEncodingField: "primary",
|
|
|
- colorEncoding: true,
|
|
|
- colorEncodingField: "primary"
|
|
|
- },
|
|
|
- choropleth: {
|
|
|
- enabled: false
|
|
|
- },
|
|
|
- bullseye: {
|
|
|
- enabled: false,
|
|
|
- coord: {
|
|
|
- lat: 0,
|
|
|
- lon: 0
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- activeDisplayTab:"Geopoints"
|
|
|
- };
|
|
|
-
|
|
|
- _.defaults($scope.panel, _d)
|
|
|
-
|
|
|
- $scope.init = function () {
|
|
|
- eventBus.register($scope, 'time', function (event, time) {
|
|
|
- set_time(time)
|
|
|
- });
|
|
|
- eventBus.register($scope, 'query', function (event, query) {
|
|
|
- $scope.panel.query = _.isArray(query) ? query[0] : query;
|
|
|
- $scope.get_data();
|
|
|
- });
|
|
|
- // Now that we're all setup, request the time from our group
|
|
|
- eventBus.broadcast($scope.$id, $scope.panel.group, 'get_time');
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- };
|
|
|
-
|
|
|
- $scope.get_data = function () {
|
|
|
-
|
|
|
- // Make sure we have everything for the request to complete
|
|
|
- if (_.isUndefined($scope.panel.index) || _.isUndefined($scope.time))
|
|
|
- return
|
|
|
-
|
|
|
- $scope.panel.loading = true;
|
|
|
- var request = $scope.ejs.Request().indices($scope.panel.index);
|
|
|
-
|
|
|
-
|
|
|
- var metric = 'count';
|
|
|
-
|
|
|
- //Use a regular term facet if there is no secondary field
|
|
|
- if (typeof $scope.panel.secondaryfield === "undefined") {
|
|
|
- var facet = $scope.ejs.TermsFacet('map')
|
|
|
- .field($scope.panel.field)
|
|
|
- .size($scope.panel.display.data.samples)
|
|
|
- .exclude($scope.panel.exclude)
|
|
|
- .facetFilter(ejs.QueryFilter(
|
|
|
- ejs.FilteredQuery(
|
|
|
- ejs.QueryStringQuery($scope.panel.query || '*'),
|
|
|
- ejs.RangeFilter($scope.time.field)
|
|
|
- .from($scope.time.from)
|
|
|
- .to($scope.time.to))));
|
|
|
-
|
|
|
- metric = 'count';
|
|
|
- } else {
|
|
|
- //otherwise, use term stats
|
|
|
- //NOTE: this will break if valueField is a geo_point
|
|
|
- // need to put in checks for that
|
|
|
- var facet = $scope.ejs.TermStatsFacet('map')
|
|
|
- .keyField($scope.panel.field)
|
|
|
- .valueField($scope.panel.secondaryfield)
|
|
|
- .size($scope.panel.display.data.samples)
|
|
|
- .facetFilter(ejs.QueryFilter(
|
|
|
- ejs.FilteredQuery(
|
|
|
- ejs.QueryStringQuery($scope.panel.query || '*'),
|
|
|
- ejs.RangeFilter($scope.time.field)
|
|
|
- .from($scope.time.from)
|
|
|
- .to($scope.time.to))));
|
|
|
-
|
|
|
- metric = 'total';
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- // Then the insert into facet and make the request
|
|
|
- var request = request.facet(facet).size(0);
|
|
|
-
|
|
|
- $scope.populate_modal(request);
|
|
|
-
|
|
|
- var results = request.doSearch();
|
|
|
-
|
|
|
- // Populate scope when we have results
|
|
|
- results.then(function (results) {
|
|
|
- $scope.panel.loading = false;
|
|
|
- $scope.hits = results.hits.total;
|
|
|
- $scope.data = {};
|
|
|
-
|
|
|
- _.each(results.facets.map.terms, function (v) {
|
|
|
-
|
|
|
- if (!_.isNumber(v.term)) {
|
|
|
- $scope.data[v.term.toUpperCase()] = v[metric];
|
|
|
- } else {
|
|
|
- $scope.data[v.term] = v[metric];
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- $scope.$emit('render')
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- // I really don't like this function, too much dom manip. Break out into directive?
|
|
|
- $scope.populate_modal = function (request) {
|
|
|
- $scope.modal = {
|
|
|
- title: "Inspector",
|
|
|
- body: "<h5>Last Elasticsearch Query</h5><pre>" + 'curl -XGET ' + config.elasticsearch + '/' + $scope.panel.index + "/_search?pretty -d'\n" + angular.toJson(JSON.parse(request.toString()), true) + "'</pre>"
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- function set_time(time) {
|
|
|
- $scope.time = time;
|
|
|
- $scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index
|
|
|
- $scope.get_data();
|
|
|
+ .controller('map2', function ($scope, eventBus, keylistener) {
|
|
|
+
|
|
|
+ // Set and populate defaults
|
|
|
+ var _d = {
|
|
|
+ query: "*",
|
|
|
+ map: "world",
|
|
|
+ colors: ['#C8EEFF', '#0071A4'],
|
|
|
+ size: 100,
|
|
|
+ exclude: [],
|
|
|
+ spyable: true,
|
|
|
+ group: "default",
|
|
|
+ index_limit: 0,
|
|
|
+ display: {
|
|
|
+ translate:[0, 0],
|
|
|
+ scale:-1,
|
|
|
+ data: {
|
|
|
+ samples: 1000,
|
|
|
+ type: "mercator"
|
|
|
+ },
|
|
|
+ geopoints: {
|
|
|
+ enabled: false,
|
|
|
+ enabledText: "Enabled",
|
|
|
+ pointSize: 0.3,
|
|
|
+ pointAlpha: 0.6
|
|
|
+ },
|
|
|
+ binning: {
|
|
|
+ enabled: false,
|
|
|
+ hexagonSize: 2,
|
|
|
+ hexagonAlpha: 1.0,
|
|
|
+ areaEncoding: true,
|
|
|
+ areaEncodingField: "primary",
|
|
|
+ colorEncoding: true,
|
|
|
+ colorEncodingField: "primary"
|
|
|
+ },
|
|
|
+ choropleth: {
|
|
|
+ enabled: false
|
|
|
+ },
|
|
|
+ bullseye: {
|
|
|
+ enabled: false,
|
|
|
+ coord: {
|
|
|
+ lat: 0,
|
|
|
+ lon: 0
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- $scope.build_search = function (field, value) {
|
|
|
- $scope.panel.query = add_to_query($scope.panel.query, field, value, false)
|
|
|
- $scope.get_data();
|
|
|
- eventBus.broadcast($scope.$id, $scope.panel.group, 'query', $scope.panel.query);
|
|
|
+ },
|
|
|
+ activeDisplayTab:"Geopoints"
|
|
|
+ };
|
|
|
+
|
|
|
+ _.defaults($scope.panel, _d)
|
|
|
+
|
|
|
+ $scope.init = function () {
|
|
|
+ eventBus.register($scope, 'time', function (event, time) {
|
|
|
+ set_time(time)
|
|
|
+ });
|
|
|
+ eventBus.register($scope, 'query', function (event, query) {
|
|
|
+ $scope.panel.query = _.isArray(query) ? query[0] : query;
|
|
|
+ $scope.get_data();
|
|
|
+ });
|
|
|
+ // Now that we're all setup, request the time from our group
|
|
|
+ eventBus.broadcast($scope.$id, $scope.panel.group, 'get_time');
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ $scope.get_data = function () {
|
|
|
+
|
|
|
+ // Make sure we have everything for the request to complete
|
|
|
+ if (_.isUndefined($scope.panel.index) || _.isUndefined($scope.time))
|
|
|
+ return
|
|
|
+
|
|
|
+ $scope.panel.loading = true;
|
|
|
+ var request = $scope.ejs.Request().indices($scope.panel.index);
|
|
|
+
|
|
|
+
|
|
|
+ var metric = 'count';
|
|
|
+
|
|
|
+ //Use a regular term facet if there is no secondary field
|
|
|
+ if (typeof $scope.panel.secondaryfield === "undefined") {
|
|
|
+ var facet = $scope.ejs.TermsFacet('map')
|
|
|
+ .field($scope.panel.field)
|
|
|
+ .size($scope.panel.display.data.samples)
|
|
|
+ .exclude($scope.panel.exclude)
|
|
|
+ .facetFilter(ejs.QueryFilter(
|
|
|
+ ejs.FilteredQuery(
|
|
|
+ ejs.QueryStringQuery($scope.panel.query || '*'),
|
|
|
+ ejs.RangeFilter($scope.time.field)
|
|
|
+ .from($scope.time.from)
|
|
|
+ .to($scope.time.to))));
|
|
|
+
|
|
|
+ metric = 'count';
|
|
|
+ } else {
|
|
|
+ //otherwise, use term stats
|
|
|
+ //NOTE: this will break if valueField is a geo_point
|
|
|
+ // need to put in checks for that
|
|
|
+ var facet = $scope.ejs.TermStatsFacet('map')
|
|
|
+ .keyField($scope.panel.field)
|
|
|
+ .valueField($scope.panel.secondaryfield)
|
|
|
+ .size($scope.panel.display.data.samples)
|
|
|
+ .facetFilter(ejs.QueryFilter(
|
|
|
+ ejs.FilteredQuery(
|
|
|
+ ejs.QueryStringQuery($scope.panel.query || '*'),
|
|
|
+ ejs.RangeFilter($scope.time.field)
|
|
|
+ .from($scope.time.from)
|
|
|
+ .to($scope.time.to))));
|
|
|
+
|
|
|
+ metric = 'total';
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // Then the insert into facet and make the request
|
|
|
+ var request = request.facet(facet).size(0);
|
|
|
+
|
|
|
+ $scope.populate_modal(request);
|
|
|
+
|
|
|
+ var results = request.doSearch();
|
|
|
+
|
|
|
+ // Populate scope when we have results
|
|
|
+ results.then(function (results) {
|
|
|
+ $scope.panel.loading = false;
|
|
|
+ $scope.hits = results.hits.total;
|
|
|
+ $scope.data = {};
|
|
|
+
|
|
|
+ _.each(results.facets.map.terms, function (v) {
|
|
|
+
|
|
|
+ if (!_.isNumber(v.term)) {
|
|
|
+ $scope.data[v.term.toUpperCase()] = v[metric];
|
|
|
+ } else {
|
|
|
+ $scope.data[v.term] = v[metric];
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ $scope.$emit('render')
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ // I really don't like this function, too much dom manip. Break out into directive?
|
|
|
+ $scope.populate_modal = function (request) {
|
|
|
+ $scope.modal = {
|
|
|
+ title: "Inspector",
|
|
|
+ body: "<h5>Last Elasticsearch Query</h5><pre>" + 'curl -XGET ' + config.elasticsearch + '/' + $scope.panel.index + "/_search?pretty -d'\n" + angular.toJson(JSON.parse(request.toString()), true) + "'</pre>"
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ function set_time(time) {
|
|
|
+ $scope.time = time;
|
|
|
+ $scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index
|
|
|
+ $scope.get_data();
|
|
|
+ }
|
|
|
+
|
|
|
+ $scope.build_search = function (field, value) {
|
|
|
+ $scope.panel.query = add_to_query($scope.panel.query, field, value, false)
|
|
|
+ $scope.get_data();
|
|
|
+ eventBus.broadcast($scope.$id, $scope.panel.group, 'query', $scope.panel.query);
|
|
|
+ };
|
|
|
+
|
|
|
+ $scope.isActive = function(tab) {
|
|
|
+ return (tab.toLowerCase() === $scope.panel.activeDisplayTab.toLowerCase());
|
|
|
+ }
|
|
|
+
|
|
|
+ $scope.tabClick = function(tab) {
|
|
|
+ $scope.panel.activeDisplayTab = tab;
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ .filter('enabledText', function() {
|
|
|
+ return function (value) {
|
|
|
+ if (value === true) {
|
|
|
+ return "Enabled";
|
|
|
+ } else {
|
|
|
+ return "Disabled";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .directive('map2', function () {
|
|
|
+ return {
|
|
|
+ restrict: 'A',
|
|
|
+ link: function (scope, elem, attrs) {
|
|
|
+
|
|
|
+
|
|
|
+ //elem.html('')
|
|
|
+ scope.initializing = false;
|
|
|
+ scope.worldData = null;
|
|
|
+ scope.worldNames = null;
|
|
|
+
|
|
|
+ scope.ctrlKey = false;
|
|
|
+
|
|
|
+ //These are various options that should not be cached in scope.panel
|
|
|
+ scope.options = {
|
|
|
+
|
|
|
+ data: {
|
|
|
+ dropdown:[
|
|
|
+ {
|
|
|
+ "text": "Mercator (Flat)",
|
|
|
+ id: "mercator"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "Orthographic (Sphere)",
|
|
|
+ id: "orthographic"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
- $scope.isActive = function(tab) {
|
|
|
- return (tab.toLowerCase() === $scope.panel.activeDisplayTab.toLowerCase());
|
|
|
- }
|
|
|
|
|
|
- $scope.tabClick = function(tab) {
|
|
|
- $scope.panel.activeDisplayTab = tab;
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * Initialize the panels if new, or render existing panels
|
|
|
+ */
|
|
|
+ scope.init_or_render = function() {
|
|
|
+ if (typeof scope.svg === 'undefined') {
|
|
|
+ console.log("init");
|
|
|
|
|
|
- })
|
|
|
- .filter('enabledText', function() {
|
|
|
- return function (value) {
|
|
|
- if (value === true) {
|
|
|
- return "Enabled";
|
|
|
- } else {
|
|
|
- return "Disabled";
|
|
|
+ //prevent duplicate initialization steps, if render is called again
|
|
|
+ //before the svg is setup
|
|
|
+ if (!scope.initializing) {
|
|
|
+ init_panel();
|
|
|
}
|
|
|
- }
|
|
|
- })
|
|
|
- .directive('map2', function () {
|
|
|
- return {
|
|
|
- restrict: 'A',
|
|
|
- link: function (scope, elem, attrs) {
|
|
|
-
|
|
|
+ } else {
|
|
|
+ console.log("render");
|
|
|
+ render_panel();
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- //elem.html('')
|
|
|
- scope.initializing = false;
|
|
|
- scope.worldData = null;
|
|
|
- scope.worldNames = null;
|
|
|
-
|
|
|
- scope.ctrlKey = false;
|
|
|
-
|
|
|
- //These are various options that should not be cached in scope.panel
|
|
|
- scope.options = {
|
|
|
-
|
|
|
- data: {
|
|
|
- dropdown:[
|
|
|
- {
|
|
|
- "text": "Mercator (Flat)",
|
|
|
- id: "mercator"
|
|
|
- },
|
|
|
- {
|
|
|
- text: "Orthographic (Sphere)",
|
|
|
- id: "orthographic"
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
- * Initialize the panels if new, or render existing panels
|
|
|
- */
|
|
|
- scope.init_or_render = function() {
|
|
|
- if (typeof scope.svg === 'undefined') {
|
|
|
- console.log("init");
|
|
|
-
|
|
|
- //prevent duplicate initialization steps, if render is called again
|
|
|
- //before the svg is setup
|
|
|
- if (!scope.initializing) {
|
|
|
- init_panel();
|
|
|
- }
|
|
|
- } else {
|
|
|
- console.log("render");
|
|
|
- render_panel();
|
|
|
- }
|
|
|
- };
|
|
|
|
|
|
+ /**
|
|
|
+ * Receive render events
|
|
|
+ */
|
|
|
+ scope.$on('render', function () {
|
|
|
+ scope.init_or_render();
|
|
|
+ });
|
|
|
|
|
|
- /**
|
|
|
- * Receive render events
|
|
|
- */
|
|
|
- scope.$on('render', function () {
|
|
|
- scope.init_or_render();
|
|
|
- });
|
|
|
+ /**
|
|
|
+ * On window resize, re-render the panel
|
|
|
+ */
|
|
|
+ angular.element(window).bind('resize', function () {
|
|
|
+ scope.init_or_render();
|
|
|
+ });
|
|
|
|
|
|
- /**
|
|
|
- * On window resize, re-render the panel
|
|
|
- */
|
|
|
- angular.element(window).bind('resize', function () {
|
|
|
- scope.init_or_render();
|
|
|
- });
|
|
|
|
|
|
+ /**
|
|
|
+ * Load the various panel-specific scripts, map data, then initialize
|
|
|
+ * the svg and set appropriate D3 settings
|
|
|
+ */
|
|
|
+ function init_panel() {
|
|
|
|
|
|
- /**
|
|
|
- * Load the various panel-specific scripts, map data, then initialize
|
|
|
- * the svg and set appropriate D3 settings
|
|
|
- */
|
|
|
- function init_panel() {
|
|
|
+ scope.initializing = true;
|
|
|
+ // Using LABjs, wait until all scripts are loaded before rendering panel
|
|
|
+ var scripts = $LAB.script("common/lib/d3.v3.min.js?rand="+Math.floor(Math.random()*10000))
|
|
|
+ .script("panels/map2/lib/topojson.v1.min.js?rand="+Math.floor(Math.random()*10000))
|
|
|
+ .script("panels/map2/lib/node-geohash.js?rand="+Math.floor(Math.random()*10000))
|
|
|
+ .script("panels/map2/lib/d3.hexbin.v0.min.js?rand="+Math.floor(Math.random()*10000))
|
|
|
+ .script("panels/map2/lib/queue.v1.min.js?rand="+Math.floor(Math.random()*10000))
|
|
|
+ .script("panels/map2/display/binning.js?rand="+Math.floor(Math.random()*10000))
|
|
|
+ .script("panels/map2/display/geopoints.js?rand="+Math.floor(Math.random()*10000))
|
|
|
+ .script("panels/map2/display/bullseye.js?rand="+Math.floor(Math.random()*10000));
|
|
|
|
|
|
- scope.initializing = true;
|
|
|
- // Using LABjs, wait until all scripts are loaded before rendering panel
|
|
|
- var scripts = $LAB.script("panels/map2/lib/d3.v3.min.js?rand="+Math.floor(Math.random()*10000))
|
|
|
- .script("panels/map2/lib/topojson.v1.min.js?rand="+Math.floor(Math.random()*10000))
|
|
|
- .script("panels/map2/lib/node-geohash.js?rand="+Math.floor(Math.random()*10000))
|
|
|
- .script("panels/map2/lib/d3.hexbin.v0.min.js?rand="+Math.floor(Math.random()*10000))
|
|
|
- .script("panels/map2/lib/queue.v1.min.js?rand="+Math.floor(Math.random()*10000))
|
|
|
- .script("panels/map2/display/binning.js?rand="+Math.floor(Math.random()*10000))
|
|
|
- .script("panels/map2/display/geopoints.js?rand="+Math.floor(Math.random()*10000))
|
|
|
- .script("panels/map2/display/bullseye.js?rand="+Math.floor(Math.random()*10000));
|
|
|
+ // Populate element. Note that jvectormap appends, does not replace.
|
|
|
+ scripts.wait(function () {
|
|
|
|
|
|
- // Populate element. Note that jvectormap appends, does not replace.
|
|
|
- scripts.wait(function () {
|
|
|
+ queue()
|
|
|
+ .defer(d3.json, "panels/map2/lib/world-110m.json")
|
|
|
+ .defer(d3.tsv, "panels/map2/lib/world-country-names.tsv")
|
|
|
+ .await(function(error, world, names) {
|
|
|
+ scope.worldData = world;
|
|
|
+ scope.worldNames = names;
|
|
|
|
|
|
- queue()
|
|
|
- .defer(d3.json, "panels/map2/lib/world-110m.json")
|
|
|
- .defer(d3.tsv, "panels/map2/lib/world-country-names.tsv")
|
|
|
- .await(function(error, world, names) {
|
|
|
- scope.worldData = world;
|
|
|
- scope.worldNames = names;
|
|
|
|
|
|
+ //Better way to get these values? Seems kludgy to use jQuery on the div...
|
|
|
+ var width = $(elem[0]).width(),
|
|
|
+ height = $(elem[0]).height();
|
|
|
|
|
|
- //Better way to get these values? Seems kludgy to use jQuery on the div...
|
|
|
- var width = $(elem[0]).width(),
|
|
|
- height = $(elem[0]).height();
|
|
|
|
|
|
+ //scale to whichever dimension is smaller, helps to ensure the whole map is displayed
|
|
|
+ scope.scale = (width > height) ? (height/5) : (width/5);
|
|
|
|
|
|
- //scale to whichever dimension is smaller, helps to ensure the whole map is displayed
|
|
|
- scope.scale = (width > height) ? (height/5) : (width/5);
|
|
|
|
|
|
+ scope.zoom = d3.behavior.zoom()
|
|
|
+ .scaleExtent([1, 8])
|
|
|
+ .on("zoom", translate_map);
|
|
|
|
|
|
- scope.zoom = d3.behavior.zoom()
|
|
|
- .scaleExtent([1, 8])
|
|
|
- .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); }));
|
|
|
|
|
|
- //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); }));
|
|
|
|
|
|
+ //Extract name and two-letter codes for our countries
|
|
|
+ scope.countries = topojson.feature(scope.worldData, scope.worldData.objects.countries).features;
|
|
|
|
|
|
- //Extract name and two-letter codes for our countries
|
|
|
- scope.countries = topojson.feature(scope.worldData, scope.worldData.objects.countries).features;
|
|
|
+ scope.countries = scope.countries.filter(function(d) {
|
|
|
+ return scope.worldNames.some(function(n) {
|
|
|
+ if (d.id == n.id) {
|
|
|
+ d.name = n.name;
|
|
|
+ return d.short = n.short;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }).sort(function(a, b) {
|
|
|
+ return a.name.localeCompare(b.name);
|
|
|
+ });
|
|
|
|
|
|
- scope.countries = scope.countries.filter(function(d) {
|
|
|
- return scope.worldNames.some(function(n) {
|
|
|
- if (d.id == n.id) {
|
|
|
- d.name = n.name;
|
|
|
- return d.short = n.short;
|
|
|
- }
|
|
|
- });
|
|
|
- }).sort(function(a, b) {
|
|
|
- return a.name.localeCompare(b.name);
|
|
|
- });
|
|
|
|
|
|
+ //create the new svg
|
|
|
+ scope.svg = d3.select(elem[0]).append("svg")
|
|
|
+ .attr("width", "100%")
|
|
|
+ .attr("height", "100%")
|
|
|
+ .attr("viewBox", "0 0 " + width + " " + height)
|
|
|
+ .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
|
|
|
+ .call(scope.zoom);
|
|
|
+ scope.g = scope.svg.append("g");
|
|
|
|
|
|
- //create the new svg
|
|
|
- scope.svg = d3.select(elem[0]).append("svg")
|
|
|
- .attr("width", "100%")
|
|
|
- .attr("height", "100%")
|
|
|
- .attr("viewBox", "0 0 " + width + " " + height)
|
|
|
- .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
|
|
|
- .call(scope.zoom);
|
|
|
- scope.g = scope.svg.append("g");
|
|
|
|
|
|
+ scope.initializing = false;
|
|
|
+ render_panel();
|
|
|
+ });
|
|
|
+ });
|
|
|
|
|
|
- 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() {
|
|
|
|
|
|
- /**
|
|
|
- * Render updates to the SVG. Typically happens when the data changes (time, query)
|
|
|
- * or when new options are selected
|
|
|
- */
|
|
|
- function render_panel() {
|
|
|
-
|
|
|
- var width = $(elem[0]).width(),
|
|
|
- height = $(elem[0]).height();
|
|
|
+ var width = $(elem[0]).width(),
|
|
|
+ height = $(elem[0]).height();
|
|
|
|
|
|
|
|
|
- //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);
|
|
|
+ //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);
|
|
|
+ } else if (scope.panel.display.data.type === 'orthographic') {
|
|
|
+ scope.projection = d3.geo.orthographic()
|
|
|
+ .translate([width/2, height/2])
|
|
|
+ .scale(100)
|
|
|
+ .clipAngle(90);
|
|
|
|
|
|
- //recenters the sphere more towards the US...not really necessary
|
|
|
- scope.projection.rotate([100 / 2, 20 / 2, scope.projection.rotate()[2]]);
|
|
|
+ //recenters the sphere more towards the US...not really necessary
|
|
|
+ scope.projection.rotate([100 / 2, 20 / 2, scope.projection.rotate()[2]]);
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- var path = d3.geo.path()
|
|
|
- .projection(scope.projection);
|
|
|
+ var path = d3.geo.path()
|
|
|
+ .projection(scope.projection);
|
|
|
|
|
|
|
|
|
- //Special fix for when the user changes from mercator -> orthographic
|
|
|
- //The globe won't redraw automatically, we need to force it
|
|
|
- if (scope.panel.display.data.type === 'orthographic') {
|
|
|
- scope.svg.selectAll("path").attr("d", path);
|
|
|
- }
|
|
|
+ //Special fix for when the user changes from mercator -> orthographic
|
|
|
+ //The globe won't redraw automatically, we need to force it
|
|
|
+ if (scope.panel.display.data.type === 'orthographic') {
|
|
|
+ scope.svg.selectAll("path").attr("d", path);
|
|
|
+ }
|
|
|
|
|
|
- console.log(scope.data);
|
|
|
+ console.log(scope.data);
|
|
|
|
|
|
- //Geocoded points are decoded into lonlat
|
|
|
- scope.points = _.map(scope.data, function (k, v) {
|
|
|
- //console.log(k,v);
|
|
|
- var decoded = geohash.decode(v);
|
|
|
- return [decoded.longitude, decoded.latitude];
|
|
|
- });
|
|
|
+ //Geocoded points are decoded into lonlat
|
|
|
+ scope.points = _.map(scope.data, function (k, v) {
|
|
|
+ //console.log(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);
|
|
|
- });
|
|
|
+ //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);
|
|
|
+ });
|
|
|
|
|
|
|
|
|
|
|
|
- scope.svg.select(".overlay").remove();
|
|
|
+ scope.svg.select(".overlay").remove();
|
|
|
|
|
|
- scope.svg.append("rect")
|
|
|
- .attr("class", "overlay")
|
|
|
- .attr("width", width)
|
|
|
- .attr("height", height)
|
|
|
- .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
|
|
|
+ scope.svg.append("rect")
|
|
|
+ .attr("class", "overlay")
|
|
|
+ .attr("width", width)
|
|
|
+ .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);
|
|
|
+ //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) {
|
|
|
- return 'land ' + scope.quantize(scope.data[d.short]);
|
|
|
- } else {
|
|
|
- return 'land';
|
|
|
- }
|
|
|
- })
|
|
|
- .attr("d", path);
|
|
|
+ countryPath.enter().append("path")
|
|
|
+ .attr("class", function(d) {
|
|
|
+ if (scope.panel.display.choropleth.enabled) {
|
|
|
+ return 'land ' + scope.quantize(scope.data[d.short]);
|
|
|
+ } else {
|
|
|
+ return 'land';
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .attr("d", path);
|
|
|
|
|
|
- countryPath.exit().remove();
|
|
|
+ countryPath.exit().remove();
|
|
|
|
|
|
|
|
|
- /*
|
|
|
- //draw boundaries
|
|
|
- scope.g.selectAll("land").append("path")
|
|
|
- .datum(topojson.mesh(scope.worldData, scope.worldData.objects.land, function(a, b) { return a !== b; }))
|
|
|
- .attr("class", "land boundary")
|
|
|
- .attr("d", path);
|
|
|
- */
|
|
|
+ /*
|
|
|
+ //draw boundaries
|
|
|
+ scope.g.selectAll("land").append("path")
|
|
|
+ .datum(topojson.mesh(scope.worldData, scope.worldData.objects.land, function(a, b) { return a !== b; }))
|
|
|
+ .attr("class", "land boundary")
|
|
|
+ .attr("d", path);
|
|
|
+ */
|
|
|
|
|
|
|
|
|
|
|
|
- //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') {
|
|
|
+ //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') {
|
|
|
|
|
|
- //scope.svg.focus();
|
|
|
- /*
|
|
|
- scope.svg.selectAll(".overlay")
|
|
|
- .on("keydown", function() {
|
|
|
- scope.ctrlKey = d3.event.ctrlKey;
|
|
|
- })
|
|
|
- .on("keyup", function() {
|
|
|
- scope.ctrlKey = d3.event.ctrlKey;
|
|
|
- });
|
|
|
-*/
|
|
|
+ //scope.svg.focus();
|
|
|
+ /*
|
|
|
+ scope.svg.selectAll(".overlay")
|
|
|
+ .on("keydown", function() {
|
|
|
+ scope.ctrlKey = d3.event.ctrlKey;
|
|
|
+ })
|
|
|
+ .on("keyup", function() {
|
|
|
+ scope.ctrlKey = d3.event.ctrlKey;
|
|
|
+ });
|
|
|
+ */
|
|
|
|
|
|
|
|
|
- scope.svg.style("cursor", "move")
|
|
|
- .call(d3.behavior.drag()
|
|
|
- .origin(function() { var rotate = scope.projection.rotate(); return {x: 2 * rotate[0], y: -2 * rotate[1]}; })
|
|
|
- .on("drag", function() {
|
|
|
- if ( scope.ctrlKey) {
|
|
|
- scope.projection.rotate([d3.event.x / 2, -d3.event.y / 2, scope.projection.rotate()[2]]);
|
|
|
- scope.svg.selectAll("path").attr("d", path);
|
|
|
- }
|
|
|
- }));
|
|
|
- }
|
|
|
+ scope.svg.style("cursor", "move")
|
|
|
+ .call(d3.behavior.drag()
|
|
|
+ .origin(function() { var rotate = scope.projection.rotate(); return {x: 2 * rotate[0], y: -2 * rotate[1]}; })
|
|
|
+ .on("drag", function() {
|
|
|
+ if ( scope.ctrlKey) {
|
|
|
+ scope.projection.rotate([d3.event.x / 2, -d3.event.y / 2, scope.projection.rotate()[2]]);
|
|
|
+ scope.svg.selectAll("path").attr("d", path);
|
|
|
+ }
|
|
|
+ }));
|
|
|
+ }
|
|
|
|
|
|
|
|
|
- /**
|
|
|
- * Display option rendering
|
|
|
- * Order is important to render order here!
|
|
|
- */
|
|
|
+ /**
|
|
|
+ * Display option rendering
|
|
|
+ * Order is important to render order here!
|
|
|
+ */
|
|
|
|
|
|
- //@todo fix this
|
|
|
- var dimensions = [width, height];
|
|
|
- displayBinning(scope, dimensions);
|
|
|
- displayGeopoints(scope, path);
|
|
|
- displayBullseye(scope, path);
|
|
|
+ //@todo fix this
|
|
|
+ var dimensions = [width, height];
|
|
|
+ displayBinning(scope, dimensions);
|
|
|
+ displayGeopoints(scope, path);
|
|
|
+ displayBullseye(scope, path);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- //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 + ")");
|
|
|
+ //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 + ")");
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
|
|
|
- /**
|
|
|
- * 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() {
|
|
|
+ /**
|
|
|
+ * 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(),
|
|
|
- height = $(elem[0]).height();
|
|
|
+ var width = $(elem[0]).width(),
|
|
|
+ height = $(elem[0]).height();
|
|
|
|
|
|
- if (! scope.ctrlKey) {
|
|
|
- var t = d3.event.translate,
|
|
|
- s = d3.event.scale;
|
|
|
- t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s), t[0]));
|
|
|
- t[1] = Math.min(height / 2 * (s - 1) + 230 * s, Math.max(height / 2 * (1 - s) - 230 * s, t[1]));
|
|
|
- scope.zoom.translate(t);
|
|
|
+ if (! scope.ctrlKey) {
|
|
|
+ var t = d3.event.translate,
|
|
|
+ s = d3.event.scale;
|
|
|
+ t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s), t[0]));
|
|
|
+ t[1] = Math.min(height / 2 * (s - 1) + 230 * s, Math.max(height / 2 * (1 - s) - 230 * s, t[1]));
|
|
|
+ scope.zoom.translate(t);
|
|
|
|
|
|
- scope.panel.display.translate = t;
|
|
|
- scope.panel.display.scale = s;
|
|
|
- scope.g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ") scale(" + s + ")");
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
- });
|
|
|
+ scope.panel.display.translate = t;
|
|
|
+ scope.panel.display.scale = s;
|
|
|
+ scope.g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ") scale(" + s + ")");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ });
|
Zachary Tong