ISOVIS
/
VisEvol
8
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

new

Browse Source
master
Angelos Chatzimparmpas 4 years ago
parent 35ac0b2011
commit 2bd14c6470
18 changed files with 321 additions and 102 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      cachedir/joblib/run/randomSearch/0bdb0a3994557b46f8e06fc3ddb42976/metadata.json
  2. 1
      cachedir/joblib/run/randomSearch/20516fbabb68f3b95016dc6e7620c891/metadata.json
  3. 1
      cachedir/joblib/run/randomSearch/4c7c0701fcdc8bd6356e4638f53e5d81/metadata.json
  4. BIN
      cachedir/joblib/run/randomSearch/5a08a689ad06c9bdb904412b312337a8/output.pkl
  5. 1
      cachedir/joblib/run/randomSearch/97b072a4213180c78544732e6bf6bbb5/metadata.json
  6. BIN
      cachedir/joblib/run/randomSearch/b19e4bb2f21216f2a9f8149bdc53b595/output.pkl
  7. BIN
      cachedir/joblib/run/randomSearch/fd6b570dcb668227b263f665cb66167e/output.pkl
  8. BIN
      cachedir/joblib/run/randomSearch/fe4080e78f5622764cbad1b75bcf5ccd/output.pkl
  9. 79
      frontend/src/components/AlgorithmsController.vue
  10. 2
      frontend/src/components/Ensemble.vue
  11. 2
      frontend/src/components/Export.vue
  12. 16
      frontend/src/components/History.vue
  13. 2
      frontend/src/components/HyperParameterSpace.vue
  14. 19
      frontend/src/components/Main.vue
  15. 1
      frontend/src/components/PerformanceMetrics.vue
  16. 90
      frontend/src/components/Predictions.vue
  17. 115
      frontend/src/components/ValidationController.vue
  18. 93
      frontend/src/components/VotingResults.vue

1
cachedir/joblib/run/randomSearch/0bdb0a3994557b46f8e06fc3ddb42976/metadata.json
Unescape View File

@ -0,0 +1 @@
{"duration": 83.80468487739563, "input_args": {"XData": " Fbs Slope Trestbps Exang Thalach Age Chol Sex Oldpeak Restecg Cp Ca Thal\n0 1 0 145 0 150 63 233 1 2.3 0 3 0 1\n1 0 0 130 0 187 37 250 1 3.5 1 2 0 2\n2 0 2 130 0 172 41 204 0 1.4 0 1 0 2\n3 0 2 120 0 178 56 236 1 0.8 1 1 0 2\n4 0 2 120 1 163 57 354 0 0.6 1 0 0 2\n.. ... ... ... ... ... ... ... ... ... ... .. .. ...\n298 0 1 140 1 123 57 241 0 0.2 1 0 0 3\n299 0 1 110 0 132 45 264 1 1.2 1 3 0 3\n300 1 1 144 0 141 68 193 1 3.4 1 0 2 3\n301 0 1 130 1 115 57 131 1 1.2 1 0 1 3\n302 0 1 130 0 174 57 236 0 0.0 0 1 1 2\n\n[303 rows x 13 columns]", "yData": "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]", "clf": "GradientBoostingClassifier(criterion='mse', learning_rate=0.45,\n loss='exponential', n_estimators=79, random_state=42,\n subsample=0.30000000000000004)", "params": "{'n_estimators': [20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99], 'loss': ['deviance', 'exponential'], 'learning_rate': [0.01, 0.12, 0.23, 0.34, 0.45], 'subsample': [0.1, 0.2, 0.30000000000000004, 0.4, 0.5, 0.6, 0.7000000000000001, 0.8, 0.9], 'criterion': ['friedman_mse', 'mse', 'mae']}", "eachAlgor": "'GradB'", "AlgorithmsIDsEnd": "600"}}

1
cachedir/joblib/run/randomSearch/20516fbabb68f3b95016dc6e7620c891/metadata.json
Unescape View File

@ -0,0 +1 @@
{"duration": 155.17029309272766, "input_args": {"XData": " Fbs Slope Trestbps Exang Thalach Age Chol Sex Oldpeak Restecg Cp Ca Thal\n0 1 0 145 0 150 63 233 1 2.3 0 3 0 1\n1 0 0 130 0 187 37 250 1 3.5 1 2 0 2\n2 0 2 130 0 172 41 204 0 1.4 0 1 0 2\n3 0 2 120 0 178 56 236 1 0.8 1 1 0 2\n4 0 2 120 1 163 57 354 0 0.6 1 0 0 2\n.. ... ... ... ... ... ... ... ... ... ... .. .. ...\n298 0 1 140 1 123 57 241 0 0.2 1 0 0 3\n299 0 1 110 0 132 45 264 1 1.2 1 3 0 3\n300 1 1 144 0 141 68 193 1 3.4 1 0 2 3\n301 0 1 130 1 115 57 131 1 1.2 1 0 1 3\n302 0 1 130 0 174 57 236 0 0.0 0 1 1 2\n\n[303 rows x 13 columns]", "yData": "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]", "clf": "RandomForestClassifier(max_depth=12, n_estimators=58, random_state=42)", "params": "{'n_estimators': [20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99], 'max_depth': [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19], 'criterion': ['gini', 'entropy']}", "eachAlgor": "'RF'", "AlgorithmsIDsEnd": "600"}}

1
cachedir/joblib/run/randomSearch/4c7c0701fcdc8bd6356e4638f53e5d81/metadata.json
Unescape View File

@ -0,0 +1 @@
{"duration": 212.6512849330902, "input_args": {"XData": " Fbs Slope Trestbps Exang Thalach Age Chol Sex Oldpeak Restecg Cp Ca Thal\n0 1 0 145 0 150 63 233 1 2.3 0 3 0 1\n1 0 0 130 0 187 37 250 1 3.5 1 2 0 2\n2 0 2 130 0 172 41 204 0 1.4 0 1 0 2\n3 0 2 120 0 178 56 236 1 0.8 1 1 0 2\n4 0 2 120 1 163 57 354 0 0.6 1 0 0 2\n.. ... ... ... ... ... ... ... ... ... ... .. .. ...\n298 0 1 140 1 123 57 241 0 0.2 1 0 0 3\n299 0 1 110 0 132 45 264 1 1.2 1 3 0 3\n300 1 1 144 0 141 68 193 1 3.4 1 0 2 3\n301 0 1 130 1 115 57 131 1 1.2 1 0 1 3\n302 0 1 130 0 174 57 236 0 0.0 0 1 1 2\n\n[303 rows x 13 columns]", "yData": "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]", "clf": "MLPClassifier(alpha=0.00041000000000000005, hidden_layer_sizes=(71, 3),\n max_iter=100, random_state=42, solver='sgd',\n tol=0.0008100000000000001)", "params": "{'hidden_layer_sizes': [(60, 3), (61, 1), (62, 1), (63, 3), (64, 2), (65, 1), (66, 1), (67, 1), (68, 3), (69, 1), (70, 3), (71, 3), (72, 3), (73, 1), (74, 3), (75, 2), (76, 1), (77, 1), (78, 1), (79, 1), (80, 1), (81, 3), (82, 3), (83, 1), (84, 3), (85, 1), (86, 3), (87, 3), (88, 3), (89, 3), (90, 2), (91, 1), (92, 2), (93, 3), (94, 2), (95, 1), (96, 1), (97, 3), (98, 2), (99, 2), (100, 2), (101, 1), (102, 1), (103, 2), (104, 1), (105, 1), (106, 2), (107, 1), (108, 2), (109, 2), (110, 3), (111, 2), (112, 1), (113, 3), (114, 2), (115, 3), (116, 1), (117, 2), (118, 1), (119, 3)], 'alpha': [1e-05, 0.00021, 0.00041000000000000005, 0.0006100000000000001, 0.0008100000000000001], 'tol': [1e-05, 0.00041000000000000005, 0.0008100000000000001], 'max_iter': [100], 'activation': ['relu', 'identity', 'logistic', 'tanh'], 'solver': ['adam', 'sgd']}", "eachAlgor": "'MLP'", "AlgorithmsIDsEnd": "600"}}

BIN
cachedir/joblib/run/randomSearch/5a08a689ad06c9bdb904412b312337a8/output.pkl
View File

Binary file not shown.

1
cachedir/joblib/run/randomSearch/97b072a4213180c78544732e6bf6bbb5/metadata.json
Unescape View File

@ -0,0 +1 @@
{"duration": 85.05796194076538, "input_args": {"XData": " Fbs Slope Trestbps Exang Thalach Age Chol Sex Oldpeak Restecg Cp Ca Thal\n0 1 0 145 0 150 63 233 1 2.3 0 3 0 1\n1 0 0 130 0 187 37 250 1 3.5 1 2 0 2\n2 0 2 130 0 172 41 204 0 1.4 0 1 0 2\n3 0 2 120 0 178 56 236 1 0.8 1 1 0 2\n4 0 2 120 1 163 57 354 0 0.6 1 0 0 2\n.. ... ... ... ... ... ... ... ... ... ... .. .. ...\n298 0 1 140 1 123 57 241 0 0.2 1 0 0 3\n299 0 1 110 0 132 45 264 1 1.2 1 3 0 3\n300 1 1 144 0 141 68 193 1 3.4 1 0 2 3\n301 0 1 130 1 115 57 131 1 1.2 1 0 1 3\n302 0 1 130 0 174 57 236 0 0.0 0 1 1 2\n\n[303 rows x 13 columns]", "yData": "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]", "clf": "LogisticRegression(C=78, max_iter=150, random_state=42)", "params": "{'C': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99], 'max_iter': [50, 100, 150, 200, 250, 300, 350, 400, 450], 'solver': ['lbfgs', 'newton-cg', 'sag', 'saga'], 'penalty': ['l2', 'none']}", "eachAlgor": "'LR'", "AlgorithmsIDsEnd": "600"}}

BIN
cachedir/joblib/run/randomSearch/b19e4bb2f21216f2a9f8149bdc53b595/output.pkl
View File

Binary file not shown.

BIN
cachedir/joblib/run/randomSearch/fd6b570dcb668227b263f665cb66167e/output.pkl
View File

Binary file not shown.

BIN
cachedir/joblib/run/randomSearch/fe4080e78f5622764cbad1b75bcf5ccd/output.pkl
View File

Binary file not shown.

79
frontend/src/components/AlgorithmsController.vue
Unescape View File

@ -5,6 +5,10 @@
<script>
import * as Plotly from 'plotly.js'
import { EventBus } from '../main.js'
import * as d3Base from 'd3'
// attach all d3 plugins to the d3 library
const d3v5 = Object.assign(d3Base)
export default {
name: "AlgorithmsController",
@ -109,9 +113,9 @@ export default {
}
else {
if (this.selectedEnsem.includes(mergedStoreEnsembleLoc[i])) {
data.push({Algorithm:"GradB",value:this.PerF[i], size:4, sw:true})
data.push({Algorithm:"GradB",value:this.PerF[i], size:5, sw:true})
} else {
data.push({Algorithm:"GradB",value:this.PerF[i], size:4, sw:false})
data.push({Algorithm:"GradB",value:this.PerF[i], size:5, sw:false})
}
}
}
@ -1167,14 +1171,16 @@ export default {
if (cPlot.objs.points) {
if (dOpts.plotType == 'beeswarm') {
var swarmBounds = getObjWidth(100, cName);
console.log(swarmBounds)
var yPtScale = chart.yScale.copy()
.range([Math.floor(chart.yScale.range()[0] / dOpts.pointSize), 0])
.interpolate(d3.interpolateRound)
//.interpolate(d3.interpolateRound)
.domain(chart.yScale.domain());
var maxWidth = Math.ceil(chart.xScale.rangeBand() / dOpts.pointSize);
console.log(maxWidth)
var ptsObj = {};
var cYBucket = null;
// Bucket points
for (var pt = 0; pt < cGroup.values.length; pt++) {
cYBucket = yPtScale(cGroup.values[pt]);
@ -1195,38 +1201,37 @@ export default {
col++
}
}
} else { // For scatter points and points with no scatter
var plotBounds = null,
scatterWidth = 0,
width = 0;
if (dOpts.plotType == 'scatter' || typeof dOpts.plotType == 'number') {
//Default scatter percentage is 20% of box width
scatterWidth = typeof dOpts.plotType == 'number' ? dOpts.plotType : 20;
}
plotBounds = getObjWidth(scatterWidth, cName);
width = plotBounds.right - plotBounds.left;
for (var pt = 0; pt < cGroup.values.length; pt++) {
cPlot.objs.points.pts[pt]
.attr("cx", plotBounds.middle + addJitter(true, width))
.attr("cy", chart.yScale(cGroup.values[pt]));
}
}
// FIX THAT!
// let simulation = d3v5.forceSimulation(chart.data)
// .force("x", d3v5.forceX((d) => {
// return chart.xScale(d.Algorithm);
// }).strength(0.2))
// .force("y", d3v5.forceY((d) => {
// return chart.yScale(d.value);
// }).strength(1))
// .force("collide", d3v5.forceCollide((d) => {
// return d.size;
// }))
// .alphaDecay(0)
// .alpha(0.3)
// .on("tick", tick);
// function tick() {
// d3v5.selectAll(".CirclePoint")
// .attr("cx", (d) => d.x)
// .attr("cy", (d) => d.y);
// }
// let init_decay = setTimeout(function () {
// console.log("start alpha decay");
// simulation.alphaDecay(0.1);
// }, 3000); // start decay after 3 seconds
}
}
if (cPlot.objs.bean) {
var beanBounds = getObjWidth(dOpts.beanWidth, cName);
for (var pt = 0; pt < cGroup.values.length; pt++) {
cPlot.objs.bean.lines[pt]
.attr("x1", beanBounds.left)
.attr("x2", beanBounds.right)
.attr('y1', chart.yScale(cGroup.values[pt]))
.attr("y2", chart.yScale(cGroup.values[pt]));
}
}
}
};
@ -1287,7 +1292,7 @@ export default {
cPlot.objs.points.g = cPlot.objs.g.append("g").attr("class", "points-plot");
for (var pt = 0; pt < chart.groupObjs[cName].values.length; pt++) {
cPlot.objs.points.pts.push(cPlot.objs.points.g.append("circle")
.attr("class", "point")
.attr("class", "CirclePoint")
.attr('r', function () {
var dataLoc = data.filter( i => cName.includes( i.Algorithm ) );
return dataLoc[pt].size;
@ -1422,7 +1427,7 @@ export default {
}
/* Point Plots*/
.chart-wrapper .points-plot .point {
.chart-wrapper .points-plot .CirclePoint {
stroke: black;
stroke-width: 1px;
}

2
frontend/src/components/Ensemble.vue
Unescape View File

@ -307,6 +307,7 @@ export default {
selectedPointsOverview () {
const OverviewPlotly = document.getElementById('OverviewPlotlyCM')
var allModels = JSON.parse(this.ScatterPlotResults[0])
var ResultsAll = this.ScatterPlotResults
OverviewPlotly.on('plotly_selected', function (evt) {
if (typeof evt !== 'undefined') {
var pushModelsRemainingTempCM = []
@ -326,6 +327,7 @@ export default {
}
}
EventBus.$emit('RemainingPointsCM', pushModelsRemainingTempCM)
EventBus.$emit('callValidationData', ResultsAll)
EventBus.$emit('SendSelectedPointsUpdateIndicatorCM', ClassifierIDsListCM)
EventBus.$emit('SendSelectedPointsToServerEventCM', ClassifierIDsListCM)
}

2
frontend/src/components/Export.vue
Unescape View File

@ -2,7 +2,7 @@
<div id="ExportResults">
=======================================================
<br>
IDs of Models/Algorithms and Hyper-parameters: {{ ModelsPickled }}
Models/Algorithms and Hyper-parameters: {{ ModelsPickled }}
<br>
=======================================================
</div>

16
frontend/src/components/History.vue
Unescape View File

@ -325,7 +325,7 @@ export default {
{month:"Crossover_S2_Prime'",value:125,loss:null},
{month:"Mutate_S2_Prime",value:125,loss:null}];
//this is the svg canvas attributes: (not buidlign abything just seeting up varaibels)
var margin = {top: 10, right: 40, bottom: 10, left: 40}, //comma is the equivalent of var :
var margin = {top: 0, right: 40, bottom: 0, left: 40}, //comma is the equivalent of var :
width = 1250 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
@ -495,9 +495,9 @@ export default {
var colorDiff
colorDiff = d3v5.scaleSequential(d3v5.interpolatePRGn).domain([-100, 100])
var percentage = this.percentageOverall
console.log(percentage)
var previousPercentage = this.storePreviousPercentage
console.log(previousPercentage)
// add in the links
var link = svg.append("g").selectAll(".link")
.data(graph.links)
@ -691,7 +691,7 @@ export default {
.attr("font-family","sans-serif")
.attr("font-size",18.5)
.attr("fill","black")
.attr("x",32)
.attr("x",20)
.attr("y",30)
.attr("transform",
"translate(" + -45 + "," + 0 + ") scale(1,-1) translate(" + 0 + "," + -(height) + ") rotate(-90 150 150)");
@ -873,7 +873,7 @@ export default {
{month:"Crossover_S2_Prime'",value:125,loss:null},
{month:"Mutate_S2_Prime",value:125,loss:null}];
//this is the svg canvas attributes: (not buidlign abything just seeting up varaibels)
var margin = {top: 10, right: 40, bottom: 10, left: 40}, //comma is the equivalent of var :
var margin = {top: 0, right: 40, bottom: 0, left: 40}, //comma is the equivalent of var :
width = 1230 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
@ -1220,7 +1220,7 @@ export default {
.attr("font-family","sans-serif")
.attr("font-size",18.5)
.attr("fill","black")
.attr("x",32)
.attr("x",20)
.attr("y",30)
.attr("transform",
"translate(" + -45 + "," + 0 + ") scale(1,-1) translate(" + 0 + "," + -(height) + ") rotate(-90 150 150)");
@ -1243,7 +1243,7 @@ export default {
{month:"Crossover_S1",value:250,loss:null},
{month:"Mutate_S1",value:250,loss:null}];
//this is the svg canvas attributes: (not buidlign abything just seeting up varaibels)
var margin = {top: 10, right: 40, bottom: 10, left: 40}, //comma is the equivalent of var :
var margin = {top: 0, right: 40, bottom: 0, left: 40}, //comma is the equivalent of var :
width = 1230 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
@ -1506,7 +1506,7 @@ export default {
.attr("font-family","sans-serif")
.attr("font-size",18.5)
.attr("fill","black")
.attr("x",32)
.attr("x",20)
.attr("y",30)
.attr("transform",
"translate(" + -45 + "," + 0 + ") scale(1,-1) translate(" + 0 + "," + -(height) + ") rotate(-90 150 150)");

2
frontend/src/components/HyperParameterSpace.vue
Unescape View File

@ -304,6 +304,7 @@ export default {
selectedPointsOverview () {
const OverviewPlotly = document.getElementById('OverviewPlotly')
var allModels = JSON.parse(this.ScatterPlotResults[0])
var ResultsAll = this.ScatterPlotResults
OverviewPlotly.on('plotly_selected', function (evt) {
if (typeof evt !== 'undefined') {
var pushModelsRemainingTemp = []
@ -326,6 +327,7 @@ export default {
}
//EventBus.$on('RemainingPointsIndices', indices)
EventBus.$emit('RemainingPoints', pushModelsRemainingTemp)
EventBus.$emit('callValidationData', ResultsAll)
EventBus.$emit('SendSelectedPointsUpdateIndicator', ClassifierIDsList)
EventBus.$emit('SendSelectedPointsToServerEvent', ClassifierIDsList)
}

19
frontend/src/components/Main.vue
Unescape View File

@ -184,7 +184,7 @@
<div id="myModal" class="w3-modal" style="position: fixed;">
<div class="w3-modal-content w3-card-4 w3-animate-zoom">
<header class="w3-container w3-blue">
<h3 style="display:inline-block; font-size: 16px; margin-top: 15px; margin-bottom:15px">Majority-Voting Ensemble Extraction (using Cryo)</h3>
<h3 style="display:inline-block; font-size: 22px; margin-top: 15px; margin-bottom:15px">Majority-Voting Ensemble Extraction (using Cryo)</h3>
</header>
<Export/>
<div class="w3-container w3-light-grey w3-padding">
@ -222,7 +222,8 @@ import 'axios-progress-bar/dist/nprogress.css'
import 'bootstrap-css-only/css/bootstrap.min.css'
import { mdbCard, mdbCardBody, mdbCardText, mdbCardHeader } from 'mdbvue'
import { EventBus } from '../main.js'
import $ from 'jquery'
import $ from "jquery";
import 'bootstrap';
import * as d3Base from 'd3'
import Papa from 'papaparse'
@ -378,6 +379,7 @@ export default Vue.extend({
EventBus.$emit('callValidation')
EventBus.$emit('emittedEventCallingGrid', this.OverviewResults)
EventBus.$emit('emittedEventCallingGridSelection', this.OverviewResults)
EventBus.$emit('emittedEventCallingInfo', this.OverviewResults)
EventBus.$emit('LegendPredict')
this.storeBothEnsCM[0] = this.OverviewResults
this.firstTimeExec = false
@ -396,17 +398,15 @@ export default Vue.extend({
EventBus.$emit('emittedEventCallingSankeyStage3')
EventBus.$emit('hideCrossMut')
}
EventBus.$emit('emittedEventCallingGrid', this.OverviewResults)
EventBus.$emit('SendSelectedPointsToServerEvent', this.PredictSelEnsem)
this.storeBothEnsCM[1] = this.OverviewResults
//EventBus.$emit('emittedEventCallingGridSelection', this.OverviewResults)
EventBus.$emit('emittedEventCallingInfo', this.OverviewResults)
EventBus.$emit('callAlgorithhms')
EventBus.$emit('emittedEventCallingGrid', this.OverviewResults)
this.getFinalResults()
EventBus.$emit('emittedEventCallingGrid', this.OverviewResults)
EventBus.$emit('SendSelectedPointsToServerEvent', this.PredictSelEnsem)
//EventBus.$emit('emittedEventCallingGridSelection', this.OverviewResults)
EventBus.$emit('callValidationData', this.OverviewResults)
EventBus.$emit('callValidation')
EventBus.$emit('LegendPredictEnsem')
}
})
.catch(error => {
@ -437,7 +437,6 @@ export default Vue.extend({
EventBus.$emit('emittedEventCallingScatterPlot', this.OverviewResultsCM)
this.storeBothEnsCM[0] = this.OverviewResultsCM
EventBus.$emit('callAlgorithhms')
EventBus.$emit('callValidationData', this.OverviewResultsCM)
//EventBus.$emit('emittedEventCallingSankey', this.OverviewResultsCM)
//this.PredictSel = []
//EventBus.$emit('emittedEventCallingGrid', this.OverviewResultsCM)
@ -1133,8 +1132,6 @@ export default Vue.extend({
EventBus.$on('changeValues', data => { this.CMNumberofModelsOFFICIAL = data })
EventBus.$on('changeValues2', data => { this.CMNumberofModelsOFFICIALS2 = data })
EventBus.$on('OpenModal', this.openModalFun)
//Prevent double click to search for a word.
document.addEventListener('mousedown', function (event) {
if (event.detail > 1) {

1
frontend/src/components/PerformanceMetrics.vue
Unescape View File

@ -97,7 +97,6 @@
<script>
import { EventBus } from '../main.js'
import $ from 'jquery'
export default {
name: 'PerformanceMetrics',

90
frontend/src/components/Predictions.vue
Unescape View File

@ -1,7 +1,8 @@
<template>
<div>
<div id="containerForAll">
<div id="containerAll"></div>
<div id="containerSelection"></div>
<div id="LegendMain"></div>
<div id="LegendHeat"></div>
</div>
</template>
@ -9,7 +10,6 @@
<script>
import * as d3Base from 'd3'
import { EventBus } from '../main.js'
import $ from 'jquery'
import * as colorbr from 'colorbrewer'
// attach all d3 plugins to the d3 library
@ -26,6 +26,7 @@ export default {
predictSelection: [],
StoreIndices: [],
classesNumber: 9,
InfoPred: []
}
},
methods: {
@ -34,12 +35,15 @@ export default {
svg.selectAll("*").remove();
var svg = d3.select("#containerSelection");
svg.selectAll("*").remove();
var svgLegG = d3.select("#LegendMain");
svgLegG.selectAll("*").remove();
var svgLeg = d3.select("#LegendHeat");
svgLeg.selectAll("*").remove();
this.GetResultsAll = []
this.GetResultsSelection = []
this.predictSelection = []
this.StoreIndices = []
this.InfoPred = []
},
Grid () {
@ -162,7 +166,6 @@ export default {
}
var classStore = [].concat.apply([], classArray);
// === Set up canvas === //
var width = 1200,
@ -173,7 +176,7 @@ export default {
var canvas = d3.select('#containerAll')
.append('canvas')
.attr('width', width)
.attr('height', height);
.attr('height', height);
var context = canvas.node().getContext('2d');
@ -189,10 +192,10 @@ export default {
// === First call === //
databind(classStore, size, sqrtSize); // ...then update the databind function
var t = d3.timer(function(elapsed) {
draw();
if (elapsed > 1000) t.stop();
if (elapsed > 2000) t.stop();
}); // start a timer that runs the draw function for 500 ms (this needs to be higher than the transition in the databind function)
@ -238,7 +241,6 @@ export default {
.attr('width', 0)
.attr('height', 0)
.remove();
} // databind()
@ -436,7 +438,7 @@ export default {
var t = d3.timer(function(elapsed) {
draw();
if (elapsed > 1000) t.stop();
if (elapsed > 2000) t.stop();
}); // start a timer that runs the draw function for 500 ms (this needs to be higher than the transition in the databind function)
@ -522,16 +524,60 @@ export default {
var cellSizeHeat = 20
var legendElementWidth = cellSizeHeat * 3;
var info = JSON.parse(this.InfoPred[13])
// http://bl.ocks.org/mbostock/5577023
var colors = colorbrewer.PRGn[this.classesNumber];
var svgLegGl = d3.select("#LegendMain");
svgLegGl.selectAll("*").remove();
var svgLeg = d3.select("#LegendHeat");
svgLeg.selectAll("*").remove();
var svgLegGl = d3.select("#LegendMain").append("svg")
.attr("width", viewerWidth)
.attr("height", viewerHeight*0.35)
.style("margin-top", "0")
var initialValue = 35
var multiple = 105
var heightText = 180
svgLegGl.append("line")
.attr("x1", 614)
.attr("y1", 0)
.attr("x2", 614)
.attr("y2", heightText+30)
.style("stroke-width", 1)
.style("stroke", "black")
.style("fill", "none");
svgLegGl.append("text").attr("x", -52).attr("y", 12).text("All").style("font-size", "16px").style("font-weight", "bold").attr("alignment-baseline","top").attr("transform",
"rotate(-90)");
svgLegGl.append("text").attr("x", -142).attr("y", 12).text("Sel.").style("font-size", "16px").style("font-weight", "bold").attr("alignment-baseline","top").attr("transform",
"rotate(-90)");
svgLegGl.append("text").attr("x", initialValue).attr("y", heightText).text("Mean").style("font-size", "14px").attr("alignment-baseline","top")
svgLegGl.append("text").attr("x", initialValue+multiple*1).attr("y", heightText).text("KNN").style("font-size", "14px").attr("alignment-baseline","top")
svgLegGl.append("text").attr("x", initialValue+multiple*2).attr("y", heightText).text("LR").style("font-size", "14px").attr("alignment-baseline","top")
svgLegGl.append("text").attr("x", initialValue+multiple*3-5).attr("y", heightText).text("MLP").style("font-size", "14px").attr("alignment-baseline","top")
svgLegGl.append("text").attr("x", initialValue+multiple*4-6).attr("y", heightText).text("RF").style("font-size", "14px").attr("alignment-baseline","top")
svgLegGl.append("text").attr("x", initialValue+multiple*5-12).attr("y", heightText).text("GradB").style("font-size", "14px").attr("alignment-baseline","top")
svgLegGl.append("text").attr("x", initialValue+multiple*6-16).attr("y", heightText).text("Mean").style("font-size", "14px").attr("alignment-baseline","top")
svgLegGl.append("text").attr("x", initialValue+multiple*7-20).attr("y", heightText).text("KNN").style("font-size", "14px").attr("alignment-baseline","top")
svgLegGl.append("text").attr("x", initialValue+multiple*8-18).attr("y", heightText).text("LR").style("font-size", "14px").attr("alignment-baseline","top")
svgLegGl.append("text").attr("x", initialValue+multiple*9-25).attr("y", heightText).text("MLP").style("font-size", "14px").attr("alignment-baseline","top")
svgLegGl.append("text").attr("x", initialValue+multiple*10-24).attr("y", heightText).text("RF").style("font-size", "14px").attr("alignment-baseline","top")
svgLegGl.append("text").attr("x", initialValue+multiple*11-36).attr("y", heightText).text("GradB").style("font-size", "14px").attr("alignment-baseline","top")
svgLegGl.append("text").attr("x", 275).attr("y", heightText+30).text(info[0]).style("font-size", "16px").style("font-weight", "bold").attr("alignment-baseline","top")
svgLegGl.append("text").attr("x", 882).attr("y", heightText+30).text(info[1]).style("font-size", "16px").style("font-weight", "bold").attr("alignment-baseline","top")
var svgLeg = d3.select("#LegendHeat").append("svg")
.attr("width", viewerWidth/2)
.attr("height", viewerHeight*0.10)
.style("margin-top", "28px")
.style("margin-top", "35px")
var legend = svgLeg.append('g')
.attr("class", "legend")
@ -543,7 +589,7 @@ export default {
legend.append("svg:rect")
.attr("x", function(d, i) {
return (legendElementWidth * i) + 35;
return (legendElementWidth * i) + 50;
})
.attr("y", viewerPosTop)
.attr("class", "cellLegend bordered")
@ -567,11 +613,11 @@ export default {
})
.attr("x", function(d, i) {
if (i > 4) {
return (legendElementWidth * i) + 45;
return (legendElementWidth * i) + 60;
} else if (i == 4) {
return (legendElementWidth * i) + 55;
return (legendElementWidth * i) + 72;
} else {
return (legendElementWidth * i) + 40;
return (legendElementWidth * i) + 52;
}
})
@ -581,6 +627,7 @@ export default {
},
},
mounted () {
EventBus.$on('emittedEventCallingInfo', data => { this.InfoPred = data })
EventBus.$on('LegendPredict', this.legendCol)
EventBus.$on('emittedEventCallingGrid', data => { this.GetResultsAll = data; })
@ -607,4 +654,19 @@ export default {
canvas {
border: 1px dotted #ccc;
}
#containerForAll {
height: 100px;
position: relative;
}
#LegendMain {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#LegendMain {
z-index: 10;
}
</style>

115
frontend/src/components/ValidationController.vue
Unescape View File

@ -1,5 +1,8 @@
<template>
<div id="violin" class="chart-wrapper" style="min-height: 270px; max-height: 200px !important"></div>
<div>
<div id="violin" class="chart-wrapper" style="max-height: 200px !important"></div>
<div id="legendViolin" class="text-center"></div>
</div>
</template>
<script>
@ -17,13 +20,15 @@ export default {
Metrics: ['Accuracy', 'Precision', 'Recall', 'F1-score', 'G-mean', 'ROC AUC', 'Log loss', 'MCC'],
selectedSimple: [],
selectedEnsem: [],
storedEnsemble: []
storedEnsemble: [],
}
},
methods: {
reset () {
var svg = d3.select("#violin");
svg.selectAll("*").remove();
var svgLeg = d3.select("#legendViolin");
svgLeg.selectAll("*").remove();
this.selectedSimple = []
this.selectedEnsem = []
this.storedEnsemble = []
@ -34,8 +39,6 @@ export default {
var svg = d3.select("#violin");
svg.selectAll("*").remove();
var chart2
var IDs = JSON.parse(this.ResultsValid[0])
var valid = JSON.parse(this.ResultsValid[3])
var data = []
var colorsGlobal = []
@ -52,8 +55,11 @@ export default {
var meanGlobalSel = new Array(countFactors).fill(0)
var sumGlobalSel = new Array(countFactors).fill(0)
var countValuesSel = new Array(countFactors).fill(0)
console.log(this.activeCurr)
if (this.activeCurr == 1) {
var globalActive = this.activeCurr
if (globalActive == 1) {
var IDs = JSON.parse(this.ResultsValid[0])
var valid = JSON.parse(this.ResultsValid[3])
for (let j=0; j<this.factorsValid.length; j++) {
if (this.factorsValid[j] == 1) {
for (let i=0; i<IDs.length; i++){
@ -93,14 +99,18 @@ export default {
activeLines.push('meanSelection')
}
} else {
var valid = JSON.parse(this.ResultsValid[3])
var mergedStoreEnsembleLoc = [].concat.apply([], this.storedEnsemble)
console.log(mergedStoreEnsembleLoc)
var mergedStoreEnsembleLocFormatted = []
for (let i = 0; i < mergedStoreEnsembleLoc.length; i++) {
mergedStoreEnsembleLocFormatted.push(parseInt(mergedStoreEnsembleLoc[i].replace(/\D/g,'')))
}
for (let j=0; j<this.factorsValid.length; j++) {
if (this.factorsValid[j] == 1) {
for (let i=0; i<mergedStoreEnsembleLoc.length; i++){
let tempValid = JSON.parse(valid[j])
tempValid = mergedStoreEnsembleLocFormatted.map((item) => tempValid[item])
let tempSplit = mergedStoreEnsembleLoc[i].split(/([0-9]+)/)
console.log(tempSplit)
if (tempSplit[0] == 'KNN' || tempSplit[0] == 'KNNC' || tempSplit[0] == 'KNNM' || tempSplit[0] == 'KNNCC' || tempSplit[0] == 'KNNCM' || tempSplit[0] == 'KNNMC' || tempSplit[0] == 'KNNMM') {
data.push({Algorithm: this.Metrics[j], value: tempValid[i], category: "#ff7f00"})
}
@ -116,7 +126,6 @@ export default {
else {
data.push({Algorithm: this.Metrics[j], value: tempValid[i], category: "#a6cee3"})
}
console.log(this.selectedEnsem.length)
if (this.selectedEnsem.length != 0) {
if (this.selectedEnsem.includes(mergedStoreEnsembleLoc[i])) {
sumGlobalSel[j] = sumGlobalSel[j] + tempValid[i]
@ -134,7 +143,6 @@ export default {
activeLines.push('meanSelection')
}
}
console.log(data)
colorsGlobalBins.push('#c0c0c0')
colorsGlobalBins.push('#000')
for (let j=0; j<sumGlobalSel.length; j++) {
@ -181,8 +189,8 @@ export default {
axisLables: null,
yTicks: 1,
scale: 'linear',
chartSize: {width: 820, height: 280},
margin: {top: 15, right: 40, bottom: 30, left: 40},
chartSize: {width: 820, height: 200},
margin: {top: 15, right: 40, bottom: 60, left: 40},
constrainExtremes: false,
color: colorsGlobal
};
@ -492,7 +500,7 @@ export default {
chart.objs.g = chart.objs.chartDiv.append("svg")
.attr("class", "chart-area")
.attr("width", chart.width + (chart.margin.left + chart.margin.right))
.attr("height", 270 + (chart.margin.top + chart.margin.bottom))
.attr("height", 200 + (chart.margin.top + chart.margin.bottom))
.append("g")
.attr("transform", "translate(" + chart.margin.left + "," + chart.margin.top + ")");
@ -1532,6 +1540,7 @@ export default {
}
}
var loopValue = 0
for (cName in chart.groupObjs) {
cGroup = chart.groupObjs[cName];
@ -1594,10 +1603,15 @@ export default {
cPlot.objs.bean.lines[pt]
.attr("x1", beanBounds.left)
.attr("x2", beanBounds.right)
.attr('y1', chart.yScale(cGroup.values[pt]))
.attr("y2", chart.yScale(cGroup.values[pt]));
.attr('y1', function () { return chart.yScale(chart.data[pt+loopValue].value) })
.attr("y2", function () { return chart.yScale(chart.data[pt+loopValue].value) });
}
}
if (globalActive == 1) {
loopValue = loopValue + IDs.length
} else {
loopValue = loopValue + mergedStoreEnsembleLoc.length
}
}
};
@ -1693,8 +1707,12 @@ export default {
.style("stroke", function () { return chart.data[pt+loopValue].category; }));
}
}
loopValue = loopValue + 500
if (globalActive == 1) {
loopValue = loopValue + IDs.length
} else {
loopValue = loopValue + mergedStoreEnsembleLoc.length
}
}
};
@ -1707,9 +1725,70 @@ export default {
return chart;
}
}
},
legendColViol () {
//==================================================
var viewerWidth = this.WH[0]*2.5
var viewerHeight = this.WH[1]*0.06
var viewerPosTop = viewerHeight * 0.2;
var cellSizeHeat = 10
var legendElementWidth = cellSizeHeat * 3;
// http://bl.ocks.org/mbostock/5577023
var colors = ['#c0c0c0','#fff','#fff','#fff','#000'];
var svgLeg = d3.select("#legendViolin");
svgLeg.selectAll("*").remove();
var svgLeg = d3.select("#legendViolin").append("svg")
.attr("width", viewerWidth/2)
.attr("height", viewerHeight*1)
.style("margin-top", "42px")
var legend = svgLeg.append('g')
.attr("class", "legend")
.attr("transform", "translate(0,0)")
.selectAll(".legendElement")
.data([0, 1, 3, 4, 5])
.enter().append("g")
.attr("class", "legendElement");
legend.append("svg:rect")
.attr("x", function(d, i) {
return (legendElementWidth * i) + 35;
})
.attr("y", viewerPosTop)
.attr("class", "cellLegend bordered")
.attr("width", legendElementWidth)
.attr("height", cellSizeHeat / 2)
.style("fill", function(d, i) {
return colors[i];
});
legend.append("text")
.attr("class", "mono legendElement")
.text(function(d, i) {
if (i == 0) {
return "Mean All";
} else if (i== 4) {
return "Mean Sel.";
} else {
return "";
}
})
.attr("x", function(d, i) {
return (legendElementWidth * i) + 12;
return (legendElementWidth * i) + 12;
})
.attr("y", (viewerPosTop + cellSizeHeat) + 10);
},
},
mounted () {
EventBus.$on('LegendPredict', this.legendColViol)
EventBus.$on('SendStoredEnsemble', data => { this.storedEnsemble = data})
EventBus.$on('activeNow', data => { this.activeCurr = data })

93
frontend/src/components/VotingResults.vue
Unescape View File

@ -1,5 +1,8 @@
<template>
<div id="doubleBarChart" style="min-height: 270px;"></div>
<div>
<div id="doubleBarChart"></div>
<div id="legendFinal" class="text-center"></div>
</div>
</template>
<script>
@ -18,6 +21,9 @@ export default {
reset () {
var svg = d3.select("#doubleBarChart");
svg.selectAll("*").remove();
var svgLeg = d3.select("#legendFinal");
svgLeg.selectAll("*").remove();
this.FinalResultsforPlot = []
},
VotingResultsFun () {
@ -59,7 +65,7 @@ export default {
var chart,
width = 214,
bar_height = 15,
height = bar_height * 18;
height = bar_height * 16;
var rightOffset = width + labelArea;
var lCol = "infant.mortality";
@ -71,7 +77,7 @@ export default {
.domain([0,100])
.range([0, width-40]);
var y = d3.scale.ordinal()
.rangeBands([30, height-58]);
.rangeBands([20, height-58]);
var chart = d3.select("#doubleBarChart")
.append('svg')
@ -128,11 +134,12 @@ export default {
.attr("text-anchor", "middle")
.attr('class', 'name')
.style("fill", function(d) {
if (d.countries.includes('Active')) {
return "#1f78b4"
} else {
return "#e31a1c"
}
return "#000000"
// if (d.countries.includes('Active')) {
// return "#1f78b4"
// } else {
// return "#e31a1c"
// }
})
.text(function(d){return d.countries;});
@ -165,12 +172,74 @@ export default {
.attr('class', 'score')
.text(function(d){return d[rCol];});
chart.append("text").attr("x",width/3).attr("y", 15).attr("class","title").text(info[0]);
chart.append("text").attr("x",width/3+rightOffset).attr("y", 15).attr("class","title").text(info[1]);
chart.append("text").attr("x",width+labelArea/3).attr("y", 15).attr("class","title").text("Metrics");
}
chart.append("text").attr("x",width/3).attr("y", 20).attr("class","title").text(info[0]);
chart.append("text").attr("x",width/3+rightOffset).attr("y", 20).attr("class","title").text(info[1]);
chart.append("text").attr("x",width+labelArea/3).attr("y", 20).attr("class","title").text("Metrics");
},
legendColFinal () {
//==================================================
var viewerWidth = this.WH[0]*2.5
var viewerHeight = this.WH[1]*0.058
var viewerPosTop = viewerHeight * 0.2;
var cellSizeHeat = 10
var legendElementWidth = cellSizeHeat * 3;
// http://bl.ocks.org/mbostock/5577023
var colors = ['#1f78b4','#fff','#fff','#fff','#e31a1c'];
var svgLeg = d3.select("#legendFinal");
svgLeg.selectAll("*").remove();
var svgLeg = d3.select("#legendFinal").append("svg")
.attr("width", viewerWidth/2)
.attr("height", viewerHeight*1)
.style("margin-top", "6px")
var legend = svgLeg.append('g')
.attr("class", "legend")
.attr("transform", "translate(0,0)")
.selectAll(".legendElement")
.data([0, 1, 3, 4, 5])
.enter().append("g")
.attr("class", "legendElement");
legend.append("svg:rect")
.attr("x", function(d, i) {
return (legendElementWidth * i) + 35;
})
.attr("y", viewerPosTop)
.attr("class", "cellLegend bordered")
.attr("width", legendElementWidth)
.attr("height", cellSizeHeat / 2)
.style("fill", function(d, i) {
return colors[i];
});
legend.append("text")
.attr("class", "mono legendElement")
.text(function(d, i) {
if (i == 0) {
return "Active";
} else if (i== 4) {
return "Best";
} else {
return "";
}
})
.attr("x", function(d, i) {
if (i == 0) {
return (legendElementWidth * i) + 32;
} else {
return (legendElementWidth * i) + 36;
}
})
.attr("y", (viewerPosTop + cellSizeHeat) + 10);
},
},
mounted() {
EventBus.$on('LegendPredictEnsem', this.legendColFinal)
EventBus.$on('emittedEventCallingInfo', data => { this.Info = data })
EventBus.$on('emittedEventCallingResultsPlot', data => { this.FinalResultsforPlot = data })

Write Preview
Loading…
Cancel
Save