diff --git a/__pycache__/run.cpython-37.pyc b/__pycache__/run.cpython-37.pyc index 585894f3e..1223d7a47 100644 Binary files a/__pycache__/run.cpython-37.pyc and b/__pycache__/run.cpython-37.pyc differ diff --git a/cachedir/joblib/run/GridSearchForModels/0630790fa81d5b91e3195bd86de458e2/metadata.json b/cachedir/joblib/run/GridSearchForModels/0630790fa81d5b91e3195bd86de458e2/metadata.json new file mode 100644 index 000000000..c9f7a7991 --- /dev/null +++ b/cachedir/joblib/run/GridSearchForModels/0630790fa81d5b91e3195bd86de458e2/metadata.json @@ -0,0 +1 @@ +{"duration": 270.6007800102234, "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": "[0, 1, 0, 1, 1]", "AlgorithmsIDsEnd": "0"}} \ No newline at end of file diff --git a/cachedir/joblib/run/GridSearchForModels/34dd4fa44cf8d83f42cfacc70a3fdd71/metadata.json b/cachedir/joblib/run/GridSearchForModels/34dd4fa44cf8d83f42cfacc70a3fdd71/metadata.json index 69de5cf29..95cfc2c46 100644 --- a/cachedir/joblib/run/GridSearchForModels/34dd4fa44cf8d83f42cfacc70a3fdd71/metadata.json +++ b/cachedir/joblib/run/GridSearchForModels/34dd4fa44cf8d83f42cfacc70a3fdd71/metadata.json @@ -1 +1 @@ -{"duration": 307.1607220172882, "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"}} \ No newline at end of file +{"duration": 270.70482993125916, "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"}} \ No newline at end of file diff --git a/cachedir/joblib/run/GridSearchForModels/38772970bb4c75821f5c00d545b8fd57/output.pkl b/cachedir/joblib/run/GridSearchForModels/38772970bb4c75821f5c00d545b8fd57/output.pkl new file mode 100644 index 000000000..faf766d87 Binary files /dev/null and b/cachedir/joblib/run/GridSearchForModels/38772970bb4c75821f5c00d545b8fd57/output.pkl differ diff --git a/cachedir/joblib/run/GridSearchForModels/3cc262c077a39d0c54e4037251751202/metadata.json b/cachedir/joblib/run/GridSearchForModels/3cc262c077a39d0c54e4037251751202/metadata.json new file mode 100644 index 000000000..255001ab6 --- /dev/null +++ b/cachedir/joblib/run/GridSearchForModels/3cc262c077a39d0c54e4037251751202/metadata.json @@ -0,0 +1 @@ +{"duration": 367.6226439476013, "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": "[0.46, 1, 0.3, 1, 1]", "AlgorithmsIDsEnd": "576"}} \ No newline at end of file diff --git a/cachedir/joblib/run/GridSearchForModels/4afebc2c0f07454e4b3770e75aa3c9a7/output.pkl b/cachedir/joblib/run/GridSearchForModels/4afebc2c0f07454e4b3770e75aa3c9a7/output.pkl new file mode 100644 index 000000000..a505c8a46 Binary files /dev/null and b/cachedir/joblib/run/GridSearchForModels/4afebc2c0f07454e4b3770e75aa3c9a7/output.pkl differ diff --git a/cachedir/joblib/run/GridSearchForModels/65cf512fe73627ad01497d789001f38b/output.pkl b/cachedir/joblib/run/GridSearchForModels/65cf512fe73627ad01497d789001f38b/output.pkl index ed3729944..3530a44d7 100644 Binary files a/cachedir/joblib/run/GridSearchForModels/65cf512fe73627ad01497d789001f38b/output.pkl and b/cachedir/joblib/run/GridSearchForModels/65cf512fe73627ad01497d789001f38b/output.pkl differ diff --git a/cachedir/joblib/run/GridSearchForModels/7cd0b89df0e27ae606b59399cc748534/metadata.json b/cachedir/joblib/run/GridSearchForModels/7cd0b89df0e27ae606b59399cc748534/metadata.json new file mode 100644 index 000000000..758815c8c --- /dev/null +++ b/cachedir/joblib/run/GridSearchForModels/7cd0b89df0e27ae606b59399cc748534/metadata.json @@ -0,0 +1 @@ +{"duration": 279.6587002277374, "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": "[0.46, 1, 0.3, 1, 1]", "AlgorithmsIDsEnd": "0"}} \ No newline at end of file diff --git a/cachedir/joblib/run/GridSearchForModels/c426e0f3d8f4e01216f1b2a58820e6ec/metadata.json b/cachedir/joblib/run/GridSearchForModels/c426e0f3d8f4e01216f1b2a58820e6ec/metadata.json deleted file mode 100644 index 72bb6d13a..000000000 --- a/cachedir/joblib/run/GridSearchForModels/c426e0f3d8f4e01216f1b2a58820e6ec/metadata.json +++ /dev/null @@ -1 +0,0 @@ -{"duration": 393.25071001052856, "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"}} \ No newline at end of file diff --git a/cachedir/joblib/run/GridSearchForModels/cb5182dde62f93055189ce0cf507866d/output.pkl b/cachedir/joblib/run/GridSearchForModels/cb5182dde62f93055189ce0cf507866d/output.pkl new file mode 100644 index 000000000..7e80c2f22 Binary files /dev/null and b/cachedir/joblib/run/GridSearchForModels/cb5182dde62f93055189ce0cf507866d/output.pkl differ diff --git a/cachedir/joblib/run/GridSearchForModels/cce4a92f4cbd0e736018f002fd195967/metadata.json b/cachedir/joblib/run/GridSearchForModels/cce4a92f4cbd0e736018f002fd195967/metadata.json new file mode 100644 index 000000000..b66f58eef --- /dev/null +++ b/cachedir/joblib/run/GridSearchForModels/cce4a92f4cbd0e736018f002fd195967/metadata.json @@ -0,0 +1 @@ +{"duration": 372.7683711051941, "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": "[0, 1, 0, 1, 1]", "AlgorithmsIDsEnd": "576"}} \ No newline at end of file diff --git a/cachedir/joblib/run/GridSearchForModels/e195397de90ee1851c0cad58777740ff/output.pkl b/cachedir/joblib/run/GridSearchForModels/e195397de90ee1851c0cad58777740ff/output.pkl new file mode 100644 index 000000000..802193cfe Binary files /dev/null and b/cachedir/joblib/run/GridSearchForModels/e195397de90ee1851c0cad58777740ff/output.pkl differ diff --git a/cachedir/joblib/run/GridSearchForModels/ef9a593cce41dd71bdac1d445edc2a58/output.pkl b/cachedir/joblib/run/GridSearchForModels/ef9a593cce41dd71bdac1d445edc2a58/output.pkl index 63acf57b2..5993029af 100644 Binary files a/cachedir/joblib/run/GridSearchForModels/ef9a593cce41dd71bdac1d445edc2a58/output.pkl and b/cachedir/joblib/run/GridSearchForModels/ef9a593cce41dd71bdac1d445edc2a58/output.pkl differ diff --git a/cachedir/joblib/run/GridSearchForModels/fbe5cd8abe4f095b079dbe1880be140d/metadata.json b/cachedir/joblib/run/GridSearchForModels/fbe5cd8abe4f095b079dbe1880be140d/metadata.json new file mode 100644 index 000000000..4cf83f4ca --- /dev/null +++ b/cachedir/joblib/run/GridSearchForModels/fbe5cd8abe4f095b079dbe1880be140d/metadata.json @@ -0,0 +1 @@ +{"duration": 367.4382128715515, "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"}} \ No newline at end of file diff --git a/cachedir/joblib/run/GridSearchForModels/func_code.py b/cachedir/joblib/run/GridSearchForModels/func_code.py index e10cd171d..1d6dffc01 100644 --- a/cachedir/joblib/run/GridSearchForModels/func_code.py +++ b/cachedir/joblib/run/GridSearchForModels/func_code.py @@ -1,4 +1,4 @@ -# first line: 454 +# first line: 464 @memory.cache def GridSearchForModels(XData, yData, clf, params, eachAlgor, factors, AlgorithmsIDsEnd): diff --git a/frontend/src/components/AlgorithmHyperParam.vue b/frontend/src/components/AlgorithmHyperParam.vue index 7ba853e9c..a99fb372c 100644 --- a/frontend/src/components/AlgorithmHyperParam.vue +++ b/frontend/src/components/AlgorithmHyperParam.vue @@ -23,6 +23,9 @@ export default { } }, methods: { + reset () { + d3.selectAll("#PCP > *").remove(); + }, PCPView () { d3.selectAll("#PCP > *").remove(); if (this.selAlgorithm != '') { @@ -87,6 +90,9 @@ export default { EventBus.$on('emittedEventCallingModel', this.PCPView) EventBus.$on('ResponsiveandChange', this.PCPView) EventBus.$on('emittedEventCallingModelClear', this.clear) + + // reset view + EventBus.$on('resetViews', this.reset) } } \ No newline at end of file diff --git a/frontend/src/components/Algorithms.vue b/frontend/src/components/Algorithms.vue index 7d0188dac..7de6164b2 100644 --- a/frontend/src/components/Algorithms.vue +++ b/frontend/src/components/Algorithms.vue @@ -31,13 +31,16 @@ export default { algorithm2: [], chart: '', flagEmpty: 0, - ActiveModels: [] + ActiveModels: [], } }, methods: { + reset () { + d3.selectAll("#exploding_boxplot > *").remove() + }, boxplot () { // reset the boxplot - d3.selectAll("#exploding_boxplot > *").remove(); + d3.selectAll("#exploding_boxplot > *").remove() // retrieve models ID const Algor1IDs = this.PerformanceAllModels[0] @@ -81,6 +84,7 @@ export default { const previousColor = ['#8dd3c7','#8da0cb'] // check for brushing var el = document.getElementsByClassName('d3-exploding-boxplot boxcontent') + var overall = document.getElementsByClassName('overall') this.brushStatus = document.getElementsByClassName('extent') // on clicks @@ -93,7 +97,7 @@ export default { allPoints[i].style.fill = previousColor[0] allPoints[i].style.opacity = '1.0' } - + if (flagEmptyKNN == 0) { flagEmptyKNN = 1 } else { @@ -116,11 +120,18 @@ export default { } else { flagEmptyRF = 0 } - + EventBus.$emit('updateFlagRF', flagEmptyRF) EventBus.$emit('PCPCall', 'RF') EventBus.$emit('updateBarChart', []) } + + overall[0].ondblclick = function () { + flagEmptyKNN = 0 + flagEmptyRF = 0 + EventBus.$emit('alternateFlagLock', flagEmptyKNN) + } + // check if brushed through all boxplots and not only one at a time const myObserver = new ResizeObserver(entries => { EventBus.$emit('brusheAllOn') @@ -337,6 +348,9 @@ export default { EventBus.$on('emittedEventCallingSelectedALgorithm', data => { this.selectedAlgorithm = data}) EventBus.$on('brusheAllOn', this.brushActivationAll) + + // reset the views + EventBus.$on('resetViews', this.reset) } } \ No newline at end of file diff --git a/frontend/src/components/BalancePredictions.vue b/frontend/src/components/BalancePredictions.vue index 435af00cb..31d12f455 100644 --- a/frontend/src/components/BalancePredictions.vue +++ b/frontend/src/components/BalancePredictions.vue @@ -22,7 +22,11 @@ } }, methods: { - Balance () { + reset () { + var svg = d3.select("#my_dataviz"); + svg.selectAll("*").remove(); + }, + Balance () { // erase histogram var svg = d3.select("#my_dataviz"); svg.selectAll("*").remove(); @@ -191,28 +195,31 @@ // Function to compute density function kernelDensityEstimator(kernel, X) { - return function(V) { + return function(V) { return X.map(function(x) { - return [x, d3.mean(V, function(v) { return kernel(x - v); })]; + return [x, d3.mean(V, function(v) { return kernel(x - v); })]; }); - }; + }; } function kernelEpanechnikov(k) { - return function(v) { - return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0; - }; - } + return function(v) { + return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0; + }; } + } }, mounted () { - EventBus.$on('emittedEventCallingBalanceView', data => { this.resultsfromOverview = data} ) - EventBus.$on('emittedEventCallingBalanceView', this.Balance) - EventBus.$on('UpdateBalanceView', data => { this.newResultsFromSelection = data} ) - EventBus.$on('UpdateBalanceView', this.Balance) - EventBus.$on('Responsive', data => { - this.responsiveWidthHeight = data}) - EventBus.$on('ResponsiveandChange', data => { - this.responsiveWidthHeight = data}) + EventBus.$on('emittedEventCallingBalanceView', data => { this.resultsfromOverview = data} ) + EventBus.$on('emittedEventCallingBalanceView', this.Balance) + EventBus.$on('UpdateBalanceView', data => { this.newResultsFromSelection = data} ) + EventBus.$on('UpdateBalanceView', this.Balance) + EventBus.$on('Responsive', data => { + this.responsiveWidthHeight = data}) + EventBus.$on('ResponsiveandChange', data => { + this.responsiveWidthHeight = data}) + + // reset view + EventBus.$on('resetViews', this.reset) } } diff --git a/frontend/src/components/BarChart.vue b/frontend/src/components/BarChart.vue index 1267d6720..f8f123db4 100644 --- a/frontend/src/components/BarChart.vue +++ b/frontend/src/components/BarChart.vue @@ -25,167 +25,171 @@ export default { }, methods: { BarChartView () { - const PerClassMetrics = JSON.parse(this.PerformanceResults[2]) - const PerClassMetrics2 = JSON.parse(this.PerformanceResults[10]) + const PerClassMetrics = JSON.parse(this.PerformanceResults[2]) + const PerClassMetrics2 = JSON.parse(this.PerformanceResults[10]) - var KNNModels = [] - var RFModels = [] - - if (this.modelsSelectedinBar.length != 0){ - for (let i=0; i { + Plotly.purge('barChart') + }, 50); + } }, mounted() { - EventBus.$on('updateBarChartAlgorithm', data => { this.algorithmsinBar = data }) - EventBus.$on('updateBarChart', data => { this.modelsSelectedinBar = data }) - EventBus.$on('updateBarChart', this.BarChartView) - EventBus.$on('emittedEventCallingBarChart', data => { this.PerformanceResults = data }) - EventBus.$on('emittedEventCallingBarChart', this.BarChartView) - EventBus.$on('emittedEventCallingUpdateBarChart', data => { this.ModelsChosen = data }) - EventBus.$on('emittedEventCallingUpdateBarChart', this.BarChartView) - EventBus.$on('resetViews', this.reset) - EventBus.$on('Responsive', data => { - this.WH = data}) - EventBus.$on('ResponsiveandChange', data => { - this.WH = data}) + EventBus.$on('updateBarChartAlgorithm', data => { this.algorithmsinBar = data }) + EventBus.$on('updateBarChart', data => { this.modelsSelectedinBar = data }) + EventBus.$on('updateBarChart', this.BarChartView) + EventBus.$on('emittedEventCallingBarChart', data => { this.PerformanceResults = data }) + EventBus.$on('emittedEventCallingBarChart', this.BarChartView) + EventBus.$on('emittedEventCallingUpdateBarChart', data => { this.ModelsChosen = data }) + EventBus.$on('emittedEventCallingUpdateBarChart', this.BarChartView) + EventBus.$on('Responsive', data => { + this.WH = data}) + EventBus.$on('ResponsiveandChange', data => { + this.WH = data}) + + // reset view + EventBus.$on('resetViews', this.reset) } } \ No newline at end of file diff --git a/frontend/src/components/DataSetExecController.vue b/frontend/src/components/DataSetExecController.vue index 0a28ebc25..ccb6ab903 100644 --- a/frontend/src/components/DataSetExecController.vue +++ b/frontend/src/components/DataSetExecController.vue @@ -78,6 +78,7 @@ export default { }, reset () { EventBus.$emit('reset') + EventBus.$emit('alternateFlagLock') }, confirm () { EventBus.$emit('ConfirmDataSet') diff --git a/frontend/src/components/DataSpace.vue b/frontend/src/components/DataSpace.vue index 361d406ae..602ae2b2d 100644 --- a/frontend/src/components/DataSpace.vue +++ b/frontend/src/components/DataSpace.vue @@ -61,6 +61,9 @@ export default { } }, methods: { + reset () { + Plotly.purge('OverviewDataPlotly') + }, selectAppliedFilter () { var representationSelectionDocum = document.getElementById('selectFilterID') this.userSelectedFilter = representationSelectionDocum.options[representationSelectionDocum.selectedIndex].value @@ -82,107 +85,106 @@ export default { EventBus.$emit('SendProvenance', 'restore') }, scatterPlotDataView () { - - Plotly.purge('OverviewDataPlotly') - - // responsive visualization - let width = this.responsiveWidthHeight[0]*3 - let height = this.responsiveWidthHeight[1]*2.1 - - var target_names = JSON.parse(this.dataPoints[0]) - const XandYCoordinates = JSON.parse(this.dataPoints[1]) - const DataSet = JSON.parse(this.dataPoints[2]) - const DataSetY = JSON.parse(this.dataPoints[3]) - const originalDataLabels = JSON.parse(this.dataPoints[4]) - var DataSetParse = JSON.parse(DataSet) - - let intData = [] - if (this.highlightedPoints.length > 0){ - let removedPuncData = this.highlightedPoints.map(function(x){return x.replace(';', '');}) - intData = removedPuncData.map(Number) - } else { - intData = [] - } + Plotly.purge('OverviewDataPlotly') - var result = XandYCoordinates.reduce(function(r, a) { - var id = 0 - a.forEach(function(s, i) { - var key = i === 0 ? 'Xax' : 'Yax' + // responsive visualization + let width = this.responsiveWidthHeight[0]*3 + let height = this.responsiveWidthHeight[1]*2.1 - r[key] || (r[key] = []) // if key not found on result object, add the key with empty array as the value + var target_names = JSON.parse(this.dataPoints[0]) + const XandYCoordinates = JSON.parse(this.dataPoints[1]) + const DataSet = JSON.parse(this.dataPoints[2]) + const DataSetY = JSON.parse(this.dataPoints[3]) + const originalDataLabels = JSON.parse(this.dataPoints[4]) + var DataSetParse = JSON.parse(DataSet) - r[key].push(s) + let intData = [] + if (this.highlightedPoints.length > 0){ + let removedPuncData = this.highlightedPoints.map(function(x){return x.replace(';', '');}) + intData = removedPuncData.map(Number) + } else { + intData = [] + } - }) + var result = XandYCoordinates.reduce(function(r, a) { + var id = 0 + a.forEach(function(s, i) { + var key = i === 0 ? 'Xax' : 'Yax' - return r - }, {}) + r[key] || (r[key] = []) // if key not found on result object, add the key with empty array as the value - var IDs = []; + r[key].push(s) - for (let i = 0; i < result.Xax.length; i++) { - IDs.push(i) - } - result.ID = IDs - - var traces = [] - - for (let i = 0; i < target_names.length; i++) { - - const aux_X = result.Xax.filter((item, index) => originalDataLabels[index] == target_names[i]); - const aux_Y = result.Yax.filter((item, index) => originalDataLabels[index] == target_names[i]); - const aux_ID = result.ID.filter((item, index) => originalDataLabels[index] == target_names[i]); - - var Text = aux_ID.map((item, index) => { - let popup = 'Data Point ID: ' + item + '; Details: ' + JSON.stringify(DataSetParse[item]) - return popup; - }); - - var Opacity = aux_ID.map((item, index) => { - let opac - if (intData.length == 0) { - opac = 1 - } else if (intData.indexOf(item) > -1) { - opac = 1 - } else { - opac = 0.5 - } - return opac; - }); - - traces.push({ - x: aux_X, - y: aux_Y, - mode: 'markers', - name: target_names[i], - marker: { color: this.colorsValues[i], line: { color: 'rgb(0, 0, 0)', width: 2 }, opacity: Opacity, size: 12 }, - hovertemplate: - "%{text}

" + - "", - text: Text, }) - } - const layout = { - title: 'Data Space Projection (t-SNE)', - xaxis: { - visible: false - }, - yaxis: { - visible: false - }, - dragmode: 'lasso', - hovermode: "closest", - autosize: true, - width: width, - height: height, - } + return r + }, {}) + + var IDs = []; + + for (let i = 0; i < result.Xax.length; i++) { + IDs.push(i) + } + result.ID = IDs + + var traces = [] - var config = {scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage', 'toggleSpikelines', 'autoScale2d', 'hoverClosestGl2d','hoverCompareCartesian','select2d','hoverClosestCartesian','zoomIn2d','zoomOut2d','zoom2d'], responsive: true} + for (let i = 0; i < target_names.length; i++) { - Plotly.newPlot('OverviewDataPlotly', traces, layout, config) + const aux_X = result.Xax.filter((item, index) => originalDataLabels[index] == target_names[i]); + const aux_Y = result.Yax.filter((item, index) => originalDataLabels[index] == target_names[i]); + const aux_ID = result.ID.filter((item, index) => originalDataLabels[index] == target_names[i]); - this.selectedDataPoints() + var Text = aux_ID.map((item, index) => { + let popup = 'Data Point ID: ' + item + '; Details: ' + JSON.stringify(DataSetParse[item]) + return popup; + }); + + var Opacity = aux_ID.map((item, index) => { + let opac + if (intData.length == 0) { + opac = 1 + } else if (intData.indexOf(item) > -1) { + opac = 1 + } else { + opac = 0.5 + } + return opac; + }); + + traces.push({ + x: aux_X, + y: aux_Y, + mode: 'markers', + name: target_names[i], + marker: { color: this.colorsValues[i], line: { color: 'rgb(0, 0, 0)', width: 2 }, opacity: Opacity, size: 12 }, + hovertemplate: + "%{text}

" + + "", + text: Text, + }) + } + + const layout = { + title: 'Data Space Projection (t-SNE)', + xaxis: { + visible: false + }, + yaxis: { + visible: false + }, + dragmode: 'lasso', + hovermode: "closest", + autosize: true, + width: width, + height: height, + } + + var config = {scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage', 'toggleSpikelines', 'autoScale2d', 'hoverClosestGl2d','hoverCompareCartesian','select2d','hoverClosestCartesian','zoomIn2d','zoomOut2d','zoom2d'], responsive: true} + + Plotly.newPlot('OverviewDataPlotly', traces, layout, config) + + this.selectedDataPoints() }, selectedDataPoints () { const OverviewDataPlotly = document.getElementById('OverviewDataPlotly') @@ -227,6 +229,9 @@ export default { this.responsiveWidthHeight = data}) EventBus.$on('ResponsiveandChange', data => { this.responsiveWidthHeight = data}) + + // reset view + EventBus.$on('resetViews', this.reset) } } \ No newline at end of file diff --git a/frontend/src/components/FinalResultsLinePlot.vue b/frontend/src/components/FinalResultsLinePlot.vue index e969d46f0..9baedaff2 100644 --- a/frontend/src/components/FinalResultsLinePlot.vue +++ b/frontend/src/components/FinalResultsLinePlot.vue @@ -41,6 +41,9 @@ export default { } }, methods: { + reset () { + Plotly.purge('LinePlot') + }, LinePlotView () { this.NumberofExecutions ++ this.xaxis.push(this.NumberofExecutions) @@ -289,6 +292,9 @@ export default { EventBus.$on('emittedEventCallingLinePlot', data => { this.FinalResultsforLinePlot = data}) EventBus.$on('emittedEventCallingLinePlot', this.LinePlotView) + + // reset the views + EventBus.$on('resetViews', this.reset) } } \ No newline at end of file diff --git a/frontend/src/components/Heatmap.vue b/frontend/src/components/Heatmap.vue index 692ac9b1b..d921b4b1c 100644 --- a/frontend/src/components/Heatmap.vue +++ b/frontend/src/components/Heatmap.vue @@ -30,58 +30,61 @@ export default { Refresh () { EventBus.$emit('SendSelectedFeaturesEvent', '') }, + reset () { + var svg = d3.select("#Heatmap"); + svg.selectAll("*").remove(); + }, Heatmap () { + // Clear Heatmap first + var svg = d3.select("#Heatmap"); + svg.selectAll("*").remove(); + + var FeaturesAccuracy = JSON.parse(this.GetResultsAll[5]) + var Features = JSON.parse(this.GetResultsAll[6]) + var PermImpEli = JSON.parse(this.GetResultsAll[10]) + var featureUni = JSON.parse(this.GetResultsAll[11]) + var modelIds = JSON.parse(this.GetResultsAll[13]) + + var len2 = modelIds.length + + var maxUni = Math.max.apply(Math, featureUni.map(function(o) { return o.Score; })) + var minUni = Math.min.apply(Math, featureUni.map(function(o) { return o.Score; })) + let len = Features.length + let indicesYAxis = new Array(len) + for (let i = 0; i < len; i++) { + indicesYAxis[i] = [Features[i]] + } + let indicesXAxis = new Array(len) + var temp = [] + for (let i = 0; i < len2; i++) { + temp = [] + temp.push("R") + temp.push("Model "+modelIds[i].toString()) + indicesXAxis[i] = temp + } - // Clear Heatmap first - var svg = d3.select("#Heatmap"); - svg.selectAll("*").remove(); - - var FeaturesAccuracy = JSON.parse(this.GetResultsAll[5]) - var Features = JSON.parse(this.GetResultsAll[6]) - var PermImpEli = JSON.parse(this.GetResultsAll[10]) - var featureUni = JSON.parse(this.GetResultsAll[11]) - var modelIds = JSON.parse(this.GetResultsAll[13]) - - var len2 = modelIds.length - - var maxUni = Math.max.apply(Math, featureUni.map(function(o) { return o.Score; })) - var minUni = Math.min.apply(Math, featureUni.map(function(o) { return o.Score; })) - let len = Features.length - let indicesYAxis = new Array(len) - for (let i = 0; i < len; i++) { - indicesYAxis[i] = [Features[i]] - } - let indicesXAxis = new Array(len) - var temp = [] - for (let i = 0; i < len2; i++) { - temp = [] - temp.push("R") - temp.push("Model "+modelIds[i].toString()) - indicesXAxis[i] = temp - } - - if (this.ModelsIDHeatStack.length != 0) { + if (this.ModelsIDHeatStack.length != 0) { - var FeaturesAccuracyNew = [] - var PermImpEliNew = [] - indicesXAxis = new Array(len) + var FeaturesAccuracyNew = [] + var PermImpEliNew = [] + indicesXAxis = new Array(len) - for (let i = 0; i < modelIds.length; i++) { - if (this.ModelsIDHeatStack.includes(modelIds[i])) { - } else { - FeaturesAccuracyNew.push(FeaturesAccuracy[i]) - PermImpEliNew.push(PermImpEli[i]) - } - } - FeaturesAccuracy = FeaturesAccuracyNew - PermImpEli = PermImpEliNew - len2 = this.ModelsIDHeatStack.length - for (let i = 0; i < len2; i++) { - temp = [] - temp.push("R") - temp.push("Model "+this.ModelsIDHeatStack[i].toString()) - indicesXAxis[i] = temp - } + for (let i = 0; i < modelIds.length; i++) { + if (this.ModelsIDHeatStack.includes(modelIds[i])) { + } else { + FeaturesAccuracyNew.push(FeaturesAccuracy[i]) + PermImpEliNew.push(PermImpEli[i]) + } + } + FeaturesAccuracy = FeaturesAccuracyNew + PermImpEli = PermImpEliNew + len2 = this.ModelsIDHeatStack.length + for (let i = 0; i < len2; i++) { + temp = [] + temp.push("R") + temp.push("Model "+this.ModelsIDHeatStack[i].toString()) + indicesXAxis[i] = temp + } } temp = [] @@ -139,409 +142,409 @@ export default { }, heatmap_display(data, heatmapId) { - var cellSize = this.cellSize - //########################################################################## - // Patrick.Brockmann@lsce.ipsl.fr - //########################################################################## - - //================================================== - // References - // http://bl.ocks.org/Soylent/bbff6cc507dca2f48792 - // http://bost.ocks.org/mike/selection/ - // http://bost.ocks.org/mike/join/ - // http://stackoverflow.com/questions/9481497/understanding-how-d3-js-binds-data-to-nodes - // http://bost.ocks.org/mike/miserables/ - // http://bl.ocks.org/ianyfchang/8119685 - - //================================================== - var tooltip = d3.select(heatmapId) - .append("div") - .style("position", "absolute") - .style("visibility", "hidden"); - - //================================================== - // http://bl.ocks.org/mbostock/3680958 - /* function zoom() { - console.log(d3.event.translate) - console.log(d3.event.scale) - svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); - }*/ - - // define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents - const zoom = d3.zoom() - .scaleExtent([0.1, 3]) //zoom limit - .on('zoom', () => { - svg.attr('transform', d3.event.transform) // updated for d3 v4 - }) - //================================================== - var viewerWidth = $(document).width()/2.2; - var viewerHeight = $(document).height()/5.5; - var viewerPosTop = 125; - var viewerPosLeft = 100; - - var legendElementWidth = cellSize * 2; - - // http://bl.ocks.org/mbostock/5577023 - var colors = colorbrewer.RdYlGn[this.classesNumber]; - - // http://bl.ocks.org/mbostock/3680999 - var svg; - - //================================================== - var arr = data.data; - var row_number = arr.length; - var col_number = arr[0].length; - - var colorScale = d3.scaleQuantize() - .domain([0.0, 1.0]) - .range(colors); - - svg = d3.select(heatmapId).append("svg") - .attr("width", viewerWidth) - .attr("height", viewerHeight) - .call(zoom) - //.call(zoom.transform, d3.zoomIdentity.translate(200, 20).scale(0.25)) //initial size - .append('svg:g') - .attr("transform", "translate(" + viewerPosLeft + "," + viewerPosTop + ")"); - - svg.append('defs') - .append('pattern') - .attr('id', 'diagonalHatch') - .attr('patternUnits', 'userSpaceOnUse') - .attr('width', 4) - .attr('height', 4) - .append('path') - .attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2') - .attr('stroke', '#000000') - .attr('stroke-width', 1); - - var rowSortOrder = false; - var colSortOrder = false; - - var rowLabels = svg.append("g") - .attr("class", "rowLabels") - .selectAll(".rowLabel") - .data(data.index) - .enter().append("text") - .text(function(d) { - return d.count > 1 ? d.join("/") : d; - }) - .attr("x", 0) - .attr("y", function(d, i) { - return (i * cellSize); - }) - .style("text-anchor", "end") - .attr("transform", function(d, i) { - return "translate(-3," + cellSize / 1.5 + ")"; - }) - .attr("class", "rowLabel mono") - .attr("id", function(d, i) { - return "rowLabel_" + i; - }) - .on('mouseover', function(d, i) { - d3.select('#rowLabel_' + i).classed("hover", true); - }) - .on('mouseout', function(d, i) { - d3.select('#rowLabel_' + i).classed("hover", false); - }) - .on("click", function(d, i) { - rowSortOrder = !rowSortOrder; - sortByValues("r", i, rowSortOrder); - d3.select("#order").property("selectedIndex", 0); - //$("#order").jqxComboBox({selectedIndex: 0}); - }); + var cellSize = this.cellSize + //########################################################################## + // Patrick.Brockmann@lsce.ipsl.fr + //########################################################################## + + //================================================== + // References + // http://bl.ocks.org/Soylent/bbff6cc507dca2f48792 + // http://bost.ocks.org/mike/selection/ + // http://bost.ocks.org/mike/join/ + // http://stackoverflow.com/questions/9481497/understanding-how-d3-js-binds-data-to-nodes + // http://bost.ocks.org/mike/miserables/ + // http://bl.ocks.org/ianyfchang/8119685 + + //================================================== + var tooltip = d3.select(heatmapId) + .append("div") + .style("position", "absolute") + .style("visibility", "hidden"); + + //================================================== + // http://bl.ocks.org/mbostock/3680958 + /* function zoom() { + console.log(d3.event.translate) + console.log(d3.event.scale) + svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); + }*/ + + // define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents + const zoom = d3.zoom() + .scaleExtent([0.1, 3]) //zoom limit + .on('zoom', () => { + svg.attr('transform', d3.event.transform) // updated for d3 v4 + }) + //================================================== + var viewerWidth = $(document).width()/2.2; + var viewerHeight = $(document).height()/5.5; + var viewerPosTop = 125; + var viewerPosLeft = 100; + + var legendElementWidth = cellSize * 2; + + // http://bl.ocks.org/mbostock/5577023 + var colors = colorbrewer.RdYlGn[this.classesNumber]; + + // http://bl.ocks.org/mbostock/3680999 + var svg; + + //================================================== + var arr = data.data; + var row_number = arr.length; + var col_number = arr[0].length; + + var colorScale = d3.scaleQuantize() + .domain([0.0, 1.0]) + .range(colors); + + svg = d3.select(heatmapId).append("svg") + .attr("width", viewerWidth) + .attr("height", viewerHeight) + .call(zoom) + //.call(zoom.transform, d3.zoomIdentity.translate(200, 20).scale(0.25)) //initial size + .append('svg:g') + .attr("transform", "translate(" + viewerPosLeft + "," + viewerPosTop + ")"); + + svg.append('defs') + .append('pattern') + .attr('id', 'diagonalHatch') + .attr('patternUnits', 'userSpaceOnUse') + .attr('width', 4) + .attr('height', 4) + .append('path') + .attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2') + .attr('stroke', '#000000') + .attr('stroke-width', 1); + + var rowSortOrder = false; + var colSortOrder = false; + + var rowLabels = svg.append("g") + .attr("class", "rowLabels") + .selectAll(".rowLabel") + .data(data.index) + .enter().append("text") + .text(function(d) { + return d.count > 1 ? d.join("/") : d; + }) + .attr("x", 0) + .attr("y", function(d, i) { + return (i * cellSize); + }) + .style("text-anchor", "end") + .attr("transform", function(d, i) { + return "translate(-3," + cellSize / 1.5 + ")"; + }) + .attr("class", "rowLabel mono") + .attr("id", function(d, i) { + return "rowLabel_" + i; + }) + .on('mouseover', function(d, i) { + d3.select('#rowLabel_' + i).classed("hover", true); + }) + .on('mouseout', function(d, i) { + d3.select('#rowLabel_' + i).classed("hover", false); + }) + .on("click", function(d, i) { + rowSortOrder = !rowSortOrder; + sortByValues("r", i, rowSortOrder); + d3.select("#order").property("selectedIndex", 0); + //$("#order").jqxComboBox({selectedIndex: 0}); + }); - var colLabels = svg.append("g") - .attr("class", "colLabels") - .selectAll(".colLabel") - .data(data.columns) - .enter().append("text") - .text(function(d) { - d.shift(); - return d.count > 1 ? d.reverse().join("/") : d.reverse(); - }) - .attr("x", 0) - .attr("y", function(d, i) { - return (i * cellSize); - }) - .style("text-anchor", "left") - .style('font-weight',function(d,i){ - /*if (d[0] === "Average") { - return "bold" - }*/ - }) - .attr("transform", function(d, i) { - return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")"; - }) - .attr("class", "colLabel mono") - .attr("id", function(d, i) { - return "colLabel_" + i; - }) - .on('mouseover', function(d, i) { - d3.select('#colLabel_' + i).classed("hover", true); - }) - .on('mouseout', function(d, i) { - d3.select('#colLabel_' + i).classed("hover", false); - }) - .on("click", function(d, i) { - colSortOrder = !colSortOrder; - sortByValues("c", i, colSortOrder); - d3.select("#order").property("selectedIndex", 0); - }); + var colLabels = svg.append("g") + .attr("class", "colLabels") + .selectAll(".colLabel") + .data(data.columns) + .enter().append("text") + .text(function(d) { + d.shift(); + return d.count > 1 ? d.reverse().join("/") : d.reverse(); + }) + .attr("x", 0) + .attr("y", function(d, i) { + return (i * cellSize); + }) + .style("text-anchor", "left") + .style('font-weight',function(d,i){ + /*if (d[0] === "Average") { + return "bold" + }*/ + }) + .attr("transform", function(d, i) { + return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")"; + }) + .attr("class", "colLabel mono") + .attr("id", function(d, i) { + return "colLabel_" + i; + }) + .on('mouseover', function(d, i) { + d3.select('#colLabel_' + i).classed("hover", true); + }) + .on('mouseout', function(d, i) { + d3.select('#colLabel_' + i).classed("hover", false); + }) + .on("click", function(d, i) { + colSortOrder = !colSortOrder; + sortByValues("c", i, colSortOrder); + d3.select("#order").property("selectedIndex", 0); + }); - var row = svg.selectAll(".row") - .data(data.data) - .enter().append("g") - .attr("id", function(d) { - return d.idx; - }) - .attr("class", "row"); - var heatMap = row.selectAll(".cell") - .data(function(d) { - return d; - }) - .enter().append("svg:rect") - .attr("id", function(d, i, j){ - var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3; - return k.toString()+i.toString(); - }) - .attr("x", function(d, i) { - return i * cellSize; - }) - .attr("y", function(d, i, j) { - var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3; - return k * cellSize; - }) - .attr("rx", 4) - .attr("ry", 4) - .attr("class", function(d, i, j) { - var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3; - return "cell bordered cr" + k + " cc" + i; - }) - .attr("row", function(d, i, j) { - var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3; - return k; - }) - .attr("col", function(d, i, j) { - return i; - }) - .attr("width", cellSize) - .attr("height", cellSize) - .style("fill", function(d) { - if (d != null) return colorScale(d); - else return "url(#diagonalHatch)"; - }) - .on('mouseover', function(d, i, j) { - var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3; - d3.select('#colLabel_' + i).classed("hover", true); - d3.select('#rowLabel_' + k).classed("hover", true); - if (d != null) { - tooltip.style("visibility", "visible"); - tooltip.html('
' + d.toFixed(3) + '
'); - } else - tooltip.style("visibility", "hidden"); - }) - .on('mouseout', function(d, i, j) { - var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3; - d3.select('#colLabel_' + i).classed("hover", false); - d3.select('#rowLabel_' + k).classed("hover", false); + var row = svg.selectAll(".row") + .data(data.data) + .enter().append("g") + .attr("id", function(d) { + return d.idx; + }) + .attr("class", "row"); + var heatMap = row.selectAll(".cell") + .data(function(d) { + return d; + }) + .enter().append("svg:rect") + .attr("id", function(d, i, j){ + var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3; + return k.toString()+i.toString(); + }) + .attr("x", function(d, i) { + return i * cellSize; + }) + .attr("y", function(d, i, j) { + var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3; + return k * cellSize; + }) + .attr("rx", 4) + .attr("ry", 4) + .attr("class", function(d, i, j) { + var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3; + return "cell bordered cr" + k + " cc" + i; + }) + .attr("row", function(d, i, j) { + var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3; + return k; + }) + .attr("col", function(d, i, j) { + return i; + }) + .attr("width", cellSize) + .attr("height", cellSize) + .style("fill", function(d) { + if (d != null) return colorScale(d); + else return "url(#diagonalHatch)"; + }) + .on('mouseover', function(d, i, j) { + var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3; + d3.select('#colLabel_' + i).classed("hover", true); + d3.select('#rowLabel_' + k).classed("hover", true); + if (d != null) { + tooltip.style("visibility", "visible"); + tooltip.html('
' + d.toFixed(3) + '
'); + } else tooltip.style("visibility", "hidden"); - }) - .on("mousemove", function(d, i) { - tooltip.style("top", (d3.mouse(this)[1]+75) + "px").style("left", (d3.mouse(this)[0]+87) + "px"); - }) - .on('click', function(d, i, j) { - var rowsExtracted = svg.selectAll(".row")._groups[0] - var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3; - d3.select(this).style("fill", function(d) { - if (d3.select(this).style("fill") === "url(\"#diagonalHatch\")"){ - return colorScale(d) + }) + .on('mouseout', function(d, i, j) { + var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3; + d3.select('#colLabel_' + i).classed("hover", false); + d3.select('#rowLabel_' + k).classed("hover", false); + tooltip.style("visibility", "hidden"); + }) + .on("mousemove", function(d, i) { + tooltip.style("top", (d3.mouse(this)[1]+75) + "px").style("left", (d3.mouse(this)[0]+87) + "px"); + }) + .on('click', function(d, i, j) { + var rowsExtracted = svg.selectAll(".row")._groups[0] + var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3; + d3.select(this).style("fill", function(d) { + if (d3.select(this).style("fill") === "url(\"#diagonalHatch\")"){ + return colorScale(d) + } else { + return "url(#diagonalHatch)" + } + }) + if (i+1 === j.length) { + if(d3.select(this).style("fill") === "url(\"#diagonalHatch\")") { + row.selectAll(".cr"+k).style("fill", "url(#diagonalHatch)") } else { - return "url(#diagonalHatch)" + row.selectAll(".cr"+k).style("fill", function(d) { + return colorScale(d) + }) } - }) - if (i+1 === j.length) { - if(d3.select(this).style("fill") === "url(\"#diagonalHatch\")") { - row.selectAll(".cr"+k).style("fill", "url(#diagonalHatch)") + } + var finalresults = [] + for (let i = 0; i < rowsExtracted[0].childNodes.length - 1; i++) { + var results = [] + for (let j = 0; j < rowsExtracted.length; j++) { + if (rowsExtracted[j].childNodes[i].style.fill === "url(\"#diagonalHatch\")") { } else { - row.selectAll(".cr"+k).style("fill", function(d) { - return colorScale(d) - }) - } - } - var finalresults = [] - for (let i = 0; i < rowsExtracted[0].childNodes.length - 1; i++) { - var results = [] - for (let j = 0; j < rowsExtracted.length; j++) { - if (rowsExtracted[j].childNodes[i].style.fill === "url(\"#diagonalHatch\")") { - } else { - results.push(j) - } + results.push(j) } - finalresults.push(results) } - EventBus.$emit('SendSelectedFeaturesEvent', finalresults) - }); - - var legend = svg.append("g") - .attr("class", "legend") - .attr("transform", "translate(0,-240)") - .selectAll(".legendElement") - .data([0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9]) - .enter().append("g") - .attr("class", "legendElement"); - - legend.append("svg:rect") - .attr("x", function(d, i) { - return legendElementWidth * i; - }) - .attr("y", viewerPosTop) - .attr("class", "cellLegend bordered") - .attr("width", legendElementWidth) - .attr("height", cellSize / 2) - .style("fill", function(d, i) { - return colors[i]; - }); + finalresults.push(results) + } + EventBus.$emit('SendSelectedFeaturesEvent', finalresults) + }); - legend.append("text") - .attr("class", "mono legendElement") - .text(function(d) { - return "≥" + Math.round(d * 100) / 100; - }) - .attr("x", function(d, i) { - return legendElementWidth * i; - }) - .attr("y", viewerPosTop + cellSize); + var legend = svg.append("g") + .attr("class", "legend") + .attr("transform", "translate(0,-240)") + .selectAll(".legendElement") + .data([0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9]) + .enter().append("g") + .attr("class", "legendElement"); + + legend.append("svg:rect") + .attr("x", function(d, i) { + return legendElementWidth * i; + }) + .attr("y", viewerPosTop) + .attr("class", "cellLegend bordered") + .attr("width", legendElementWidth) + .attr("height", cellSize / 2) + .style("fill", function(d, i) { + return colors[i]; + }); - //================================================== - // Change ordering of cells - function sortByValues(rORc, i, sortOrder) { - var t = svg.transition().duration(1000); - var values = []; - var sorted; - d3.selectAll(".c" + rORc + i) - .filter(function(d) { - if (d != null) values.push(d); - else values.push(-999); // to handle NaN + legend.append("text") + .attr("class", "mono legendElement") + .text(function(d) { + return "≥" + Math.round(d * 100) / 100; + }) + .attr("x", function(d, i) { + return legendElementWidth * i; + }) + .attr("y", viewerPosTop + cellSize); + + //================================================== + // Change ordering of cells + function sortByValues(rORc, i, sortOrder) { + var t = svg.transition().duration(1000); + var values = []; + var sorted; + d3.selectAll(".c" + rORc + i) + .filter(function(d) { + if (d != null) values.push(d); + else values.push(-999); // to handle NaN + }); + //console.log(values); + if (rORc == "r") { // sort on cols + sorted = d3.range(col_number).sort(function(a, b) { + if (sortOrder) { + return values[b] - values[a]; + } else { + return values[a] - values[b]; + } + }); + t.selectAll(".cell") + .attr("x", function(d) { + var col = parseInt(d3.select(this).attr("col")); + return sorted.indexOf(col) * cellSize; }); - //console.log(values); - if (rORc == "r") { // sort on cols - sorted = d3.range(col_number).sort(function(a, b) { - if (sortOrder) { - return values[b] - values[a]; - } else { - return values[a] - values[b]; - } + t.selectAll(".colLabel") + .attr("y", function(d, i) { + return sorted.indexOf(i) * cellSize; + }) + .attr("transform", function(d, i) { + return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (sorted.indexOf(i) * cellSize) + ")"; }); - t.selectAll(".cell") - .attr("x", function(d) { - var col = parseInt(d3.select(this).attr("col")); - return sorted.indexOf(col) * cellSize; - }); - t.selectAll(".colLabel") - .attr("y", function(d, i) { - return sorted.indexOf(i) * cellSize; - }) - .attr("transform", function(d, i) { - return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (sorted.indexOf(i) * cellSize) + ")"; - }); - } else { // sort on rows - sorted = d3.range(row_number).sort(function(a, b) { - if (sortOrder) { - return values[b] - values[a]; - } else { - return values[a] - values[b]; - } + } else { // sort on rows + sorted = d3.range(row_number).sort(function(a, b) { + if (sortOrder) { + return values[b] - values[a]; + } else { + return values[a] - values[b]; + } + }); + t.selectAll(".cell") + .attr("y", function(d) { + var row = parseInt(d3.select(this).attr("row")); + return sorted.indexOf(row) * cellSize; + }); + t.selectAll(".rowLabel") + .attr("y", function(d, i) { + return sorted.indexOf(i) * cellSize; + }) + .attr("transform", function(d, i) { + return "translate(-3," + cellSize / 1.5 + ")"; }); - t.selectAll(".cell") - .attr("y", function(d) { - var row = parseInt(d3.select(this).attr("row")); - return sorted.indexOf(row) * cellSize; - }); - t.selectAll(".rowLabel") - .attr("y", function(d, i) { - return sorted.indexOf(i) * cellSize; - }) - .attr("transform", function(d, i) { - return "translate(-3," + cellSize / 1.5 + ")"; - }); } } //================================================== d3.select("#order").on("change", function() { - var newOrder = d3.select("#order").property("value"); - this.changeOrder(newOrder, heatmapId); + var newOrder = d3.select("#order").property("value"); + this.changeOrder(newOrder, heatmapId); }); //================================================== d3.select("#palette") - .on("keyup", function() { - var newPalette = d3.select("#palette").property("value"); - if (newPalette != null) // when interfaced with jQwidget, the ComboBox handles keyup event but value is then not available ? - this.changePalette(newPalette, heatmapId); - }) - .on("change", function() { - var newPalette = d3.select("#palette").property("value"); - this.changePalette(newPalette, heatmapId); - }); + .on("keyup", function() { + var newPalette = d3.select("#palette").property("value"); + if (newPalette != null) // when interfaced with jQwidget, the ComboBox handles keyup event but value is then not available ? + this.changePalette(newPalette, heatmapId); + }) + .on("change", function() { + var newPalette = d3.select("#palette").property("value"); + this.changePalette(newPalette, heatmapId); + }); //================================================== }, changeOrder(newOrder, heatmapId) { - var svg = d3.select(heatmapId); - var cellSize = this.cellSize - var t = svg.transition().duration(1000); - if (newOrder == "sortinit_col") { // initial sort on cols (alphabetically if produced like this) - t.selectAll(".cell") - .attr("x", function(d) { - var col = parseInt(d3.select(this).attr("col")); - return col * cellSize; - }); - t.selectAll(".colLabel") - .attr("y", function(d, i) { - return i * cellSize; - }) - .attr("transform", function(d, i) { - return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")"; - }); - } else if (newOrder == "sortinit_row") { // initial sort on rows (alphabetically if produced like this) - t.selectAll(".cell") - .attr("y", function(d) { - var row = parseInt(d3.select(this).attr("row")); - return row * cellSize; - }); - t.selectAll(".rowLabel") - .attr("y", function(d, i) { - return i * cellSize; - }) - .attr("transform", function(d, i) { - return "translate(-3," + cellSize / 1.5 + ")"; - }); - } else if (newOrder == "sortinit_col_row") { // initial sort on rows and cols (alphabetically if produced like this) - t.selectAll(".cell") - .attr("x", function(d) { - var col = parseInt(d3.select(this).attr("col")); - return col * cellSize; - }) - .attr("y", function(d) { - var row = parseInt(d3.select(this).attr("row")); - return row * cellSize; - }); - t.selectAll(".colLabel") - .attr("y", function(d, i) { - return i * cellSize; - }) - .attr("transform", function(d, i) { - return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")"; - }); - t.selectAll(".rowLabel") - .attr("y", function(d, i) { - return i * cellSize; - }) - .attr("transform", function(d, i) { - return "translate(-3," + cellSize / 1.5 + ")"; - }); + var svg = d3.select(heatmapId); + var cellSize = this.cellSize + var t = svg.transition().duration(1000); + if (newOrder == "sortinit_col") { // initial sort on cols (alphabetically if produced like this) + t.selectAll(".cell") + .attr("x", function(d) { + var col = parseInt(d3.select(this).attr("col")); + return col * cellSize; + }); + t.selectAll(".colLabel") + .attr("y", function(d, i) { + return i * cellSize; + }) + .attr("transform", function(d, i) { + return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")"; + }); + } else if (newOrder == "sortinit_row") { // initial sort on rows (alphabetically if produced like this) + t.selectAll(".cell") + .attr("y", function(d) { + var row = parseInt(d3.select(this).attr("row")); + return row * cellSize; + }); + t.selectAll(".rowLabel") + .attr("y", function(d, i) { + return i * cellSize; + }) + .attr("transform", function(d, i) { + return "translate(-3," + cellSize / 1.5 + ")"; + }); + } else if (newOrder == "sortinit_col_row") { // initial sort on rows and cols (alphabetically if produced like this) + t.selectAll(".cell") + .attr("x", function(d) { + var col = parseInt(d3.select(this).attr("col")); + return col * cellSize; + }) + .attr("y", function(d) { + var row = parseInt(d3.select(this).attr("row")); + return row * cellSize; + }); + t.selectAll(".colLabel") + .attr("y", function(d, i) { + return i * cellSize; + }) + .attr("transform", function(d, i) { + return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")"; + }); + t.selectAll(".rowLabel") + .attr("y", function(d, i) { + return i * cellSize; + }) + .attr("transform", function(d, i) { + return "translate(-3," + cellSize / 1.5 + ")"; + }); } }, reset () { @@ -578,6 +581,9 @@ export default { EventBus.$on('resetViews', this.reset) EventBus.$on('SendSelectedPointsToBrushHeatmap', data => { this.highlighted = data; }) EventBus.$on('SendSelectedPointsToBrushHeatmap', this.brush) + + // reset the views + EventBus.$on('resetViews', this.reset) } } diff --git a/frontend/src/components/Main.vue b/frontend/src/components/Main.vue index 47a3e3475..abfba886a 100755 --- a/frontend/src/components/Main.vue +++ b/frontend/src/components/Main.vue @@ -696,6 +696,7 @@ export default Vue.extend({ .then(response => { console.log('The server side was reset! Done.') this.reset = false + EventBus.$emit('resetViews') }) .catch(error => { console.log(error) @@ -733,7 +734,10 @@ export default Vue.extend({ axios.post(path, postData, axiosConfig) .then(response => { console.log('The client send the new factors! Done.') - this.RetrieveNewColors() + // this is if we need to change the factors even before models are there + //if (this.OverviewResults != 0) { + this.RetrieveNewColors() + // } }) .catch(error => { console.log(error) diff --git a/frontend/src/components/PCPData.vue b/frontend/src/components/PCPData.vue index 9fb19d323..e0bee326d 100644 --- a/frontend/src/components/PCPData.vue +++ b/frontend/src/components/PCPData.vue @@ -21,13 +21,15 @@ export default { } }, methods: { + reset () { + d3.selectAll("#PCPDataView > *").remove(); + }, PCPView () { d3.selectAll("#PCPDataView > *").remove(); const DataSetNew = JSON.parse(this.PCPDataReceived[2]) var DataSetParse = JSON.parse(DataSetNew) const target_names = JSON.parse(this.PCPDataReceived[3]) var colors = this.colorsValues - console.log(target_names) this.pc = ParCoords()("#PCPDataView") .data(DataSetParse) @@ -46,6 +48,9 @@ export default { EventBus.$on('emittedEventCallingDataPCP', data => { this.PCPDataReceived = data }) EventBus.$on('emittedEventCallingDataPCP', this.PCPView) EventBus.$on('ResponsiveandChange', this.PCPView) + + // reset the views + EventBus.$on('resetViews', this.reset) } } \ No newline at end of file diff --git a/frontend/src/components/Parameters.vue b/frontend/src/components/Parameters.vue index 9d709dd9d..eecdd4e89 100644 --- a/frontend/src/components/Parameters.vue +++ b/frontend/src/components/Parameters.vue @@ -19,510 +19,511 @@ export default { name: 'Parameters', data () { return { - WH: [], - storeActiveModels: [], - storeParameters: [], - FlagKNN: 0, - FlagRF: 0, - KNNModels: 576, //KNN models + WH: [], + storeActiveModels: [], + storeParameters: [], + FlagKNN: 0, + FlagRF: 0, + KNNModels: 576, //KNN models } }, methods: { - draw() { - - // Clear Heatmap first - var svg = d3.select("#overview"); - svg.selectAll("*").remove(); - - var widthinter = this.WH[0]*2 // interactive visualization - var heightinter = this.WH[1]*1.23 // interactive visualization - var margin = 0, - width = widthinter, - height = heightinter, - maxBarHeight = height / 2 - (margin + 70); - - var innerRadius = 0.1 * maxBarHeight; // innermost circle - - var svg = d3.select('#overview') - .append("svg") - .attr("width", width) - .attr("height", height) - .append("g") - .attr("class", "chart") - .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); - - var defs = svg.append("defs"); - - var gradients = defs - .append("linearGradient") - .attr("id", "gradient-chart-area") - .attr("x1", "50%") - .attr("y1", "0%") - .attr("x2", "50%") - .attr("y2", "100%") - .attr("spreadMethod", "pad"); - - gradients.append("stop") - .attr("offset", "0%") - .attr("stop-color", "#EDF0F0") - .attr("stop-opacity", 1); - - gradients.append("stop") - .attr("offset", "100%") - .attr("stop-color", "#ACB7BE") - .attr("stop-opacity", 1); - - gradients = defs - .append("linearGradient") - .attr("id", "gradient-questions") - .attr("x1", "50%") - .attr("y1", "0%") - .attr("x2", "50%") - .attr("y2", "100%") - .attr("spreadMethod", "pad"); - - gradients.append("stop") - .attr("offset", "0%") - .attr("stop-color", "#F6F8F9") - .attr("stop-opacity", 1); - - gradients.append("stop") - .attr("offset", "100%") - .attr("stop-color", "#D4DAE0") - .attr("stop-opacity", 1); - - gradients = defs - .append("radialGradient") - .attr("id", "gradient-bars") - .attr("gradientUnits", "userSpaceOnUse") - .attr("cx", "0") - .attr("cy", "0") - .attr("r", maxBarHeight) - .attr("spreadMethod", "pad"); + reset () { + setTimeout(() => { + var svg = d3.select("#overview"); + svg.selectAll("*").remove(); + }, 50); + }, + draw () { + // Clear Heatmap first + var svg = d3.select("#overview"); + svg.selectAll("*").remove(); + + var widthinter = this.WH[0]*2 // interactive visualization + var heightinter = this.WH[1]*1.23 // interactive visualization + var margin = 0, + width = widthinter, + height = heightinter, + maxBarHeight = height / 2 - (margin + 70); + + var innerRadius = 0.1 * maxBarHeight; // innermost circle + + var svg = d3.select('#overview') + .append("svg") + .attr("width", width) + .attr("height", height) + .append("g") + .attr("class", "chart") + .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); + + var defs = svg.append("defs"); + + var gradients = defs + .append("linearGradient") + .attr("id", "gradient-chart-area") + .attr("x1", "50%") + .attr("y1", "0%") + .attr("x2", "50%") + .attr("y2", "100%") + .attr("spreadMethod", "pad"); + + gradients.append("stop") + .attr("offset", "0%") + .attr("stop-color", "#EDF0F0") + .attr("stop-opacity", 1); + + gradients.append("stop") + .attr("offset", "100%") + .attr("stop-color", "#ACB7BE") + .attr("stop-opacity", 1); + + gradients = defs + .append("linearGradient") + .attr("id", "gradient-questions") + .attr("x1", "50%") + .attr("y1", "0%") + .attr("x2", "50%") + .attr("y2", "100%") + .attr("spreadMethod", "pad"); + + gradients.append("stop") + .attr("offset", "0%") + .attr("stop-color", "#F6F8F9") + .attr("stop-opacity", 1); + + gradients.append("stop") + .attr("offset", "100%") + .attr("stop-color", "#D4DAE0") + .attr("stop-opacity", 1); + + gradients = defs + .append("radialGradient") + .attr("id", "gradient-bars") + .attr("gradientUnits", "userSpaceOnUse") + .attr("cx", "0") + .attr("cy", "0") + .attr("r", maxBarHeight) + .attr("spreadMethod", "pad"); + + gradients.append("stop") + .attr("offset", "0%") + .attr("stop-color", "#F3D5AA"); + + gradients.append("stop") + .attr("offset", "50%") + .attr("stop-color", "#F4A636"); + + gradients.append("stop") + .attr("offset", "100%") + .attr("stop-color", "#AF4427"); + + gradients = defs + .append("linearGradient") + .attr("id", "gradient-categorization") + .attr("x1", "0%") + .attr("y1", "50%") + .attr("x2", "100%") + .attr("y2", "50%") + .attr("spreadMethod", "pad"); + + gradients.append("stop") + .attr("offset", "0%") + .attr("stop-color", "#8dd3c7") + .attr("stop-opacity", 1); + + gradients.append("stop") + .attr("offset", "100%") + .attr("stop-color", "#8da0cb") + .attr("stop-opacity", 1); + + svg.append("circle") + .attr("r", maxBarHeight + 30) + .classed("category-circle", true); + + svg.append("circle") + .attr("r", maxBarHeight + 15) + .classed("question-circle", true); + + svg.append("circle") + .attr("r", maxBarHeight) + .classed("chart-area-circle", true); + + svg.append("circle") + .attr("r", innerRadius) + .classed("center-circle", true); + + var n_neighbors = 0 + var metric = 0 + var algorithm = 0 + var weight = 0 + var n_estimators = 0 + var criterion = 0 + + if (this.FlagKNN == 1) { + n_neighbors = 100 + metric = 100 + algorithm = 100 + weight = 100 + } - gradients.append("stop") - .attr("offset", "0%") - .attr("stop-color", "#F3D5AA"); + if (this.FlagRF == 1) { + n_estimators = 100 + criterion = 100 + } - gradients.append("stop") - .attr("offset", "50%") - .attr("stop-color", "#F4A636"); + if (this.storeActiveModels.length != 0) { + var countkNNRelated = [] + var countRFRelated = [] + for (let i = 0; i < this.storeActiveModels.length; i++) { + if (this.storeActiveModels[i] < this.KNNModels) { + countkNNRelated.push(JSON.parse(this.storeParameters[this.storeActiveModels[i]])) + } else { + countRFRelated.push(JSON.parse(this.storeParameters[this.storeActiveModels[i]])) + } + } + + n_neighbors = ([... new Set(countkNNRelated.map(data => data.n_neighbors))].length / 25) * 100 + metric = ([... new Set(countkNNRelated.map(data => data.metric))].length / 4) * 100 + algorithm = ([... new Set(countkNNRelated.map(data => data.algorithm))].length / 3) * 100 + weight = ([... new Set(countkNNRelated.map(data => data.weight))].length / 2) * 100 + n_estimators = ([... new Set(countRFRelated.map(data => data.n_estimators))].length / 80) * 100 + criterion = ([... new Set(countRFRelated.map(data => data.criterion))].length / 2) * 100 + } - gradients.append("stop") - .attr("offset", "100%") - .attr("stop-color", "#AF4427"); + var data = [ + { algorithm: 'RF', parameter: 'n_estimators', percentage: n_estimators }, + { algorithm: 'RF', parameter: 'criterion', percentage: criterion }, + { algorithm: 'KNN', parameter: 'n_neighbors', percentage: n_neighbors }, + { algorithm: 'KNN', parameter: 'metric', percentage: metric }, + { algorithm: 'KNN', parameter: 'algorithm', percentage: algorithm }, + { algorithm: 'KNN', parameter: 'weight', percentage: weight }, + ]; + + var cats = data.map(function(d, i) { + return d.algorithm; + }); + + var catCounts = {}; + for (var i = 0; i < cats.length; i++) { + var num = cats[i]; + catCounts[num] = catCounts[num] ? catCounts[num] + 1 : 1; + } + // remove dupes (not exactly the fastest) + cats = cats.filter(function(v, i) { + return cats.indexOf(v) == i; + }); + var numCatBars = cats.length; + + var angle = 0, + rotate = 0; + + data.forEach(function(d, i) { + // bars start and end angles + d.startAngle = angle; + angle += (2 * Math.PI) / numCatBars / catCounts[d.algorithm]; + d.endAngle = angle; + + // y axis minor lines (i.e. questions) rotation + d.rotate = rotate; + rotate += 360 / numCatBars / catCounts[d.algorithm]; + }); + + // category_label + var arc_category_label = d3.svg.arc() + .startAngle(function(d, i) { + return (i * 2 * Math.PI) / numCatBars; + }) + .endAngle(function(d, i) { + return ((i + 1) * 2 * Math.PI) / numCatBars; + }) + .innerRadius(maxBarHeight + 32) + .outerRadius(maxBarHeight + 0); + + var category_text = svg.selectAll("path.category_label_arc") + .data(cats) + .enter().append("path") + .classed("category-label-arc", true) + .attr("id", function(d, i) { + return "category_label_" + i; + }) //Give each slice a unique ID + .attr("fill", "none") + .attr("d", arc_category_label); + + category_text.each(function(d, i) { + //Search pattern for everything between the start and the first capital L + var firstArcSection = /(^.+?)L/; + + //Grab everything up to the first Line statement + var newArc = firstArcSection.exec(d3.select(this).attr("d"))[1]; + //Replace all the commas so that IE can handle it + newArc = newArc.replace(/,/g, " "); + + //If the whole bar lies beyond a quarter of a circle (90 degrees or pi/2) + // and less than 270 degrees or 3 * pi/2, flip the end and start position + var startAngle = (i * 2 * Math.PI) / numCatBars, + endAngle = ((i + 1) * 2 * Math.PI) / numCatBars; + + if (startAngle > Math.PI / 2 && startAngle < 3 * Math.PI / 2 && endAngle > Math.PI / 2 && endAngle < 3 * Math.PI / 2) { + var startLoc = /M(.*?)A/, //Everything between the capital M and first capital A + middleLoc = /A(.*?)0 0 1/, //Everything between the capital A and 0 0 1 + endLoc = /0 0 1 (.*?)$/; //Everything between the 0 0 1 and the end of the string (denoted by $) + //Flip the direction of the arc by switching the start and end point (and sweep flag) + var newStart = endLoc.exec(newArc)[1]; + var newEnd = startLoc.exec(newArc)[1]; + var middleSec = middleLoc.exec(newArc)[1]; + + //Build up the new arc notation, set the sweep-flag to 0 + newArc = "M" + newStart + "A" + middleSec + "0 0 0 " + newEnd; + } //if + + //Create a new invisible arc that the text can flow along + /* svg.append("path") + .attr("class", "hiddenDonutArcs") + .attr("id", "category_label_"+i) + .attr("d", newArc) + .style("fill", "none");*/ + + // modifying existing arc instead + d3.select(this).attr("d", newArc); + }); + + svg.selectAll(".category-label-text") + .data(cats) + .enter().append("text") + .attr("class", "category-label-text") + //.attr("x", 0) //Move the text from the start angle of the arc + //Move the labels below the arcs for those slices with an end angle greater than 90 degrees + .attr("dy", function(d, i) { + var startAngle = (i * 2 * Math.PI) / numCatBars, + endAngle = ((i + 1) * 2 * Math.PI) / numCatBars; + return (startAngle > Math.PI / 2 && startAngle < 3 * Math.PI / 2 && endAngle > Math.PI / 2 && endAngle < 3 * Math.PI / 2 ? -4 : 14); + }) + .append("textPath") + .attr("startOffset", "50%") + .style("text-anchor", "middle") + .attr("xlink:href", function(d, i) { + return "#category_label_" + i; + }) + .text(function(d) { + return d; + }); - gradients = defs - .append("linearGradient") - .attr("id", "gradient-categorization") - .attr("x1", "0%") - .attr("y1", "50%") - .attr("x2", "100%") - .attr("y2", "50%") - .attr("spreadMethod", "pad"); + // parameter + var arc_parameter = d3.svg.arc() + .startAngle(function(d, i) { + return d.startAngle; + }) + .endAngle(function(d, i) { + return d.endAngle; + }) + //.innerRadius(maxBarHeight + 2) + .outerRadius(maxBarHeight - 9); + + var question_text = svg.selectAll("path.parameter_arc") + .data(data) + .enter().append("path") + .classed("question-label-arc", true) + .attr("id", function(d, i) { + return "parameter_" + i; + }) //Give each slice a unique ID + .attr("fill", "none") + .attr("d", arc_parameter); + + question_text.each(function(d, i) { + //Search pattern for everything between the start and the first capital L + var firstArcSection = /(^.+?)L/; + + //Grab everything up to the first Line statement + var newArc = firstArcSection.exec(d3.select(this).attr("d"))[1]; + //Replace all the commas so that IE can handle it + newArc = newArc.replace(/,/g, " "); + + //If the end angle lies beyond a quarter of a circle (90 degrees or pi/2) + //flip the end and start position + if (d.startAngle > Math.PI / 2 && d.startAngle < 3 * Math.PI / 2 && d.endAngle > Math.PI / 2 && d.endAngle < 3 * Math.PI / 2) { + var startLoc = /M(.*?)A/, //Everything between the capital M and first capital A + middleLoc = /A(.*?)0 0 1/, //Everything between the capital A and 0 0 1 + endLoc = /0 0 1 (.*?)$/; //Everything between the 0 0 1 and the end of the string (denoted by $) + //Flip the direction of the arc by switching the start and end point (and sweep flag) + var newStart = endLoc.exec(newArc)[1]; + var newEnd = startLoc.exec(newArc)[1]; + var middleSec = middleLoc.exec(newArc)[1]; + + //Build up the new arc notation, set the sweep-flag to 0 + newArc = "M" + newStart + "A" + middleSec + "0 0 0 " + newEnd; + } //if + + //Create a new invisible arc that the text can flow along + /* svg.append("path") + .attr("class", "hiddenDonutArcs") + .attr("id", "parameter_"+i) + .attr("d", newArc) + .style("fill", "none");*/ + + // modifying existing arc instead + d3.select(this).attr("d", newArc); + }); + + question_text = svg.selectAll(".question-label-text") + .data(data) + .enter().append("text") + .attr("class", "question-label-text") + //.attr("x", 0) //Move the text from the start angle of the arc + //.attr("y", 0) + //Move the labels below the arcs for those slices with an end angle greater than 90 degrees + /* .attr("dy", function (d, i) { + return (d.startAngle > Math.PI / 2 && d.startAngle < 3 * Math.PI / 2 && d.endAngle > Math.PI / 2 && d.endAngle < 3 * Math.PI / 2 ? 10 : -10); + })*/ + .append("textPath") + //.attr("startOffset", "50%") + //.style("text-anchor", "middle") + //.style("dominant-baseline", "central") + .style('font-size', '7px') + .style('font-family', 'sans-serif') + .attr("xlink:href", function(d, i) { + return "#parameter_" + i; + }) + .text(function(d) { + return d.parameter.toUpperCase(); + }) + .call(wrapTextOnArc, maxBarHeight); + + // adjust dy (labels vertical start) based on number of lines (i.e. tspans) + question_text.each(function(d, i) { + var textPath = d3.select(this)[0][0], + tspanCount = textPath.childNodes.length; + + if (d.startAngle > Math.PI / 2 && d.startAngle < 3 * Math.PI / 2 && d.endAngle > Math.PI / 2 && d.endAngle < 3 * Math.PI / 2) { + // set baseline for one line and adjust if greater than one line + d3.select(textPath.childNodes[0]).attr("dy", 3 + (tspanCount - 1) * -0.6 + 'em'); + } else { + d3.select(textPath.childNodes[0]).attr("dy", -2.1 + (tspanCount - 1) * -0.6 + 'em'); + } + }); + + /* bars */ + var arc = d3.svg.arc() + .startAngle(function(d, i) { + return d.startAngle; + }) + .endAngle(function(d, i) { + return d.endAngle; + }) + .innerRadius(innerRadius); + + var bars = svg.selectAll("path.bar") + .data(data) + .enter().append("path") + .classed("bars", true) + .each(function(d) { + d.outerRadius = innerRadius; + }) + .attr("d", arc); + + bars.transition().ease("elastic").duration(1000).delay(function(d, i) { + return i * 100; + }) + .attrTween("d", function(d, index) { + var i = d3.interpolate(d.outerRadius, x_scale(+d.percentage)); + return function(t) { + d.outerRadius = i(t); + return arc(d, index); + }; + }); - gradients.append("stop") - .attr("offset", "0%") - .attr("stop-color", "#8dd3c7") - .attr("stop-opacity", 1); + var x_scale = d3.scale.linear() + .domain([0, 100]) + .range([innerRadius, maxBarHeight]); - gradients.append("stop") - .attr("offset", "100%") - .attr("stop-color", "#8da0cb") - .attr("stop-opacity", 1); - svg.append("circle") - .attr("r", maxBarHeight + 30) - .classed("category-circle", true); - - svg.append("circle") - .attr("r", maxBarHeight + 15) - .classed("question-circle", true); - - svg.append("circle") - .attr("r", maxBarHeight) - .classed("chart-area-circle", true); - - svg.append("circle") - .attr("r", innerRadius) - .classed("center-circle", true); - - var n_neighbors = 0 - var metric = 0 - var algorithm = 0 - var weight = 0 - var n_estimators = 0 - var criterion = 0 - - if (this.FlagKNN == 1) { - n_neighbors = 100 - metric = 100 - algorithm = 100 - weight = 100 - } + var y_scale = d3.scale.linear() + .domain([0, 100]) + .range([-innerRadius, -maxBarHeight]); - if (this.FlagRF == 1) { - n_estimators = 100 - criterion = 100 - } + svg.selectAll("circle.x.minor") + .data(y_scale.ticks(10)) + .enter().append("circle") + .classed("gridlines minor", true) + .attr("r", function(d) { + return x_scale(d); + }); - if (this.storeActiveModels.length != 0) { - var countkNNRelated = [] - var countRFRelated = [] - for (let i = 0; i < this.storeActiveModels.length; i++) { - if (this.storeActiveModels[i] < this.KNNModels) { - countkNNRelated.push(JSON.parse(this.storeParameters[this.storeActiveModels[i]])) - } else { - countRFRelated.push(JSON.parse(this.storeParameters[this.storeActiveModels[i]])) - } - } - //console.log(countkNNRelated) - //console.log(countRFRelated) - n_neighbors = ([... new Set(countkNNRelated.map(data => data.n_neighbors))].length / 25) * 100 - metric = ([... new Set(countkNNRelated.map(data => data.metric))].length / 4) * 100 - algorithm = ([... new Set(countkNNRelated.map(data => data.algorithm))].length / 3) * 100 - weight = ([... new Set(countkNNRelated.map(data => data.weight))].length / 2) * 100 - n_estimators = ([... new Set(countRFRelated.map(data => data.n_estimators))].length / 80) * 100 - criterion = ([... new Set(countRFRelated.map(data => data.criterion))].length / 2) * 100 - - //console.log(algorithm) - } + // question lines + svg.selectAll("line.y.minor") + .data(data) + .enter().append("line") + .classed("gridlines minor", true) + .attr("y1", -innerRadius) + .attr("y2", -maxBarHeight - 15) + .attr("transform", function(d, i) { + return "rotate(" + (d.rotate) + ")"; + }); - var data = [ - { algorithm: 'RF', parameter: 'n_estimators', percentage: n_estimators }, - { algorithm: 'RF', parameter: 'criterion', percentage: criterion }, - { algorithm: 'KNN', parameter: 'n_neighbors', percentage: n_neighbors }, - { algorithm: 'KNN', parameter: 'metric', percentage: metric }, - { algorithm: 'KNN', parameter: 'algorithm', percentage: algorithm }, - { algorithm: 'KNN', parameter: 'weight', percentage: weight }, - ]; - - var cats = data.map(function(d, i) { - return d.algorithm; - }); - - var catCounts = {}; - for (var i = 0; i < cats.length; i++) { - var num = cats[i]; - catCounts[num] = catCounts[num] ? catCounts[num] + 1 : 1; - } - // remove dupes (not exactly the fastest) - cats = cats.filter(function(v, i) { - return cats.indexOf(v) == i; - }); - var numCatBars = cats.length; - - var angle = 0, - rotate = 0; - - data.forEach(function(d, i) { - // bars start and end angles - d.startAngle = angle; - angle += (2 * Math.PI) / numCatBars / catCounts[d.algorithm]; - d.endAngle = angle; - - // y axis minor lines (i.e. questions) rotation - d.rotate = rotate; - rotate += 360 / numCatBars / catCounts[d.algorithm]; - }); - - // category_label - var arc_category_label = d3.svg.arc() - .startAngle(function(d, i) { - return (i * 2 * Math.PI) / numCatBars; - }) - .endAngle(function(d, i) { - return ((i + 1) * 2 * Math.PI) / numCatBars; - }) - .innerRadius(maxBarHeight + 32) - .outerRadius(maxBarHeight + 0); - - var category_text = svg.selectAll("path.category_label_arc") - .data(cats) - .enter().append("path") - .classed("category-label-arc", true) - .attr("id", function(d, i) { - return "category_label_" + i; - }) //Give each slice a unique ID - .attr("fill", "none") - .attr("d", arc_category_label); - - category_text.each(function(d, i) { - //Search pattern for everything between the start and the first capital L - var firstArcSection = /(^.+?)L/; - - //Grab everything up to the first Line statement - var newArc = firstArcSection.exec(d3.select(this).attr("d"))[1]; - //Replace all the commas so that IE can handle it - newArc = newArc.replace(/,/g, " "); - - //If the whole bar lies beyond a quarter of a circle (90 degrees or pi/2) - // and less than 270 degrees or 3 * pi/2, flip the end and start position - var startAngle = (i * 2 * Math.PI) / numCatBars, - endAngle = ((i + 1) * 2 * Math.PI) / numCatBars; - - if (startAngle > Math.PI / 2 && startAngle < 3 * Math.PI / 2 && endAngle > Math.PI / 2 && endAngle < 3 * Math.PI / 2) { - var startLoc = /M(.*?)A/, //Everything between the capital M and first capital A - middleLoc = /A(.*?)0 0 1/, //Everything between the capital A and 0 0 1 - endLoc = /0 0 1 (.*?)$/; //Everything between the 0 0 1 and the end of the string (denoted by $) - //Flip the direction of the arc by switching the start and end point (and sweep flag) - var newStart = endLoc.exec(newArc)[1]; - var newEnd = startLoc.exec(newArc)[1]; - var middleSec = middleLoc.exec(newArc)[1]; - - //Build up the new arc notation, set the sweep-flag to 0 - newArc = "M" + newStart + "A" + middleSec + "0 0 0 " + newEnd; - } //if - - //Create a new invisible arc that the text can flow along - /* svg.append("path") - .attr("class", "hiddenDonutArcs") - .attr("id", "category_label_"+i) - .attr("d", newArc) - .style("fill", "none");*/ - - // modifying existing arc instead - d3.select(this).attr("d", newArc); - }); - - svg.selectAll(".category-label-text") - .data(cats) - .enter().append("text") - .attr("class", "category-label-text") - //.attr("x", 0) //Move the text from the start angle of the arc - //Move the labels below the arcs for those slices with an end angle greater than 90 degrees - .attr("dy", function(d, i) { - var startAngle = (i * 2 * Math.PI) / numCatBars, - endAngle = ((i + 1) * 2 * Math.PI) / numCatBars; - return (startAngle > Math.PI / 2 && startAngle < 3 * Math.PI / 2 && endAngle > Math.PI / 2 && endAngle < 3 * Math.PI / 2 ? -4 : 14); - }) - .append("textPath") - .attr("startOffset", "50%") - .style("text-anchor", "middle") - .attr("xlink:href", function(d, i) { - return "#category_label_" + i; - }) - .text(function(d) { - return d; - }); - - // parameter - var arc_parameter = d3.svg.arc() - .startAngle(function(d, i) { - return d.startAngle; - }) - .endAngle(function(d, i) { - return d.endAngle; - }) - //.innerRadius(maxBarHeight + 2) - .outerRadius(maxBarHeight - 9); - - var question_text = svg.selectAll("path.parameter_arc") - .data(data) - .enter().append("path") - .classed("question-label-arc", true) - .attr("id", function(d, i) { - return "parameter_" + i; - }) //Give each slice a unique ID - .attr("fill", "none") - .attr("d", arc_parameter); - - question_text.each(function(d, i) { - //Search pattern for everything between the start and the first capital L - var firstArcSection = /(^.+?)L/; - - //Grab everything up to the first Line statement - var newArc = firstArcSection.exec(d3.select(this).attr("d"))[1]; - //Replace all the commas so that IE can handle it - newArc = newArc.replace(/,/g, " "); - - //If the end angle lies beyond a quarter of a circle (90 degrees or pi/2) - //flip the end and start position - if (d.startAngle > Math.PI / 2 && d.startAngle < 3 * Math.PI / 2 && d.endAngle > Math.PI / 2 && d.endAngle < 3 * Math.PI / 2) { - var startLoc = /M(.*?)A/, //Everything between the capital M and first capital A - middleLoc = /A(.*?)0 0 1/, //Everything between the capital A and 0 0 1 - endLoc = /0 0 1 (.*?)$/; //Everything between the 0 0 1 and the end of the string (denoted by $) - //Flip the direction of the arc by switching the start and end point (and sweep flag) - var newStart = endLoc.exec(newArc)[1]; - var newEnd = startLoc.exec(newArc)[1]; - var middleSec = middleLoc.exec(newArc)[1]; - - //Build up the new arc notation, set the sweep-flag to 0 - newArc = "M" + newStart + "A" + middleSec + "0 0 0 " + newEnd; - } //if - - //Create a new invisible arc that the text can flow along - /* svg.append("path") - .attr("class", "hiddenDonutArcs") - .attr("id", "parameter_"+i) - .attr("d", newArc) - .style("fill", "none");*/ - - // modifying existing arc instead - d3.select(this).attr("d", newArc); - }); - - question_text = svg.selectAll(".question-label-text") - .data(data) - .enter().append("text") - .attr("class", "question-label-text") - //.attr("x", 0) //Move the text from the start angle of the arc - //.attr("y", 0) - //Move the labels below the arcs for those slices with an end angle greater than 90 degrees - /* .attr("dy", function (d, i) { - return (d.startAngle > Math.PI / 2 && d.startAngle < 3 * Math.PI / 2 && d.endAngle > Math.PI / 2 && d.endAngle < 3 * Math.PI / 2 ? 10 : -10); - })*/ - .append("textPath") - //.attr("startOffset", "50%") - //.style("text-anchor", "middle") - //.style("dominant-baseline", "central") - .style('font-size', '7px') - .style('font-family', 'sans-serif') - .attr("xlink:href", function(d, i) { - return "#parameter_" + i; - }) - .text(function(d) { - return d.parameter.toUpperCase(); - }) - .call(wrapTextOnArc, maxBarHeight); - - // adjust dy (labels vertical start) based on number of lines (i.e. tspans) - question_text.each(function(d, i) { - //console.log(d3.select(this)[0]); - var textPath = d3.select(this)[0][0], - tspanCount = textPath.childNodes.length; - - if (d.startAngle > Math.PI / 2 && d.startAngle < 3 * Math.PI / 2 && d.endAngle > Math.PI / 2 && d.endAngle < 3 * Math.PI / 2) { - // set baseline for one line and adjust if greater than one line - d3.select(textPath.childNodes[0]).attr("dy", 3 + (tspanCount - 1) * -0.6 + 'em'); - } else { - d3.select(textPath.childNodes[0]).attr("dy", -2.1 + (tspanCount - 1) * -0.6 + 'em'); - } - }); - - /* bars */ - var arc = d3.svg.arc() - .startAngle(function(d, i) { - return d.startAngle; - }) - .endAngle(function(d, i) { - return d.endAngle; - }) - .innerRadius(innerRadius); - - var bars = svg.selectAll("path.bar") - .data(data) - .enter().append("path") - .classed("bars", true) - .each(function(d) { - d.outerRadius = innerRadius; - }) - .attr("d", arc); - - bars.transition().ease("elastic").duration(1000).delay(function(d, i) { - return i * 100; - }) - .attrTween("d", function(d, index) { - var i = d3.interpolate(d.outerRadius, x_scale(+d.percentage)); - return function(t) { - d.outerRadius = i(t); - return arc(d, index); - }; - }); - - var x_scale = d3.scale.linear() - .domain([0, 100]) - .range([innerRadius, maxBarHeight]); - - - var y_scale = d3.scale.linear() - .domain([0, 100]) - .range([-innerRadius, -maxBarHeight]); - - svg.selectAll("circle.x.minor") - .data(y_scale.ticks(10)) - .enter().append("circle") - .classed("gridlines minor", true) - .attr("r", function(d) { - return x_scale(d); - }); - - // question lines - svg.selectAll("line.y.minor") - .data(data) - .enter().append("line") - .classed("gridlines minor", true) - .attr("y1", -innerRadius) - .attr("y2", -maxBarHeight - 15) - .attr("transform", function(d, i) { - return "rotate(" + (d.rotate) + ")"; - }); - - // category lines - svg.selectAll("line.y.major") - .data(cats) - .enter().append("line") - .classed("gridlines major", true) - .attr("y1", -innerRadius) - .attr("y2", -maxBarHeight - 100) - .attr("transform", function(d, i) { - return "rotate(" + (i * 360 / numCatBars) + ")"; - }); - - - function wrapTextOnArc(text, radius) { - // note getComputedTextLength() doesn't work correctly for text on an arc, - // hence, using a hidden text element for measuring text length. - var temporaryText = d3.select('svg') - .append("text") - .attr("class", "temporary-text") // used to select later - .style("font", "7px sans-serif") - .style("opacity", 0); // hide element - - var getTextLength = function(string) { - temporaryText.text(string); - return temporaryText.node().getComputedTextLength(); - }; - - text.each(function(d) { - var text = d3.select(this), - words = text.text().split(/[ \f\n\r\t\v]+/).reverse(), //Don't cut non-breaking space (\xA0), as well as the Unicode characters \u00A0 \u2028 \u2029) - word, - wordCount = words.length, - line = [], - textLength, - lineHeight = 1.1, // ems - x = 0, - y = 0, - dy = 0, - tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em"), - arcLength = ((d.endAngle - d.startAngle) / (2 * Math.PI)) * (2 * Math.PI * radius), - paddedArcLength = arcLength - 16; - - while (word = words.pop()) { - line.push(word); - tspan.text(line.join(" ")); - textLength = getTextLength(tspan.text()); - tspan.attr("x", (arcLength - textLength) / 2); - - if (textLength > paddedArcLength && line.length > 1) { - // remove last word - line.pop(); - tspan.text(line.join(" ")); - textLength = getTextLength(tspan.text()); - tspan.attr("x", (arcLength - textLength) / 2); - - // start new line with last word - line = [word]; - tspan = text.append("tspan").attr("dy", lineHeight + dy + "em").text(word); - textLength = getTextLength(tspan.text()); - tspan.attr("x", (arcLength - textLength) / 2); - } - } + // category lines + svg.selectAll("line.y.major") + .data(cats) + .enter().append("line") + .classed("gridlines major", true) + .attr("y1", -innerRadius) + .attr("y2", -maxBarHeight - 100) + .attr("transform", function(d, i) { + return "rotate(" + (i * 360 / numCatBars) + ")"; }); - d3.selectAll("text.temporary-text").remove() + + function wrapTextOnArc(text, radius) { + // note getComputedTextLength() doesn't work correctly for text on an arc, + // hence, using a hidden text element for measuring text length. + var temporaryText = d3.select('svg') + .append("text") + .attr("class", "temporary-text") // used to select later + .style("font", "7px sans-serif") + .style("opacity", 0); // hide element + + var getTextLength = function(string) { + temporaryText.text(string); + return temporaryText.node().getComputedTextLength(); + }; + + text.each(function(d) { + var text = d3.select(this), + words = text.text().split(/[ \f\n\r\t\v]+/).reverse(), //Don't cut non-breaking space (\xA0), as well as the Unicode characters \u00A0 \u2028 \u2029) + word, + wordCount = words.length, + line = [], + textLength, + lineHeight = 1.1, // ems + x = 0, + y = 0, + dy = 0, + tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em"), + arcLength = ((d.endAngle - d.startAngle) / (2 * Math.PI)) * (2 * Math.PI * radius), + paddedArcLength = arcLength - 16; + + while (word = words.pop()) { + line.push(word); + tspan.text(line.join(" ")); + textLength = getTextLength(tspan.text()); + tspan.attr("x", (arcLength - textLength) / 2); + + if (textLength > paddedArcLength && line.length > 1) { + // remove last word + line.pop(); + tspan.text(line.join(" ")); + textLength = getTextLength(tspan.text()); + tspan.attr("x", (arcLength - textLength) / 2); + + // start new line with last word + line = [word]; + tspan = text.append("tspan").attr("dy", lineHeight + dy + "em").text(word); + textLength = getTextLength(tspan.text()); + tspan.attr("x", (arcLength - textLength) / 2); + } } + }); + + d3.selectAll("text.temporary-text").remove() + } }, drawEncodings () { // Clear Heatmap first @@ -572,6 +573,10 @@ export default { .attr('width', width - 2 * padding) .attr('height', height - 2 * padding); */ + }, + updateFlags () { + this.FlagKNN = 0 + this.FlagRF = 0 } }, mounted () { @@ -587,6 +592,12 @@ export default { this.WH = data}) EventBus.$on('ResponsiveandChange', data => { this.WH = data}) + + // reset the views + EventBus.$on('resetViews', this.reset) + + EventBus.$on('alternateFlagLock', this.updateFlags) + EventBus.$on('alternateFlagLock', this.draw) } } @@ -595,7 +606,6 @@ export default {