Skip to content

Commit 758a35a

Browse files
author
Gerwald Tschinkel
committed
added functionality to switch between textual and visual filter representations
1 parent eb91dbb commit 758a35a

12 files changed

+205
-103
lines changed

‎Dashboard/Plugins/FilterTextVizCategory.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
(function(){
2+
3+
var TextVizCategory = {};
4+
5+
6+
TextVizCategory.initialize = function(EEXCESSObj){
7+
// load CSS
8+
// load other needed scripts (require.js is available)
9+
};
10+
11+
TextVizCategory.draw = function (allData, inputData, $container, filters, settings, e){
12+
var $vis = $container.find('.TextVizCategory');
13+
if ($vis.length == 0){
14+
$vis = $('<div class="TextVizCategory" style="text-align: center;"></div>').css('padding-top', '10px').css('padding-bottom', '10px');
15+
$container.append($vis);
16+
}
17+
18+
$vis.html(filters[0].category + ': ' + underscore(filters[0].categoryValues).join(', '));
19+
};
20+
21+
TextVizCategory.finalize = function(){
22+
};
23+
24+
PluginHandler.registerFilterVisualisation(TextVizCategory, {
25+
'displayName' : 'TestMini Category',
26+
'type' : 'category',
27+
'isTextual': true
28+
});
29+
})();

‎Dashboard/Plugins/FilterTextVizGeo.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
(function(){
2+
3+
var TextVizGeo = {};
4+
TextVizGeo.geoNamesUrl = 'http://api.geonames.org/citiesJSON?&username=eexcess&lang=en'; // &north=44.1&south=-9.9&east=-22.4&west=55.2
5+
6+
TextVizGeo.initialize = function(EEXCESSObj){
7+
// load CSS
8+
// load other needed scripts (require.js is available)
9+
};
10+
11+
TextVizGeo.draw = function (allData, inputData, $container, filters) {
12+
var $vis = $container.find('.TextVizGeo');
13+
if ($vis.length == 0){
14+
$vis = $('<div class="TextVizGeo" style="text-align: center;"></div>').css('padding-top', '10px').css('padding-bottom', '10px');
15+
$container.append($vis);
16+
}
17+
18+
var geoNamesAreaUrl = TextVizGeo.geoNamesUrl + '&north='+filters[0].to.lat+'&west='+filters[0].to.lng+'&south='+filters[0].from.lat+'&east='+filters[0].from.lng;
19+
console.log(geoNamesAreaUrl);
20+
$.ajax({
21+
url: geoNamesAreaUrl,
22+
dataType : 'jsonp',
23+
success: function(data){
24+
console.log(data);
25+
var output = underscore(data.geonames).map('name').join(', ');
26+
$vis.html(output);
27+
}
28+
});
29+
30+
if (filters[0].from != null && filters[0].to != null)
31+
$vis.html('NE: ' + filters[0].from.lat.toFixed(4) + ", " + filters[0].from.lng.toFixed(4) + " <br />SW: " + filters[0].to.lat.toFixed(4) + ", " + filters[0].to.lng.toFixed(4));
32+
else
33+
$vis.html('');
34+
};
35+
36+
TextVizGeo.finalize = function(){
37+
};
38+
39+
PluginHandler.registerFilterVisualisation(TextVizGeo, {
40+
'displayName' : 'TestMini Geo',
41+
'type' : 'geo',
42+
'isTextual': true
43+
});
44+
})();

‎Dashboard/Plugins/FilterTextVizTime.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
(function(){
2+
3+
var TextVizTime = {};
4+
5+
TextVizTime.initialize = function(EEXCESSObj){
6+
// load CSS
7+
// load other needed scripts (require.js is available)
8+
};
9+
10+
TextVizTime.draw = function (allData, inputData, $container, filters, settings) {
11+
var $vis = $container.find('.TextVizTime');
12+
if ($vis.length == 0){
13+
$vis = $('<div class="TextVizTime" style="text-align:center;"></div>').css('padding-top', '10px').css('padding-bottom', '10px');
14+
$container.append($vis);
15+
}
16+
17+
$vis.html('' + filters[0].from + " - " + filters[0].to);
18+
};
19+
20+
TextVizTime.finalize = function(){
21+
};
22+
23+
PluginHandler.registerFilterVisualisation(TextVizTime, {
24+
'displayName' : 'TestMini',
25+
'type' : 'time',
26+
'isTextual': true
27+
});
28+
})();

‎Dashboard/Plugins/FilterVisCategoryHex.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,12 @@
3939
afterInitCallback = function () { FilterVisCategoryHex.draw(allData, inputData, $container, filters, settings); };
4040
return;
4141
}
42+
43+
if (settings.textualFilterMode == 'textOnly'){
44+
FilterVisCategoryHex.drawText($container, filters);
45+
return;
46+
}
47+
4248
var base, svg, focus = null;
4349
var categoryValues = underscore(filters).map('categoryValues');
4450
var selectedData = underscore(filters).map('dataWithinFilter');
@@ -61,10 +67,24 @@
6167
}
6268
generateMiniBarElements(data, dataSet, category, selectedData, categoryValues);
6369
interactMiniBar(selectedData, category, categoryValues, data);
70+
71+
if (settings.textualFilterMode == 'textAndViz'){
72+
FilterVisCategoryHex.drawText($container, filters);
73+
}
6474
};
6575

6676
FilterVisCategoryHex.finalize = function(){
6777
};
78+
79+
FilterVisCategoryHex.drawText = function ($container, filters){
80+
var $vis = $container.find('.FilterVisCategoryHexText');
81+
if ($vis.length == 0){
82+
$vis = $('<div class="FilterVisCategoryHexText" style="text-align: center;"></div>').css('padding-top', '10px').css('padding-bottom', '10px');
83+
$container.append($vis);
84+
}
85+
86+
$vis.html(filters[0].category + ': ' + underscore(filters[0].categoryValues).join(', '));
87+
};
6888

6989
/*
7090
* generates the svg specific svg elements

‎Dashboard/Plugins/FilterVisTime.js

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
var GREY_LINE_COLOR = "rgb(192,192,192)";
2121
var RECTANGLE_COLOR = "rgb(0,153,255)";
2222

23-
FilterVisTime.initialize = function(EEXCESSObj){
23+
FilterVisTime.initialize = function(EEXCESSObj){
2424
var path = 'Plugins/FilterVisTimeCategoryPoints.js';
2525

2626
if(initializationFinished)
@@ -38,13 +38,19 @@
3838
}
3939
}
4040
});
41-
};
41+
};
4242

4343
FilterVisTime.draw = function (allData, inputData, $container, filters, settings) {
4444
if (!initializationFinished) {
4545
afterInitCallback = function () { FilterVisTime.draw(allData, inputData, $container, filters, settings); };
4646
return;
4747
}
48+
49+
if (settings.textualFilterMode == 'textOnly'){
50+
FilterVisTime.drawText($container, filters);
51+
return;
52+
}
53+
4854
var fromYear = settings.minYear;
4955
var toYear = settings.maxYear;
5056
var selectedData = underscore(filters).map('dataWithinFilter');
@@ -92,6 +98,20 @@
9298
appendTickNewYear(fromYear, toYear, mainframe, dataSet, noTick);
9399
}
94100
}
101+
102+
if (settings.textualFilterMode == 'textAndViz'){
103+
FilterVisTime.drawText($container, filters);
104+
}
105+
};
106+
107+
FilterVisTime.drawText = function ($container, filters) {
108+
var $vis = $container.find('.TextVizTimeText');
109+
if ($vis.length == 0){
110+
$vis = $('<div class="TextVizTimeText" style="text-align:center;"></div>').css('padding-top', '10px').css('padding-bottom', '10px');
111+
$container.append($vis);
112+
}
113+
114+
$vis.html(filters[0].from + " - " + filters[0].to);
95115
};
96116

97117
function appendContainer(container, svg, focus, dataSet) {
@@ -111,10 +131,8 @@
111131
.attr("class", "FilterVisTime_focus")
112132
.attr("width", "100%")
113133
.attr("height", dataSet.newSize + OVERLAPPINGWIDTH);
114-
115134
}
116135

117-
118136
/*
119137
* generates all basic container and svg elements, which are needed
120138
*/
@@ -162,9 +180,7 @@
162180
.style("stroke", RECTANGLE_COLOR);
163181
}
164182
}
165-
/*
166-
*
167-
*/
183+
168184
function appendLines(svg, focus, category, dataSet) {
169185
dataSet.lines.forEach(function (d, i) {
170186
focus.append("line")

‎Dashboard/Plugins/FilterVizGeo.js

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
//var d3 = d3 || {};
55
var path, zoom, afterInitCallback, width, height, svg, projection, selectedArea;
66
var initializationFinished = false;
7+
8+
FilterVizGeo.geoNamesUrl = 'http://api.geonames.org/citiesJSON?&username=eexcess&lang=en'; // &north=44.1&south=-9.9&east=-22.4&west=55.2
79

810
FilterVizGeo.initialize = function (EEXCESSObj) {
911
path = 'libs/topojson.min.js';
@@ -19,23 +21,33 @@
1921
});
2022
};
2123

22-
//FilterVizGeo.draw = function (allData, selectedData, inputData, $container, category, categoryValues, northEast, southWest) {
23-
FilterVizGeo.draw = function (allData, inputData, $container, filters) {
24+
FilterVizGeo.draw = function (allData, inputData, $container, filters, settings) {
2425

2526
var $vis = $container.find('.FilterVizGeo');
2627
if ($vis.length == 0) {
2728
$vis = $('<div class="FilterVizGeo"></div>');
2829
$container.append($vis);
2930
}
31+
3032
width = $vis.width();
3133
height = width * 0.6;
3234
$vis.height(height); // its important to set the height before the callback delay, because otherwise
3335

3436
if (!initializationFinished) {
35-
afterInitCallback = function () { FilterVizGeo.draw(allData, inputData, $container, filters); };
37+
afterInitCallback = function () { FilterVizGeo.draw(allData, inputData, $container, filters, settings); };
38+
return;
39+
}
40+
41+
if (settings.textualFilterMode == 'textOnly'){
42+
FilterVizGeo.drawText($container, filters);
43+
$vis.height(0);
3644
return;
3745
}
3846

47+
if (settings.textualFilterMode == 'textAndViz'){
48+
FilterVizGeo.drawText($container, filters);
49+
}
50+
3951
// todo: show filters
4052
// filters[i].from = northEast
4153
// filters[i].to = southWest
@@ -136,7 +148,7 @@
136148

137149
svg.attr("width", width)
138150
.attr("height", height);
139-
151+
140152
// selectedBrush.attr("x", 1);
141153
// selectedBrush.attr("y", 1);
142154
// selectedBrush.attr("width", 100);
@@ -231,6 +243,31 @@
231243
}
232244
}
233245

246+
FilterVizGeo.drawText = function ($container, filters) {
247+
var $vis = $container.find('.FilterVizGeoText');
248+
if ($vis.length == 0){
249+
$vis = $('<div class="FilterVizGeoText" style="text-align: center;"></div>').css('padding-top', '10px').css('padding-bottom', '10px');
250+
$container.append($vis);
251+
}
252+
253+
var geoNamesAreaUrl = FilterVizGeo.geoNamesUrl + '&north='+filters[0].to.lat+'&west='+filters[0].to.lng+'&south='+filters[0].from.lat+'&east='+filters[0].from.lng;
254+
console.log('call geonames:', geoNamesAreaUrl);
255+
$.ajax({
256+
url: geoNamesAreaUrl,
257+
dataType : 'jsonp',
258+
success: function(data){
259+
console.log('data received from geonames', data);
260+
var output = underscore(data.geonames).map('name').join(', ');
261+
$vis.html(output);
262+
}
263+
});
264+
265+
if (filters[0].from != null && filters[0].to != null)
266+
$vis.html('NE: ' + filters[0].from.lat.toFixed(4) + ", " + filters[0].from.lng.toFixed(4) + " <br />SW: " + filters[0].to.lat.toFixed(4) + ", " + filters[0].to.lng.toFixed(4));
267+
else
268+
$vis.html('');
269+
};
270+
234271
function addOnCtrlPressedEvent() {
235272
d3.select(window)
236273
.on('keydown', function () {

‎Dashboard/Plugins/TestMiniVizCategory.js

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎Dashboard/Plugins/TestMiniVizGeo.js

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎Dashboard/Plugins/TestMiniVizTime.js

Lines changed: 0 additions & 27 deletions
This file was deleted.

0 commit comments

Comments
 (0)