Daniel@0
|
1 "use strict";
|
Daniel@0
|
2
|
Daniel@0
|
3 App.module("GraphicsRenderingModule", function(GraphicsRenderingModule, App, Backbone, Marionette, $, _, Logger) {
|
Daniel@0
|
4
|
Daniel@0
|
5 GraphicsRenderingModule.addInitializer(function(options){
|
Daniel@0
|
6
|
Daniel@0
|
7 GraphicsRenderingModule.registerRenderer({
|
Daniel@0
|
8 id: "similarity-plane",
|
Daniel@0
|
9 inherit: "_",
|
Daniel@0
|
10
|
Daniel@0
|
11 defaultVegaConfig: {
|
Daniel@0
|
12 comparisonMode: null,
|
Daniel@0
|
13
|
Daniel@0
|
14 symbolSize: 20,
|
Daniel@0
|
15 internalSpaceOffset: 6,
|
Daniel@0
|
16 colorForData: "#3182bd",
|
Daniel@0
|
17
|
Daniel@0
|
18 padding: {"top": 10, "left": 10, "bottom": 10, "right": 10},
|
Daniel@0
|
19 },
|
Daniel@0
|
20
|
Daniel@0
|
21
|
Daniel@0
|
22 _formVC: function(vc, data) {
|
Daniel@0
|
23 vc.enoughSpaceForAxisLabels = vc.totalWidth > 200;
|
Daniel@0
|
24 vc.width = vc.totalWidth - vc.padding.left - vc.padding.right;
|
Daniel@0
|
25 vc.height = vc.totalHeight - vc.padding.top - vc.padding.bottom;
|
Daniel@0
|
26
|
Daniel@0
|
27 var stats = {
|
Daniel@0
|
28 mds: [],
|
Daniel@0
|
29 list: []
|
Daniel@0
|
30 }
|
Daniel@0
|
31 if (data.self.stats) {
|
Daniel@0
|
32 data.self.stats = stats
|
Daniel@0
|
33 }
|
Daniel@0
|
34 var recordingCount = stats.list.length;
|
Daniel@0
|
35
|
Daniel@0
|
36 // :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
|
Daniel@0
|
37 // Data
|
Daniel@0
|
38 var mds = stats.mds;
|
Daniel@0
|
39 var list = stats.list;
|
Daniel@0
|
40
|
Daniel@0
|
41 // .............................................................
|
Daniel@0
|
42 // Data - points
|
Daniel@0
|
43 var pointsInVegaData = [];
|
Daniel@0
|
44 for (var i = 0; i < recordingCount; ++i) {
|
Daniel@0
|
45 var pointInVegaData = {
|
Daniel@0
|
46 x: mds[i][0],
|
Daniel@0
|
47 y: mds[i][1]
|
Daniel@0
|
48 };
|
Daniel@0
|
49 pointInVegaData.tooltip = list[i].label;
|
Daniel@0
|
50 // + "<br/>x: " + GraphicsRenderingModule._formatNumberForTooltip(pointInVegaData.x)
|
Daniel@0
|
51 // + "<br/>y: " + GraphicsRenderingModule._formatNumberForTooltip(pointInVegaData.y)
|
Daniel@0
|
52
|
Daniel@0
|
53 pointsInVegaData.push(pointInVegaData);
|
Daniel@0
|
54 }
|
Daniel@0
|
55
|
Daniel@0
|
56 vc.data.push({
|
Daniel@0
|
57 "name": "points",
|
Daniel@0
|
58 "values": pointsInVegaData
|
Daniel@0
|
59 });
|
Daniel@0
|
60
|
Daniel@0
|
61
|
Daniel@0
|
62 // :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
|
Daniel@0
|
63 // Scales
|
Daniel@0
|
64
|
Daniel@0
|
65 // .............................................................
|
Daniel@0
|
66 // Scale - x
|
Daniel@0
|
67 vc.scales.push({
|
Daniel@0
|
68 "name": "x",
|
Daniel@0
|
69 "domain": {"data": "points", "field": "x"},
|
Daniel@0
|
70 "point": true,
|
Daniel@0
|
71 "round": true,
|
Daniel@0
|
72 "zero": true,
|
Daniel@0
|
73 "range": [vc.internalSpaceOffset, vc.width - vc.internalSpaceOffset]
|
Daniel@0
|
74 });
|
Daniel@0
|
75
|
Daniel@0
|
76 // .............................................................
|
Daniel@0
|
77 // Scale - y
|
Daniel@0
|
78 vc.scales.push({
|
Daniel@0
|
79 "name": "y",
|
Daniel@0
|
80 "domain": {"data": "points", "field": "y"},
|
Daniel@0
|
81 "point": true,
|
Daniel@0
|
82 "round": true,
|
Daniel@0
|
83 "zero": true,
|
Daniel@0
|
84 "inverse": true,
|
Daniel@0
|
85 "range": [vc.internalSpaceOffset, vc.height - vc.internalSpaceOffset]
|
Daniel@0
|
86 });
|
Daniel@0
|
87
|
Daniel@0
|
88
|
Daniel@0
|
89 // :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
|
Daniel@0
|
90 // Marks
|
Daniel@0
|
91
|
Daniel@0
|
92 // .............................................................
|
Daniel@0
|
93 // Mark - background (to catch mouse events and remove tooltips)
|
Daniel@0
|
94 vc.marks.push({
|
Daniel@0
|
95 "type": "rect",
|
Daniel@0
|
96 "properties": {
|
Daniel@0
|
97 "enter": {
|
Daniel@0
|
98 "x": {"value": -vc.padding.left},
|
Daniel@0
|
99 "y": {"value": -vc.padding.top},
|
Daniel@0
|
100 "fill": {"value": "#fff"},
|
Daniel@0
|
101 "y2": {"field": {"group": "height"}, "offset": vc.padding.left + vc.padding.right},
|
Daniel@0
|
102 "x2": {"field": {"group": "width"}, "offset": vc.padding.top + vc.padding.bottom},
|
Daniel@0
|
103 }
|
Daniel@0
|
104 }
|
Daniel@0
|
105 });
|
Daniel@0
|
106
|
Daniel@0
|
107
|
Daniel@0
|
108 // .............................................................
|
Daniel@0
|
109 // Mark - frame
|
Daniel@0
|
110 vc.marks.push({
|
Daniel@0
|
111 "type": "rect",
|
Daniel@0
|
112 "properties": {
|
Daniel@0
|
113 "enter": {
|
Daniel@0
|
114 "y": {"value": 0, "offset": .5},
|
Daniel@0
|
115 "y2": {"field": {"group": "height"}, "offset": -.5},
|
Daniel@0
|
116 "x": {"value": 0, "offset": .5},
|
Daniel@0
|
117 "x2": {"field": {"group": "width"}, "offset": -.5},
|
Daniel@0
|
118 "stroke": {"value": vc.colorForAxes},
|
Daniel@0
|
119 "strokeWidth": {"value": 1},
|
Daniel@0
|
120 // "x": {"value": 0, "scale": "x" "offset": -1},
|
Daniel@0
|
121 // "width": {"value": 1},
|
Daniel@0
|
122 }
|
Daniel@0
|
123 }
|
Daniel@0
|
124 });
|
Daniel@0
|
125
|
Daniel@0
|
126 // .............................................................
|
Daniel@0
|
127 // Mark - x axis
|
Daniel@0
|
128 // vc.marks.push({
|
Daniel@0
|
129 // "type": "rect",
|
Daniel@0
|
130 // "properties": {
|
Daniel@0
|
131 // "enter": {
|
Daniel@0
|
132 // "x": {"value": 0},
|
Daniel@0
|
133 // "x2": {"field": {"group": "width"}},
|
Daniel@0
|
134 // "fill": {"value": vc.colorForAxes},
|
Daniel@0
|
135 // "y": {"value": 0, "scale": "y"},
|
Daniel@0
|
136 // "height": {"value": 1},
|
Daniel@0
|
137 // }
|
Daniel@0
|
138 // }
|
Daniel@0
|
139 // });
|
Daniel@0
|
140
|
Daniel@0
|
141
|
Daniel@0
|
142 // .............................................................
|
Daniel@0
|
143 // // Mark - y axis
|
Daniel@0
|
144 // vc.marks.push({
|
Daniel@0
|
145 // "type": "rect",
|
Daniel@0
|
146 // "properties": {
|
Daniel@0
|
147 // "enter": {
|
Daniel@0
|
148 // "y": {"value": 0},
|
Daniel@0
|
149 // "y2": {"field": {"group": "height"}},
|
Daniel@0
|
150 // "fill": {"value": vc.colorForAxes},
|
Daniel@0
|
151 // "x": {"value": 0, "scale": "x", "offset": -1},
|
Daniel@0
|
152 // "width": {"value": 1},
|
Daniel@0
|
153 // }
|
Daniel@0
|
154 // }
|
Daniel@0
|
155 // });
|
Daniel@0
|
156
|
Daniel@0
|
157 // .............................................................
|
Daniel@0
|
158 // Mark - cells
|
Daniel@0
|
159 vc.marks.push({
|
Daniel@0
|
160 "type": "symbol",
|
Daniel@0
|
161 "from": {"data": "points"},
|
Daniel@0
|
162 "properties": {
|
Daniel@0
|
163 "enter": {
|
Daniel@0
|
164 "x": {"field": "x", "scale": "x"},
|
Daniel@0
|
165 "y": {"field": "y", "scale": "y"},
|
Daniel@0
|
166 "size": {"value": vc.symbolSize},
|
Daniel@0
|
167 "fill": {"value": vc.colorForData}
|
Daniel@0
|
168 }
|
Daniel@0
|
169 }
|
Daniel@0
|
170 });
|
Daniel@0
|
171
|
Daniel@0
|
172
|
Daniel@0
|
173 },
|
Daniel@0
|
174 });
|
Daniel@0
|
175 });
|
Daniel@0
|
176 }, Logger);
|