ISOVIS
/
StackGenVis
9
0
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

fixed pcp

Browse Source
master
Angelos Chatzimparmpas 5 years ago
parent 3747112631
commit 01cfbdc8a6
28 changed files with 643 additions and 197 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. BIN
      __pycache__/run.cpython-37.pyc
  2. 2
      cachedir/joblib/run/GridSearchForModels/34dd4fa44cf8d83f42cfacc70a3fdd71/metadata.json
  3. 2
      cachedir/joblib/run/GridSearchForModels/3e589fe0fa65fac056ce8e152ff3ecba/metadata.json
  4. BIN
      cachedir/joblib/run/GridSearchForModels/65cf512fe73627ad01497d789001f38b/output.pkl
  5. BIN
      cachedir/joblib/run/GridSearchForModels/d109acd8d5a29b882753c4dd79f6b7ac/output.pkl
  6. BIN
      cachedir/joblib/run/GridSearchForModels/d3f870ddccd6a0536b79f604734d6849/output.pkl
  7. 1
      cachedir/joblib/run/GridSearchForModels/d3ffb9c0e5d4e64abbb8f8a71e13e521/metadata.json
  8. BIN
      cachedir/joblib/run/GridSearchForModels/ef9a593cce41dd71bdac1d445edc2a58/output.pkl
  9. 1
      cachedir/joblib/run/GridSearchForModels/fa486d0ef10b213eeae65d5db1f9232b/metadata.json
  10. 6
      cachedir/joblib/run/GridSearchForModels/func_code.py
  11. 33
      frontend/src/components/AlgorithmHyperParam.vue
  12. 37
      frontend/src/components/Algorithms.vue
  13. 16
      frontend/src/components/BalancePredictions.vue
  14. 38
      frontend/src/components/BarChart.vue
  15. 14
      frontend/src/components/Controller.vue
  16. 4
      frontend/src/components/DataSpace.vue
  17. 26
      frontend/src/components/FinalResultsLinePlot.vue
  18. 14
      frontend/src/components/Heatmap.vue
  19. 206
      frontend/src/components/Main.vue
  20. 10
      frontend/src/components/PCPData.vue
  21. 344
      frontend/src/components/Parameters.vue
  22. 4
      frontend/src/components/PerMetricBarChart.vue
  23. 28
      frontend/src/components/PredictionsSpace.vue
  24. 6
      frontend/src/components/Provenance.vue
  25. 8
      frontend/src/components/ScatterPlot.vue
  26. 23
      frontend/src/components/SlidersController.vue
  27. 10
      frontend/src/components/ToggleSelection.vue
  28. 7
      run.py

BIN
__pycache__/run.cpython-37.pyc
View File

Binary file not shown.

2
cachedir/joblib/run/GridSearchForModels/34dd4fa44cf8d83f42cfacc70a3fdd71/metadata.json
Unescape View File

@ -1 +1 @@
{"duration": 277.43560791015625, "input_args": {"XData": " sepal_l sepal_w petal_l petal_w\n0 6.3 3.3 6.0 2.5\n1 7.1 3.0 5.9 2.1\n2 5.8 2.7 5.1 1.9\n3 6.3 2.9 5.6 1.8\n4 7.6 3.0 6.6 2.1\n.. ... ... ... ...\n145 5.1 3.8 1.6 0.2\n146 5.0 3.5 1.6 0.6\n147 5.1 3.4 1.5 0.2\n148 4.6 3.2 1.4 0.2\n149 4.8 3.0 1.4 0.3\n\n[150 rows x 4 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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]", "clf": "KNeighborsClassifier(algorithm='ball_tree', leaf_size=30, metric='minkowski',\n metric_params=None, n_jobs=None, n_neighbors=24, p=2,\n weights='distance')", "params": "{'n_neighbors': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24], 'weights': ['uniform', 'distance'], 'algorithm': ['brute', 'kd_tree', 'ball_tree'], 'metric': ['chebyshev', 'manhattan', 'euclidean', 'minkowski']}", "eachAlgor": "'KNN'", "factors": "[1, 1, 1, 1, 1]", "AlgorithmsIDsEnd": "0"}} {"duration": 291.49311804771423, "input_args": {"XData": " sepal_l sepal_w petal_l petal_w\n0 6.3 3.3 6.0 2.5\n1 7.1 3.0 5.9 2.1\n2 5.8 2.7 5.1 1.9\n3 6.3 2.9 5.6 1.8\n4 7.6 3.0 6.6 2.1\n.. ... ... ... ...\n145 5.1 3.8 1.6 0.2\n146 5.0 3.5 1.6 0.6\n147 5.1 3.4 1.5 0.2\n148 4.6 3.2 1.4 0.2\n149 4.8 3.0 1.4 0.3\n\n[150 rows x 4 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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]", "clf": "KNeighborsClassifier(algorithm='ball_tree', leaf_size=30, metric='minkowski',\n metric_params=None, n_jobs=None, n_neighbors=24, p=2,\n weights='distance')", "params": "{'n_neighbors': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24], 'weights': ['uniform', 'distance'], 'algorithm': ['brute', 'kd_tree', 'ball_tree'], 'metric': ['chebyshev', 'manhattan', 'euclidean', 'minkowski']}", "eachAlgor": "'KNN'", "factors": "[1, 1, 1, 1, 1]", "AlgorithmsIDsEnd": "0"}}

2
cachedir/joblib/run/GridSearchForModels/8e80923b781a32dc2365aa1381c36157/metadata.json → cachedir/joblib/run/GridSearchForModels/3e589fe0fa65fac056ce8e152ff3ecba/metadata.json
Unescape View File

@ -1 +1 @@
{"duration": 359.44206166267395, "input_args": {"XData": " sepal_l sepal_w petal_l petal_w\n0 6.3 3.3 6.0 2.5\n1 7.1 3.0 5.9 2.1\n2 5.8 2.7 5.1 1.9\n3 6.3 2.9 5.6 1.8\n4 7.6 3.0 6.6 2.1\n.. ... ... ... ...\n145 5.1 3.8 1.6 0.2\n146 5.0 3.5 1.6 0.6\n147 5.1 3.4 1.5 0.2\n148 4.6 3.2 1.4 0.2\n149 4.8 3.0 1.4 0.3\n\n[150 rows x 4 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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]", "clf": "RandomForestClassifier(bootstrap=True, class_weight=None, criterion='entropy',\n max_depth=None, max_features='auto', max_leaf_nodes=None,\n min_impurity_decrease=0.0, min_impurity_split=None,\n min_samples_leaf=1, min_samples_split=2,\n min_weight_fraction_leaf=0.0, n_estimators=119,\n n_jobs=None, oob_score=False, random_state=None,\n verbose=0, warm_start=False)", "params": "{'n_estimators': [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, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119], 'criterion': ['gini', 'entropy']}", "eachAlgor": "'RF'", "factors": "[1, 1, 1, 1, 1]", "AlgorithmsIDsEnd": "576"}} {"duration": 335.52157711982727, "input_args": {"XData": " sepal_l sepal_w petal_l petal_w\n0 6.3 3.3 6.0 2.5\n1 7.1 3.0 5.9 2.1\n2 5.8 2.7 5.1 1.9\n3 6.3 2.9 5.6 1.8\n4 7.6 3.0 6.6 2.1\n.. ... ... ... ...\n145 5.1 3.8 1.6 0.2\n146 5.0 3.5 1.6 0.6\n147 5.1 3.4 1.5 0.2\n148 4.6 3.2 1.4 0.2\n149 4.8 3.0 1.4 0.3\n\n[150 rows x 4 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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]", "clf": "RandomForestClassifier(bootstrap=True, class_weight=None, criterion='entropy',\n max_depth=None, max_features='auto', max_leaf_nodes=None,\n min_impurity_decrease=0.0, min_impurity_split=None,\n min_samples_leaf=1, min_samples_split=2,\n min_weight_fraction_leaf=0.0, n_estimators=119,\n n_jobs=None, oob_score=False, random_state=None,\n verbose=0, warm_start=False)", "params": "{'n_estimators': [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, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119], 'criterion': ['gini', 'entropy']}", "eachAlgor": "'RF'", "factors": "[1, 1, 1, 1, 1]", "AlgorithmsIDsEnd": "576"}}

BIN
cachedir/joblib/run/GridSearchForModels/65cf512fe73627ad01497d789001f38b/output.pkl
View File

Binary file not shown.

BIN
cachedir/joblib/run/GridSearchForModels/d109acd8d5a29b882753c4dd79f6b7ac/output.pkl
View File

Binary file not shown.

BIN
cachedir/joblib/run/GridSearchForModels/d3f870ddccd6a0536b79f604734d6849/output.pkl
View File

Binary file not shown.

1
cachedir/joblib/run/GridSearchForModels/d3ffb9c0e5d4e64abbb8f8a71e13e521/metadata.json
Unescape View File

@ -1 +0,0 @@
{"duration": 2426.6991608142853, "input_args": {"XData": " Pregnan Glucose BloodPress SkinThick Insulin BMI DPF Age\n0 8 183 64 0 0 23.3 0.672 32\n1 2 197 70 45 543 30.5 0.158 53\n2 8 125 96 0 0 0.0 0.232 54\n3 10 168 74 0 0 38.0 0.537 34\n4 1 189 60 23 846 30.1 0.398 59\n.. ... ... ... ... ... ... ... ...\n763 9 89 62 0 0 22.5 0.142 33\n764 2 122 70 27 0 36.8 0.340 27\n765 10 101 76 48 180 32.9 0.171 63\n766 5 121 72 23 112 26.2 0.245 30\n767 1 93 70 31 0 30.4 0.315 23\n\n[768 rows x 8 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 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": "KNeighborsClassifier(algorithm='ball_tree', leaf_size=30, metric='minkowski',\n metric_params=None, n_jobs=None, n_neighbors=24, p=2,\n weights='distance')", "params": "{'n_neighbors': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24], 'weights': ['uniform', 'distance'], 'algorithm': ['brute', 'kd_tree', 'ball_tree'], 'metric': ['chebyshev', 'manhattan', 'euclidean', 'minkowski']}", "eachAlgor": "'KNN'", "factors": "[1, 1, 1, 1, 1]", "AlgorithmsIDsEnd": "0"}}

BIN
cachedir/joblib/run/GridSearchForModels/ef9a593cce41dd71bdac1d445edc2a58/output.pkl
View File

Binary file not shown.

1
cachedir/joblib/run/GridSearchForModels/fa486d0ef10b213eeae65d5db1f9232b/metadata.json
Unescape View File

@ -1 +0,0 @@
{"duration": 923.801488161087, "input_args": {"XData": " Pregnan Glucose BloodPress SkinThick Insulin BMI DPF Age\n0 8 183 64 0 0 23.3 0.672 32\n1 2 197 70 45 543 30.5 0.158 53\n2 8 125 96 0 0 0.0 0.232 54\n3 10 168 74 0 0 38.0 0.537 34\n4 1 189 60 23 846 30.1 0.398 59\n.. ... ... ... ... ... ... ... ...\n763 9 89 62 0 0 22.5 0.142 33\n764 2 122 70 27 0 36.8 0.340 27\n765 10 101 76 48 180 32.9 0.171 63\n766 5 121 72 23 112 26.2 0.245 30\n767 1 93 70 31 0 30.4 0.315 23\n\n[768 rows x 8 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 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(bootstrap=True, class_weight=None, criterion='entropy',\n max_depth=None, max_features='auto', max_leaf_nodes=None,\n min_impurity_decrease=0.0, min_impurity_split=None,\n min_samples_leaf=1, min_samples_split=2,\n min_weight_fraction_leaf=0.0, n_estimators=119,\n n_jobs=None, oob_score=False, random_state=None,\n verbose=0, warm_start=False)", "params": "{'n_estimators': [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, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119], 'criterion': ['gini', 'entropy']}", "eachAlgor": "'RF'", "factors": "[1, 1, 1, 1, 1]", "AlgorithmsIDsEnd": "576"}}

6
cachedir/joblib/run/GridSearchForModels/func_code.py
Unescape View File

@ -1,4 +1,4 @@
# first line: 463 # first line: 465
@memory.cache @memory.cache
def GridSearchForModels(XData, yData, clf, params, eachAlgor, factors, AlgorithmsIDsEnd): def GridSearchForModels(XData, yData, clf, params, eachAlgor, factors, AlgorithmsIDsEnd):
@ -46,12 +46,12 @@ def GridSearchForModels(XData, yData, clf, params, eachAlgor, factors, Algorithm
# copy and filter in order to get only the metrics # copy and filter in order to get only the metrics
metrics = df_cv_results_classifiers.copy() metrics = df_cv_results_classifiers.copy()
metrics = metrics.filter(['mean_test_accuracy','mean_test_f1_macro','mean_test_precision','mean_test_recall','mean_test_jaccard']) metrics = metrics.filter(['mean_test_accuracy','mean_test_f1_macro','mean_test_precision','mean_test_recall','mean_test_jaccard'])
# control the factors # control the factors
sumperModel = [] sumperModel = []
for index, row in metrics.iterrows(): for index, row in metrics.iterrows():
rowSum = 0 rowSum = 0
lengthFactors = NumberofscoringMetrics lengthFactors = len(scoring)
for loop,elements in enumerate(row): for loop,elements in enumerate(row):
lengthFactors = lengthFactors - 1 + factors[loop] lengthFactors = lengthFactors - 1 + factors[loop]
rowSum = elements*factors[loop] + rowSum rowSum = elements*factors[loop] + rowSum

33
frontend/src/components/AlgorithmHyperParam.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<div id="PCP" class="parcoords" style="height:200px"></div> <div id="PCP" class="parcoords" style="min-height: 307px;"></div>
</template> </template>
<script> <script>
@ -19,6 +19,7 @@ export default {
ModelsPerformance: 0, ModelsPerformance: 0,
selAlgorithm: 0, selAlgorithm: 0,
pc: 0, pc: 0,
factors: [1,1,1,1,1],
KNNModels: 576 //KNN models KNNModels: 576 //KNN models
} }
}, },
@ -32,6 +33,29 @@ export default {
var colors = ['#8dd3c7','#8da0cb'] var colors = ['#8dd3c7','#8da0cb']
var colorGiv = 0 var colorGiv = 0
var factorsLocal = this.factors
var divide = 0
factorsLocal.forEach(element => {
divide = element + divide
});
var Mc1 = []
const performanceAlg1 = JSON.parse(this.ModelsPerformance[6])
for (let j = 0; j < Object.values(performanceAlg1['mean_test_accuracy']).length; j++) {
let sum
sum = (factorsLocal[0] * Object.values(performanceAlg1['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlg1['mean_test_f1_macro'])[j]) + (factorsLocal[2] * Object.values(performanceAlg1['mean_test_precision'])[j]) + (factorsLocal[3] * Object.values(performanceAlg1['mean_test_recall'])[j]) + (factorsLocal[4] * Object.values(performanceAlg1['mean_test_jaccard'])[j])
Mc1.push((sum/divide)*100)
}
var Mc2 = []
const performanceAlg2 = JSON.parse(this.ModelsPerformance[14])
for (let j = 0; j < Object.values(performanceAlg2['mean_test_accuracy']).length; j++) {
let sum2
sum2 = (factorsLocal[0] * Object.values(performanceAlg2['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlg2['mean_test_f1_macro'])[j]) + (factorsLocal[2] * Object.values(performanceAlg2['mean_test_precision'])[j]) + (factorsLocal[3] * Object.values(performanceAlg2['mean_test_recall'])[j]) + (factorsLocal[4] * Object.values(performanceAlg2['mean_test_jaccard'])[j])
Mc2.push((sum2/divide)*100)
}
var Combined = 0 var Combined = 0
if (this.selAlgorithm == 'KNN') { if (this.selAlgorithm == 'KNN') {
Combined = JSON.parse(this.ModelsPerformance[1]) Combined = JSON.parse(this.ModelsPerformance[1])
@ -49,10 +73,10 @@ export default {
for (var i = 0; i < valuesPerf.length; i++) { for (var i = 0; i < valuesPerf.length; i++) {
if (this.selAlgorithm === 'KNN') { if (this.selAlgorithm === 'KNN') {
// There is a problem here! // There is a problem here!
newObjectsParams.push({model: i,'perf_metrics': valuesPerf[i],'n_neighbors':ObjectsParams[i].n_neighbors,'metric':ObjectsParams[i].metric,'algorithm':ObjectsParams[i].algorithm,'weights':ObjectsParams[i].weights}) newObjectsParams.push({model: i,'perf_metrics': Mc1[i],'n_neighbors':ObjectsParams[i].n_neighbors,'metric':ObjectsParams[i].metric,'algorithm':ObjectsParams[i].algorithm,'weights':ObjectsParams[i].weights})
ArrayCombined[i] = newObjectsParams[i] ArrayCombined[i] = newObjectsParams[i]
} else { } else {
newObjectsParams2.push({model: this.KNNModels + i,'perf_metrics': valuesPerf[i],'n_estimators':ObjectsParams[i].n_estimators,'criterion':ObjectsParams[i].criterion}) newObjectsParams2.push({model: this.KNNModels + i,'perf_metrics': Mc2[i],'n_estimators':ObjectsParams[i].n_estimators,'criterion':ObjectsParams[i].criterion})
ArrayCombined[i] = newObjectsParams2[i] ArrayCombined[i] = newObjectsParams2[i]
} }
} }
@ -91,6 +115,9 @@ export default {
EventBus.$on('ResponsiveandChange', this.PCPView) EventBus.$on('ResponsiveandChange', this.PCPView)
EventBus.$on('emittedEventCallingModelClear', this.clear) EventBus.$on('emittedEventCallingModelClear', this.clear)
EventBus.$on('CallFactorsView', data => { this.factors = data })
EventBus.$on('CallFactorsView', this.PCPView)
// reset view // reset view
EventBus.$on('resetViews', this.reset) EventBus.$on('resetViews', this.reset)
EventBus.$on('clearPCP', this.reset) EventBus.$on('clearPCP', this.reset)

37
frontend/src/components/Algorithms.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div id="exploding_boxplot" class="exploding_boxplot"></div> <div id="exploding_boxplot" class="exploding_boxplot" style="min-height: 430px;"></div>
</div> </div>
</template> </template>
@ -28,6 +28,7 @@ export default {
parameters: [], parameters: [],
algorithm1: [], algorithm1: [],
algorithm2: [], algorithm2: [],
factors: [1,1,1,1,1],
chart: '', chart: '',
flagEmpty: 0, flagEmpty: 0,
ActiveModels: [], ActiveModels: [],
@ -44,6 +45,29 @@ export default {
// retrieve models ID // retrieve models ID
const Algor1IDs = this.PerformanceAllModels[0] const Algor1IDs = this.PerformanceAllModels[0]
const Algor2IDs = this.PerformanceAllModels[8] const Algor2IDs = this.PerformanceAllModels[8]
var factorsLocal = this.factors
var divide = 0
factorsLocal.forEach(element => {
divide = element + divide
});
var Mc1 = []
const performanceAlg1 = JSON.parse(this.PerformanceAllModels[6])
for (let j = 0; j < Object.values(performanceAlg1['mean_test_accuracy']).length; j++) {
let sum
sum = (factorsLocal[0] * Object.values(performanceAlg1['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlg1['mean_test_f1_macro'])[j]) + (factorsLocal[2] * Object.values(performanceAlg1['mean_test_precision'])[j]) + (factorsLocal[3] * Object.values(performanceAlg1['mean_test_recall'])[j]) + (factorsLocal[4] * Object.values(performanceAlg1['mean_test_jaccard'])[j])
Mc1.push((sum/divide)*100)
}
var Mc2 = []
const performanceAlg2 = JSON.parse(this.PerformanceAllModels[14])
for (let j = 0; j < Object.values(performanceAlg2['mean_test_accuracy']).length; j++) {
let sum2
sum2 = (factorsLocal[0] * Object.values(performanceAlg2['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlg2['mean_test_f1_macro'])[j]) + (factorsLocal[2] * Object.values(performanceAlg2['mean_test_precision'])[j]) + (factorsLocal[3] * Object.values(performanceAlg2['mean_test_recall'])[j]) + (factorsLocal[4] * Object.values(performanceAlg2['mean_test_jaccard'])[j])
Mc2.push((sum2/divide)*100)
}
// retrieve the results like performance // retrieve the results like performance
const PerformAlgor1 = JSON.parse(this.PerformanceAllModels[1]) const PerformAlgor1 = JSON.parse(this.PerformanceAllModels[1])
@ -53,13 +77,13 @@ export default {
this.algorithm1 = [] this.algorithm1 = []
this.algorithm2 = [] this.algorithm2 = []
this.parameters = [] this.parameters = []
for (var i = 0; i < Object.keys(PerformAlgor1['0']).length; i++) { for (var i = 0; i < Object.keys(PerformAlgor1['0']).length; i++) {
this.algorithm1.push({'Performance Metrics': Object.values(PerformAlgor1['0'])[i]*100,Algorithm:'KNN',Model:'Model ' + Algor1IDs[i] + '; Parameters '+JSON.stringify(Object.values(PerformAlgor1['params'])[i])+'; Performance Metrics ',ModelID:Algor1IDs[i]}) this.algorithm1.push({'Performance Metrics': Mc1[i],Algorithm:'KNN',Model:'Model ' + Algor1IDs[i] + '; Parameters '+JSON.stringify(Object.values(PerformAlgor1['params'])[i])+'; Performance Metrics ',ModelID:Algor1IDs[i]})
this.parameters.push(JSON.stringify(Object.values(PerformAlgor1['params'])[i])) this.parameters.push(JSON.stringify(Object.values(PerformAlgor1['params'])[i]))
} }
for (let j = 0; j < Object.keys(PerformAlgor2['0']).length; j++) { for (let j = 0; j < Object.keys(PerformAlgor2['0']).length; j++) {
this.algorithm2.push({'Performance Metrics': Object.values(PerformAlgor2['0'])[j]*100,Algorithm:'RF',Model:'Model ' + Algor2IDs[j] + '; Parameters '+JSON.stringify(Object.values(PerformAlgor2['params'])[j])+'; Performance Metrics ',ModelID:Algor2IDs[j]}) this.algorithm2.push({'Performance Metrics': Mc2[j],Algorithm:'RF',Model:'Model ' + Algor2IDs[j] + '; Parameters '+JSON.stringify(Object.values(PerformAlgor2['params'])[j])+'; Performance Metrics ',ModelID:Algor2IDs[j]})
this.parameters.push(JSON.stringify(Object.values(PerformAlgor2['params'])[j])) this.parameters.push(JSON.stringify(Object.values(PerformAlgor2['params'])[j]))
} }
@ -75,7 +99,7 @@ export default {
// label : displayed text in toolbox // label : displayed text in toolbox
this.chart = exploding_boxplot(data, {y:'Performance Metrics',group:'Algorithm',color:'Algorithm',label:'Model'}) this.chart = exploding_boxplot(data, {y:'Performance Metrics',group:'Algorithm',color:'Algorithm',label:'Model'})
this.chart.width(this.WH[0]*3) // interactive visualization this.chart.width(this.WH[0]*3) // interactive visualization
this.chart.height(this.WH[1]) // interactive visualization this.chart.height(this.WH[1]*0.9) // interactive visualization
//call chart on a div //call chart on a div
this.chart('#exploding_boxplot') this.chart('#exploding_boxplot')
@ -350,6 +374,9 @@ export default {
this.selectedAlgorithm = data}) this.selectedAlgorithm = data})
EventBus.$on('brusheAllOn', this.brushActivationAll) EventBus.$on('brusheAllOn', this.brushActivationAll)
EventBus.$on('CallFactorsView', data => { this.factors = data })
EventBus.$on('CallFactorsView', this.boxplot)
// reset the views // reset the views
EventBus.$on('resetViews', this.reset) EventBus.$on('resetViews', this.reset)
} }

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

@ -32,8 +32,8 @@
svg.selectAll("*").remove(); svg.selectAll("*").remove();
// responsive visualizations // responsive visualizations
var widthInitial = this.responsiveWidthHeight[0]*3 var widthInitial = this.responsiveWidthHeight[0]*6.5
var heightInitial = this.responsiveWidthHeight[1]/1.6 var heightInitial = this.responsiveWidthHeight[1]*0.5
var performancePerModel = JSON.parse(this.resultsfromOverview[0]) var performancePerModel = JSON.parse(this.resultsfromOverview[0])
var performancePerModelSelection = [] var performancePerModelSelection = []
@ -186,12 +186,12 @@
// Handmade legend // Handmade legend
var heightforText = 175 var heightforText = 215
svg.append("circle").attr("cx",30).attr("cy",heightforText).attr("r", 6).style("fill", "#000") svg.append("circle").attr("cx", 215).attr("cy", heightforText-1.5).attr("r", 6).style("fill", "#000")
svg.append("circle").attr("cx",350).attr("cy",heightforText).attr("r", 6).style("fill", "#D3D3D3") svg.append("circle").attr("cx", 785).attr("cy", heightforText-1.5).attr("r", 6).style("fill", "#D3D3D3")
svg.append("text").attr("x", 50).attr("y", heightforText).text("Entire distribution").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 230).attr("y", heightforText).text("Entire distribution").style("font-size", "15px").attr("alignment-baseline","middle")
svg.append("text").attr("x", 210).attr("y", heightforText).text("Performance").style("font-size", "15px").attr("alignment-baseline","top") svg.append("text").attr("x", 515).attr("y", heightforText-10).text("Performance").style("font-size", "15px").attr("alignment-baseline","top")
svg.append("text").attr("x", 370).attr("y", heightforText).text("Selected points").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 800).attr("y", heightforText).text("Selected points").style("font-size", "15px").attr("alignment-baseline","middle")
// Function to compute density // Function to compute density
function kernelDensityEstimator(kernel, X) { function kernelDensityEstimator(kernel, X) {

38
frontend/src/components/BarChart.vue
Unescape View File

@ -1,7 +1,7 @@
<template> <template>
<b-row> <b-row>
<b-col cols="12"> <b-col cols="12">
<div id="barChart" class="barChart"></div> <div id="barChart" class="barChart" style="min-height: 307px;"></div>
</b-col> </b-col>
</b-row> </b-row>
</template> </template>
@ -18,6 +18,7 @@ export default {
ClassNamesOverview: '', ClassNamesOverview: '',
algorithmsinBar: [], algorithmsinBar: [],
modelsSelectedinBar: [], modelsSelectedinBar: [],
factors: [1,1,1,1,1],
KNNModels: 576, //KNN models, KNNModels: 576, //KNN models,
colorsValues: ['#6a3d9a','#b15928','#e31a1c'], colorsValues: ['#6a3d9a','#b15928','#e31a1c'],
WH: [] WH: []
@ -31,6 +32,10 @@ export default {
var KNNModels = [] var KNNModels = []
var RFModels = [] var RFModels = []
var factorsLocal = this.factors
var divide = factorsLocal[1] + factorsLocal[2] + factorsLocal[3]
if (this.modelsSelectedinBar.length != 0){ if (this.modelsSelectedinBar.length != 0){
for (let i=0; i<this.algorithmsinBar.length;i++) { for (let i=0; i<this.algorithmsinBar.length;i++) {
if (this.algorithmsinBar[i] === "KNN") { if (this.algorithmsinBar[i] === "KNN") {
@ -51,12 +56,12 @@ export default {
temp = 0 temp = 0
temp2 = 0 temp2 = 0
for (var j=0;j<Object.keys(PerClassMetrics[target_names[i]]).length;j++){ for (var j=0;j<Object.keys(PerClassMetrics[target_names[i]]).length;j++){
temp = temp + (Object.values(PerClassMetrics)[i][j]['f1-score']+Object.values(PerClassMetrics)[i][j]['precision']+Object.values(PerClassMetrics)[i][j]['recall'])/3 temp = temp + ((Object.values(PerClassMetrics)[i][j]['f1-score']*factorsLocal[1])+(Object.values(PerClassMetrics)[i][j]['precision']*factorsLocal[2])+(Object.values(PerClassMetrics)[i][j]['recall']*factorsLocal[3]))/divide
} }
temp = temp/Object.keys(PerClassMetrics[target_names[i]]).length temp = temp/Object.keys(PerClassMetrics[target_names[i]]).length
sum.push(temp) sum.push(temp)
for (var k=0;k<Object.keys(PerClassMetrics2[target_names[i]]).length;k++){ for (var k=0;k<Object.keys(PerClassMetrics2[target_names[i]]).length;k++){
temp2 = temp2 + (Object.values(PerClassMetrics2)[i][k]['f1-score']+Object.values(PerClassMetrics2)[i][k]['precision']+Object.values(PerClassMetrics2)[i][k]['recall'])/3 temp2 = temp2 + ((Object.values(PerClassMetrics2)[i][k]['f1-score']*factorsLocal[1])+(Object.values(PerClassMetrics2)[i][k]['precision']*factorsLocal[2])+(Object.values(PerClassMetrics2)[i][k]['recall']*factorsLocal[3]))/divide
} }
temp2 = temp2/Object.keys(PerClassMetrics2[target_names[i]]).length temp2 = temp2/Object.keys(PerClassMetrics2[target_names[i]]).length
sum.push(temp2) sum.push(temp2)
@ -71,12 +76,12 @@ export default {
if (KNNModels.length == 0) { if (KNNModels.length == 0) {
for (var j=0;j<Object.keys(PerClassMetrics[target_names[i]]).length;j++){ for (var j=0;j<Object.keys(PerClassMetrics[target_names[i]]).length;j++){
temp = temp + (Object.values(PerClassMetrics)[i][j]['f1-score']+Object.values(PerClassMetrics)[i][j]['precision']+Object.values(PerClassMetrics)[i][j]['recall'])/3 temp = temp + ((Object.values(PerClassMetrics)[i][j]['f1-score']*factorsLocal[1])+(Object.values(PerClassMetrics)[i][j]['precision']*factorsLocal[2])+(Object.values(PerClassMetrics)[i][j]['recall']*factorsLocal[3]))/divide
} }
temp = temp/Object.keys(PerClassMetrics[target_names[i]]).length temp = temp/Object.keys(PerClassMetrics[target_names[i]]).length
} else { } else {
for (var j=0;j<KNNModels.length;j++){ for (var j=0;j<KNNModels.length;j++){
temp = temp + (Object.values(PerClassMetrics)[i][KNNModels[j]]['f1-score']+Object.values(PerClassMetrics)[i][KNNModels[j]]['precision']+Object.values(PerClassMetrics)[i][KNNModels[j]]['recall'])/3 temp = temp + ((Object.values(PerClassMetrics)[i][j]['f1-score']*factorsLocal[1])+(Object.values(PerClassMetrics)[i][j]['precision']*factorsLocal[2])+(Object.values(PerClassMetrics)[i][j]['recall']*factorsLocal[3]))/divide
} }
temp = temp/KNNModels.length temp = temp/KNNModels.length
} }
@ -84,12 +89,12 @@ export default {
if (RFModels.length == 0) { if (RFModels.length == 0) {
for (var k=0;k<Object.keys(PerClassMetrics2[target_names[i]]).length;k++){ for (var k=0;k<Object.keys(PerClassMetrics2[target_names[i]]).length;k++){
temp2 = temp2 + (Object.values(PerClassMetrics2)[i][k]['f1-score']+Object.values(PerClassMetrics2)[i][k]['precision']+Object.values(PerClassMetrics2)[i][k]['recall'])/3 temp2 = temp2 + ((Object.values(PerClassMetrics2)[i][k]['f1-score']*factorsLocal[1])+(Object.values(PerClassMetrics2)[i][k]['precision']*factorsLocal[2])+(Object.values(PerClassMetrics2)[i][k]['recall']*factorsLocal[3]))/divide
} }
temp2 = temp2/Object.keys(PerClassMetrics2[target_names[i]]).length temp2 = temp2/Object.keys(PerClassMetrics2[target_names[i]]).length
} else { } else {
for (var k=0;k<RFModels.length;k++){ for (var k=0;k<RFModels.length;k++){
temp2 = temp2 + (Object.values(PerClassMetrics2)[i][RFModels[k]]['f1-score']+Object.values(PerClassMetrics2)[i][RFModels[k]]['precision']+Object.values(PerClassMetrics2)[i][RFModels[k]]['recall'])/3 temp2 = temp2 + ((Object.values(PerClassMetrics2)[i][k]['f1-score']*factorsLocal[1])+(Object.values(PerClassMetrics2)[i][k]['precision']*factorsLocal[2])+(Object.values(PerClassMetrics2)[i][k]['recall']*factorsLocal[3]))/divide
} }
temp2 = temp2/RFModels.length temp2 = temp2/RFModels.length
} }
@ -101,7 +106,7 @@ export default {
autosize: true, autosize: true,
barmode: 'group', barmode: 'group',
width: this.WH[0]*3, width: this.WH[0]*3,
height: this.WH[1], height: this.WH[1]*0.635,
xaxis: { xaxis: {
title: 'Algorithm', title: 'Algorithm',
type:"category", type:"category",
@ -111,12 +116,7 @@ export default {
showexponent: 'all' showexponent: 'all'
}, },
yaxis: { yaxis: {
title: 'Per Class Performance Metrics', title: 'Performance Metrics',
titlefont: {
family: 'Arial, sans-serif',
size: 18,
color: 'grey'
}
}, },
xaxis2: { xaxis2: {
overlaying: 'x', overlaying: 'x',
@ -127,10 +127,10 @@ export default {
showexponent: 'all' showexponent: 'all'
}, },
margin: { margin: {
l: 40, l: 50,
r: 0, r: 0,
b: 40, b: 30,
t: 25, t: 30,
pad: 0 pad: 0
} }
} }
@ -183,11 +183,15 @@ export default {
EventBus.$on('emittedEventCallingBarChart', this.BarChartView) EventBus.$on('emittedEventCallingBarChart', this.BarChartView)
EventBus.$on('emittedEventCallingUpdateBarChart', data => { this.ModelsChosen = data }) EventBus.$on('emittedEventCallingUpdateBarChart', data => { this.ModelsChosen = data })
EventBus.$on('emittedEventCallingUpdateBarChart', this.BarChartView) EventBus.$on('emittedEventCallingUpdateBarChart', this.BarChartView)
EventBus.$on('Responsive', data => { EventBus.$on('Responsive', data => {
this.WH = data}) this.WH = data})
EventBus.$on('ResponsiveandChange', data => { EventBus.$on('ResponsiveandChange', data => {
this.WH = data}) this.WH = data})
EventBus.$on('CallFactorsView', data => { this.factors = data })
EventBus.$on('CallFactorsView', this.BarChartView)
// reset view // reset view
EventBus.$on('resetViews', this.reset) EventBus.$on('resetViews', this.reset)
} }

14
frontend/src/components/Controller.vue
Unescape View File

@ -1,12 +1,10 @@
<template> <template>
<div> <button style="floatfloat: right;"
<button id="Execute"
id="Execute" v-on:click="execute">
v-on:click="execute"> <font-awesome-icon icon="play" />
<font-awesome-icon icon="play" /> {{ valueExecute }}
{{ valueExecute }} </button>
</button>
</div>
</template> </template>
<script> <script>

4
frontend/src/components/DataSpace.vue
Unescape View File

@ -100,8 +100,8 @@ export default {
Plotly.purge('OverviewDataPlotly') Plotly.purge('OverviewDataPlotly')
// responsive visualization // responsive visualization
let width = this.responsiveWidthHeight[0]*3 let width = this.responsiveWidthHeight[0]*6.5
let height = this.responsiveWidthHeight[1]*2.1 let height = this.responsiveWidthHeight[1]*1.1
var target_names = JSON.parse(this.dataPoints[0]) var target_names = JSON.parse(this.dataPoints[0])
const XandYCoordinatesMDS = JSON.parse(this.dataPoints[1]) const XandYCoordinatesMDS = JSON.parse(this.dataPoints[1])

26
frontend/src/components/FinalResultsLinePlot.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<div id="LinePlot" class="LinePlot"></div> <div id="LinePlot" style="min-height: 307px;"></div>
</template> </template>
<script> <script>
@ -93,8 +93,7 @@ export default {
var xaxisReversed = [] var xaxisReversed = []
xaxisReversed = this.xaxis.slice().reverse() xaxisReversed = this.xaxis.slice().reverse()
xaxisReversed = this.xaxis.concat(xaxisReversed) xaxisReversed = this.xaxis.concat(xaxisReversed)
var width = this.WH[0]*3 // interactive visualization
var height = this.WH[1]*1.5 // interactive visualization
// fill in 'text' array for hover // fill in 'text' array for hover
var text = this.scoresSTD.map (function(value, i) { var text = this.scoresSTD.map (function(value, i) {
return `STD: +/-${value}` return `STD: +/-${value}`
@ -255,8 +254,11 @@ export default {
} }
const DataforLinePlot = [trace1, trace2, trace7, trace8, trace3, trace4, trace9, trace10, trace5, trace6, trace11, trace12] const DataforLinePlot = [trace1, trace2, trace7, trace8, trace3, trace4, trace9, trace10, trace5, trace6, trace11, trace12]
const layout = {
title: 'Stack Ensemble Learning Score', var width = this.WH[0]*3 // interactive visualization
var height = this.WH[1]*0.6 // interactive visualization
var layout = {
paper_bgcolor: "rgb(255,255,255)", paper_bgcolor: "rgb(255,255,255)",
plot_bgcolor: "rgb(229,229,229)", plot_bgcolor: "rgb(229,229,229)",
xaxis: { xaxis: {
@ -281,9 +283,16 @@ export default {
ticks: "outside", ticks: "outside",
zeroline: false zeroline: false
}, },
autosize: true, autosize: false,
width: width, width: width,
height: height, height: height,
margin: {
l: 60,
r: 40,
b: 40,
t: 40,
pad: 0
},
} }
Plotly.newPlot('LinePlot', DataforLinePlot, layout, {showSendToCloud: true, responsive: true}) Plotly.newPlot('LinePlot', DataforLinePlot, layout, {showSendToCloud: true, responsive: true})
} }
@ -293,6 +302,11 @@ export default {
this.FinalResultsforLinePlot = data}) this.FinalResultsforLinePlot = data})
EventBus.$on('emittedEventCallingLinePlot', this.LinePlotView) EventBus.$on('emittedEventCallingLinePlot', this.LinePlotView)
EventBus.$on('Responsive', data => {
this.WH = data})
EventBus.$on('ResponsiveandChange', data => {
this.WH = data})
// reset the views // reset the views
EventBus.$on('resetViews', this.reset) EventBus.$on('resetViews', this.reset)
} }

14
frontend/src/components/Heatmap.vue
Unescape View File

@ -23,7 +23,8 @@ export default {
classesNumber: 10, classesNumber: 10,
cellSize: 20, cellSize: 20,
ModelsIDHeatStack: [], ModelsIDHeatStack: [],
highlighted: [] highlighted: [],
responsiveWidthHeight: []
} }
}, },
methods: { methods: {
@ -177,8 +178,8 @@ export default {
svg.attr('transform', d3.event.transform) // updated for d3 v4 svg.attr('transform', d3.event.transform) // updated for d3 v4
}) })
//================================================== //==================================================
var viewerWidth = $(document).width()/2.2; var viewerWidth = this.responsiveWidthHeight[0]*6.5
var viewerHeight = $(document).height()/5.5; var viewerHeight = this.responsiveWidthHeight[1]*1.1
var viewerPosTop = 125; var viewerPosTop = 125;
var viewerPosLeft = 100; var viewerPosLeft = 100;
@ -388,7 +389,7 @@ export default {
var legend = svg.append("g") var legend = svg.append("g")
.attr("class", "legend") .attr("class", "legend")
.attr("transform", "translate(0,-240)") .attr("transform", "translate(0,0)")
.selectAll(".legendElement") .selectAll(".legendElement")
.data([0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9]) .data([0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9])
.enter().append("g") .enter().append("g")
@ -582,6 +583,11 @@ export default {
EventBus.$on('SendSelectedPointsToBrushHeatmap', data => { this.highlighted = data; }) EventBus.$on('SendSelectedPointsToBrushHeatmap', data => { this.highlighted = data; })
EventBus.$on('SendSelectedPointsToBrushHeatmap', this.brush) EventBus.$on('SendSelectedPointsToBrushHeatmap', this.brush)
EventBus.$on('Responsive', data => {
this.responsiveWidthHeight = data})
EventBus.$on('ResponsiveandChange', data => {
this.responsiveWidthHeight = data})
// reset the views // reset the views
EventBus.$on('resetViews', this.reset) EventBus.$on('resetViews', this.reset)
} }

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

@ -6,114 +6,138 @@
<b-row class="md-3"> <b-row class="md-3">
<b-col cols="3"> <b-col cols="3">
<mdb-card> <mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Data and Performance Metrics Selection</mdb-card-header> <mdb-card-header color="primary-color" tag="h5" class="text-center">Data Set and Validation Metrics Manager</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" >
<DataSetExecController/>
<SlidersController/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
<mdb-card style="margin-top: 15px">
<mdb-card-header color="primary-color" tag="h5" class="text-center">HyperParameters Space Exploration Overview</mdb-card-header>
<mdb-card-body>
<Parameters/>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="3">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Models Space Visualization
[Sel.:{{OverSelLength}}/All:{{OverAllLength}}]
</mdb-card-header>
<mdb-card-body> <mdb-card-body>
<ScatterPlot/> <mdb-card-text class="text-left">
<PerMetricBarChart/> <DataSetExecController/>
<SlidersController/>
</mdb-card-text>
</mdb-card-body> </mdb-card-body>
</mdb-card> </mdb-card>
</b-col> </b-col>
<b-col cols="3"> <b-col cols="6">
<mdb-card> <mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Predictions Space Visualization</mdb-card-header> <mdb-card-header color="primary-color" tag="h5" class="text-center">Current Stacking Ensemble</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center">
<PredictionsSpace/>
<BalancePredictions/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="3">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Data Space Visualization</mdb-card-header>
<mdb-card-body> <mdb-card-body>
<mdb-card-text class="text-center"> <Provenance/>
<DataSpace/>
<PCPData/>
</mdb-card-text>
</mdb-card-body> </mdb-card-body>
</mdb-card> </mdb-card>
</b-col> </b-col>
</b-row>
<b-row class="mb-3 mt-3">
<b-col cols="3">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Best Algorithms and HyperParameters Search [Sel.:{{valueSel}}/All:{{valueAll}}]</mdb-card-header>
<mdb-card-body>
<Algorithms :width="width" :height="height"/>
<AlgorithmHyperParam/>
<mdb-card-text class="text-center" >
<Controller/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="6">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Models Feature Selection</mdb-card-header>
<b-row>
<b-col cols="12">
<mdb-card-body>
<Heatmap/>
</mdb-card-body>
</b-col>
</b-row>
<mdb-card-text>
<mdb-card-body>
<ToggleSelection/>
</mdb-card-body>
</mdb-card-text>
</mdb-card>
</b-col>
<b-col cols="3"> <b-col cols="3">
<mdb-card >
<mdb-card> <mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Meta-Model Performance</mdb-card-header> <mdb-card-header color="primary-color" tag="h5" class="text-center">Meta-Model Performance</mdb-card-header>
<mdb-card-body> <mdb-card-body>
<FinalResultsLinePlot/> <FinalResultsLinePlot/>
</mdb-card-body> </mdb-card-body>
</mdb-card> </mdb-card>
</mdb-card>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <ul class="nav nav-tabs" id="myTab" role="tablist" style="margin-top: 15px">
<b-col cols="3"> <li class="nav-item">
<mdb-card> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Algorithms</a>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Diverse Algorithms Exploration</mdb-card-header> </li>
<mdb-card-body> <li class="nav-item">
<BarChart/> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Data</a>
</mdb-card-body> </li>
</mdb-card> <li class="nav-item">
</b-col> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Models</a>
<b-col cols="9"> </li>
<mdb-card> </ul>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Current Stacking Ensemble and Provenance Visualization</mdb-card-header> <div class="tab-content" id="myTabContent">
<mdb-card-body> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<Provenance/> <b-row class="md-3">
</mdb-card-body> <b-col cols="3">
</mdb-card> <mdb-card style="margin-top: 15px">
</b-col> <mdb-card-header color="primary-color" tag="h5" class="text-center">Overview of the Algorithms Space</mdb-card-header>
</b-row> <mdb-card-body class="text-center">
<Parameters/>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="9">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Performance of the Algorithms [Sel.:{{valueSel}}/All:{{valueAll}}]<small class="float-right"><Controller/></small></mdb-card-header>
<mdb-card-body>
<Algorithms :width="width" :height="height"/>
</mdb-card-body>
</mdb-card>
</b-col>
</b-row>
<b-row class="md-3">
<b-col cols="3">
<mdb-card style="margin-top: 15px">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Parameters Manipulation for Each Algorithm</mdb-card-header>
<mdb-card-body>
<AlgorithmHyperParam/>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="9">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Performance of the Algorithms for Each Class</mdb-card-header>
<mdb-card-body>
<BarChart/>
</mdb-card-body>
</mdb-card>
</b-col>
</b-row>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<b-row class="md-3">
<b-col cols="6">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Data Space</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 825px">
<DataSpace/>
<PCPData/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="6">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Features Selection for Each Model</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 845px">
<ToggleSelection/>
<Heatmap/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
</b-row>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<b-row class="md-3">
<b-col cols="6">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Models Space
[Sel.:{{OverSelLength}}/All:{{OverAllLength}}]
</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 845px">
<ScatterPlot/>
<PerMetricBarChart/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="6">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Predictions Space</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 845px">
<PredictionsSpace/>
<BalancePredictions/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
</b-row>
</div>
</div>
</b-container> </b-container>
</div> </div>
</template> </template>
@ -548,8 +572,8 @@ export default Vue.extend({
axios.get(path, axiosConfig) axios.get(path, axiosConfig)
.then(response => { .then(response => {
this.preDataResults = response.data.preDataResults this.preDataResults = response.data.preDataResults
EventBus.$emit('emittedEventCallingDataSpacePlotView', this.preDataResults)
EventBus.$emit('emittedEventCallingDataPCP', this.preDataResults) EventBus.$emit('emittedEventCallingDataPCP', this.preDataResults)
EventBus.$emit('emittedEventCallingDataSpacePlotView', this.preDataResults)
}) })
.catch(error => { .catch(error => {
console.log(error) console.log(error)

10
frontend/src/components/PCPData.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<div id="PCPDataView" class="parcoords" style="width: 300px; height:200px"></div> <div id="PCPDataView" class="parcoords" style="width: 1200px; height:280px"></div>
</template> </template>
<script> <script>
@ -53,4 +53,10 @@ export default {
EventBus.$on('resetViews', this.reset) EventBus.$on('resetViews', this.reset)
} }
} }
</script> </script>
<style>
.parcoords svg {
position: relative !important;
}
</style>

344
frontend/src/components/Parameters.vue
Unescape View File

@ -36,6 +36,337 @@ export default {
svg.selectAll("*").remove(); svg.selectAll("*").remove();
}, 50); }, 50);
}, },
/////////////////////////////////////////////////////////
/////////////// The Radar Chart Function ////////////////
/////////////// Written by Nadieh Bremer ////////////////
////////////////// VisualCinnamon.com ///////////////////
/////////// Inspired by the code of alangrafu ///////////
/////////////////////////////////////////////////////////
RadarChart(id, data, options) {
var cfg = {
w: 600, //Width of the circle
h: 600, //Height of the circle
margin: {top: 20, right: 20, bottom: 20, left: 20}, //The margins of the SVG
levels: 3, //How many levels or inner circles should there be drawn
maxValue: 0, //What is the value that the biggest circle will represent
labelFactor: 1.25, //How much farther than the radius of the outer circle should the labels be placed
wrapWidth: 60, //The number of pixels after which a label needs to be given a new line
opacityArea: 0.35, //The opacity of the area of the blob
dotRadius: 4, //The size of the colored circles of each blog
opacityCircles: 0.1, //The opacity of the circles of each blob
strokeWidth: 2, //The width of the stroke around each blob
roundStrokes: false, //If true the area and stroke will follow a round path (cardinal-closed)
color: d3.scale.category10() //Color function
};
//Put all of the options into a variable called cfg
if('undefined' !== typeof options){
for(var i in options){
if('undefined' !== typeof options[i]){ cfg[i] = options[i]; }
}//for i
}//if
//If the supplied maxValue is smaller than the actual one, replace by the max in the data
var maxValue = Math.max(cfg.maxValue, d3.max(data, function(i){return d3.max(i.map(function(o){return o.value;}))}));
var allAxis = (data[0].map(function(i, j){return i.axis})), //Names of each axis
total = allAxis.length, //The number of different axes
radius = Math.min(cfg.w/2, cfg.h/2), //Radius of the outermost circle
Format = d3.format('%'), //Percentage formatting
angleSlice = Math.PI * 2 / total; //The width in radians of each "slice"
//Scale for the radius
var rScale = d3.scale.linear()
.range([0, radius])
.domain([0, maxValue]);
/////////////////////////////////////////////////////////
//////////// Create the container SVG and g /////////////
/////////////////////////////////////////////////////////
//Remove whatever chart with the same id/class was present before
d3.select(id).select("svg").remove();
//Initiate the radar chart SVG
var svg = d3.select(id).append("svg")
.attr("width", cfg.w + cfg.margin.left + cfg.margin.right)
.attr("height", cfg.h + cfg.margin.top + cfg.margin.bottom)
.attr("class", "radar"+id);
//Append a g element
var g = svg.append("g")
.attr("transform", "translate(" + (cfg.w/2 + cfg.margin.left) + "," + (cfg.h/2 + cfg.margin.top) + ")");
/////////////////////////////////////////////////////////
////////// Glow filter for some extra pizzazz ///////////
/////////////////////////////////////////////////////////
//Filter for the outside glow
var filter = g.append('defs').append('filter').attr('id','glow'),
feGaussianBlur = filter.append('feGaussianBlur').attr('stdDeviation','2.5').attr('result','coloredBlur'),
feMerge = filter.append('feMerge'),
feMergeNode_1 = feMerge.append('feMergeNode').attr('in','coloredBlur'),
feMergeNode_2 = feMerge.append('feMergeNode').attr('in','SourceGraphic');
/////////////////////////////////////////////////////////
/////////////// Draw the Circular grid //////////////////
/////////////////////////////////////////////////////////
//Wrapper for the grid & axes
var axisGrid = g.append("g").attr("class", "axisWrapper");
//Draw the background circles
axisGrid.selectAll(".levels")
.data(d3.range(1,(cfg.levels+1)).reverse())
.enter()
.append("circle")
.attr("class", "gridCircle")
.attr("r", function(d, i){return radius/cfg.levels*d;})
.style("fill", "#CDCDCD")
.style("stroke", "#CDCDCD")
.style("fill-opacity", cfg.opacityCircles)
.style("filter" , "url(#glow)");
//Text indicating at what % each level is
axisGrid.selectAll(".axisLabel")
.data(d3.range(1,(cfg.levels+1)).reverse())
.enter().append("text")
.attr("class", "axisLabel")
.attr("x", 4)
.attr("y", function(d){return -d*radius/cfg.levels;})
.attr("dy", "0.4em")
.style("font-size", "10px")
.attr("fill", "#737373")
.text(function(d,i) { return Format(maxValue * d/cfg.levels); });
/////////////////////////////////////////////////////////
//////////////////// Draw the axes //////////////////////
/////////////////////////////////////////////////////////
//Create the straight lines radiating outward from the center
var axis = axisGrid.selectAll(".axis")
.data(allAxis)
.enter()
.append("g")
.attr("class", "axis");
//Append the lines
axis.append("line")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", function(d, i){ return rScale(maxValue*1.1) * Math.cos(angleSlice*i - Math.PI/2); })
.attr("y2", function(d, i){ return rScale(maxValue*1.1) * Math.sin(angleSlice*i - Math.PI/2); })
.attr("class", "line")
.style("stroke", "white")
.style("stroke-width", "2px");
//Append the labels at each axis
axis.append("text")
.attr("class", "legend")
.style("font-size", "11px")
.attr("text-anchor", "middle")
.attr("dy", "0.35em")
.attr("x", function(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.cos(angleSlice*i - Math.PI/2); })
.attr("y", function(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.sin(angleSlice*i - Math.PI/2); })
.text(function(d){return d})
.call(wrap, cfg.wrapWidth);
/////////////////////////////////////////////////////////
///////////// Draw the radar chart blobs ////////////////
/////////////////////////////////////////////////////////
//The radial line function
var radarLine = d3.svg.line.radial()
.interpolate("linear-closed")
.radius(function(d) { return rScale(d.value); })
.angle(function(d,i) { return i*angleSlice; });
if(cfg.roundStrokes) {
radarLine.interpolate("cardinal-closed");
}
//Create a wrapper for the blobs
var blobWrapper = g.selectAll(".radarWrapper")
.data(data)
.enter().append("g")
.attr("class", "radarWrapper");
//Append the backgrounds
blobWrapper
.append("path")
.attr("class", "radarArea")
.attr("d", function(d,i) { return radarLine(d); })
.style("fill", function(d,i) { return cfg.color(i); })
.style("fill-opacity", cfg.opacityArea)
.on('mouseover', function (d,i){
//Dim all blobs
d3.selectAll(".radarArea")
.transition().duration(200)
.style("fill-opacity", 0.1);
//Bring back the hovered over blob
d3.select(this)
.transition().duration(200)
.style("fill-opacity", 0.7);
})
.on('mouseout', function(){
//Bring back all blobs
d3.selectAll(".radarArea")
.transition().duration(200)
.style("fill-opacity", cfg.opacityArea);
});
//Create the outlines
blobWrapper.append("path")
.attr("class", "radarStroke")
.attr("d", function(d,i) { return radarLine(d); })
.style("stroke-width", cfg.strokeWidth + "px")
.style("stroke", function(d,i) { return cfg.color(i); })
.style("fill", "none")
.style("filter" , "url(#glow)");
//Append the circles
blobWrapper.selectAll(".radarCircle")
.data(function(d,i) { return d; })
.enter().append("circle")
.attr("class", "radarCircle")
.attr("r", cfg.dotRadius)
.attr("cx", function(d,i){ return rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2); })
.attr("cy", function(d,i){ return rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2); })
.style("fill", function(d,i,j) { return cfg.color(j); })
.style("fill-opacity", 0.8);
/////////////////////////////////////////////////////////
//////// Append invisible circles for tooltip ///////////
/////////////////////////////////////////////////////////
//Wrapper for the invisible circles on top
var blobCircleWrapper = g.selectAll(".radarCircleWrapper")
.data(data)
.enter().append("g")
.attr("class", "radarCircleWrapper");
//Append a set of invisible circles on top for the mouseover pop-up
blobCircleWrapper.selectAll(".radarInvisibleCircle")
.data(function(d,i) { return d; })
.enter().append("circle")
.attr("class", "radarInvisibleCircle")
.attr("r", cfg.dotRadius*1.5)
.attr("cx", function(d,i){ return rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2); })
.attr("cy", function(d,i){ return rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2); })
.style("fill", "none")
.style("pointer-events", "all")
.on("mouseover", function(d,i) {
newX = parseFloat(d3.select(this).attr('cx')) - 10;
newY = parseFloat(d3.select(this).attr('cy')) - 10;
tooltip
.attr('x', newX)
.attr('y', newY)
.text(Format(d.value))
.transition().duration(200)
.style('opacity', 1);
})
.on("mouseout", function(){
tooltip.transition().duration(200)
.style("opacity", 0);
});
//Set up the small tooltip for when you hover over a circle
var tooltip = g.append("text")
.attr("class", "tooltip")
.style("opacity", 0);
/////////////////////////////////////////////////////////
/////////////////// Helper Function /////////////////////
/////////////////////////////////////////////////////////
//Taken from http://bl.ocks.org/mbostock/7555321
//Wraps SVG text
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.4, // ems
y = text.attr("y"),
x = text.attr("x"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
}//wrap
},
overview() {
/* Radar chart design created by Nadieh Bremer - VisualCinnamon.com */
//////////////////////////////////////////////////////////////
//////////////////////// Set-Up //////////////////////////////
//////////////////////////////////////////////////////////////
var margin = {top: 50, right: 50, bottom: 50, left: 50},
width = Math.min(420, window.innerWidth - 10) - margin.left - margin.right,
height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);
//////////////////////////////////////////////////////////////
////////////////////////// Data //////////////////////////////
//////////////////////////////////////////////////////////////
var data = [
[
{axis:"KNN",value:1},
{axis:"RF",value:0.30},
{axis:"Alg3",value:0.55},
{axis:"Alg4",value:0.68},
{axis:"Alg5",value:0.22},
{axis:"Alg6",value:0.28},
{axis:"Alg7",value:0.55},
{axis:"Alg9",value:0.68},
{axis:"Alg9",value:0.22},
{axis:"Alg10",value:0.28},
],[
{axis:"KNN",value:0.05},
{axis:"RF",value:0.18},
{axis:"Alg3",value:0.25},
{axis:"Alg4",value:0.28},
{axis:"Alg5",value:0.22},
{axis:"Alg6",value:0.18},
{axis:"Alg7",value:0.45},
{axis:"Alg9",value:0.18},
{axis:"Alg9",value:0.22},
{axis:"Alg10",value:0.18},
],
];
//////////////////////////////////////////////////////////////
//////////////////// Draw the Chart //////////////////////////
//////////////////////////////////////////////////////////////
var color = d3.scale.ordinal()
.range(["#EDC951","#CC333F","#00A0B0"]);
var radarChartOptions = {
w: width,
h: height,
margin: margin,
maxValue: 0.5,
levels: 5,
roundStrokes: true,
color: color
};
//Call function to draw the Radar chart
this.RadarChart("#overview", data, radarChartOptions);
},
draw () { draw () {
// Clear Heatmap first // Clear Heatmap first
var svg = d3.select("#overview"); var svg = d3.select("#overview");
@ -47,7 +378,6 @@ export default {
width = widthinter, width = widthinter,
height = heightinter, height = heightinter,
maxBarHeight = height / 2 - (margin + 70); maxBarHeight = height / 2 - (margin + 70);
var innerRadius = 0.1 * maxBarHeight; // innermost circle var innerRadius = 0.1 * maxBarHeight; // innermost circle
var svg = d3.select('#overview') var svg = d3.select('#overview')
@ -595,11 +925,11 @@ export default {
mounted () { mounted () {
EventBus.$on('updateFlagKNN', data => { this.FlagKNN = data }) EventBus.$on('updateFlagKNN', data => { this.FlagKNN = data })
EventBus.$on('updateFlagRF', data => { this.FlagRF = data }) EventBus.$on('updateFlagRF', data => { this.FlagRF = data })
EventBus.$on('updateFlagKNN', this.draw) EventBus.$on('updateFlagKNN', this.overview)
EventBus.$on('updateFlagRF', this.draw) EventBus.$on('updateFlagRF', this.overview)
EventBus.$on('sendParameters', data => { this.storeParameters = data }) EventBus.$on('sendParameters', data => { this.storeParameters = data })
EventBus.$on('updateActiveModels', data => { this.storeActiveModels = data }) EventBus.$on('updateActiveModels', data => { this.storeActiveModels = data })
EventBus.$on('updateActiveModels', this.draw) EventBus.$on('updateActiveModels', this.overview)
//EventBus.$on('updateActiveModels', this.drawEncodings) //EventBus.$on('updateActiveModels', this.drawEncodings)
EventBus.$on('Responsive', data => { EventBus.$on('Responsive', data => {
@ -611,7 +941,7 @@ export default {
EventBus.$on('resetViews', this.reset) EventBus.$on('resetViews', this.reset)
EventBus.$on('alternateFlagLock', this.updateFlags) EventBus.$on('alternateFlagLock', this.updateFlags)
EventBus.$on('alternateFlagLock', this.draw) EventBus.$on('alternateFlagLock', this.overview)
} }
} }
@ -688,4 +1018,8 @@ export default {
.filled { .filled {
fill: url(#mainGradient); fill: url(#mainGradient);
} }
#overview {
min-height: 430px;
}
</style> </style>

4
frontend/src/components/PerMetricBarChart.vue
Unescape View File

@ -26,8 +26,8 @@ export default {
} else { } else {
metricsPerModelSel = this.SelBarChartMetrics metricsPerModelSel = this.SelBarChartMetrics
} }
var width = this.WH[0]*3 // interactive visualization var width = this.WH[0]*6.5 // interactive visualization
var height = this.WH[1]/2 // interactive visualization var height = this.WH[1]*0.5 // interactive visualization
var trace1 = { var trace1 = {
x: ['Acc','F1s','Pre','Rec','Jac'], x: ['Acc','F1s','Pre','Rec','Jac'],
y: metricsPerModel, y: metricsPerModel,

28
frontend/src/components/PredictionsSpace.vue
Unescape View File

@ -1,11 +1,17 @@
<template> <template>
<div>Projection Selection: <select id="selectBarChartPred" @change="selectVisualRepresentationPred()"> <div>
<option value="mds" selected>MDS Projection</option> <b-row class="md-3">
<option value="tsne">t-SNE Projection</option> <b-col cols="12">
<option value="umap">UMAP Projection</option> <div>Projection Selection: <select id="selectBarChartPred" @change="selectVisualRepresentationPred()">
</select> <option value="mds" selected>MDS Projection</option>
<div id="OverviewPredPlotly" class="OverviewPredPlotly"></div> <option value="tsne">t-SNE Projection</option>
</div> <option value="umap">UMAP Projection</option>
</select>
<div id="OverviewPredPlotly" class="OverviewPredPlotly"></div>
</div>
</b-col>
</b-row>
</div>
</template> </template>
<script> <script>
@ -21,7 +27,7 @@ export default {
representationDef: 'mds', representationDef: 'mds',
representationSelection: 'mds', representationSelection: 'mds',
colorsValues: ['#6a3d9a','#b15928','#e31a1c'], colorsValues: ['#6a3d9a','#b15928','#e31a1c'],
responsiveWidthHeight: [] WH: []
} }
}, },
methods: { methods: {
@ -37,8 +43,8 @@ export default {
Plotly.purge('OverviewPredPlotly') Plotly.purge('OverviewPredPlotly')
// responsive visualization // responsive visualization
var width = this.responsiveWidthHeight[0]*3 var width = this.WH[0]*6.5 // interactive visualization
var height = this.responsiveWidthHeight[1]*1.48 var height = this.WH[1]*1.22 // interactive visualization
var target_names = JSON.parse(this.PredictionsData[4]) var target_names = JSON.parse(this.PredictionsData[4])
const XandYCoordinatesMDS = JSON.parse(this.PredictionsData[8]) const XandYCoordinatesMDS = JSON.parse(this.PredictionsData[8])
@ -124,7 +130,7 @@ export default {
IDs.push(i) IDs.push(i)
} }
result.ID = IDs result.ID = IDs
console.log(result)
var traces = [] var traces = []
for (let i = 0; i < target_names.length; i++) { for (let i = 0; i < target_names.length; i++) {

6
frontend/src/components/Provenance.vue
Unescape View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="squares-container"> <div class="squares-container" style="min-height: 307px;">
<canvas id="main-canvas"></canvas> <canvas id="main-canvas" ></canvas>
</div> </div>
</div> </div>
</template> </template>
@ -42,7 +42,7 @@ export default {
provenance () { provenance () {
var canvas = document.getElementById("main-canvas"); var canvas = document.getElementById("main-canvas");
var width = this.WH[0]*9 // interactive visualization var width = this.WH[0]*9 // interactive visualization
var height = this.WH[1]*0.95 // interactive visualization var height = this.WH[1]*0.5 // interactive visualization
var flagKNN = 0 var flagKNN = 0
var flagRF = 0 var flagRF = 0

8
frontend/src/components/ScatterPlot.vue
Unescape View File

@ -151,8 +151,8 @@ export default {
} }
}] }]
var width = this.WH[0]*3 // interactive visualization var width = this.WH[0]*6.5 // interactive visualization
var height = this.WH[1]*1.5 // interactive visualization var height = this.WH[1]*1.22 // interactive visualization
layout = { layout = {
title: 'Models Performance (MDS)', title: 'Models Performance (MDS)',
xaxis: { xaxis: {
@ -250,8 +250,8 @@ export default {
} }
}] }]
var width = this.WH[0]*3 // interactive visualization var width = this.WH[0]*6.5 // interactive visualization
var height = this.WH[1]*1.5 // interactive visualization var height = this.WH[1]*1 // interactive visualization
layout = { layout = {
title: 'Models Performance (UMAP)', title: 'Models Performance (UMAP)',
xaxis: { xaxis: {

23
frontend/src/components/SlidersController.vue
Unescape View File

@ -1,10 +1,15 @@
<template> <template>
<div id="WrapSliders"> <div id="WrapSliders">
<p>Acc<b-form-slider ref="basic1" v-model="basicValue1" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue1 }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Met6<b-form-slider ref="basic1" v-model="basicValue6" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue6 }}%</p> <p>(1) Accuracy<b-form-slider ref="basic1" v-model="basicValue1" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue1 }}%</p>
<p>F1s<b-form-slider ref="basic2" v-model="basicValue2" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider >{{ basicValue2 }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Met7<b-form-slider ref="basic1" v-model="basicValue7" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue7 }}%</p> <p>(2) F1-Score<b-form-slider ref="basic2" v-model="basicValue2" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider >{{ basicValue2 }}%</p>
<p>Pre<b-form-slider ref="basic3" v-model="basicValue3" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue3 }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Met8<b-form-slider ref="basic1" v-model="basicValue8" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue8 }}%</p> <p>(3) Precision<b-form-slider ref="basic3" v-model="basicValue3" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue3 }}%</p>
<p>Rec<b-form-slider ref="basic4" v-model="basicValue4" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue4 }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Met9<b-form-slider ref="basic1" v-model="basicValue9" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue9 }}%</p> <p>(4) Recall<b-form-slider ref="basic4" v-model="basicValue4" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue4 }}%</p>
<p>Jac<b-form-slider ref="basic5" v-model="basicValue5" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue5 }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Me10<b-form-slider ref="basic1" v-model="basicValue10" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue10 }}%</p> <p>(5) Jaccard Similarity<b-form-slider ref="basic5" v-model="basicValue5" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue5 }}%</p>
<p>(6) Metric 6<b-form-slider ref="basic1" v-model="basicValue6" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue6 }}%</p>
<p>(7) Metric 7<b-form-slider ref="basic1" v-model="basicValue7" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue7 }}%</p>
<p>(8) Metric 8<b-form-slider ref="basic1" v-model="basicValue8" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue8 }}%</p>
<p>(9) Metric 9<b-form-slider ref="basic1" v-model="basicValue9" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue9 }}%</p>
<p>(10) Metric 10<b-form-slider ref="basic1" v-model="basicValue10" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue10 }}%</p>
</div> </div>
</template> </template>
@ -50,9 +55,11 @@ p {
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
} }
.slider.slider-horizontal {
width: 150px !important; /*.slider.slider-horizontal {
} width: 300px !important;
}*/
.slider-handle { .slider-handle {
background: black; background: black;
} }

10
frontend/src/components/ToggleSelection.vue
Unescape View File

@ -1,10 +1,8 @@
<template> <template>
<div> <div id="toggles" style="visibility:hidden">
<div id="toggles" style="visibility:hidden"> Univariate Selection:<input type="checkbox" id="toggle-uni" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small">
Univariate Selection:<input type="checkbox" id="toggle-uni" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small"> Permutation Importance:<input type="checkbox" id="toggle-per" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small">
Permutation Importance:<input type="checkbox" id="toggle-per" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small"> Feature Accuracy Importance:<input type="checkbox" id="toggle-fi" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small">
Feature Accuracy Importance:<input type="checkbox" id="toggle-fi" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small">
</div>
</div> </div>
</template> </template>

7
run.py
Unescape View File

@ -189,9 +189,6 @@ def RetrieveFileName():
scoring = {'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted'} scoring = {'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted'}
#scoring = {'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted', 'neg_log_loss': 'neg_log_loss', 'r2': 'r2', 'neg_mean_absolute_error': 'neg_mean_absolute_error', 'neg_mean_absolute_error': 'neg_mean_absolute_error'} #scoring = {'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted', 'neg_log_loss': 'neg_log_loss', 'r2': 'r2', 'neg_mean_absolute_error': 'neg_mean_absolute_error', 'neg_mean_absolute_error': 'neg_mean_absolute_error'}
global NumberofscoringMetrics
NumberofscoringMetrics = len(scoring)
global loopFeatures global loopFeatures
loopFeatures = 2 loopFeatures = 2
@ -512,12 +509,12 @@ def GridSearchForModels(XData, yData, clf, params, eachAlgor, factors, Algorithm
# copy and filter in order to get only the metrics # copy and filter in order to get only the metrics
metrics = df_cv_results_classifiers.copy() metrics = df_cv_results_classifiers.copy()
metrics = metrics.filter(['mean_test_accuracy','mean_test_f1_macro','mean_test_precision','mean_test_recall','mean_test_jaccard']) metrics = metrics.filter(['mean_test_accuracy','mean_test_f1_macro','mean_test_precision','mean_test_recall','mean_test_jaccard'])
# control the factors # control the factors
sumperModel = [] sumperModel = []
for index, row in metrics.iterrows(): for index, row in metrics.iterrows():
rowSum = 0 rowSum = 0
lengthFactors = NumberofscoringMetrics lengthFactors = len(scoring)
for loop,elements in enumerate(row): for loop,elements in enumerate(row):
lengthFactors = lengthFactors - 1 + factors[loop] lengthFactors = lengthFactors - 1 + factors[loop]
rowSum = elements*factors[loop] + rowSum rowSum = elements*factors[loop] + rowSum

Write Preview
Loading…
Cancel
Save