parent
4d5a8b9796
commit
877575a375
Binary file not shown.
@ -0,0 +1 @@ |
||||
{"duration": 0.006577968597412109, "input_args": {}} |
||||
@ -0,0 +1,11 @@ |
||||
# first line: 447 |
||||
@memory.cache |
||||
def create_global_function(): |
||||
global estimator |
||||
def estimator(C, gamma): |
||||
# initialize model |
||||
model = SVC(C=C, gamma=gamma, degree=1, random_state=RANDOM_SEED) |
||||
# set in cross-validation |
||||
result = cross_validate(model, XData, yData, cv=crossValidation) |
||||
# result is mean of test_score |
||||
return np.mean(result['test_score']) |
||||
@ -0,0 +1 @@ |
||||
{"duration": 4.569021940231323, "input_args": {}} |
||||
Binary file not shown.
@ -0,0 +1,17 @@ |
||||
# first line: 457 |
||||
@memory.cache |
||||
def executeModel(): |
||||
|
||||
create_global_function() |
||||
global estimator |
||||
|
||||
params = {"C": (0.0001, 10000), "gamma": (0.0001, 10000)} |
||||
svc_bayesopt = BayesianOptimization(estimator, params) |
||||
svc_bayesopt.maximize(init_points=5, n_iter=20, acq='ucb') |
||||
bestParams = svc_bayesopt.max['params'] |
||||
estimator = SVC(C=bestParams.get('C'), gamma=bestParams.get('gamma'), probability=True) |
||||
estimator.fit(XData, yData) |
||||
yPredict = estimator.predict(XData) |
||||
yPredictProb = cross_val_predict(estimator, XData, yData, cv=crossValidation, method='predict_proba') |
||||
|
||||
return 'Everything Okay' |
||||
@ -1,8 +0,0 @@ |
||||
<!-- About page for the application. --> |
||||
|
||||
<template> |
||||
<div> |
||||
<img src="@/assets/isovis.jpg"> |
||||
<p>HyperSearVis is a visual analytics tool created by Angelos Chatzimparmpas, member of the ISOVIS Group, Linnaeus University, Sweden.</p> |
||||
</div> |
||||
</template> |
||||
@ -1,351 +0,0 @@ |
||||
<template> |
||||
<div id="PCP" class="parcoords" style="min-height: 285px;"></div> |
||||
</template> |
||||
|
||||
<script> |
||||
import 'parcoord-es/dist/parcoords.css'; |
||||
import ParCoords from 'parcoord-es'; |
||||
import * as d3Base from 'd3' |
||||
|
||||
// attach all d3 plugins to the d3 library |
||||
const d3 = Object.assign(d3Base) |
||||
|
||||
import { EventBus } from '../main.js' |
||||
|
||||
export default { |
||||
name: 'AlgorithmHyperParam', |
||||
data () { |
||||
return { |
||||
ModelsPerformance: 0, |
||||
selAlgorithm: 0, |
||||
keyAllOrClass: true, |
||||
listClassPerf: [], |
||||
pc: 0, |
||||
factors: [1,0,0 |
||||
,1,0,0,1,0 |
||||
,0,1,0,0,0 |
||||
,0,0,1,0,0 |
||||
,0,1,1,1 |
||||
], |
||||
SVCModels: 576, |
||||
GausNBModels: 736, |
||||
MLPModels: 1236, |
||||
LRModels: 1356, |
||||
LDAModels: 1996, |
||||
QDAModels: 2196, |
||||
RFModels: 2446, |
||||
ExtraTModels: 2606, |
||||
AdaBModels: 2766, |
||||
GradBModels: 2926, |
||||
} |
||||
}, |
||||
methods: { |
||||
reset () { |
||||
d3.selectAll("#PCP > *").remove(); |
||||
}, |
||||
PCPView () { |
||||
d3.selectAll("#PCP > *").remove(); |
||||
if (this.selAlgorithm != '') { |
||||
var colors = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#b15928'] |
||||
var colorGiv = 0 |
||||
|
||||
var factorsLocal = this.factors |
||||
var divide = 0 |
||||
|
||||
factorsLocal.forEach(element => { |
||||
divide = element + divide |
||||
}); |
||||
|
||||
var McKNN = [] |
||||
const performanceAlgKNN = JSON.parse(this.ModelsPerformance[6]) |
||||
for (let j = 0; j < Object.values(performanceAlgKNN['mean_test_accuracy']).length; j++) { |
||||
let sumKNN |
||||
sumKNN = (factorsLocal[0] * Object.values(performanceAlgKNN['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlgKNN['geometric_mean_score_micro'])[j]) + (factorsLocal[2] * Object.values(performanceAlgKNN['geometric_mean_score_macro'])[j]) |
||||
+ (factorsLocal[3] * Object.values(performanceAlgKNN['geometric_mean_score_weighted'])[j]) + (factorsLocal[4] * Object.values(performanceAlgKNN['mean_test_precision_micro'])[j]) + (factorsLocal[5] * Object.values(performanceAlgKNN['mean_test_precision_macro'])[j]) + (factorsLocal[6] * Object.values(performanceAlgKNN['mean_test_precision_weighted'])[j]) + (factorsLocal[7] * Object.values(performanceAlgKNN['mean_test_recall_micro'])[j]) |
||||
+ (factorsLocal[8] * Object.values(performanceAlgKNN['mean_test_recall_macro'])[j]) + (factorsLocal[9] * Object.values(performanceAlgKNN['mean_test_recall_weighted'])[j]) + (factorsLocal[10] * Object.values(performanceAlgKNN['f5_micro'])[j]) + (factorsLocal[11] * Object.values(performanceAlgKNN['f5_macro'])[j]) + (factorsLocal[12] * Object.values(performanceAlgKNN['f5_weighted'])[j]) + (factorsLocal[13] * Object.values(performanceAlgKNN['f1_micro'])[j]) |
||||
+ (factorsLocal[14] * Object.values(performanceAlgKNN['f1_macro'])[j]) + (factorsLocal[15] * Object.values(performanceAlgKNN['f1_weighted'])[j]) + (factorsLocal[16] * Object.values(performanceAlgKNN['f2_micro'])[j]) + (factorsLocal[17] * Object.values(performanceAlgKNN['f2_macro'])[j]) + (factorsLocal[18] * Object.values(performanceAlgKNN['f2_weighted'])[j]) + (factorsLocal[19] * Math.abs(Object.values(performanceAlgKNN['matthews_corrcoef'])[j])) |
||||
+ (factorsLocal[20] * Object.values(performanceAlgKNN['mean_test_roc_auc_ovo_weighted'])[j]) + (factorsLocal[21] * (1 - Object.values(performanceAlgKNN['log_loss'])[j])) |
||||
McKNN.push((sumKNN/divide)*100) |
||||
} |
||||
var McSVC = [] |
||||
const performanceAlgSVC = JSON.parse(this.ModelsPerformance[15]) |
||||
for (let j = 0; j < Object.values(performanceAlgSVC['mean_test_accuracy']).length; j++) { |
||||
let sumSVC |
||||
sumSVC = (factorsLocal[0] * Object.values(performanceAlgSVC['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlgSVC['geometric_mean_score_micro'])[j]) + (factorsLocal[2] * Object.values(performanceAlgSVC['geometric_mean_score_macro'])[j]) |
||||
+ (factorsLocal[3] * Object.values(performanceAlgSVC['geometric_mean_score_weighted'])[j]) + (factorsLocal[4] * Object.values(performanceAlgSVC['mean_test_precision_micro'])[j]) + (factorsLocal[5] * Object.values(performanceAlgSVC['mean_test_precision_macro'])[j]) + (factorsLocal[6] * Object.values(performanceAlgSVC['mean_test_precision_weighted'])[j]) + (factorsLocal[7] * Object.values(performanceAlgSVC['mean_test_recall_micro'])[j]) |
||||
+ (factorsLocal[8] * Object.values(performanceAlgSVC['mean_test_recall_macro'])[j]) + (factorsLocal[9] * Object.values(performanceAlgSVC['mean_test_recall_weighted'])[j]) + (factorsLocal[10] * Object.values(performanceAlgSVC['f5_micro'])[j]) + (factorsLocal[11] * Object.values(performanceAlgSVC['f5_macro'])[j]) + (factorsLocal[12] * Object.values(performanceAlgSVC['f5_weighted'])[j]) + (factorsLocal[13] * Object.values(performanceAlgSVC['f1_micro'])[j]) |
||||
+ (factorsLocal[14] * Object.values(performanceAlgSVC['f1_macro'])[j]) + (factorsLocal[15] * Object.values(performanceAlgSVC['f1_weighted'])[j]) + (factorsLocal[16] * Object.values(performanceAlgSVC['f2_micro'])[j]) + (factorsLocal[17] * Object.values(performanceAlgSVC['f2_macro'])[j]) + (factorsLocal[18] * Object.values(performanceAlgSVC['f2_weighted'])[j]) + (factorsLocal[19] * Math.abs(Object.values(performanceAlgSVC['matthews_corrcoef'])[j])) |
||||
+ (factorsLocal[20] * Object.values(performanceAlgSVC['mean_test_roc_auc_ovo_weighted'])[j]) + (factorsLocal[21] * (1 - Object.values(performanceAlgSVC['log_loss'])[j])) |
||||
McSVC.push((sumSVC/divide)*100) |
||||
} |
||||
var McGausNB = [] |
||||
const performanceAlgGausNB = JSON.parse(this.ModelsPerformance[24]) |
||||
for (let j = 0; j < Object.values(performanceAlgGausNB['mean_test_accuracy']).length; j++) { |
||||
let sumGausNB |
||||
sumGausNB = (factorsLocal[0] * Object.values(performanceAlgGausNB['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlgGausNB['geometric_mean_score_micro'])[j]) + (factorsLocal[2] * Object.values(performanceAlgGausNB['geometric_mean_score_macro'])[j]) |
||||
+ (factorsLocal[3] * Object.values(performanceAlgGausNB['geometric_mean_score_weighted'])[j]) + (factorsLocal[4] * Object.values(performanceAlgGausNB['mean_test_precision_micro'])[j]) + (factorsLocal[5] * Object.values(performanceAlgGausNB['mean_test_precision_macro'])[j]) + (factorsLocal[6] * Object.values(performanceAlgGausNB['mean_test_precision_weighted'])[j]) + (factorsLocal[7] * Object.values(performanceAlgGausNB['mean_test_recall_micro'])[j]) |
||||
+ (factorsLocal[8] * Object.values(performanceAlgGausNB['mean_test_recall_macro'])[j]) + (factorsLocal[9] * Object.values(performanceAlgGausNB['mean_test_recall_weighted'])[j]) + (factorsLocal[10] * Object.values(performanceAlgGausNB['f5_micro'])[j]) + (factorsLocal[11] * Object.values(performanceAlgGausNB['f5_macro'])[j]) + (factorsLocal[12] * Object.values(performanceAlgGausNB['f5_weighted'])[j]) + (factorsLocal[13] * Object.values(performanceAlgGausNB['f1_micro'])[j]) |
||||
+ (factorsLocal[14] * Object.values(performanceAlgGausNB['f1_macro'])[j]) + (factorsLocal[15] * Object.values(performanceAlgGausNB['f1_weighted'])[j]) + (factorsLocal[16] * Object.values(performanceAlgGausNB['f2_micro'])[j]) + (factorsLocal[17] * Object.values(performanceAlgGausNB['f2_macro'])[j]) + (factorsLocal[18] * Object.values(performanceAlgGausNB['f2_weighted'])[j]) + (factorsLocal[19] * Math.abs(Object.values(performanceAlgGausNB['matthews_corrcoef'])[j])) |
||||
+ (factorsLocal[20] * Object.values(performanceAlgGausNB['mean_test_roc_auc_ovo_weighted'])[j]) + (factorsLocal[21] * (1 - Object.values(performanceAlgGausNB['log_loss'])[j])) |
||||
McGausNB.push((sumGausNB/divide)*100) |
||||
} |
||||
var McMLP = [] |
||||
const performanceAlgMLP = JSON.parse(this.ModelsPerformance[33]) |
||||
for (let j = 0; j < Object.values(performanceAlgMLP['mean_test_accuracy']).length; j++) { |
||||
let sumMLP |
||||
sumMLP = (factorsLocal[0] * Object.values(performanceAlgMLP['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlgMLP['geometric_mean_score_micro'])[j]) + (factorsLocal[2] * Object.values(performanceAlgMLP['geometric_mean_score_macro'])[j]) |
||||
+ (factorsLocal[3] * Object.values(performanceAlgMLP['geometric_mean_score_weighted'])[j]) + (factorsLocal[4] * Object.values(performanceAlgMLP['mean_test_precision_micro'])[j]) + (factorsLocal[5] * Object.values(performanceAlgMLP['mean_test_precision_macro'])[j]) + (factorsLocal[6] * Object.values(performanceAlgMLP['mean_test_precision_weighted'])[j]) + (factorsLocal[7] * Object.values(performanceAlgMLP['mean_test_recall_micro'])[j]) |
||||
+ (factorsLocal[8] * Object.values(performanceAlgMLP['mean_test_recall_macro'])[j]) + (factorsLocal[9] * Object.values(performanceAlgMLP['mean_test_recall_weighted'])[j]) + (factorsLocal[10] * Object.values(performanceAlgMLP['f5_micro'])[j]) + (factorsLocal[11] * Object.values(performanceAlgMLP['f5_macro'])[j]) + (factorsLocal[12] * Object.values(performanceAlgMLP['f5_weighted'])[j]) + (factorsLocal[13] * Object.values(performanceAlgMLP['f1_micro'])[j]) |
||||
+ (factorsLocal[14] * Object.values(performanceAlgMLP['f1_macro'])[j]) + (factorsLocal[15] * Object.values(performanceAlgMLP['f1_weighted'])[j]) + (factorsLocal[16] * Object.values(performanceAlgMLP['f2_micro'])[j]) + (factorsLocal[17] * Object.values(performanceAlgMLP['f2_macro'])[j]) + (factorsLocal[18] * Object.values(performanceAlgMLP['f2_weighted'])[j]) + (factorsLocal[19] * Math.abs(Object.values(performanceAlgMLP['matthews_corrcoef'])[j])) |
||||
+ (factorsLocal[20] * Object.values(performanceAlgMLP['mean_test_roc_auc_ovo_weighted'])[j]) + (factorsLocal[21] * (1 - Object.values(performanceAlgMLP['log_loss'])[j])) |
||||
McMLP.push((sumMLP/divide)*100) |
||||
} |
||||
var McLR = [] |
||||
const performanceAlgLR = JSON.parse(this.ModelsPerformance[42]) |
||||
for (let j = 0; j < Object.values(performanceAlgLR['mean_test_accuracy']).length; j++) { |
||||
let sumLR |
||||
sumLR = (factorsLocal[0] * Object.values(performanceAlgLR['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlgLR['geometric_mean_score_micro'])[j]) + (factorsLocal[2] * Object.values(performanceAlgLR['geometric_mean_score_macro'])[j]) |
||||
+ (factorsLocal[3] * Object.values(performanceAlgLR['geometric_mean_score_weighted'])[j]) + (factorsLocal[4] * Object.values(performanceAlgLR['mean_test_precision_micro'])[j]) + (factorsLocal[5] * Object.values(performanceAlgLR['mean_test_precision_macro'])[j]) + (factorsLocal[6] * Object.values(performanceAlgLR['mean_test_precision_weighted'])[j]) + (factorsLocal[7] * Object.values(performanceAlgLR['mean_test_recall_micro'])[j]) |
||||
+ (factorsLocal[8] * Object.values(performanceAlgLR['mean_test_recall_macro'])[j]) + (factorsLocal[9] * Object.values(performanceAlgLR['mean_test_recall_weighted'])[j]) + (factorsLocal[10] * Object.values(performanceAlgLR['f5_micro'])[j]) + (factorsLocal[11] * Object.values(performanceAlgLR['f5_macro'])[j]) + (factorsLocal[12] * Object.values(performanceAlgLR['f5_weighted'])[j]) + (factorsLocal[13] * Object.values(performanceAlgLR['f1_micro'])[j]) |
||||
+ (factorsLocal[14] * Object.values(performanceAlgLR['f1_macro'])[j]) + (factorsLocal[15] * Object.values(performanceAlgLR['f1_weighted'])[j]) + (factorsLocal[16] * Object.values(performanceAlgLR['f2_micro'])[j]) + (factorsLocal[17] * Object.values(performanceAlgLR['f2_macro'])[j]) + (factorsLocal[18] * Object.values(performanceAlgLR['f2_weighted'])[j]) + (factorsLocal[19] * Math.abs(Object.values(performanceAlgLR['matthews_corrcoef'])[j])) |
||||
+ (factorsLocal[20] * Object.values(performanceAlgLR['mean_test_roc_auc_ovo_weighted'])[j]) + (factorsLocal[21] * (1 - Object.values(performanceAlgLR['log_loss'])[j])) |
||||
McLR.push((sumLR/divide)*100) |
||||
} |
||||
var McLDA = [] |
||||
const performanceAlgLDA = JSON.parse(this.ModelsPerformance[51]) |
||||
for (let j = 0; j < Object.values(performanceAlgLDA['mean_test_accuracy']).length; j++) { |
||||
let sumLDA |
||||
sumLDA = (factorsLocal[0] * Object.values(performanceAlgLDA['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlgLDA['geometric_mean_score_micro'])[j]) + (factorsLocal[2] * Object.values(performanceAlgLDA['geometric_mean_score_macro'])[j]) |
||||
+ (factorsLocal[3] * Object.values(performanceAlgLDA['geometric_mean_score_weighted'])[j]) + (factorsLocal[4] * Object.values(performanceAlgLDA['mean_test_precision_micro'])[j]) + (factorsLocal[5] * Object.values(performanceAlgLDA['mean_test_precision_macro'])[j]) + (factorsLocal[6] * Object.values(performanceAlgLDA['mean_test_precision_weighted'])[j]) + (factorsLocal[7] * Object.values(performanceAlgLDA['mean_test_recall_micro'])[j]) |
||||
+ (factorsLocal[8] * Object.values(performanceAlgLDA['mean_test_recall_macro'])[j]) + (factorsLocal[9] * Object.values(performanceAlgLDA['mean_test_recall_weighted'])[j]) + (factorsLocal[10] * Object.values(performanceAlgLDA['f5_micro'])[j]) + (factorsLocal[11] * Object.values(performanceAlgLDA['f5_macro'])[j]) + (factorsLocal[12] * Object.values(performanceAlgLDA['f5_weighted'])[j]) + (factorsLocal[13] * Object.values(performanceAlgLDA['f1_micro'])[j]) |
||||
+ (factorsLocal[14] * Object.values(performanceAlgLDA['f1_macro'])[j]) + (factorsLocal[15] * Object.values(performanceAlgLDA['f1_weighted'])[j]) + (factorsLocal[16] * Object.values(performanceAlgLDA['f2_micro'])[j]) + (factorsLocal[17] * Object.values(performanceAlgLDA['f2_macro'])[j]) + (factorsLocal[18] * Object.values(performanceAlgLDA['f2_weighted'])[j]) + (factorsLocal[19] * Math.abs(Object.values(performanceAlgLDA['matthews_corrcoef'])[j])) |
||||
+ (factorsLocal[20] * Object.values(performanceAlgLDA['mean_test_roc_auc_ovo_weighted'])[j]) + (factorsLocal[21] * (1 - Object.values(performanceAlgLDA['log_loss'])[j])) |
||||
McLDA.push((sumLDA/divide)*100) |
||||
} |
||||
var McQDA = [] |
||||
const performanceAlgQDA = JSON.parse(this.ModelsPerformance[60]) |
||||
for (let j = 0; j < Object.values(performanceAlgQDA['mean_test_accuracy']).length; j++) { |
||||
let sumQDA |
||||
sumQDA = (factorsLocal[0] * Object.values(performanceAlgQDA['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlgQDA['geometric_mean_score_micro'])[j]) + (factorsLocal[2] * Object.values(performanceAlgQDA['geometric_mean_score_macro'])[j]) |
||||
+ (factorsLocal[3] * Object.values(performanceAlgQDA['geometric_mean_score_weighted'])[j]) + (factorsLocal[4] * Object.values(performanceAlgQDA['mean_test_precision_micro'])[j]) + (factorsLocal[5] * Object.values(performanceAlgQDA['mean_test_precision_macro'])[j]) + (factorsLocal[6] * Object.values(performanceAlgQDA['mean_test_precision_weighted'])[j]) + (factorsLocal[7] * Object.values(performanceAlgQDA['mean_test_recall_micro'])[j]) |
||||
+ (factorsLocal[8] * Object.values(performanceAlgQDA['mean_test_recall_macro'])[j]) + (factorsLocal[9] * Object.values(performanceAlgQDA['mean_test_recall_weighted'])[j]) + (factorsLocal[10] * Object.values(performanceAlgQDA['f5_micro'])[j]) + (factorsLocal[11] * Object.values(performanceAlgQDA['f5_macro'])[j]) + (factorsLocal[12] * Object.values(performanceAlgQDA['f5_weighted'])[j]) + (factorsLocal[13] * Object.values(performanceAlgQDA['f1_micro'])[j]) |
||||
+ (factorsLocal[14] * Object.values(performanceAlgQDA['f1_macro'])[j]) + (factorsLocal[15] * Object.values(performanceAlgQDA['f1_weighted'])[j]) + (factorsLocal[16] * Object.values(performanceAlgQDA['f2_micro'])[j]) + (factorsLocal[17] * Object.values(performanceAlgQDA['f2_macro'])[j]) + (factorsLocal[18] * Object.values(performanceAlgQDA['f2_weighted'])[j]) + (factorsLocal[19] * Math.abs(Object.values(performanceAlgQDA['matthews_corrcoef'])[j])) |
||||
+ (factorsLocal[20] * Object.values(performanceAlgQDA['mean_test_roc_auc_ovo_weighted'])[j]) + (factorsLocal[21] * (1 - Object.values(performanceAlgQDA['log_loss'])[j])) |
||||
McQDA.push((sumQDA/divide)*100) |
||||
} |
||||
var McRF = [] |
||||
const performanceAlgRF = JSON.parse(this.ModelsPerformance[69]) |
||||
for (let j = 0; j < Object.values(performanceAlgRF['mean_test_accuracy']).length; j++) { |
||||
let sumRF |
||||
sumRF = (factorsLocal[0] * Object.values(performanceAlgRF['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlgRF['geometric_mean_score_micro'])[j]) + (factorsLocal[2] * Object.values(performanceAlgRF['geometric_mean_score_macro'])[j]) |
||||
+ (factorsLocal[3] * Object.values(performanceAlgRF['geometric_mean_score_weighted'])[j]) + (factorsLocal[4] * Object.values(performanceAlgRF['mean_test_precision_micro'])[j]) + (factorsLocal[5] * Object.values(performanceAlgRF['mean_test_precision_macro'])[j]) + (factorsLocal[6] * Object.values(performanceAlgRF['mean_test_precision_weighted'])[j]) + (factorsLocal[7] * Object.values(performanceAlgRF['mean_test_recall_micro'])[j]) |
||||
+ (factorsLocal[8] * Object.values(performanceAlgRF['mean_test_recall_macro'])[j]) + (factorsLocal[9] * Object.values(performanceAlgRF['mean_test_recall_weighted'])[j]) + (factorsLocal[10] * Object.values(performanceAlgRF['f5_micro'])[j]) + (factorsLocal[11] * Object.values(performanceAlgRF['f5_macro'])[j]) + (factorsLocal[12] * Object.values(performanceAlgRF['f5_weighted'])[j]) + (factorsLocal[13] * Object.values(performanceAlgRF['f1_micro'])[j]) |
||||
+ (factorsLocal[14] * Object.values(performanceAlgRF['f1_macro'])[j]) + (factorsLocal[15] * Object.values(performanceAlgRF['f1_weighted'])[j]) + (factorsLocal[16] * Object.values(performanceAlgRF['f2_micro'])[j]) + (factorsLocal[17] * Object.values(performanceAlgRF['f2_macro'])[j]) + (factorsLocal[18] * Object.values(performanceAlgRF['f2_weighted'])[j]) + (factorsLocal[19] * Math.abs(Object.values(performanceAlgRF['matthews_corrcoef'])[j])) |
||||
+ (factorsLocal[20] * Object.values(performanceAlgRF['mean_test_roc_auc_ovo_weighted'])[j]) + (factorsLocal[21] * (1 - Object.values(performanceAlgRF['log_loss'])[j])) |
||||
McRF.push((sumRF/divide)*100) |
||||
} |
||||
var McExtraT = [] |
||||
const performanceAlgExtraT = JSON.parse(this.ModelsPerformance[78]) |
||||
for (let j = 0; j < Object.values(performanceAlgExtraT['mean_test_accuracy']).length; j++) { |
||||
let sumExtraT |
||||
sumExtraT = (factorsLocal[0] * Object.values(performanceAlgExtraT['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlgExtraT['geometric_mean_score_micro'])[j]) + (factorsLocal[2] * Object.values(performanceAlgExtraT['geometric_mean_score_macro'])[j]) |
||||
+ (factorsLocal[3] * Object.values(performanceAlgExtraT['geometric_mean_score_weighted'])[j]) + (factorsLocal[4] * Object.values(performanceAlgExtraT['mean_test_precision_micro'])[j]) + (factorsLocal[5] * Object.values(performanceAlgExtraT['mean_test_precision_macro'])[j]) + (factorsLocal[6] * Object.values(performanceAlgExtraT['mean_test_precision_weighted'])[j]) + (factorsLocal[7] * Object.values(performanceAlgExtraT['mean_test_recall_micro'])[j]) |
||||
+ (factorsLocal[8] * Object.values(performanceAlgExtraT['mean_test_recall_macro'])[j]) + (factorsLocal[9] * Object.values(performanceAlgExtraT['mean_test_recall_weighted'])[j]) + (factorsLocal[10] * Object.values(performanceAlgExtraT['f5_micro'])[j]) + (factorsLocal[11] * Object.values(performanceAlgExtraT['f5_macro'])[j]) + (factorsLocal[12] * Object.values(performanceAlgExtraT['f5_weighted'])[j]) + (factorsLocal[13] * Object.values(performanceAlgExtraT['f1_micro'])[j]) |
||||
+ (factorsLocal[14] * Object.values(performanceAlgExtraT['f1_macro'])[j]) + (factorsLocal[15] * Object.values(performanceAlgExtraT['f1_weighted'])[j]) + (factorsLocal[16] * Object.values(performanceAlgExtraT['f2_micro'])[j]) + (factorsLocal[17] * Object.values(performanceAlgExtraT['f2_macro'])[j]) + (factorsLocal[18] * Object.values(performanceAlgExtraT['f2_weighted'])[j]) + (factorsLocal[19] * Math.abs(Object.values(performanceAlgExtraT['matthews_corrcoef'])[j])) |
||||
+ (factorsLocal[20] * Object.values(performanceAlgExtraT['mean_test_roc_auc_ovo_weighted'])[j]) + (factorsLocal[21] * (1 - Object.values(performanceAlgExtraT['log_loss'])[j])) |
||||
McExtraT.push((sumExtraT/divide)*100) |
||||
} |
||||
var McAdaB = [] |
||||
const performanceAlgAdaB = JSON.parse(this.ModelsPerformance[87]) |
||||
for (let j = 0; j < Object.values(performanceAlgAdaB['mean_test_accuracy']).length; j++) { |
||||
let sumAdaB |
||||
sumAdaB = (factorsLocal[0] * Object.values(performanceAlgAdaB['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlgAdaB['geometric_mean_score_micro'])[j]) + (factorsLocal[2] * Object.values(performanceAlgAdaB['geometric_mean_score_macro'])[j]) |
||||
+ (factorsLocal[3] * Object.values(performanceAlgAdaB['geometric_mean_score_weighted'])[j]) + (factorsLocal[4] * Object.values(performanceAlgAdaB['mean_test_precision_micro'])[j]) + (factorsLocal[5] * Object.values(performanceAlgAdaB['mean_test_precision_macro'])[j]) + (factorsLocal[6] * Object.values(performanceAlgAdaB['mean_test_precision_weighted'])[j]) + (factorsLocal[7] * Object.values(performanceAlgAdaB['mean_test_recall_micro'])[j]) |
||||
+ (factorsLocal[8] * Object.values(performanceAlgAdaB['mean_test_recall_macro'])[j]) + (factorsLocal[9] * Object.values(performanceAlgAdaB['mean_test_recall_weighted'])[j]) + (factorsLocal[10] * Object.values(performanceAlgAdaB['f5_micro'])[j]) + (factorsLocal[11] * Object.values(performanceAlgAdaB['f5_macro'])[j]) + (factorsLocal[12] * Object.values(performanceAlgAdaB['f5_weighted'])[j]) + (factorsLocal[13] * Object.values(performanceAlgAdaB['f1_micro'])[j]) |
||||
+ (factorsLocal[14] * Object.values(performanceAlgAdaB['f1_macro'])[j]) + (factorsLocal[15] * Object.values(performanceAlgAdaB['f1_weighted'])[j]) + (factorsLocal[16] * Object.values(performanceAlgAdaB['f2_micro'])[j]) + (factorsLocal[17] * Object.values(performanceAlgAdaB['f2_macro'])[j]) + (factorsLocal[18] * Object.values(performanceAlgAdaB['f2_weighted'])[j]) + (factorsLocal[19] * Math.abs(Object.values(performanceAlgAdaB['matthews_corrcoef'])[j])) |
||||
+ (factorsLocal[20] * Object.values(performanceAlgAdaB['mean_test_roc_auc_ovo_weighted'])[j]) + (factorsLocal[21] * (1 - Object.values(performanceAlgAdaB['log_loss'])[j])) |
||||
McAdaB.push((sumAdaB/divide)*100) |
||||
} |
||||
var McGradB = [] |
||||
const performanceAlgGradB = JSON.parse(this.ModelsPerformance[96]) |
||||
for (let j = 0; j < Object.values(performanceAlgGradB['mean_test_accuracy']).length; j++) { |
||||
let sumGradB |
||||
sumGradB = (factorsLocal[0] * Object.values(performanceAlgGradB['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlgGradB['geometric_mean_score_micro'])[j]) + (factorsLocal[2] * Object.values(performanceAlgGradB['geometric_mean_score_macro'])[j]) |
||||
+ (factorsLocal[3] * Object.values(performanceAlgGradB['geometric_mean_score_weighted'])[j]) + (factorsLocal[4] * Object.values(performanceAlgGradB['mean_test_precision_micro'])[j]) + (factorsLocal[5] * Object.values(performanceAlgGradB['mean_test_precision_macro'])[j]) + (factorsLocal[6] * Object.values(performanceAlgGradB['mean_test_precision_weighted'])[j]) + (factorsLocal[7] * Object.values(performanceAlgGradB['mean_test_recall_micro'])[j]) |
||||
+ (factorsLocal[8] * Object.values(performanceAlgGradB['mean_test_recall_macro'])[j]) + (factorsLocal[9] * Object.values(performanceAlgGradB['mean_test_recall_weighted'])[j]) + (factorsLocal[10] * Object.values(performanceAlgGradB['f5_micro'])[j]) + (factorsLocal[11] * Object.values(performanceAlgGradB['f5_macro'])[j]) + (factorsLocal[12] * Object.values(performanceAlgGradB['f5_weighted'])[j]) + (factorsLocal[13] * Object.values(performanceAlgGradB['f1_micro'])[j]) |
||||
+ (factorsLocal[14] * Object.values(performanceAlgGradB['f1_macro'])[j]) + (factorsLocal[15] * Object.values(performanceAlgGradB['f1_weighted'])[j]) + (factorsLocal[16] * Object.values(performanceAlgGradB['f2_micro'])[j]) + (factorsLocal[17] * Object.values(performanceAlgGradB['f2_macro'])[j]) + (factorsLocal[18] * Object.values(performanceAlgGradB['f2_weighted'])[j]) + (factorsLocal[19] * Math.abs(Object.values(performanceAlgGradB['matthews_corrcoef'])[j])) |
||||
+ (factorsLocal[20] * Object.values(performanceAlgGradB['mean_test_roc_auc_ovo_weighted'])[j]) + (factorsLocal[21] * (1 - Object.values(performanceAlgGradB['log_loss'])[j])) |
||||
McGradB.push((sumGradB/divide)*100) |
||||
} |
||||
|
||||
var Combined = 0 |
||||
if (this.selAlgorithm == 'KNN') { |
||||
Combined = JSON.parse(this.ModelsPerformance[1]) |
||||
colorGiv = colors[0] |
||||
} else if (this.selAlgorithm == 'SVC') { |
||||
Combined = JSON.parse(this.ModelsPerformance[10]) |
||||
colorGiv = colors[1] |
||||
} else if (this.selAlgorithm == 'GauNB') { |
||||
Combined = JSON.parse(this.ModelsPerformance[19]) |
||||
colorGiv = colors[2] |
||||
} else if (this.selAlgorithm == 'MLP') { |
||||
Combined = JSON.parse(this.ModelsPerformance[28]) |
||||
colorGiv = colors[3] |
||||
} else if (this.selAlgorithm == 'LR') { |
||||
Combined = JSON.parse(this.ModelsPerformance[37]) |
||||
colorGiv = colors[4] |
||||
} else if (this.selAlgorithm == 'LDA') { |
||||
Combined = JSON.parse(this.ModelsPerformance[46]) |
||||
colorGiv = colors[5] |
||||
} else if (this.selAlgorithm == 'QDA') { |
||||
Combined = JSON.parse(this.ModelsPerformance[55]) |
||||
colorGiv = colors[6] |
||||
} else if (this.selAlgorithm == 'RF') { |
||||
Combined = JSON.parse(this.ModelsPerformance[64]) |
||||
colorGiv = colors[7] |
||||
} else if (this.selAlgorithm == 'ExtraT') { |
||||
Combined = JSON.parse(this.ModelsPerformance[73]) |
||||
colorGiv = colors[8] |
||||
} else if (this.selAlgorithm == 'AdaB') { |
||||
Combined = JSON.parse(this.ModelsPerformance[82]) |
||||
colorGiv = colors[9] |
||||
} else { |
||||
Combined = JSON.parse(this.ModelsPerformance[91]) |
||||
colorGiv = colors[10] |
||||
} |
||||
var valuesPerf = Object.values(Combined['params']) |
||||
|
||||
var ObjectsParams = Combined['params'] |
||||
var newObjectsParamsΚΝΝ = [] |
||||
var newObjectsParamsSVC = [] |
||||
var newObjectsParamsGausNB = [] |
||||
var newObjectsParamsMLP = [] |
||||
var newObjectsParamsLR = [] |
||||
var newObjectsParamsLDA = [] |
||||
var newObjectsParamsQDA = [] |
||||
var newObjectsParamsRF = [] |
||||
var newObjectsParamsExtraT = [] |
||||
var newObjectsParamsAdaB = [] |
||||
var newObjectsParamsGradB = [] |
||||
var ArrayCombined = [] |
||||
var temp |
||||
for (var i = 0; i < valuesPerf.length; i++) { |
||||
if (this.keyAllOrClass) { |
||||
if (this.selAlgorithm === 'KNN') { |
||||
newObjectsParamsΚΝΝ.push({model: i,'# Perf (%) #': McKNN[i],'n_neighbors':ObjectsParams[i].n_neighbors,'metric':ObjectsParams[i].metric,'algorithm':ObjectsParams[i].algorithm,'weights':ObjectsParams[i].weights}) |
||||
ArrayCombined[i] = newObjectsParamsΚΝΝ[i] |
||||
} else if (this.selAlgorithm === 'SVC') { |
||||
newObjectsParamsSVC.push({model: this.SVCModels + i,'# Perf (%) #': McSVC[i],'C':ObjectsParams[i].C,'kernel':ObjectsParams[i].kernel}) |
||||
ArrayCombined[i] = newObjectsParamsSVC[i] |
||||
} else if (this.selAlgorithm === 'GauNB') { |
||||
newObjectsParamsGausNB.push({model: this.GausNBModels + i,'# Perf (%) #': McGausNB[i],'var_smoothing':ObjectsParams[i].var_smoothing}) |
||||
ArrayCombined[i] = newObjectsParamsGausNB[i] |
||||
} else if (this.selAlgorithm === 'MLP') { |
||||
newObjectsParamsMLP.push({model: this.MLPModels + i,'# Perf (%) #': McMLP[i],'alpha':ObjectsParams[i].alpha,'tol':ObjectsParams[i].tol,'activation':ObjectsParams[i].activation,'max_iter':ObjectsParams[i].max_iter,'solver':ObjectsParams[i].solver}) |
||||
ArrayCombined[i] = newObjectsParamsMLP[i] |
||||
} else if (this.selAlgorithm === 'LR') { |
||||
newObjectsParamsLR.push({model: this.LRModels + i,'# Perf (%) #': McLR[i],'C':ObjectsParams[i].C,'max_iter':ObjectsParams[i].max_iter,'solver':ObjectsParams[i].solver,'penalty':ObjectsParams[i].penalty}) |
||||
ArrayCombined[i] = newObjectsParamsLR[i] |
||||
} else if (this.selAlgorithm === 'LDA') { |
||||
newObjectsParamsLDA.push({model: this.LDAModels + i,'# Perf (%) #': McLDA[i],'shrinkage':ObjectsParams[i].shrinkage,'solver':ObjectsParams[i].solver}) |
||||
ArrayCombined[i] = newObjectsParamsLDA[i] |
||||
} else if (this.selAlgorithm === 'QDA') { |
||||
newObjectsParamsQDA.push({model: this.QDAModels + i,'# Perf (%) #': McQDA[i],'reg_param':ObjectsParams[i].reg_param,'tol':ObjectsParams[i].tol}) |
||||
ArrayCombined[i] = newObjectsParamsQDA[i] |
||||
} else if (this.selAlgorithm === 'RF') { |
||||
newObjectsParamsRF.push({model: this.RFModels + i,'# Perf (%) #': McRF[i],'n_estimators':ObjectsParams[i].n_estimators,'criterion':ObjectsParams[i].criterion}) |
||||
ArrayCombined[i] = newObjectsParamsRF[i] |
||||
} else if (this.selAlgorithm === 'ExtraT') { |
||||
newObjectsParamsExtraT.push({model: this.ExtraTModels + i,'# Perf (%) #': McExtraT[i],'n_estimators':ObjectsParams[i].n_estimators,'criterion':ObjectsParams[i].criterion}) |
||||
ArrayCombined[i] = newObjectsParamsExtraT[i] |
||||
} else if (this.selAlgorithm === 'AdaB') { |
||||
newObjectsParamsAdaB.push({model: this.AdaBModels + i,'# Perf (%) #': McAdaB[i],'n_estimators':ObjectsParams[i].n_estimators,'learning_rate':ObjectsParams[i].learning_rate,'algorithm':ObjectsParams[i].algorithm}) |
||||
ArrayCombined[i] = newObjectsParamsAdaB[i] |
||||
} else { |
||||
newObjectsParamsGradB.push({model: this.GradBModels + i,'# Perf (%) #': McGradB[i],'n_estimators':ObjectsParams[i].n_estimators,'criterion':ObjectsParams[i].criterion,'learning_rate':ObjectsParams[i].learning_rate}) |
||||
ArrayCombined[i] = newObjectsParamsGradB[i] |
||||
} |
||||
} else { |
||||
if (this.selAlgorithm === 'KNN') { |
||||
newObjectsParamsΚΝΝ.push({model: i,'# Perf (%) #': this.listClassPerf[0][i],'n_neighbors':ObjectsParams[i].n_neighbors,'metric':ObjectsParams[i].metric,'algorithm':ObjectsParams[i].algorithm,'weights':ObjectsParams[i].weights}) |
||||
ArrayCombined[i] = newObjectsParamsΚΝΝ[i] |
||||
} else if (this.selAlgorithm === 'SVC') { |
||||
newObjectsParamsSVC.push({model: this.SVCModels + i,'# Perf (%) #': this.listClassPerf[1][i],'C':ObjectsParams[i].C,'kernel':ObjectsParams[i].kernel}) |
||||
ArrayCombined[i] = newObjectsParamsSVC[i] |
||||
} else if (this.selAlgorithm === 'GauNB') { |
||||
newObjectsParamsGausNB.push({model: this.GausNBModels + i,'# Perf (%) #': this.listClassPerf[2][i],'var_smoothing':ObjectsParams[i].var_smoothing}) |
||||
ArrayCombined[i] = newObjectsParamsGausNB[i] |
||||
} else if (this.selAlgorithm === 'MLP') { |
||||
newObjectsParamsMLP.push({model: this.MLPModels + i,'# Perf (%) #': this.listClassPerf[3][i],'alpha':ObjectsParams[i].alpha,'tol':ObjectsParams[i].tol,'activation':ObjectsParams[i].activation,'max_iter':ObjectsParams[i].max_iter,'solver':ObjectsParams[i].solver}) |
||||
ArrayCombined[i] = newObjectsParamsMLP[i] |
||||
} else if (this.selAlgorithm === 'LR') { |
||||
newObjectsParamsLR.push({model: this.LRModels + i,'# Perf (%) #': this.listClassPerf[4][i],'C':ObjectsParams[i].C,'max_iter':ObjectsParams[i].max_iter,'solver':ObjectsParams[i].solver,'penalty':ObjectsParams[i].penalty}) |
||||
ArrayCombined[i] = newObjectsParamsLR[i] |
||||
} else if (this.selAlgorithm === 'LDA') { |
||||
newObjectsParamsLDA.push({model: this.LDAModels + i,'# Perf (%) #': this.listClassPerf[5][i],'shrinkage':ObjectsParams[i].shrinkage,'solver':ObjectsParams[i].solver}) |
||||
ArrayCombined[i] = newObjectsParamsLDA[i] |
||||
} else if (this.selAlgorithm === 'QDA') { |
||||
newObjectsParamsQDA.push({model: this.QDAModels + i,'# Perf (%) #': this.listClassPerf[6][i],'reg_param':ObjectsParams[i].reg_param,'tol':ObjectsParams[i].tol}) |
||||
ArrayCombined[i] = newObjectsParamsQDA[i] |
||||
} else if (this.selAlgorithm === 'RF') { |
||||
newObjectsParamsRF.push({model: this.RFModels + i,'# Perf (%) #': this.listClassPerf[7][i],'n_estimators':ObjectsParams[i].n_estimators,'criterion':ObjectsParams[i].criterion}) |
||||
ArrayCombined[i] = newObjectsParamsRF[i] |
||||
} else if (this.selAlgorithm === 'ExtraT') { |
||||
newObjectsParamsExtraT.push({model: this.ExtraTModels + i,'# Perf (%) #': this.listClassPerf[8][i],'n_estimators':ObjectsParams[i].n_estimators,'criterion':ObjectsParams[i].criterion}) |
||||
ArrayCombined[i] = newObjectsParamsExtraT[i] |
||||
} else if (this.selAlgorithm === 'AdaB') { |
||||
newObjectsParamsAdaB.push({model: this.AdaBModels + i,'# Perf (%) #': this.listClassPerf[9][i],'n_estimators':ObjectsParams[i].n_estimators,'learning_rate':ObjectsParams[i].learning_rate,'algorithm':ObjectsParams[i].algorithm}) |
||||
ArrayCombined[i] = newObjectsParamsAdaB[i] |
||||
} else { |
||||
newObjectsParamsGradB.push({model: this.GradBModels + i,'# Perf (%) #': this.listClassPerf[10][i],'n_estimators':ObjectsParams[i].n_estimators,'criterion':ObjectsParams[i].criterion,'learning_rate':ObjectsParams[i].learning_rate}) |
||||
ArrayCombined[i] = newObjectsParamsGradB[i] |
||||
} |
||||
} |
||||
} |
||||
EventBus.$emit('AllAlModels', ArrayCombined.length) |
||||
this.pc = ParCoords()("#PCP") |
||||
.data(ArrayCombined) |
||||
.color(colorGiv) |
||||
.hideAxis(['model']) |
||||
.bundlingStrength(0) // set bundling strength |
||||
.smoothness(0) |
||||
.showControlPoints(false) |
||||
.render() |
||||
.brushMode('1D-axes') |
||||
.reorderable() |
||||
.interactive(); |
||||
|
||||
this.pc.on("brushend", function(d) { |
||||
EventBus.$emit('AllSelModels', d.length) |
||||
EventBus.$emit('UpdateBoxPlot', d) |
||||
}); |
||||
} |
||||
}, |
||||
sliders () { |
||||
|
||||
}, |
||||
|
||||
clear () { |
||||
d3.selectAll("#PCP > *").remove(); |
||||
}, |
||||
}, |
||||
mounted() { |
||||
EventBus.$on('ReturningBrushedPointsModels', this.brushed) |
||||
EventBus.$on('emittedEventCallingModelSelect', data => { this.selAlgorithm = data }) |
||||
EventBus.$on('emittedEventCallingModel', data => { this.ModelsPerformance = data }) |
||||
EventBus.$on('emittedEventCallingModel', this.PCPView) |
||||
EventBus.$on('ResponsiveandChange', this.PCPView) |
||||
EventBus.$on('emittedEventCallingModelClear', this.clear) |
||||
|
||||
EventBus.$on('CallFactorsView', data => { this.factors = data }) |
||||
EventBus.$on('CallFactorsView', this.PCPView) |
||||
|
||||
EventBus.$on('boxplotSet', data => { this.listClassPerf = data }) |
||||
EventBus.$on('boxplotCall', data => { this.keyAllOrClass = data }) |
||||
|
||||
// reset view |
||||
EventBus.$on('resetViews', this.reset) |
||||
EventBus.$on('clearPCP', this.reset) |
||||
} |
||||
} |
||||
</script> |
||||
File diff suppressed because it is too large
Load Diff
@ -1,309 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<div align="center"> |
||||
Projection method: <select id="selectBarChartCM" @change="selectVisualRepresentationCM()"> |
||||
<option value="mdsCM" selected>MDS</option> |
||||
<option value="tsneCM">t-SNE</option> |
||||
<option value="umapCM">UMAP</option> |
||||
</select> |
||||
|
||||
Action: <button |
||||
id="Remove" |
||||
v-on:click="Remove"> |
||||
<font-awesome-icon icon="dna" /> |
||||
{{ CrossoverMutateText }} |
||||
</button> |
||||
</div> |
||||
<div id="OverviewPlotlyCM" class="OverviewPlotlyCM"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as Plotly from 'plotly.js' |
||||
import * as d3Base from 'd3' |
||||
|
||||
import { EventBus } from '../main.js' |
||||
|
||||
// attach all d3 plugins to the d3 library |
||||
const d3 = Object.assign(d3Base) |
||||
|
||||
export default { |
||||
name: 'CrossoverMutationSpace', |
||||
data () { |
||||
return { |
||||
CrossoverMutateText: 'Unselected points\' crossover & mutation', |
||||
WH: [], |
||||
ScatterPlotResults: '', |
||||
representationDef: 'mdsCM', |
||||
} |
||||
}, |
||||
methods: { |
||||
reset () { |
||||
Plotly.purge('OverviewPlotlyCM') |
||||
}, |
||||
selectVisualRepresentationCM () { |
||||
const representationSelectionDocum = document.getElementById('selectBarChartCM') |
||||
this.representationSelection = representationSelectionDocum.options[representationSelectionDocum.selectedIndex].value |
||||
EventBus.$emit('RepresentationSelectionCM', this.representationSelection) |
||||
}, |
||||
clean(obj) { |
||||
var propNames = Object.getOwnPropertyNames(obj); |
||||
for (var i = 0; i < propNames.length; i++) { |
||||
var propName = propNames[i]; |
||||
if (obj[propName] === null || obj[propName] === undefined) { |
||||
delete obj[propName]; |
||||
} |
||||
} |
||||
}, |
||||
ScatterPlotView () { |
||||
Plotly.purge('OverviewPlotlyCM') |
||||
|
||||
var modelId = JSON.parse(this.ScatterPlotResults[0]) |
||||
var colorsforScatterPlot = JSON.parse(this.ScatterPlotResults[1]) |
||||
var parametersLoc = JSON.parse(this.ScatterPlotResults[2]) |
||||
var parameters = JSON.parse(parametersLoc) |
||||
var MDSData= JSON.parse(this.ScatterPlotResults[9]) |
||||
var TSNEData = JSON.parse(this.ScatterPlotResults[10]) |
||||
var UMAPData = JSON.parse(this.ScatterPlotResults[11]) |
||||
|
||||
EventBus.$emit('sendPointsNumberCM', modelId.length) |
||||
|
||||
var stringParameters = [] |
||||
for (let i = 0; i < parameters.length; i++) { |
||||
this.clean(parameters[i]) |
||||
stringParameters.push(JSON.stringify(parameters[i]).replace(/,/gi, '<br>')) |
||||
} |
||||
|
||||
var classifiersInfoProcessing = [] |
||||
for (let i = 0; i < modelId.length; i++) { |
||||
if (i < 100) { |
||||
classifiersInfoProcessing[i] = '<b>Model ID:</b> ' + modelId[i] + '<br><b>Algorithm:</b> k-nearest neighbor' + '<br><b>Parameters:</b> ' + stringParameters[i] |
||||
} |
||||
else { |
||||
classifiersInfoProcessing[i] = '<b>Model ID:</b> ' + modelId[i] + '<br><b>Algorithm:</b> logistic regression' + '<br><b>Parameters:</b> ' + stringParameters[i] |
||||
} |
||||
} |
||||
|
||||
var DataGeneral, maxX, minX, maxY, minY, layout |
||||
|
||||
var width = this.WH[0]*8 // interactive visualization |
||||
var height = this.WH[1]*4 // interactive visualization |
||||
|
||||
if (this.representationDef == 'mdsCM') { |
||||
maxX = Math.max(MDSData[0]) |
||||
minX = Math.min(MDSData[0]) |
||||
maxY = Math.max(MDSData[1]) |
||||
minY = Math.max(MDSData[1]) |
||||
|
||||
DataGeneral = [{ |
||||
type: 'scatter', |
||||
mode: 'markers', |
||||
x: MDSData[0], |
||||
y: MDSData[1], |
||||
hovertemplate: |
||||
"%{text}<br><br>" + |
||||
"<extra></extra>", |
||||
text: classifiersInfoProcessing, |
||||
marker: { |
||||
line: { color: 'rgb(0, 0, 0)', width: 3 }, |
||||
color: colorsforScatterPlot, |
||||
size: 12, |
||||
colorscale: 'Viridis', |
||||
colorbar: { |
||||
title: '# Performance (%) #', |
||||
titleside:'right', |
||||
}, |
||||
} |
||||
|
||||
}] |
||||
layout = { |
||||
|
||||
xaxis: { |
||||
visible: false, |
||||
range: [minX, maxX] |
||||
}, |
||||
yaxis: { |
||||
visible: false, |
||||
range: [minY, maxY] |
||||
}, |
||||
font: { family: 'Helvetica', size: 16, color: '#000000' }, |
||||
autosize: true, |
||||
width: width, |
||||
height: height, |
||||
dragmode: 'lasso', |
||||
hovermode: "closest", |
||||
hoverlabel: { bgcolor: "#FFF" }, |
||||
legend: {orientation: 'h', y: -0.3}, |
||||
margin: { |
||||
l: 50, |
||||
r: 0, |
||||
b: 30, |
||||
t: 40, |
||||
pad: 0 |
||||
}, |
||||
} |
||||
} else if (this.representationDef == 'tsneCM') { |
||||
var result = TSNEData.reduce(function(r, a) { |
||||
a.forEach(function(s, i) { |
||||
var key = i === 0 ? 'Xax' : 'Yax'; |
||||
|
||||
r[key] || (r[key] = []); // if key not found on result object, add the key with empty array as the value |
||||
|
||||
r[key].push(s); |
||||
}) |
||||
return r; |
||||
}, {}) |
||||
|
||||
maxX = Math.max(result.Xax) |
||||
minX = Math.min(result.Xax) |
||||
maxY = Math.max(result.Yax) |
||||
minY = Math.max(result.Yax) |
||||
|
||||
DataGeneral = [{ |
||||
type: 'scatter', |
||||
mode: 'markers', |
||||
x: result.Xax, |
||||
y: result.Yax, |
||||
hovertemplate: |
||||
"%{text}<br><br>" + |
||||
"<extra></extra>", |
||||
text: classifiersInfoProcessing, |
||||
marker: { |
||||
line: { color: 'rgb(0, 0, 0)', width: 3 }, |
||||
color: colorsforScatterPlot, |
||||
size: 12, |
||||
colorscale: 'Viridis', |
||||
colorbar: { |
||||
title: '# Performance (%) #', |
||||
titleside: 'right' |
||||
}, |
||||
} |
||||
}] |
||||
layout = { |
||||
|
||||
xaxis: { |
||||
visible: false, |
||||
range: [minX, maxX] |
||||
}, |
||||
yaxis: { |
||||
visible: false, |
||||
range: [minY, maxY] |
||||
}, |
||||
autosize: true, |
||||
width: width, |
||||
height: height, |
||||
dragmode: 'lasso', |
||||
hovermode: "closest", |
||||
hoverlabel: { bgcolor: "#FFF" }, |
||||
legend: {orientation: 'h', y: -0.3}, |
||||
margin: { |
||||
l: 50, |
||||
r: 0, |
||||
b: 30, |
||||
t: 40, |
||||
pad: 0 |
||||
}, |
||||
} |
||||
|
||||
} else { |
||||
maxX = Math.max(UMAPData[0]) |
||||
minX = Math.min(UMAPData[0]) |
||||
maxY = Math.max(UMAPData[1]) |
||||
minY = Math.max(UMAPData[1]) |
||||
|
||||
DataGeneral = [{ |
||||
type: 'scatter', |
||||
mode: 'markers', |
||||
x: UMAPData[0], |
||||
y: UMAPData[1], |
||||
hovertemplate: |
||||
"%{text}<br><br>" + |
||||
"<extra></extra>", |
||||
text: classifiersInfoProcessing, |
||||
marker: { |
||||
line: { color: 'rgb(0, 0, 0)', width: 3 }, |
||||
color: colorsforScatterPlot, |
||||
size: 12, |
||||
colorscale: 'Viridis', |
||||
colorbar: { |
||||
title: '# Performance (%) #', |
||||
titleside: 'right' |
||||
}, |
||||
} |
||||
|
||||
}] |
||||
layout = { |
||||
|
||||
xaxis: { |
||||
visible: false, |
||||
range: [minX, maxX] |
||||
}, |
||||
yaxis: { |
||||
visible: false, |
||||
range: [minY, maxY] |
||||
}, |
||||
autosize: true, |
||||
width: width, |
||||
height: height, |
||||
dragmode: 'lasso', |
||||
hovermode: "closest", |
||||
hoverlabel: { bgcolor: "#FFF" }, |
||||
legend: {orientation: 'h', y: -0.3}, |
||||
margin: { |
||||
l: 50, |
||||
r: 0, |
||||
b: 30, |
||||
t: 40, |
||||
pad: 0 |
||||
}, |
||||
} |
||||
} |
||||
|
||||
var config = {scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage', 'toggleSpikelines', 'autoScale2d', 'hoverClosestGl2d','hoverCompareCartesian','select2d','hoverClosestCartesian','zoomIn2d','zoomOut2d','zoom2d'], responsive: true} |
||||
|
||||
var scat = document.getElementById('OverviewPlotlyCM') |
||||
|
||||
Plotly.newPlot(scat, DataGeneral, layout, config) |
||||
this.selectedPointsOverview() |
||||
}, |
||||
selectedPointsOverview () { |
||||
const OverviewPlotly = document.getElementById('OverviewPlotlyCM') |
||||
var allModels = JSON.parse(this.ScatterPlotResults[0]) |
||||
OverviewPlotly.on('plotly_selected', function (evt) { |
||||
if (typeof evt !== 'undefined') { |
||||
var pushModelsRemainingTemp = [] |
||||
const ClassifierIDsList = [] |
||||
for (let i = 0; evt.points.length; i++) { |
||||
if (evt.points[i] === undefined) { |
||||
break |
||||
} else { |
||||
const OnlyId = evt.points[i].text.split(' ')[2] |
||||
const OnlyIdCleared = OnlyId.split('<br>') |
||||
ClassifierIDsList.push(OnlyIdCleared[0]) |
||||
} |
||||
} |
||||
for (let i = 0; i < allModels.length; i++) { |
||||
if (ClassifierIDsList.indexOf((allModels[i])) < 0) { |
||||
pushModelsRemainingTemp.push(allModels[i]) |
||||
} |
||||
} |
||||
EventBus.$emit('RemainingPointsCM', pushModelsRemainingTemp) |
||||
EventBus.$emit('SendSelectedPointsUpdateIndicatorCM', ClassifierIDsList) |
||||
EventBus.$emit('SendSelectedPointsToServerEventCM', ClassifierIDsList) |
||||
} |
||||
}) |
||||
}, |
||||
}, |
||||
mounted() { |
||||
EventBus.$on('emittedEventCallingCrossoverMutation', data => { |
||||
this.ScatterPlotResults = data}) |
||||
EventBus.$on('emittedEventCallingCrossoverMutation', this.ScatterPlotView) |
||||
|
||||
EventBus.$on('RepresentationSelectionCM', data => {this.representationDef = data}) |
||||
EventBus.$on('RepresentationSelectionCM', this.ScatterPlotView) |
||||
|
||||
// reset view |
||||
EventBus.$on('resetViews', this.reset) |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,86 @@ |
||||
<template> |
||||
<div> |
||||
<label id="data" for="param-dataset" data-toggle="tooltip" data-placement="right" title="Tip: use one of the data sets already provided or upload a new file.">{{ dataset }}</label> |
||||
<select id="selectFile" @change="selectDataSet()"> |
||||
<option value="HeartC.csv" selected>Heart Disease</option> |
||||
<option value="IrisC.csv">Iris</option> |
||||
<option value="local">Upload New File</option> |
||||
</select> |
||||
<button class="btn-outline-success" |
||||
id="initializeID" |
||||
v-on:click="initialize"> |
||||
<font-awesome-icon icon="search" /> |
||||
{{ searchText }} |
||||
</button> |
||||
<button class="btn-outline-danger" |
||||
id="resetID" |
||||
v-on:click="reset"> |
||||
<font-awesome-icon icon="trash" /> |
||||
{{ resetText }} |
||||
</button> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Papa from 'papaparse' |
||||
import { EventBus } from '../main.js' |
||||
import {$,jQuery} from 'jquery'; |
||||
import * as d3Base from 'd3' |
||||
|
||||
// attach all d3 plugins to the d3 library |
||||
const d3 = Object.assign(d3Base) |
||||
|
||||
export default { |
||||
name: 'FeatureSpace1', |
||||
data () { |
||||
return { |
||||
defaultDataSet: 'HeartC', // default value for the first data set |
||||
searchText: 'Hyper-parameter search', |
||||
resetText: 'Reset', |
||||
dataset: 'Data set' |
||||
} |
||||
}, |
||||
methods: { |
||||
selectDataSet () { |
||||
const fileName = document.getElementById('selectFile') |
||||
this.defaultDataSet = fileName.options[fileName.selectedIndex].value |
||||
this.defaultDataSet = this.defaultDataSet.split('.')[0] |
||||
|
||||
if (this.defaultDataSet == "DiabetesC" || this.defaultDataSet == "HeartC" || this.defaultDataSet == "IrisC" || this.defaultDataSet == "StanceC") { // This is a function that handles a new file, which users can upload. |
||||
this.dataset = "Data set" |
||||
d3.select("#data").select("input").remove(); // Remove the selection field. |
||||
EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet) |
||||
} else { |
||||
EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet) |
||||
d3.select("#data").select("input").remove(); |
||||
this.dataset = "" |
||||
var data |
||||
d3.select("#data") |
||||
.append("input") |
||||
.attr("type", "file") |
||||
.style("font-size", "18.5px") |
||||
.style("width", "200px") |
||||
.on("change", function() { |
||||
var file = d3.event.target.files[0]; |
||||
Papa.parse(file, { |
||||
header: true, |
||||
dynamicTyping: true, |
||||
skipEmptyLines: true, |
||||
complete: function(results) { |
||||
data = results.data; |
||||
EventBus.$emit('SendToServerLocalFile', data) |
||||
} |
||||
}); |
||||
}) |
||||
} |
||||
}, |
||||
reset () { |
||||
EventBus.$emit('reset') |
||||
EventBus.$emit('alternateFlagLock') |
||||
}, |
||||
initialize () { |
||||
EventBus.$emit('ConfirmDataSet') |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,86 @@ |
||||
<template> |
||||
<div> |
||||
<label id="data" for="param-dataset" data-toggle="tooltip" data-placement="right" title="Tip: use one of the data sets already provided or upload a new file.">{{ dataset }}</label> |
||||
<select id="selectFile" @change="selectDataSet()"> |
||||
<option value="HeartC.csv" selected>Heart Disease</option> |
||||
<option value="IrisC.csv">Iris</option> |
||||
<option value="local">Upload New File</option> |
||||
</select> |
||||
<button class="btn-outline-success" |
||||
id="initializeID" |
||||
v-on:click="initialize"> |
||||
<font-awesome-icon icon="search" /> |
||||
{{ searchText }} |
||||
</button> |
||||
<button class="btn-outline-danger" |
||||
id="resetID" |
||||
v-on:click="reset"> |
||||
<font-awesome-icon icon="trash" /> |
||||
{{ resetText }} |
||||
</button> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Papa from 'papaparse' |
||||
import { EventBus } from '../main.js' |
||||
import {$,jQuery} from 'jquery'; |
||||
import * as d3Base from 'd3' |
||||
|
||||
// attach all d3 plugins to the d3 library |
||||
const d3 = Object.assign(d3Base) |
||||
|
||||
export default { |
||||
name: 'FeatureSpace2', |
||||
data () { |
||||
return { |
||||
defaultDataSet: 'HeartC', // default value for the first data set |
||||
searchText: 'Hyper-parameter search', |
||||
resetText: 'Reset', |
||||
dataset: 'Data set' |
||||
} |
||||
}, |
||||
methods: { |
||||
selectDataSet () { |
||||
const fileName = document.getElementById('selectFile') |
||||
this.defaultDataSet = fileName.options[fileName.selectedIndex].value |
||||
this.defaultDataSet = this.defaultDataSet.split('.')[0] |
||||
|
||||
if (this.defaultDataSet == "DiabetesC" || this.defaultDataSet == "HeartC" || this.defaultDataSet == "IrisC" || this.defaultDataSet == "StanceC") { // This is a function that handles a new file, which users can upload. |
||||
this.dataset = "Data set" |
||||
d3.select("#data").select("input").remove(); // Remove the selection field. |
||||
EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet) |
||||
} else { |
||||
EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet) |
||||
d3.select("#data").select("input").remove(); |
||||
this.dataset = "" |
||||
var data |
||||
d3.select("#data") |
||||
.append("input") |
||||
.attr("type", "file") |
||||
.style("font-size", "18.5px") |
||||
.style("width", "200px") |
||||
.on("change", function() { |
||||
var file = d3.event.target.files[0]; |
||||
Papa.parse(file, { |
||||
header: true, |
||||
dynamicTyping: true, |
||||
skipEmptyLines: true, |
||||
complete: function(results) { |
||||
data = results.data; |
||||
EventBus.$emit('SendToServerLocalFile', data) |
||||
} |
||||
}); |
||||
}) |
||||
} |
||||
}, |
||||
reset () { |
||||
EventBus.$emit('reset') |
||||
EventBus.$emit('alternateFlagLock') |
||||
}, |
||||
initialize () { |
||||
EventBus.$emit('ConfirmDataSet') |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,86 @@ |
||||
<template> |
||||
<div> |
||||
<label id="data" for="param-dataset" data-toggle="tooltip" data-placement="right" title="Tip: use one of the data sets already provided or upload a new file.">{{ dataset }}</label> |
||||
<select id="selectFile" @change="selectDataSet()"> |
||||
<option value="HeartC.csv" selected>Heart Disease</option> |
||||
<option value="IrisC.csv">Iris</option> |
||||
<option value="local">Upload New File</option> |
||||
</select> |
||||
<button class="btn-outline-success" |
||||
id="initializeID" |
||||
v-on:click="initialize"> |
||||
<font-awesome-icon icon="search" /> |
||||
{{ searchText }} |
||||
</button> |
||||
<button class="btn-outline-danger" |
||||
id="resetID" |
||||
v-on:click="reset"> |
||||
<font-awesome-icon icon="trash" /> |
||||
{{ resetText }} |
||||
</button> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Papa from 'papaparse' |
||||
import { EventBus } from '../main.js' |
||||
import {$,jQuery} from 'jquery'; |
||||
import * as d3Base from 'd3' |
||||
|
||||
// attach all d3 plugins to the d3 library |
||||
const d3 = Object.assign(d3Base) |
||||
|
||||
export default { |
||||
name: 'FeatureSpace3', |
||||
data () { |
||||
return { |
||||
defaultDataSet: 'HeartC', // default value for the first data set |
||||
searchText: 'Hyper-parameter search', |
||||
resetText: 'Reset', |
||||
dataset: 'Data set' |
||||
} |
||||
}, |
||||
methods: { |
||||
selectDataSet () { |
||||
const fileName = document.getElementById('selectFile') |
||||
this.defaultDataSet = fileName.options[fileName.selectedIndex].value |
||||
this.defaultDataSet = this.defaultDataSet.split('.')[0] |
||||
|
||||
if (this.defaultDataSet == "DiabetesC" || this.defaultDataSet == "HeartC" || this.defaultDataSet == "IrisC" || this.defaultDataSet == "StanceC") { // This is a function that handles a new file, which users can upload. |
||||
this.dataset = "Data set" |
||||
d3.select("#data").select("input").remove(); // Remove the selection field. |
||||
EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet) |
||||
} else { |
||||
EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet) |
||||
d3.select("#data").select("input").remove(); |
||||
this.dataset = "" |
||||
var data |
||||
d3.select("#data") |
||||
.append("input") |
||||
.attr("type", "file") |
||||
.style("font-size", "18.5px") |
||||
.style("width", "200px") |
||||
.on("change", function() { |
||||
var file = d3.event.target.files[0]; |
||||
Papa.parse(file, { |
||||
header: true, |
||||
dynamicTyping: true, |
||||
skipEmptyLines: true, |
||||
complete: function(results) { |
||||
data = results.data; |
||||
EventBus.$emit('SendToServerLocalFile', data) |
||||
} |
||||
}); |
||||
}) |
||||
} |
||||
}, |
||||
reset () { |
||||
EventBus.$emit('reset') |
||||
EventBus.$emit('alternateFlagLock') |
||||
}, |
||||
initialize () { |
||||
EventBus.$emit('ConfirmDataSet') |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,86 @@ |
||||
<template> |
||||
<div> |
||||
<label id="data" for="param-dataset" data-toggle="tooltip" data-placement="right" title="Tip: use one of the data sets already provided or upload a new file.">{{ dataset }}</label> |
||||
<select id="selectFile" @change="selectDataSet()"> |
||||
<option value="HeartC.csv" selected>Heart Disease</option> |
||||
<option value="IrisC.csv">Iris</option> |
||||
<option value="local">Upload New File</option> |
||||
</select> |
||||
<button class="btn-outline-success" |
||||
id="initializeID" |
||||
v-on:click="initialize"> |
||||
<font-awesome-icon icon="search" /> |
||||
{{ searchText }} |
||||
</button> |
||||
<button class="btn-outline-danger" |
||||
id="resetID" |
||||
v-on:click="reset"> |
||||
<font-awesome-icon icon="trash" /> |
||||
{{ resetText }} |
||||
</button> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Papa from 'papaparse' |
||||
import { EventBus } from '../main.js' |
||||
import {$,jQuery} from 'jquery'; |
||||
import * as d3Base from 'd3' |
||||
|
||||
// attach all d3 plugins to the d3 library |
||||
const d3 = Object.assign(d3Base) |
||||
|
||||
export default { |
||||
name: 'FeatureSpace4', |
||||
data () { |
||||
return { |
||||
defaultDataSet: 'HeartC', // default value for the first data set |
||||
searchText: 'Hyper-parameter search', |
||||
resetText: 'Reset', |
||||
dataset: 'Data set' |
||||
} |
||||
}, |
||||
methods: { |
||||
selectDataSet () { |
||||
const fileName = document.getElementById('selectFile') |
||||
this.defaultDataSet = fileName.options[fileName.selectedIndex].value |
||||
this.defaultDataSet = this.defaultDataSet.split('.')[0] |
||||
|
||||
if (this.defaultDataSet == "DiabetesC" || this.defaultDataSet == "HeartC" || this.defaultDataSet == "IrisC" || this.defaultDataSet == "StanceC") { // This is a function that handles a new file, which users can upload. |
||||
this.dataset = "Data set" |
||||
d3.select("#data").select("input").remove(); // Remove the selection field. |
||||
EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet) |
||||
} else { |
||||
EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet) |
||||
d3.select("#data").select("input").remove(); |
||||
this.dataset = "" |
||||
var data |
||||
d3.select("#data") |
||||
.append("input") |
||||
.attr("type", "file") |
||||
.style("font-size", "18.5px") |
||||
.style("width", "200px") |
||||
.on("change", function() { |
||||
var file = d3.event.target.files[0]; |
||||
Papa.parse(file, { |
||||
header: true, |
||||
dynamicTyping: true, |
||||
skipEmptyLines: true, |
||||
complete: function(results) { |
||||
data = results.data; |
||||
EventBus.$emit('SendToServerLocalFile', data) |
||||
} |
||||
}); |
||||
}) |
||||
} |
||||
}, |
||||
reset () { |
||||
EventBus.$emit('reset') |
||||
EventBus.$emit('alternateFlagLock') |
||||
}, |
||||
initialize () { |
||||
EventBus.$emit('ConfirmDataSet') |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,312 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<div align="center"> |
||||
Projection method: <select id="selectBarChart" @change="selectVisualRepresentation()"> |
||||
<option value="mds" selected>MDS</option> |
||||
<option value="tsne">t-SNE</option> |
||||
<option value="umap">UMAP</option> |
||||
</select> |
||||
|
||||
Action: <button |
||||
id="Remove" |
||||
v-on:click="Remove"> |
||||
<font-awesome-icon icon="dna" /> |
||||
{{ CrossoverMutateText }} |
||||
</button> |
||||
</div> |
||||
<div id="OverviewPlotly" class="OverviewPlotly"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as Plotly from 'plotly.js' |
||||
import * as d3Base from 'd3' |
||||
|
||||
import { EventBus } from '../main.js' |
||||
|
||||
// attach all d3 plugins to the d3 library |
||||
const d3 = Object.assign(d3Base) |
||||
|
||||
export default { |
||||
name: 'HyperParameterSpace', |
||||
data () { |
||||
return { |
||||
CrossoverMutateText: 'Unselected points\' crossover & mutation', |
||||
WH: [], |
||||
ScatterPlotResults: '', |
||||
representationDef: 'mds', |
||||
} |
||||
}, |
||||
methods: { |
||||
reset () { |
||||
Plotly.purge('OverviewPlotly') |
||||
}, |
||||
clean(obj) { |
||||
var propNames = Object.getOwnPropertyNames(obj); |
||||
for (var i = 0; i < propNames.length; i++) { |
||||
var propName = propNames[i]; |
||||
if (obj[propName] === null || obj[propName] === undefined) { |
||||
delete obj[propName]; |
||||
} |
||||
} |
||||
}, |
||||
selectVisualRepresentation () { |
||||
const representationSelectionDocum = document.getElementById('selectBarChart') |
||||
this.representationSelection = representationSelectionDocum.options[representationSelectionDocum.selectedIndex].value |
||||
EventBus.$emit('RepresentationSelection', this.representationSelection) |
||||
}, |
||||
ScatterPlotView () { |
||||
Plotly.purge('OverviewPlotly') |
||||
|
||||
var modelId = JSON.parse(this.ScatterPlotResults[0]) |
||||
var colorsforScatterPlot = JSON.parse(this.ScatterPlotResults[1]) |
||||
var parametersLoc = JSON.parse(this.ScatterPlotResults[2]) |
||||
var parameters = JSON.parse(parametersLoc) |
||||
var MDSData= JSON.parse(this.ScatterPlotResults[9]) |
||||
var TSNEData = JSON.parse(this.ScatterPlotResults[10]) |
||||
var UMAPData = JSON.parse(this.ScatterPlotResults[11]) |
||||
|
||||
EventBus.$emit('sendPointsNumber', modelId.length) |
||||
|
||||
var stringParameters = [] |
||||
for (let i = 0; i < parameters.length; i++) { |
||||
this.clean(parameters[i]) |
||||
stringParameters.push(JSON.stringify(parameters[i]).replace(/,/gi, '<br>')) |
||||
} |
||||
|
||||
var classifiersInfoProcessing = [] |
||||
for (let i = 0; i < modelId.length; i++) { |
||||
if (i < 100) { |
||||
classifiersInfoProcessing[i] = '<b>Model ID:</b> ' + modelId[i] + '<br><b>Algorithm:</b> k-nearest neighbor' + '<br><b>Parameters:</b> ' + stringParameters[i] |
||||
} |
||||
else { |
||||
classifiersInfoProcessing[i] = '<b>Model ID:</b> ' + modelId[i] + '<br><b>Algorithm:</b> logistic regression' + '<br><b>Parameters:</b> ' + stringParameters[i] |
||||
} |
||||
} |
||||
|
||||
var DataGeneral, maxX, minX, maxY, minY, layout |
||||
|
||||
var width = this.WH[0]*8 // interactive visualization |
||||
var height = this.WH[1]*4 // interactive visualization |
||||
|
||||
if (this.representationDef == 'mds') { |
||||
maxX = Math.max(MDSData[0]) |
||||
minX = Math.min(MDSData[0]) |
||||
maxY = Math.max(MDSData[1]) |
||||
minY = Math.max(MDSData[1]) |
||||
|
||||
DataGeneral = [{ |
||||
type: 'scatter', |
||||
mode: 'markers', |
||||
x: MDSData[0], |
||||
y: MDSData[1], |
||||
hovertemplate: |
||||
"%{text}<br><br>" + |
||||
"<extra></extra>", |
||||
text: classifiersInfoProcessing, |
||||
marker: { |
||||
line: { color: 'rgb(0, 0, 0)', width: 3 }, |
||||
color: colorsforScatterPlot, |
||||
size: 12, |
||||
colorscale: 'Viridis', |
||||
colorbar: { |
||||
title: '# Performance (%) #', |
||||
titleside:'right', |
||||
}, |
||||
} |
||||
|
||||
}] |
||||
layout = { |
||||
|
||||
xaxis: { |
||||
visible: false, |
||||
range: [minX, maxX] |
||||
}, |
||||
yaxis: { |
||||
visible: false, |
||||
range: [minY, maxY] |
||||
}, |
||||
font: { family: 'Helvetica', size: 16, color: '#000000' }, |
||||
autosize: true, |
||||
width: width, |
||||
height: height, |
||||
dragmode: 'lasso', |
||||
hovermode: "closest", |
||||
hoverlabel: { bgcolor: "#FFF" }, |
||||
legend: {orientation: 'h', y: -0.3}, |
||||
margin: { |
||||
l: 50, |
||||
r: 0, |
||||
b: 30, |
||||
t: 40, |
||||
pad: 0 |
||||
}, |
||||
} |
||||
} else if (this.representationDef == 'tsne') { |
||||
var result = TSNEData.reduce(function(r, a) { |
||||
a.forEach(function(s, i) { |
||||
var key = i === 0 ? 'Xax' : 'Yax'; |
||||
|
||||
r[key] || (r[key] = []); // if key not found on result object, add the key with empty array as the value |
||||
|
||||
r[key].push(s); |
||||
}) |
||||
return r; |
||||
}, {}) |
||||
|
||||
maxX = Math.max(result.Xax) |
||||
minX = Math.min(result.Xax) |
||||
maxY = Math.max(result.Yax) |
||||
minY = Math.max(result.Yax) |
||||
|
||||
DataGeneral = [{ |
||||
type: 'scatter', |
||||
mode: 'markers', |
||||
x: result.Xax, |
||||
y: result.Yax, |
||||
hovertemplate: |
||||
"%{text}<br><br>" + |
||||
"<extra></extra>", |
||||
text: classifiersInfoProcessing, |
||||
marker: { |
||||
line: { color: 'rgb(0, 0, 0)', width: 3 }, |
||||
color: colorsforScatterPlot, |
||||
size: 12, |
||||
colorscale: 'Viridis', |
||||
colorbar: { |
||||
title: '# Performance (%) #', |
||||
titleside: 'right' |
||||
}, |
||||
} |
||||
}] |
||||
layout = { |
||||
|
||||
xaxis: { |
||||
visible: false, |
||||
range: [minX, maxX] |
||||
}, |
||||
yaxis: { |
||||
visible: false, |
||||
range: [minY, maxY] |
||||
}, |
||||
autosize: true, |
||||
width: width, |
||||
height: height, |
||||
dragmode: 'lasso', |
||||
hovermode: "closest", |
||||
hoverlabel: { bgcolor: "#FFF" }, |
||||
legend: {orientation: 'h', y: -0.3}, |
||||
margin: { |
||||
l: 50, |
||||
r: 0, |
||||
b: 30, |
||||
t: 40, |
||||
pad: 0 |
||||
}, |
||||
} |
||||
|
||||
} else { |
||||
maxX = Math.max(UMAPData[0]) |
||||
minX = Math.min(UMAPData[0]) |
||||
maxY = Math.max(UMAPData[1]) |
||||
minY = Math.max(UMAPData[1]) |
||||
|
||||
DataGeneral = [{ |
||||
type: 'scatter', |
||||
mode: 'markers', |
||||
x: UMAPData[0], |
||||
y: UMAPData[1], |
||||
hovertemplate: |
||||
"%{text}<br><br>" + |
||||
"<extra></extra>", |
||||
text: classifiersInfoProcessing, |
||||
marker: { |
||||
line: { color: 'rgb(0, 0, 0)', width: 3 }, |
||||
color: colorsforScatterPlot, |
||||
size: 12, |
||||
colorscale: 'Viridis', |
||||
colorbar: { |
||||
title: '# Performance (%) #', |
||||
titleside: 'right' |
||||
}, |
||||
} |
||||
|
||||
}] |
||||
layout = { |
||||
|
||||
xaxis: { |
||||
visible: false, |
||||
range: [minX, maxX] |
||||
}, |
||||
yaxis: { |
||||
visible: false, |
||||
range: [minY, maxY] |
||||
}, |
||||
autosize: true, |
||||
width: width, |
||||
height: height, |
||||
dragmode: 'lasso', |
||||
hovermode: "closest", |
||||
hoverlabel: { bgcolor: "#FFF" }, |
||||
legend: {orientation: 'h', y: -0.3}, |
||||
margin: { |
||||
l: 50, |
||||
r: 0, |
||||
b: 30, |
||||
t: 40, |
||||
pad: 0 |
||||
}, |
||||
} |
||||
} |
||||
|
||||
var config = {scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage', 'toggleSpikelines', 'autoScale2d', 'hoverClosestGl2d','hoverCompareCartesian','select2d','hoverClosestCartesian','zoomIn2d','zoomOut2d','zoom2d'], responsive: true} |
||||
|
||||
var scat = document.getElementById('OverviewPlotly') |
||||
|
||||
Plotly.newPlot(scat, DataGeneral, layout, config) |
||||
this.selectedPointsOverview() |
||||
}, |
||||
selectedPointsOverview () { |
||||
const OverviewPlotly = document.getElementById('OverviewPlotly') |
||||
var allModels = JSON.parse(this.ScatterPlotResults[0]) |
||||
OverviewPlotly.on('plotly_selected', function (evt) { |
||||
if (typeof evt !== 'undefined') { |
||||
var pushModelsRemainingTemp = [] |
||||
const ClassifierIDsList = [] |
||||
for (let i = 0; evt.points.length; i++) { |
||||
if (evt.points[i] === undefined) { |
||||
break |
||||
} else { |
||||
const OnlyId = evt.points[i].text.split(' ')[2] |
||||
const OnlyIdCleared = OnlyId.split('<br>') |
||||
ClassifierIDsList.push(OnlyIdCleared[0]) |
||||
} |
||||
} |
||||
for (let i = 0; i < allModels.length; i++) { |
||||
if (ClassifierIDsList.indexOf((allModels[i])) < 0) { |
||||
pushModelsRemainingTemp.push(allModels[i]) |
||||
} |
||||
} |
||||
EventBus.$emit('RemainingPoints', pushModelsRemainingTemp) |
||||
EventBus.$emit('SendSelectedPointsUpdateIndicator', ClassifierIDsList) |
||||
EventBus.$emit('SendSelectedPointsToServerEvent', ClassifierIDsList) |
||||
} |
||||
}) |
||||
}, |
||||
Remove () { |
||||
EventBus.$emit('InitializeCrossoverMutation') |
||||
} |
||||
}, |
||||
mounted() { |
||||
EventBus.$on('emittedEventCallingScatterPlot', data => { |
||||
this.ScatterPlotResults = data}) |
||||
EventBus.$on('emittedEventCallingScatterPlot', this.ScatterPlotView) |
||||
|
||||
EventBus.$on('RepresentationSelection', data => {this.representationDef = data}) |
||||
EventBus.$on('RepresentationSelection', this.ScatterPlotView) |
||||
|
||||
// reset view |
||||
EventBus.$on('resetViews', this.reset) |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,8 +0,0 @@ |
||||
<!-- Page not found. --> |
||||
|
||||
<template> |
||||
<div> |
||||
<img src="@/assets/isovis.jpg"> |
||||
<p>404 - Page Not Found</p> |
||||
</div> |
||||
</template> |
||||
@ -1,846 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<b-row class="md-3"> |
||||
<b-col cols="12"> |
||||
<div id="overview"></div> |
||||
</b-col> |
||||
</b-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { EventBus } from '../main.js' |
||||
|
||||
import { legend } from 'd3-svg-legend' |
||||
|
||||
export default { |
||||
name: 'Parameters', |
||||
data () { |
||||
return { |
||||
WH: [], |
||||
storeActiveModels: [], |
||||
allActiveKNN: [], |
||||
allActiveSVC: [], |
||||
allActiveGausNB: [], |
||||
allActiveMLP: [], |
||||
allActiveLR: [], |
||||
allActiveLDA: [], |
||||
allActiveQDA: [], |
||||
allActiveRF: [], |
||||
allActiveExtraT: [], |
||||
allActiveAdaB: [], |
||||
allActiveGradB: [], |
||||
storeParameters: [], |
||||
keepState: 0, |
||||
FlagKNN: 0, |
||||
FlagSVC: 0, |
||||
FlagGausNB: 0, |
||||
FlagMLP: 0, |
||||
FlagLR: 0, |
||||
FlagLDA: 0, |
||||
FlagQDA: 0, |
||||
FlagRF: 0, |
||||
FlagExtraT: 0, |
||||
FlagAdaB: 0, |
||||
FlagGradB: 0, |
||||
FlagBrushAll: 0, |
||||
SVCModels: 576, |
||||
GausNBModels: 736, |
||||
MLPModels: 1236, |
||||
LRModels: 1356, |
||||
LDAModels: 1996, |
||||
QDAModels: 2196, |
||||
RFModels: 2446, |
||||
ExtraTModels: 2606, |
||||
AdaBModels: 2766, |
||||
GradBModels: 2926, |
||||
countkNNRelated: [], |
||||
countKNN: 0, |
||||
countSVCRelated: [], |
||||
countSVC: 0, |
||||
countGausNBRelated: [], |
||||
countGausNB: 0, |
||||
countMLPRelated: [], |
||||
countMLP: 0, |
||||
countLRRelated: [], |
||||
countLR: 0, |
||||
countLDARelated: [], |
||||
countLDA: 0, |
||||
countQDARelated: [], |
||||
countQDA: 0, |
||||
countRFRelated: [], |
||||
countRF: 0, |
||||
countExtraTRelated: [], |
||||
countExtraT: 0, |
||||
countAdaBRelated: [], |
||||
countAdaB: 0, |
||||
countGradBRelated: [], |
||||
countGradB: 0, |
||||
} |
||||
}, |
||||
methods: { |
||||
reset () { |
||||
setTimeout(() => { |
||||
var svg = d3.select("#overview"); |
||||
svg.selectAll("*").remove(); |
||||
}, 50); |
||||
}, |
||||
RadarChart(id, data, options) { |
||||
var cfg = { |
||||
w: 600, //Width of the circle |
||||
h: 600, //Height of the circle |
||||
margin: {top: 60, right: 20, bottom: 20, left: 120}, //The margins around the circle |
||||
legendPosition: {x: 20, y: 20}, // the position of the legend, from the top-left corner of the svg |
||||
levels: 3, //How many levels or inner circles should there be drawn |
||||
maxValue: 0, //What is the value that the biggest circle will represent |
||||
labelFactor: 1.25, //How much farther than the radius of the outer circle should the labels be placed |
||||
wrapWidth: 60, //The number of pixels after which a label needs to be given a new line |
||||
opacityArea: 0.35, //The opacity of the area of the blob |
||||
dotRadius: 2, //The size of the colored circles of each blog |
||||
opacityCircles: 0.1, //The opacity of the circles of each blob |
||||
strokeWidth: 2, //The width of the stroke around each blob |
||||
roundStrokes: false, //If true the area and stroke will follow a round path (cardinal-closed) |
||||
color: d3.scale.category10(), //Color function |
||||
axisName: "axis", |
||||
areaName:"areaName", |
||||
value: "value", |
||||
sortAreas: true, |
||||
colorsDiff: ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#b15928'] |
||||
}; |
||||
|
||||
//Put all of the options into a variable called cfg |
||||
if('undefined' !== typeof options){ |
||||
for(var i in options){ |
||||
if('undefined' !== typeof options[i]){ cfg[i] = options[i]; } |
||||
}//for i |
||||
}//if |
||||
|
||||
//Map the fields specified in the configuration |
||||
// to the axis and value variables |
||||
var axisName = cfg["axisName"], |
||||
areaName = cfg["areaName"], |
||||
value = cfg["value"]; |
||||
|
||||
//If the supplied maxValue is smaller than the actual one, replace by the max in the data |
||||
var maxValue = Math.max(cfg.maxValue, d3.max(data, function(i){return d3.max(i.map(function(o){return o.value;}))})) |
||||
|
||||
var allAxis = (data[0].map(function(d, i){ return d[axisName] })), //Names of each axis |
||||
total = allAxis.length, //The number of different axes |
||||
radius = Math.min(cfg.w/2, cfg.h/2), //Radius of the outermost circle |
||||
Format = d3.format('%'), //Percentage formatting |
||||
angleSlice = Math.PI * 2 / total; //The width in radians of each "slice" |
||||
|
||||
//Scale for the radius |
||||
var rScale = d3.scale.linear() |
||||
.range([0, radius]) |
||||
.domain([0, maxValue]); |
||||
|
||||
///////////////////////////////////////////////////////// |
||||
//////////// Create the container SVG and g ///////////// |
||||
///////////////////////////////////////////////////////// |
||||
|
||||
//Remove whatever chart with the same id/class was present before |
||||
d3.select(id).select("svg").remove(); |
||||
|
||||
//Initiate the radar chart SVG |
||||
var svg = d3.select(id).append("svg") |
||||
.attr("width", cfg.w + cfg.margin.left + cfg.margin.right) |
||||
.attr("height", cfg.h + cfg.margin.top + cfg.margin.bottom) |
||||
.attr("class", "radar"+id); |
||||
//Append a g element |
||||
var g = svg.append("g") |
||||
.attr("transform", "translate(" + (cfg.w/2 + cfg.margin.left) + "," + (cfg.h/2 + cfg.margin.top) + ")"); |
||||
|
||||
///////////////////////////////////////////////////////// |
||||
////////// Glow filter for some extra pizzazz /////////// |
||||
///////////////////////////////////////////////////////// |
||||
|
||||
//Filter for the outside glow |
||||
var filter = g.append('defs').append('filter').attr('id','glow'), |
||||
feGaussianBlur = filter.append('feGaussianBlur').attr('stdDeviation','2.5').attr('result','coloredBlur'), |
||||
feMerge = filter.append('feMerge'), |
||||
feMergeNode_1 = feMerge.append('feMergeNode').attr('in','coloredBlur'), |
||||
feMergeNode_2 = feMerge.append('feMergeNode').attr('in','SourceGraphic'); |
||||
|
||||
///////////////////////////////////////////////////////// |
||||
/////////////// Draw the Circular grid ////////////////// |
||||
///////////////////////////////////////////////////////// |
||||
|
||||
//Wrapper for the grid & axes |
||||
var axisGrid = g.append("g").attr("class", "axisWrapper"); |
||||
|
||||
//Draw the background circles |
||||
axisGrid.selectAll(".levels") |
||||
.data(d3.range(1,(cfg.levels+1)).reverse()) |
||||
.enter() |
||||
.append("circle") |
||||
.attr("class", "gridCircle") |
||||
.attr("transform", "translate(5,5)") |
||||
.attr("r", function(d, i){return radius/cfg.levels*d;}) |
||||
.style("fill", "#CDCDCD") |
||||
.style("stroke", "#CDCDCD") |
||||
.style("fill-opacity", cfg.opacityCircles) |
||||
.style("filter" , "url(#glow)"); |
||||
|
||||
//Text indicating at what % each level is |
||||
axisGrid.selectAll(".axisLabel") |
||||
.data(d3.range(1,(cfg.levels+1)).reverse()) |
||||
.enter().append("text") |
||||
.attr("class", "axisLabel") |
||||
.attr("x", 10) |
||||
.attr("y", function(d){return -d*radius/cfg.levels;}) |
||||
.attr("dy", "0.4em") |
||||
.style("font-size", "16px") |
||||
.attr("fill", "#737373") |
||||
.text(function(d,i) { return Format(maxValue * d/cfg.levels); }); |
||||
|
||||
///////////////////////////////////////////////////////// |
||||
//////////////////// Draw the axes ////////////////////// |
||||
///////////////////////////////////////////////////////// |
||||
|
||||
//Create the straight lines radiating outward from the center |
||||
var axis = axisGrid.selectAll(".axis") |
||||
.data(allAxis) |
||||
.enter() |
||||
.append("g") |
||||
.attr("class", "axis"); |
||||
//Append the lines |
||||
axis.append("line") |
||||
.attr("x1", 0) |
||||
.attr("y1", 0) |
||||
.attr("transform", "translate(5,5)") |
||||
.attr("x2", function(d, i){ return rScale(maxValue*1.2) * Math.cos(angleSlice*i - Math.PI/2); }) |
||||
.attr("y2", function(d, i){ return rScale(maxValue*1.2) * Math.sin(angleSlice*i - Math.PI/2); }) |
||||
.attr("class", "line") |
||||
.style("stroke", "white") |
||||
.style("stroke-width", "2px"); |
||||
|
||||
axis.append("rect") |
||||
.attr("text-anchor", "left") |
||||
.attr("dy", "0.35em") |
||||
.attr("x", function(d, i){ return (rScale(maxValue * cfg.labelFactor) * Math.cos(angleSlice*i - Math.PI/2)) - 25; }) |
||||
.attr("y", function(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.sin(angleSlice*i - Math.PI/2); }) |
||||
.text(function(d){return d}) |
||||
.attr("width", 15) |
||||
.attr("height", 15) |
||||
.style("fill", function(d,i) { return cfg.colorsDiff[i]; }) |
||||
|
||||
//Append the labels at each axis |
||||
axis.append("text") |
||||
.attr("class", "legend") |
||||
.style("font-size", "16px") |
||||
.attr("text-anchor", "middle") |
||||
.attr("dy", "0em") |
||||
.style("font-size", "16px") |
||||
.attr("x", function(d, i){ return (rScale(maxValue * cfg.labelFactor) * Math.cos(angleSlice*i - Math.PI/2)) + 15; }) |
||||
.attr("y", function(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.sin(angleSlice*i - Math.PI/2); }) |
||||
.text(function(d){return d}) |
||||
.call(wrap, cfg.wrapWidth); |
||||
|
||||
///////////////////////////////////////////////////////// |
||||
///////////// Draw the radar chart blobs //////////////// |
||||
///////////////////////////////////////////////////////// |
||||
|
||||
//The radial line function |
||||
var radarLine = d3.svg.line.radial() |
||||
.interpolate("linear-closed") |
||||
.radius(function(d) { return rScale(d[value]); }) |
||||
.angle(function(d,i) { return i*angleSlice; }); |
||||
|
||||
if(cfg.roundStrokes) { |
||||
radarLine.interpolate("cardinal-closed"); |
||||
} |
||||
|
||||
//Create a wrapper for the blobs |
||||
var blobWrapper = g.selectAll(".radarWrapper") |
||||
.data(data) |
||||
.enter().append("g") |
||||
.attr("transform", "translate(5,5)") |
||||
.attr("class", "radarWrapper"); |
||||
|
||||
//Append the backgrounds |
||||
blobWrapper |
||||
.append("path") |
||||
.attr("class", function(d) { |
||||
return "radarArea" + " " + d[0][areaName].replace(/\s+/g, '') //Remove spaces from the areaName string to make one valid class name |
||||
}) |
||||
.attr("d", function(d,i) { return radarLine(d); }) |
||||
.style("fill", function(d,i) { return cfg.color(i); }) |
||||
.style("fill-opacity", cfg.opacityArea) |
||||
.on('mouseover', function (d,i){ |
||||
//Dim all blobs |
||||
d3.selectAll(".radarArea") |
||||
.transition().duration(200) |
||||
.style("fill-opacity", 0.1); |
||||
//Bring back the hovered over blob |
||||
d3.select(this) |
||||
.transition().duration(200) |
||||
.style("fill-opacity", 0.7); |
||||
}) |
||||
.on('mouseout', function(){ |
||||
//Bring back all blobs |
||||
d3.selectAll(".radarArea") |
||||
.transition().duration(200) |
||||
.style("fill-opacity", cfg.opacityArea); |
||||
}); |
||||
|
||||
//Create the outlines |
||||
blobWrapper.append("path") |
||||
.attr("class", "radarStroke") |
||||
.attr("d", function(d,i) { return radarLine(d); }) |
||||
.style("stroke-width", cfg.strokeWidth + "px") |
||||
.style("stroke", function(d,i) { return cfg.color(i); }) |
||||
.style("fill", "none") |
||||
.style("filter" , "url(#glow)"); |
||||
|
||||
//Append the circles |
||||
blobWrapper.selectAll(".radarCircle") |
||||
.data(function(d,i) { return d; }) |
||||
.enter().append("circle") |
||||
.attr("class", "radarCircle") |
||||
.attr("r", cfg.dotRadius) |
||||
.attr("cx", function(d,i){ return rScale(d[value]) * Math.cos(angleSlice*i - Math.PI/2); }) |
||||
.attr("cy", function(d,i){ return rScale(d[value]) * Math.sin(angleSlice*i - Math.PI/2); }) |
||||
.style("fill", function(d,i,j) { return cfg.color(j); }) |
||||
.style("fill-opacity", 0.8); |
||||
|
||||
///////////////////////////////////////////////////////// |
||||
//////// Append invisible circles for tooltip /////////// |
||||
///////////////////////////////////////////////////////// |
||||
|
||||
//Wrapper for the invisible circles on top |
||||
var blobCircleWrapper = g.selectAll(".radarCircleWrapper") |
||||
.data(data) |
||||
.enter().append("g") |
||||
.attr("class", "radarCircleWrapper"); |
||||
|
||||
//Append a set of invisible circles on top for the mouseover pop-up |
||||
blobCircleWrapper.selectAll(".radarInvisibleCircle") |
||||
.data(function(d,i) { return d; }) |
||||
.enter().append("circle") |
||||
.attr("class", "radarInvisibleCircle") |
||||
.attr("r", cfg.dotRadius*1.5) |
||||
.attr("cx", function(d,i){ return rScale(d[value]) * Math.cos(angleSlice*i - Math.PI/2); }) |
||||
.attr("cy", function(d,i){ return rScale(d[value]) * Math.sin(angleSlice*i - Math.PI/2); }) |
||||
.style("fill", "none") |
||||
.style("pointer-events", "all") |
||||
.on("mouseover", function(d,i) { |
||||
var newX |
||||
var newY |
||||
newX = parseFloat(d3.select(this).attr('cx')) - 10; |
||||
newY = parseFloat(d3.select(this).attr('cy')) - 10; |
||||
|
||||
tooltip |
||||
.attr('x', newX+5) |
||||
.attr('y', newY+5) |
||||
.text(Format(d[value])) |
||||
.transition().duration(200) |
||||
.style('opacity', 1); |
||||
}) |
||||
.on("mouseout", function(){ |
||||
tooltip.transition().duration(200) |
||||
.style("opacity", 0); |
||||
}); |
||||
|
||||
//Set up the small tooltip for when you hover over a circle |
||||
var tooltip = g.append("text") |
||||
.attr("class", "tooltip") |
||||
.style("opacity", 0); |
||||
|
||||
///////////////////////////////////////////////////////// |
||||
/////////////////// Helper Functions //////////////////// |
||||
///////////////////////////////////////////////////////// |
||||
|
||||
//Taken from http://bl.ocks.org/mbostock/7555321 |
||||
//Wraps SVG text |
||||
function wrap(text, width) { |
||||
text.each(function() { |
||||
var text = d3.select(this), |
||||
words = text.text().split(/\s+/).reverse(), |
||||
word, |
||||
line = [], |
||||
lineNumber = 0, |
||||
lineHeight = 1.4, // ems |
||||
y = text.attr("y"), |
||||
x = text.attr("x"), |
||||
dy = parseFloat(text.attr("dy")), |
||||
tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em"); |
||||
|
||||
while (word = words.pop()) { |
||||
line.push(word); |
||||
tspan.text(line.join(" ")); |
||||
if (tspan.node().getComputedTextLength() > width) { |
||||
line.pop(); |
||||
tspan.text(line.join(" ")); |
||||
line = [word]; |
||||
tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); |
||||
} |
||||
} |
||||
}); |
||||
}//wrap |
||||
|
||||
// on mouseover for the legend symbol |
||||
function cellover(d) { |
||||
//Dim all blobs |
||||
d3.selectAll(".radarArea") |
||||
.transition().duration(200) |
||||
.style("fill-opacity", 0.1); |
||||
//Bring back the hovered over blob |
||||
d3.select("." + data[d][0][areaName].replace(/\s+/g, '')) |
||||
.transition().duration(200) |
||||
.style("fill-opacity", 0.7); |
||||
} |
||||
|
||||
// on mouseout for the legend symbol |
||||
function cellout() { |
||||
//Bring back all blobs |
||||
d3.selectAll(".radarArea") |
||||
.transition().duration(200) |
||||
.style("fill-opacity", cfg.opacityArea); |
||||
} |
||||
|
||||
///////////////////////////////////////////////////////// |
||||
/////////////////// Draw the Legend ///////////////////// |
||||
///////////////////////////////////////////////////////// |
||||
|
||||
svg.append("g") |
||||
.attr("class", "legendOrdinal") |
||||
.attr("transform", "translate(" + cfg["legendPosition"]["x"] + "," + cfg["legendPosition"]["y"] + ")"); |
||||
|
||||
var legendOrdinal = legend.color() |
||||
.shape("path", d3.svg.symbol().type("circle").size(150)()) |
||||
.shapePadding(10) |
||||
.scale(cfg.color) |
||||
.labels(cfg.color.domain().map(function(d){ |
||||
return data[d][0][areaName]; |
||||
})) |
||||
.on("cellover", function(d){ cellover(d); }) |
||||
.on("cellout", function(d) { cellout(); }); |
||||
|
||||
svg.select(".legendOrdinal").call(legendOrdinal); |
||||
|
||||
}, |
||||
overview() { |
||||
/* Radar chart design created by Nadieh Bremer - VisualCinnamon.com */ |
||||
// 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 |
||||
|
||||
const max = 640 |
||||
const KNNAll = 576 |
||||
const SVCAll = 160 |
||||
const GausNBAll = 500 |
||||
const MLPAll = 120 |
||||
const LRAll = 640 |
||||
const LDAAll = 200 |
||||
const QDAAll = 250 |
||||
const RFAll = 160 |
||||
const ExtraTAll = 160 |
||||
const AdaBAll = 160 |
||||
const GradBAll = 180 |
||||
|
||||
var KNNSelection = 0 |
||||
var SVCSelection = 0 |
||||
var GausNBSelection = 0 |
||||
var MLPSelection = 0 |
||||
var LRSelection = 0 |
||||
var LDASelection = 0 |
||||
var QDASelection = 0 |
||||
var RFSelection = 0 |
||||
var ExtraTSelection = 0 |
||||
var AdaBSelection = 0 |
||||
var GradBSelection = 0 |
||||
|
||||
if (this.FlagBrushAll == 0 && this.FlagKNN == 0 && this.FlagSVC == 0 && this.FlagGausNB == 0 && this.FlagMLP == 0 && this.FlagLR == 0 && this.FlagLDA == 0 && this.FlagQDA == 0 && this.FlagRF == 0 && this.FlagExtraT == 0 && this.FlagAdaB == 0 && this.FlagGradB == 0) { |
||||
this.storeActiveModels = [] |
||||
this.allActiveKNN = [] |
||||
this.allActiveSVC = [] |
||||
this.allActiveGausNB = [] |
||||
this.allActiveMLP = [] |
||||
this.allActiveLR = [] |
||||
this.allActiveLDA = [] |
||||
this.allActiveQDA = [] |
||||
this.allActiveRF = [] |
||||
this.allActiveExtraT = [] |
||||
this.allActiveAdaB = [] |
||||
this.allActiveGradB = [] |
||||
this.countkNNRelated = [] |
||||
this.countKNN = 0 |
||||
this.countSVCRelated = [] |
||||
this.countSVC = 0 |
||||
this.countGausNBRelated = [] |
||||
this.countGausNB = 0 |
||||
this.countMLPRelated = [] |
||||
this.countMLP = 0 |
||||
this.countLRRelated = [] |
||||
this.countLR = 0 |
||||
this.countLDARelated = [] |
||||
this.countLDA = 0 |
||||
this.countQDARelated = [] |
||||
this.countQDA = 0 |
||||
this.countRFRelated = [] |
||||
this.countRF = 0 |
||||
this.countExtraTRelated = [] |
||||
this.countExtraT = 0 |
||||
this.countAdaBRelated = [] |
||||
this.countAdaB = 0 |
||||
this.countGradBRelated = [] |
||||
this.countGradB = 0 |
||||
} |
||||
|
||||
if(JSON.stringify(this.keepState)!=JSON.stringify(this.storeActiveModels)) { |
||||
if (this.storeActiveModels.length != 0) { |
||||
var intersection = this.compare(this.keepState,this.storeActiveModels) |
||||
for (let k = 0; k < intersection.length; k++) { |
||||
if (intersection[k] > this.GradBModels) { |
||||
this.countGradB = 0 |
||||
} else if (intersection[k] > this.AdaBModels) { |
||||
this.countAdaB = 0 |
||||
} else if (intersection[k] > this.ExtraTModels) { |
||||
this.countExtraT = 0 |
||||
} else if (intersection[k] > this.RFModels) { |
||||
this.countRF = 0 |
||||
} else if (intersection[k] > this.QDAModels) { |
||||
this.countQDA = 0 |
||||
} else if (intersection[k] > this.LDAModels) { |
||||
this.countLDA = 0 |
||||
} else if (intersection[k] > this.LRModels) { |
||||
this.countLR = 0 |
||||
} else if (intersection[k] > this.MLPModels) { |
||||
this.countMLP = 0 |
||||
} else if (intersection[k] > this.GausNBModels) { |
||||
this.countGausNB = 0 |
||||
} else if (intersection[k] > this.SVCModels) { |
||||
this.countSVC = 0 |
||||
} else { |
||||
this.countKNN = 0 |
||||
} |
||||
} |
||||
|
||||
for (let i = 0; i < this.storeActiveModels.length; i++) { |
||||
if (this.storeActiveModels[i] > this.GradBModels) { |
||||
this.countGradBRelated.push(JSON.parse(this.storeParameters[this.storeActiveModels[i]])) |
||||
this.countGradB++ |
||||
} else if (this.storeActiveModels[i] > this.AdaBModels) { |
||||
this.countAdaBRelated.push(JSON.parse(this.storeParameters[this.storeActiveModels[i]])) |
||||
this.countAdaB++ |
||||
} else if (this.storeActiveModels[i] > this.ExtraTModels) { |
||||
this.countExtraTRelated.push(JSON.parse(this.storeParameters[this.storeActiveModels[i]])) |
||||
this.countExtraT++ |
||||
} else if (this.storeActiveModels[i] > this.RFModels) { |
||||
this.countRFRelated.push(JSON.parse(this.storeParameters[this.storeActiveModels[i]])) |
||||
this.countRF++ |
||||
} else if (this.storeActiveModels[i] > this.QDAModels) { |
||||
this.countQDARelated.push(JSON.parse(this.storeParameters[this.storeActiveModels[i]])) |
||||
this.countQDA++ |
||||
} else if (this.storeActiveModels[i] > this.LDAModels) { |
||||
this.countLDARelated.push(JSON.parse(this.storeParameters[this.storeActiveModels[i]])) |
||||
this.countLDA++ |
||||
} else if (this.storeActiveModels[i] > this.LRModels) { |
||||
this.countLRRelated.push(JSON.parse(this.storeParameters[this.storeActiveModels[i]])) |
||||
this.countLR++ |
||||
} else if (this.storeActiveModels[i] > this.MLPModels) { |
||||
this.countMLPRelated.push(JSON.parse(this.storeParameters[this.storeActiveModels[i]])) |
||||
this.countMLP++ |
||||
} else if (this.storeActiveModels[i] > this.GausNBModels) { |
||||
this.countGausNBRelated.push(JSON.parse(this.storeParameters[this.storeActiveModels[i]])) |
||||
this.countGausNB++ |
||||
} else if (this.storeActiveModels[i] > this.SVCModels) { |
||||
this.countSVCRelated.push(JSON.parse(this.storeParameters[this.storeActiveModels[i]])) |
||||
this.countSVC++ |
||||
} else { |
||||
this.countkNNRelated.push(JSON.parse(this.storeParameters[this.storeActiveModels[i]])) |
||||
this.countKNN++ |
||||
} |
||||
} |
||||
} |
||||
if (this.storeActiveModels[0] > this.GradBModels) { |
||||
this.allActiveGradB = this.countGradBRelated.slice() |
||||
} else if (this.storeActiveModels[0] > this.AdaBModels) { |
||||
this.allActiveAdaB = this.countAdaBRelated.slice() |
||||
} else if (this.storeActiveModels[0] > this.ExtraTModels) { |
||||
this.allActiveExtraT = this.countExtraTRelated.slice() |
||||
} else if (this.storeActiveModels[0] > this.RFModels) { |
||||
this.allActiveRF = this.countRFRelated.slice() |
||||
} else if (this.storeActiveModels[0] > this.QDAModels) { |
||||
this.allActiveQDA = this.countQDARelated.slice() |
||||
} else if (this.storeActiveModels[0] > this.LDAModels) { |
||||
this.allActiveLDA = this.countLDARelated.slice() |
||||
} else if (this.storeActiveModels[0] > this.LRModels) { |
||||
this.allActiveLR = this.countLRRelated.slice() |
||||
} else if (this.storeActiveModels[0] > this.MLPModels) { |
||||
this.allActiveMLP = this.countMLPRelated.slice() |
||||
} else if (this.storeActiveModels[0] > this.GausNBModels) { |
||||
this.allActiveGausNB = this.countGausNBRelated.slice() |
||||
} else if (this.storeActiveModels[0] > this.SVCModels) { |
||||
this.allActiveSVC = this.countSVCRelated.slice() |
||||
} else { |
||||
this.allActiveKNN = this.countkNNRelated.slice() |
||||
} |
||||
} |
||||
|
||||
KNNSelection = this.countKNN |
||||
SVCSelection = this.countSVC |
||||
GausNBSelection = this.countGausNB |
||||
MLPSelection = this.countMLP |
||||
LRSelection = this.countLR |
||||
LDASelection = this.countLDA |
||||
QDASelection = this.countQDA |
||||
RFSelection = this.countRF |
||||
ExtraTSelection = this.countExtraT |
||||
AdaBSelection = this.countAdaB |
||||
GradBSelection = this.countGradB |
||||
|
||||
this.keepState = JSON.parse(JSON.stringify(this.storeActiveModels)) |
||||
|
||||
if (this.FlagKNN == 1 && this.allActiveKNN.length == 0) { |
||||
KNNSelection = 576 |
||||
} |
||||
if (this.FlagSVC == 1 && this.allActiveSVC.length == 0) { |
||||
SVCSelection = 160 |
||||
} |
||||
if (this.FlagGausNB == 1 && this.allActiveGausNB.length == 0) { |
||||
GausNBSelection = 500 |
||||
} |
||||
if (this.FlagMLP == 1 && this.allActiveMLP.length == 0) { |
||||
MLPSelection = 120 |
||||
} |
||||
if (this.FlagLR == 1 && this.allActiveLR.length == 0) { |
||||
LRSelection = 640 |
||||
} |
||||
if (this.FlagLDA == 1 && this.allActiveLDA.length == 0) { |
||||
LDASelection = 200 |
||||
} |
||||
if (this.FlagQDA == 1 && this.allActiveQDA.length == 0) { |
||||
QDASelection = 250 |
||||
} |
||||
if (this.FlagRF == 1 && this.allActiveRF.length == 0) { |
||||
RFSelection = 160 |
||||
} |
||||
if (this.FlagExtraT == 1 && this.allActiveExtraT.length == 0) { |
||||
ExtraTSelection = 160 |
||||
} |
||||
if (this.FlagAdaB == 1 && this.allActiveAdaB.length == 0) { |
||||
AdaBSelection = 160 |
||||
} |
||||
if (this.FlagGradB == 1 && this.allActiveGradB.length == 0) { |
||||
GradBSelection = 180 |
||||
} |
||||
|
||||
////////////////////////////////////////////////////////////// |
||||
//////////////////////// Set-Up ////////////////////////////// |
||||
////////////////////////////////////////////////////////////// |
||||
|
||||
var margin = {top: 50, right: 120, bottom: 55, left: 65}, |
||||
legendPosition = {x: 425, y: 25}, |
||||
width = Math.min(520, window.innerWidth - 10) - margin.left - margin.right, |
||||
height = Math.min(width + 12, window.innerHeight + 12 - margin.top - margin.bottom); |
||||
|
||||
////////////////////////////////////////////////////////////// |
||||
////////////////////////// Data ////////////////////////////// |
||||
////////////////////////////////////////////////////////////// |
||||
|
||||
var data = [ |
||||
[ |
||||
{axis:"KNN [576]",legend:"Entire",value:KNNAll/max}, |
||||
{axis:"SVC [160]",legend:"Entire",value:SVCAll/max}, |
||||
{axis:"GauNB [500]",legend:"Entire",value:GausNBAll/max}, |
||||
{axis:"MLP [120]",legend:"Entire",value:MLPAll/max}, |
||||
{axis:"LR [640]",legend:"Entire",value:LRAll/max}, |
||||
{axis:"LDA [200]",legend:"Entire",value:LDAAll/max}, |
||||
{axis:"QDA [250]",legend:"Entire",value:QDAAll/max}, |
||||
{axis:"RF [160]",legend:"Entire",value:RFAll/max}, |
||||
{axis:"ExtraT [160]",legend:"Entire",value:ExtraTAll/max}, |
||||
{axis:"AdaB [160]",legend:"Entire",value:AdaBAll/max}, |
||||
{axis:"GradB [180]",legend:"Entire",value:GradBAll/max}, |
||||
],[ |
||||
{axis:"KNN [576]",legend:"Selection",value:KNNSelection/max}, |
||||
{axis:"SVC [160]",legend:"Selection",value:SVCSelection/max}, |
||||
{axis:"GauNB [500]",legend:"Selection",value:GausNBSelection/max}, |
||||
{axis:"MLP [120]",legend:"Selection",value:MLPSelection/max}, |
||||
{axis:"LR [640]",legend:"Selection",value:LRSelection/max}, |
||||
{axis:"LDA [200]",legend:"Selection",value:LDASelection/max}, |
||||
{axis:"QDA [250]",legend:"Selection",value:QDASelection/max}, |
||||
{axis:"RF [160]",legend:"Selectionn",value:RFSelection/max}, |
||||
{axis:"ExtraT [160]",legend:"Selection",value:ExtraTSelection/max}, |
||||
{axis:"AdaB [160]",legend:"Selection",value:AdaBSelection/max}, |
||||
{axis:"GradB [180]",legend:"Selection",value:GradBSelection/max}, |
||||
], |
||||
]; |
||||
////////////////////////////////////////////////////////////// |
||||
//////////////////// Draw the Chart ////////////////////////// |
||||
////////////////////////////////////////////////////////////// |
||||
|
||||
var color = d3.scale.ordinal() |
||||
.range(["#ffed6f","#000000"]); |
||||
|
||||
var radarChartOptions = { |
||||
w: width, |
||||
h: height, |
||||
margin: margin, |
||||
legendPosition: legendPosition, |
||||
maxValue: 0.5, |
||||
levels: 5, |
||||
roundStrokes: true, |
||||
color: color, |
||||
axisName: "axis", |
||||
areaName: "legend", |
||||
value: "value" |
||||
}; |
||||
//Call function to draw the Radar chart |
||||
this.RadarChart("#overview", data, radarChartOptions); |
||||
}, |
||||
updateFlags () { |
||||
this.FlagKNN = 0 |
||||
this.FlagSVC = 0 |
||||
this.FlagGausNB = 0 |
||||
this.FlagMLP = 0 |
||||
this.FlagLR = 0 |
||||
this.FlagLDA = 0 |
||||
this.FlagQDA = 0 |
||||
this.FlagRF = 0 |
||||
this.FlagExtraT = 0 |
||||
this.FlagAdaB = 0 |
||||
this.FlagGradB = 0 |
||||
}, |
||||
compare(arr1,arr2){ |
||||
|
||||
const finalarray =[]; |
||||
|
||||
arr1.forEach((e1) => arr2.forEach((e2) => |
||||
{if(e1 === e2){ |
||||
finalarray.push(e1) |
||||
} |
||||
} |
||||
|
||||
)) |
||||
return finalarray |
||||
} |
||||
}, |
||||
mounted () { |
||||
EventBus.$on('updateFlagKNN', data => { this.FlagKNN = data }) |
||||
EventBus.$on('updateFlagSVC', data => { this.FlagSVC = data }) |
||||
EventBus.$on('updateFlagGauNB', data => { this.FlagGausNB = data }) |
||||
EventBus.$on('updateFlagMLP', data => { this.FlagMLP = data }) |
||||
EventBus.$on('updateFlagLR', data => { this.FlagLR = data }) |
||||
EventBus.$on('updateFlagLDA', data => { this.FlagLDA = data }) |
||||
EventBus.$on('updateFlagQDA', data => { this.FlagQDA = data }) |
||||
EventBus.$on('updateFlagRF', data => { this.FlagRF = data }) |
||||
EventBus.$on('updateFlagExtraT', data => { this.FlagExtraT = data }) |
||||
EventBus.$on('updateFlagAdaB', data => { this.FlagAdaB = data }) |
||||
EventBus.$on('updateFlagGradB', data => { this.FlagGradB = data }) |
||||
|
||||
EventBus.$on('flagBrushedAll', data => { this.FlagBrushAll = data }) |
||||
|
||||
EventBus.$on('updateFlagKNN', this.overview) |
||||
EventBus.$on('updateFlagSVC', this.overview) |
||||
EventBus.$on('updateFlagGauNB', this.overview) |
||||
EventBus.$on('updateFlagMLP', this.overview) |
||||
EventBus.$on('updateFlagLR', this.overview) |
||||
EventBus.$on('updateFlagLDA', this.overview) |
||||
EventBus.$on('updateFlagQDA', this.overview) |
||||
EventBus.$on('updateFlagRF', this.overview) |
||||
EventBus.$on('updateFlagExtraT', this.overview) |
||||
EventBus.$on('updateFlagAdaB', this.overview) |
||||
EventBus.$on('updateFlagGradB', this.overview) |
||||
|
||||
EventBus.$on('sendParameters', data => { this.storeParameters = data }) |
||||
EventBus.$on('updateActiveModels', data => { this.storeActiveModels = data }) |
||||
EventBus.$on('updateActiveModels', this.overview) |
||||
|
||||
EventBus.$on('Responsive', data => { |
||||
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.overview) |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
/* Styles go here */ |
||||
|
||||
.category-circle { |
||||
fill: url(#gradient-categorization); |
||||
} |
||||
|
||||
.question-circle { |
||||
fill: url(#gradient-questions); |
||||
} |
||||
|
||||
.chart-area-circle { |
||||
stroke: #fff; |
||||
stroke-width: 3px; |
||||
fill: url(#gradient-chart-area); |
||||
transform: translate(5px, 5px); |
||||
} |
||||
|
||||
.center-circle { |
||||
fill: #fff; |
||||
transform: translate(5px, 5px); |
||||
} |
||||
|
||||
.bars { |
||||
fill: url(#gradient-bars); |
||||
} |
||||
|
||||
.gridlines { |
||||
fill: none; |
||||
stroke: #fff; |
||||
transform: translate(5px, 5px); |
||||
} |
||||
|
||||
.minor { |
||||
stroke-width: 1px |
||||
} |
||||
|
||||
.major { |
||||
stroke-width: 6px |
||||
} |
||||
|
||||
.question-label-arc { |
||||
/*fill: white; |
||||
stroke: #AAAAAA; |
||||
fill: url(#gradient-questions);*/ |
||||
} |
||||
|
||||
.category-label-text { |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
fill: #fff; |
||||
} |
||||
|
||||
.question-label-text { |
||||
font-size: 16px; |
||||
font-weight: bold; |
||||
fill: gray; |
||||
} |
||||
|
||||
.question-labels { |
||||
text-anchor: middle; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.category-labels { |
||||
text-anchor: middle; |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
fill: #fff; |
||||
} |
||||
|
||||
.filled { |
||||
fill: url(#mainGradient); |
||||
} |
||||
|
||||
#overview { |
||||
min-height: 450px; |
||||
} |
||||
</style> |
||||
@ -1,148 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<b-row> |
||||
<b-col cols="12"> |
||||
<table class="table table-borderless table-sm"> |
||||
<tbody> |
||||
<tr> |
||||
<th scope="col" colspan="2">Balanced data set</th> |
||||
<th scope="col" colspan="2">Imbalanced data set</th> |
||||
</tr> |
||||
<tr> |
||||
<td>(M1) Accuracy:</td> |
||||
<td> |
||||
<b-form-checkbox |
||||
id="checkboxAcc" |
||||
v-model="checkedAcc" |
||||
@click="clickAcc" |
||||
> |
||||
</b-form-checkbox> |
||||
</td> |
||||
<td>(M1*) G-mean:</td> |
||||
<td> |
||||
<b-form-checkbox |
||||
id="checkboxGM" |
||||
v-model="checkedGM" |
||||
@click="clickGM" |
||||
> |
||||
</b-form-checkbox> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td>(M2) Precision:</td> |
||||
<td> |
||||
<b-form-checkbox |
||||
id="checkboxPrec" |
||||
v-model="checkedPrec" |
||||
@click="clickPrec" |
||||
> |
||||
</b-form-checkbox> |
||||
</td> |
||||
<td>(M2*) ROC AUC:</td> |
||||
<td> |
||||
<b-form-checkbox |
||||
id="checkboxRA" |
||||
v-model="checkedRA" |
||||
@click="clickRA" |
||||
> |
||||
</b-form-checkbox> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td>(M3) Recall:</td> |
||||
<td> |
||||
<b-form-checkbox |
||||
id="checkboxRec" |
||||
v-model="checkedRec" |
||||
@click="clickRec" |
||||
> |
||||
</b-form-checkbox> |
||||
</td> |
||||
<td>(M3*) Log loss:</td> |
||||
<td> |
||||
<b-form-checkbox |
||||
id="checkboxLog" |
||||
v-model="checkedLog" |
||||
@click="clickLog" |
||||
> |
||||
</b-form-checkbox> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td>(M4) F1-score:</td> |
||||
<td> |
||||
<b-form-checkbox |
||||
id="checkboxF1" |
||||
v-model="checkedF1" |
||||
@click="clickF1" |
||||
> |
||||
</b-form-checkbox> |
||||
</td> |
||||
<td>(M4*) MCC:</td> |
||||
<td> |
||||
<b-form-checkbox |
||||
id="checkboxMCC" |
||||
v-model="checkedMCC" |
||||
@click="clickMCC" |
||||
> |
||||
</b-form-checkbox> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</b-col> |
||||
</b-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { EventBus } from '../main.js' |
||||
|
||||
export default { |
||||
name: 'PerformanceMetrics', |
||||
data () { |
||||
return { |
||||
checkedAcc: true, |
||||
checkedPrec: true, |
||||
checkedRec: true, |
||||
checkedF1: true, |
||||
checkedGM: false, |
||||
checkedRA: false, |
||||
checkedLog: false, |
||||
checkedMCC: false, |
||||
} |
||||
}, |
||||
methods: { |
||||
clickAcc () { |
||||
this.checkedAcc = !this.checkedAcc |
||||
}, |
||||
clickPrec () { |
||||
this.checkedPrec = !this.checkedPrec |
||||
}, |
||||
clickRec () { |
||||
this.checkedRec = !this.checkedRec |
||||
}, |
||||
clickF1 () { |
||||
this.checkedF1 = !this.checkedF1 |
||||
}, |
||||
clickGM () { |
||||
this.checkedGM = !this.checkedGM |
||||
}, |
||||
clickRA () { |
||||
this.checkedRA = !this.checkedRA |
||||
}, |
||||
clickLog () { |
||||
this.checkedLog = !this.checkedLog |
||||
}, |
||||
clickMCC () { |
||||
this.checkedMCC = !this.checkedMCC |
||||
}, |
||||
}, |
||||
mounted () { |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
</style> |
||||
@ -1,454 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<div id="containerAll"></div> |
||||
<div id="containerSelection"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as d3Base from 'd3' |
||||
import { EventBus } from '../main.js' |
||||
import $ from 'jquery' |
||||
import * as colorbr from 'colorbrewer' |
||||
|
||||
// attach all d3 plugins to the d3 library |
||||
const d3 = Object.assign(d3Base) |
||||
const colorbrewer = Object.assign(colorbr) |
||||
|
||||
export default { |
||||
name: "Predictions", |
||||
data () { |
||||
return { |
||||
GetResultsAll: [], |
||||
GetResultsSelection: [], |
||||
responsiveWidthHeight: [], |
||||
predictSelection: [], |
||||
StoreIndices: [], |
||||
} |
||||
}, |
||||
methods: { |
||||
reset () { |
||||
var svg = d3.select("#containerAll"); |
||||
svg.selectAll("*").remove(); |
||||
var svg = d3.select("#containerSelection"); |
||||
svg.selectAll("*").remove(); |
||||
}, |
||||
Grid () { |
||||
|
||||
Array.prototype.multiIndexOf = function (el) { |
||||
var idxs = []; |
||||
for (var i = this.length - 1; i >= 0; i--) { |
||||
if (this[i] === el) { |
||||
idxs.unshift(i); |
||||
} |
||||
} |
||||
return idxs; |
||||
}; |
||||
|
||||
var svg = d3.select("#containerAll"); |
||||
svg.selectAll("*").remove(); |
||||
|
||||
var yValues = JSON.parse(this.GetResultsAll[6]) |
||||
var targetNames = JSON.parse(this.GetResultsAll[7]) |
||||
|
||||
var getIndices = [] |
||||
for (let i = 0; i < targetNames.length; i++) { |
||||
getIndices.push(yValues.multiIndexOf(targetNames[i])) |
||||
} |
||||
getIndices.reverse() |
||||
|
||||
var predictions = JSON.parse(this.GetResultsAll[12]) |
||||
var KNNPred = predictions[0] |
||||
var LRPred = predictions[1] |
||||
var PredAver = predictions[2] |
||||
|
||||
var dataAver = [] |
||||
var dataAverGetResults = [] |
||||
var dataKNN = [] |
||||
var dataKNNResults = [] |
||||
var dataLR = [] |
||||
var dataLRResults = [] |
||||
|
||||
var max = 0 |
||||
for (let i = 0; i < targetNames.length; i++) { |
||||
if (getIndices[targetNames[i]].length > max) { |
||||
max = getIndices[targetNames[i]].length |
||||
} |
||||
} |
||||
|
||||
var sqrtSize = Math.ceil(Math.sqrt(max)) |
||||
var size = sqrtSize * sqrtSize |
||||
|
||||
for (let i = 0; i < targetNames.length; i++) { |
||||
dataAver = []; |
||||
dataKNN = [] |
||||
dataLR = [] |
||||
getIndices[targetNames[i]].forEach(element => { |
||||
dataAver.push({ id: element, value: PredAver[element][targetNames[i]] }) |
||||
dataKNN.push({ id: element, value: KNNPred[element][targetNames[i]] }) |
||||
dataLR.push({ id: element, value: LRPred[element][targetNames[i]] }) |
||||
}); |
||||
for (let j = 0; j < size - getIndices[targetNames[i]].length; j++) { |
||||
dataAver.push({ id: null, value: 1.0 }) |
||||
dataKNN.push({ id: null, value: 1.0 }) |
||||
dataLR.push({ id: null, value: 1.0 }) |
||||
} |
||||
dataAverGetResults.push(dataAver) |
||||
dataKNNResults.push(dataKNN) |
||||
dataLRResults.push(dataLR) |
||||
} |
||||
dataAverGetResults.reverse() |
||||
dataKNNResults.reverse() |
||||
dataLRResults.reverse() |
||||
|
||||
var classArray = [] |
||||
this.StoreIndices = [] |
||||
for (let i = 0; i < dataAverGetResults.length; i++) { |
||||
dataAverGetResults[i].sort((a, b) => (a.value > b.value) ? 1 : -1) |
||||
var len = dataAverGetResults[i].length |
||||
var indices = new Array(len) |
||||
for (let j = 0; j < len; j++) { |
||||
indices[j] = dataAverGetResults[i][j].id; |
||||
} |
||||
this.StoreIndices.push(indices) |
||||
|
||||
dataKNNResults[i].sort(function(a, b){ |
||||
return indices.indexOf(a.id) - indices.indexOf(b.id) |
||||
}); |
||||
|
||||
dataLRResults[i].sort(function(a, b){ |
||||
return indices.indexOf(a.id) - indices.indexOf(b.id) |
||||
}); |
||||
|
||||
classArray.push(dataAverGetResults[i].concat(dataKNNResults[i], dataLRResults[i])); |
||||
} |
||||
|
||||
var classStore = [].concat.apply([], classArray); |
||||
|
||||
// === Set up canvas === // |
||||
|
||||
var width = 2500, |
||||
height = 125; |
||||
var colourScale; |
||||
|
||||
|
||||
var canvas = d3.select('#containerAll') |
||||
.append('canvas') |
||||
.attr('width', width) |
||||
.attr('height', height); |
||||
|
||||
var context = canvas.node().getContext('2d'); |
||||
|
||||
// === Bind data to custom elements === // |
||||
|
||||
var customBase = document.createElement('custom'); |
||||
var custom = d3.select(customBase); // this is our svg replacement |
||||
|
||||
// settings for a grid with 40 cells in a row and 2x5 cells in a group |
||||
var groupSpacing = 60; |
||||
var cellSpacing = 2; |
||||
var cellSize = Math.floor((width - 11 * groupSpacing) / (15.2*sqrtSize)) - cellSpacing; |
||||
|
||||
// === First call === // |
||||
databind(classStore, size, sqrtSize); // ...then update the databind function |
||||
|
||||
var t = d3.timer(function(elapsed) { |
||||
draw(); |
||||
if (elapsed > 300) t.stop(); |
||||
}); // start a timer that runs the draw function for 500 ms (this needs to be higher than the transition in the databind function) |
||||
|
||||
|
||||
// === Bind and draw functions === // |
||||
|
||||
function databind(data, size, sqrtSize) { |
||||
|
||||
|
||||
colourScale = d3.scaleSequential(d3.interpolateReds).domain([1, 0]) |
||||
|
||||
var join = custom.selectAll('custom.rect') |
||||
.data(data); |
||||
|
||||
var enterSel = join.enter() |
||||
.append('custom') |
||||
.attr('class', 'rect') |
||||
.attr('x', function(d, i) { |
||||
var x0 = Math.floor(i / size) % sqrtSize, x1 = Math.floor(i % sqrtSize); |
||||
return groupSpacing * x0 + (cellSpacing + cellSize) * (x1 + x0 * 10); |
||||
}) |
||||
.attr('y', function(d, i) { |
||||
var y0 = Math.floor(i / data.length), y1 = Math.floor(i % size / sqrtSize); |
||||
return groupSpacing * y0 + (cellSpacing + cellSize) * (y1 + y0 * 10); |
||||
}) |
||||
.attr('width', 0) |
||||
.attr('height', 0); |
||||
|
||||
join |
||||
.merge(enterSel) |
||||
.transition() |
||||
.attr('width', cellSize) |
||||
.attr('height', cellSize) |
||||
.attr('fillStyle', function(d) { return colourScale(d.value); }) |
||||
|
||||
var exitSel = join.exit() |
||||
.transition() |
||||
.attr('width', 0) |
||||
.attr('height', 0) |
||||
.remove(); |
||||
|
||||
} // databind() |
||||
|
||||
|
||||
// === Draw canvas === // |
||||
|
||||
function draw() { |
||||
|
||||
// clear canvas |
||||
|
||||
context.fillStyle = '#fff'; |
||||
context.fillRect(0, 0, width, height); |
||||
|
||||
|
||||
// draw each individual custom element with their properties |
||||
|
||||
var elements = custom.selectAll('custom.rect') // this is the same as the join variable, but used here to draw |
||||
|
||||
elements.each(function(d,i) { |
||||
|
||||
// for each virtual/custom element... |
||||
|
||||
var node = d3.select(this); |
||||
context.fillStyle = node.attr('fillStyle'); |
||||
context.fillRect(node.attr('x'), node.attr('y'), node.attr('width'), node.attr('height')) |
||||
|
||||
}); |
||||
|
||||
} // draw() |
||||
|
||||
}, |
||||
GridSelection () { |
||||
|
||||
Array.prototype.multiIndexOf = function (el) { |
||||
var idxs = []; |
||||
for (var i = this.length - 1; i >= 0; i--) { |
||||
if (this[i] === el) { |
||||
idxs.unshift(i); |
||||
} |
||||
} |
||||
return idxs; |
||||
}; |
||||
|
||||
var svg = d3.select("#containerSelection"); |
||||
svg.selectAll("*").remove(); |
||||
|
||||
var predictionsAll = JSON.parse(this.GetResultsSelection[12]) |
||||
|
||||
if (this.predictSelection.length != 0) { |
||||
var predictions = this.predictSelection |
||||
var KNNPred = predictions[0] |
||||
var LRPred = predictions[1] |
||||
var PredAver = predictions[2] |
||||
} else { |
||||
var KNNPred = predictionsAll[0] |
||||
var LRPred = predictionsAll[1] |
||||
var PredAver = predictionsAll[2] |
||||
} |
||||
var KNNPredAll = predictionsAll[0] |
||||
var LRPredAll = predictionsAll[1] |
||||
var PredAverAll = predictionsAll[2] |
||||
|
||||
var yValues = JSON.parse(this.GetResultsSelection[6]) |
||||
var targetNames = JSON.parse(this.GetResultsSelection[7]) |
||||
|
||||
var getIndices = [] |
||||
for (let i = 0; i < targetNames.length; i++) { |
||||
getIndices.push(yValues.multiIndexOf(targetNames[i])) |
||||
} |
||||
getIndices.reverse() |
||||
|
||||
var dataAver = [] |
||||
var dataAverGetResults = [] |
||||
var dataKNN = [] |
||||
var dataKNNResults = [] |
||||
var dataLR = [] |
||||
var dataLRResults = [] |
||||
|
||||
var max = 0 |
||||
for (let i = 0; i < targetNames.length; i++) { |
||||
if (getIndices[targetNames[i]].length > max) { |
||||
max = getIndices[targetNames[i]].length |
||||
} |
||||
} |
||||
|
||||
var sqrtSize = Math.ceil(Math.sqrt(max)) |
||||
var size = sqrtSize * sqrtSize |
||||
|
||||
for (let i = 0; i < targetNames.length; i++) { |
||||
dataAver = []; |
||||
dataKNN = [] |
||||
dataLR = [] |
||||
getIndices[targetNames[i]].forEach(element => { |
||||
dataAver.push({ id: element, value: PredAver[element][targetNames[i]] - PredAverAll[element][targetNames[i]] }) |
||||
dataKNN.push({ id: element, value: KNNPred[element][targetNames[i]] - KNNPredAll[element][targetNames[i]] }) |
||||
dataLR.push({ id: element, value: LRPred[element][targetNames[i]] - LRPredAll[element][targetNames[i]] }) |
||||
}); |
||||
for (let j = 0; j < size - getIndices[targetNames[i]].length; j++) { |
||||
dataAver.push({ id: null, value: 0 }) |
||||
dataKNN.push({ id: null, value: 0 }) |
||||
dataLR.push({ id: null, value: 0 }) |
||||
} |
||||
dataAverGetResults.push(dataAver) |
||||
dataKNNResults.push(dataKNN) |
||||
dataLRResults.push(dataLR) |
||||
} |
||||
dataAverGetResults.reverse() |
||||
dataKNNResults.reverse() |
||||
dataLRResults.reverse() |
||||
|
||||
var classArray = [] |
||||
|
||||
for (let i = 0; i < dataAverGetResults.length; i++) { |
||||
|
||||
var indices = this.StoreIndices[i] |
||||
dataAverGetResults[i].sort(function(a, b){ |
||||
return indices.indexOf(a.id) - indices.indexOf(b.id) |
||||
}); |
||||
|
||||
dataKNNResults[i].sort(function(a, b){ |
||||
return indices.indexOf(a.id) - indices.indexOf(b.id) |
||||
}); |
||||
|
||||
dataLRResults[i].sort(function(a, b){ |
||||
return indices.indexOf(a.id) - indices.indexOf(b.id) |
||||
}); |
||||
|
||||
classArray.push(dataAverGetResults[i].concat(dataKNNResults[i], dataLRResults[i])); |
||||
} |
||||
|
||||
var classStore = [].concat.apply([], classArray); |
||||
// === Set up canvas === // |
||||
|
||||
var width = 2500, |
||||
height = 125; |
||||
var colourScale; |
||||
|
||||
|
||||
var canvas = d3.select('#containerSelection') |
||||
.append('canvas') |
||||
.attr('width', width) |
||||
.attr('height', height); |
||||
|
||||
var context = canvas.node().getContext('2d'); |
||||
|
||||
// === Bind data to custom elements === // |
||||
|
||||
var customBase = document.createElement('custom'); |
||||
var custom = d3.select(customBase); // this is our svg replacement |
||||
|
||||
// settings for a grid with 40 cells in a row and 2x5 cells in a group |
||||
var groupSpacing = 60; |
||||
var cellSpacing = 2; |
||||
var cellSize = Math.floor((width - 11 * groupSpacing) / (15.2*sqrtSize)) - cellSpacing; |
||||
|
||||
// === First call === // |
||||
databind(classStore, size, sqrtSize); // ...then update the databind function |
||||
|
||||
var t = d3.timer(function(elapsed) { |
||||
draw(); |
||||
if (elapsed > 300) t.stop(); |
||||
}); // start a timer that runs the draw function for 500 ms (this needs to be higher than the transition in the databind function) |
||||
|
||||
|
||||
// === Bind and draw functions === // |
||||
|
||||
function databind(data, size, sqrtSize) { |
||||
|
||||
|
||||
colourScale = d3.scaleSequential(d3.interpolatePRGn).domain([-1, 1]) |
||||
|
||||
var join = custom.selectAll('custom.rect') |
||||
.data(data); |
||||
|
||||
var enterSel = join.enter() |
||||
.append('custom') |
||||
.attr('class', 'rect') |
||||
.attr('x', function(d, i) { |
||||
var x0 = Math.floor(i / size) % sqrtSize, x1 = Math.floor(i % sqrtSize); |
||||
return groupSpacing * x0 + (cellSpacing + cellSize) * (x1 + x0 * 10); |
||||
}) |
||||
.attr('y', function(d, i) { |
||||
var y0 = Math.floor(i / data.length), y1 = Math.floor(i % size / sqrtSize); |
||||
return groupSpacing * y0 + (cellSpacing + cellSize) * (y1 + y0 * 10); |
||||
}) |
||||
.attr('width', 0) |
||||
.attr('height', 0); |
||||
|
||||
join |
||||
.merge(enterSel) |
||||
.transition() |
||||
.attr('width', cellSize) |
||||
.attr('height', cellSize) |
||||
.attr('fillStyle', function(d) { return colourScale(d.value); }) |
||||
|
||||
var exitSel = join.exit() |
||||
.transition() |
||||
.attr('width', 0) |
||||
.attr('height', 0) |
||||
.remove(); |
||||
|
||||
} // databind() |
||||
|
||||
|
||||
// === Draw canvas === // |
||||
|
||||
function draw() { |
||||
|
||||
// clear canvas |
||||
|
||||
context.fillStyle = '#fff'; |
||||
context.fillRect(0, 0, width, height); |
||||
|
||||
|
||||
// draw each individual custom element with their properties |
||||
|
||||
var elements = custom.selectAll('custom.rect') // this is the same as the join variable, but used here to draw |
||||
|
||||
elements.each(function(d,i) { |
||||
|
||||
// for each virtual/custom element... |
||||
|
||||
var node = d3.select(this); |
||||
context.fillStyle = node.attr('fillStyle'); |
||||
context.fillRect(node.attr('x'), node.attr('y'), node.attr('width'), node.attr('height')) |
||||
|
||||
}); |
||||
|
||||
} // draw() |
||||
|
||||
}, |
||||
}, |
||||
mounted () { |
||||
EventBus.$on('emittedEventCallingGrid', data => { this.GetResultsAll = data; }) |
||||
EventBus.$on('emittedEventCallingGrid', this.Grid) |
||||
|
||||
EventBus.$on('emittedEventCallingGridSelection', data => { this.GetResultsSelection = data; }) |
||||
EventBus.$on('emittedEventCallingGridSelection', this.GridSelection) |
||||
|
||||
EventBus.$on('SendSelectedPointsToServerEvent', data => { this.predictSelection = data; }) |
||||
EventBus.$on('SendSelectedPointsToServerEvent', this.GridSelection) |
||||
|
||||
EventBus.$on('Responsive', data => { |
||||
this.responsiveWidthHeight = data}) |
||||
EventBus.$on('ResponsiveandChange', data => { |
||||
this.responsiveWidthHeight = data}) |
||||
|
||||
// reset the views |
||||
EventBus.$on('resetViews', this.reset) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style type="text/css"> |
||||
canvas { |
||||
border: 1px dotted #ccc; |
||||
} |
||||
</style> |
||||
@ -1,408 +0,0 @@ |
||||
<template> |
||||
<div id="LinePlot" style="min-height: 363px;"></div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as Plotly from 'plotly.js' |
||||
import { EventBus } from '../main.js' |
||||
|
||||
export default { |
||||
name: 'VotingResults', |
||||
data () { |
||||
return { |
||||
FinalResultsforLinePlot: 0, |
||||
NumberofExecutions: 0, |
||||
scoresMean: [], |
||||
scoresSTD: [], |
||||
scoresPositive: [], |
||||
scoresNegative: [], |
||||
scoresMean2: [], |
||||
scoresSTD2: [], |
||||
scoresPositive2: [], |
||||
scoresNegative2: [], |
||||
scoresMean3: [], |
||||
scoresSTD3: [], |
||||
scoresPositive3: [], |
||||
scoresNegative3: [], |
||||
scoresMean4: [], |
||||
scoresSTD4: [], |
||||
scoresPositive4: [], |
||||
scoresNegative4: [], |
||||
Stack_scoresMean: [], |
||||
Stack_scoresSTD: [], |
||||
Stack_scoresPositive: [], |
||||
Stack_scoresNegative: [], |
||||
Stack_scoresMean2: [], |
||||
Stack_scoresSTD2: [], |
||||
Stack_scoresPositive2: [], |
||||
Stack_scoresNegative2: [], |
||||
Stack_scoresMean3: [], |
||||
Stack_scoresSTD3: [], |
||||
Stack_scoresPositive3: [], |
||||
Stack_scoresNegative3: [], |
||||
Stack_scoresMean4: [], |
||||
Stack_scoresSTD4: [], |
||||
Stack_scoresPositive4: [], |
||||
Stack_scoresNegative4: [], |
||||
xaxis: [], |
||||
WH: [], |
||||
firstTime: 0 |
||||
} |
||||
}, |
||||
methods: { |
||||
reset () { |
||||
Plotly.purge('LinePlot') |
||||
}, |
||||
LinePlotView () { |
||||
this.NumberofExecutions ++ |
||||
this.xaxis.push(this.NumberofExecutions) |
||||
|
||||
// Under Exploration = Current |
||||
this.scoresMean.push((JSON.parse(this.FinalResultsforLinePlot[0])*100).toFixed(2)) |
||||
this.scoresSTD.push((JSON.parse(this.FinalResultsforLinePlot[1])*100).toFixed(2)) |
||||
|
||||
this.scoresPositive.push(parseFloat(this.scoresMean[this.scoresMean.length - 1]) + parseFloat(this.scoresSTD[this.scoresSTD.length - 1])) |
||||
this.scoresNegative.push(parseFloat(this.scoresMean[this.scoresMean.length - 1]) - parseFloat(this.scoresSTD[this.scoresSTD.length - 1])) |
||||
|
||||
this.scoresMean2.push((JSON.parse(this.FinalResultsforLinePlot[4])*100).toFixed(2)) |
||||
this.scoresSTD2.push((JSON.parse(this.FinalResultsforLinePlot[5])*100).toFixed(2)) |
||||
|
||||
this.scoresPositive2.push(parseFloat(this.scoresMean2[this.scoresMean2.length - 1]) + parseFloat(this.scoresSTD2[this.scoresSTD2.length - 1])) |
||||
this.scoresNegative2.push(parseFloat(this.scoresMean2[this.scoresMean2.length - 1]) - parseFloat(this.scoresSTD2[this.scoresSTD2.length - 1])) |
||||
|
||||
this.scoresMean3.push((JSON.parse(this.FinalResultsforLinePlot[8])*100).toFixed(2)) |
||||
this.scoresSTD3.push((JSON.parse(this.FinalResultsforLinePlot[9])*100).toFixed(2)) |
||||
|
||||
this.scoresPositive3.push(parseFloat(this.scoresMean3[this.scoresMean3.length - 1]) + parseFloat(this.scoresSTD3[this.scoresSTD3.length - 1])) |
||||
this.scoresNegative3.push(parseFloat(this.scoresMean3[this.scoresMean3.length - 1]) - parseFloat(this.scoresSTD3[this.scoresSTD3.length - 1])) |
||||
|
||||
this.scoresMean4.push((JSON.parse(this.FinalResultsforLinePlot[12])*100).toFixed(2)) |
||||
this.scoresSTD4.push((JSON.parse(this.FinalResultsforLinePlot[13])*100).toFixed(2)) |
||||
|
||||
this.scoresPositive4.push(parseFloat(this.scoresMean4[this.scoresMean4.length - 1]) + parseFloat(this.scoresSTD4[this.scoresSTD4.length - 1])) |
||||
this.scoresNegative4.push(parseFloat(this.scoresMean4[this.scoresMean4.length - 1]) - parseFloat(this.scoresSTD4[this.scoresSTD4.length - 1])) |
||||
|
||||
// Stack |
||||
|
||||
this.Stack_scoresMean.push((JSON.parse(this.FinalResultsforLinePlot[2])*100).toFixed(2)) |
||||
this.Stack_scoresSTD.push((JSON.parse(this.FinalResultsforLinePlot[3])*100).toFixed(2)) |
||||
|
||||
this.Stack_scoresPositive.push(parseFloat(this.Stack_scoresMean[this.Stack_scoresMean.length - 1]) + parseFloat(this.Stack_scoresSTD[this.Stack_scoresSTD.length - 1])) |
||||
this.Stack_scoresNegative.push(parseFloat(this.Stack_scoresMean[this.Stack_scoresMean.length - 1]) - parseFloat(this.Stack_scoresSTD[this.Stack_scoresSTD.length - 1])) |
||||
|
||||
this.Stack_scoresMean2.push((JSON.parse(this.FinalResultsforLinePlot[6])*100).toFixed(2)) |
||||
this.Stack_scoresSTD2.push((JSON.parse(this.FinalResultsforLinePlot[7])*100).toFixed(2)) |
||||
|
||||
this.Stack_scoresPositive2.push(parseFloat(this.Stack_scoresMean2[this.Stack_scoresMean2.length - 1]) + parseFloat(this.Stack_scoresSTD2[this.Stack_scoresSTD2.length - 1])) |
||||
this.Stack_scoresNegative2.push(parseFloat(this.Stack_scoresMean2[this.Stack_scoresMean2.length - 1]) - parseFloat(this.Stack_scoresSTD2[this.Stack_scoresSTD2.length - 1])) |
||||
|
||||
|
||||
this.Stack_scoresMean3.push((JSON.parse(this.FinalResultsforLinePlot[10])*100).toFixed(2)) |
||||
this.Stack_scoresSTD3.push((JSON.parse(this.FinalResultsforLinePlot[11])*100).toFixed(2)) |
||||
|
||||
this.Stack_scoresPositive3.push(parseFloat(this.Stack_scoresMean3[this.Stack_scoresMean3.length - 1]) + parseFloat(this.Stack_scoresSTD3[this.Stack_scoresSTD3.length - 1])) |
||||
this.Stack_scoresNegative3.push(parseFloat(this.Stack_scoresMean3[this.Stack_scoresMean3.length - 1]) - parseFloat(this.Stack_scoresSTD3[this.Stack_scoresSTD3.length - 1])) |
||||
|
||||
this.Stack_scoresMean4.push((JSON.parse(this.FinalResultsforLinePlot[14])*100).toFixed(2)) |
||||
this.Stack_scoresSTD4.push((JSON.parse(this.FinalResultsforLinePlot[15])*100).toFixed(2)) |
||||
|
||||
this.Stack_scoresPositive4.push(parseFloat(this.Stack_scoresMean4[this.Stack_scoresMean4.length - 1]) + parseFloat(this.Stack_scoresSTD4[this.Stack_scoresSTD4.length - 1])) |
||||
this.Stack_scoresNegative4.push(parseFloat(this.Stack_scoresMean4[this.Stack_scoresMean4.length - 1]) - parseFloat(this.Stack_scoresSTD4[this.Stack_scoresSTD4.length - 1])) |
||||
|
||||
var xaxisReversed = [] |
||||
xaxisReversed = this.xaxis.slice().reverse() |
||||
xaxisReversed = this.xaxis.concat(xaxisReversed) |
||||
|
||||
// fill in 'text' array for hover |
||||
var text = this.scoresSTD.map (function(value, i) { |
||||
return `STD: +/-${value}` |
||||
}) |
||||
|
||||
// Current |
||||
|
||||
var trace1 = { |
||||
x: this.xaxis, |
||||
y: this.scoresMean, |
||||
text: text, |
||||
line: {color: "rgb(55,126,184)"}, |
||||
mode: "lines+markers", |
||||
marker : { |
||||
symbol: 'circle' }, |
||||
name: "Active Accuracy", |
||||
type: "scatter" |
||||
} |
||||
|
||||
var trace2 = { |
||||
x: xaxisReversed, |
||||
y: this.scoresPositive.concat(this.scoresNegative), |
||||
text: '', |
||||
hoverinfo: 'text', |
||||
fill: "tozerox", |
||||
fillcolor: "rgba(55,126,184,0)", |
||||
line: {color: "transparent"}, |
||||
name: "Active Accuracy", |
||||
showlegend: false, |
||||
type: "scatter" |
||||
} |
||||
|
||||
var text = this.scoresSTD2.map (function(value, i) { |
||||
return `STD: +/-${value}` |
||||
}) |
||||
|
||||
var trace3 = { |
||||
x: this.xaxis, |
||||
y: this.scoresMean2, |
||||
text: text, |
||||
line: {color: "rgb(55,126,184)"}, |
||||
mode: "lines+markers", |
||||
marker : { |
||||
symbol: 'square' }, |
||||
name: "Active Precision", |
||||
type: "scatter" |
||||
} |
||||
|
||||
var trace4 = { |
||||
x: xaxisReversed, |
||||
y: this.scoresPositive2.concat(this.scoresNegative2), |
||||
text: '', |
||||
hoverinfo: 'text', |
||||
fill: "tozerox", |
||||
fillcolor: "rgba(55,126,184,0)", |
||||
line: {color: "transparent"}, |
||||
name: "Active Precision", |
||||
showlegend: false, |
||||
type: "scatter" |
||||
} |
||||
var text = this.scoresSTD3.map (function(value, i) { |
||||
return `STD: +/-${value}` |
||||
}) |
||||
var trace5 = { |
||||
x: this.xaxis, |
||||
y: this.scoresMean3, |
||||
text: text, |
||||
line: {color: "rgb(55,126,184)"}, |
||||
mode: "lines+markers", |
||||
marker : { |
||||
symbol: 'triangle-up' }, |
||||
name: "Active Recall", |
||||
type: "scatter" |
||||
} |
||||
|
||||
var trace6 = { |
||||
x: xaxisReversed, |
||||
y: this.scoresPositive3.concat(this.scoresNegative3), |
||||
text: '', |
||||
hoverinfo: 'text', |
||||
fill: "tozerox", |
||||
fillcolor: "rgba(55,126,184,0)", |
||||
line: {color: "transparent"}, |
||||
name: "Active Recall", |
||||
showlegend: false, |
||||
type: "scatter" |
||||
} |
||||
var text = this.scoresSTD4.map (function(value, i) { |
||||
return `STD: +/-${value}` |
||||
}) |
||||
var trace7 = { |
||||
x: this.xaxis, |
||||
y: this.scoresMean4, |
||||
text: text, |
||||
line: {color: "rgb(55,126,184)"}, |
||||
mode: "lines+markers", |
||||
marker : { |
||||
symbol: 'diamond' }, |
||||
name: "Active F1 Score", |
||||
type: "scatter" |
||||
} |
||||
|
||||
var trace8 = { |
||||
x: xaxisReversed, |
||||
y: this.scoresPositive4.concat(this.scoresNegative4), |
||||
text: '', |
||||
hoverinfo: 'text', |
||||
fill: "tozerox", |
||||
fillcolor: "rgba(55,126,184,0)", |
||||
line: {color: "transparent"}, |
||||
name: "Active F1 Score", |
||||
showlegend: false, |
||||
type: "scatter" |
||||
} |
||||
|
||||
// Stack |
||||
var text = this.Stack_scoresSTD.map (function(value, i) { |
||||
return `STD: +/-${value}` |
||||
}) |
||||
var trace9 = { |
||||
x: this.xaxis, |
||||
y: this.Stack_scoresMean, |
||||
text: text, |
||||
line: {color: "rgb(228,26,28)"}, |
||||
mode: "lines+markers", |
||||
marker : { |
||||
symbol: 'x' }, |
||||
name: "Stack Accuracy", |
||||
type: "scatter" |
||||
} |
||||
|
||||
var trace10 = { |
||||
x: xaxisReversed, |
||||
y: this.Stack_scoresPositive.concat(this.Stack_scoresNegative), |
||||
text: '', |
||||
hoverinfo: 'text', |
||||
fill: "tozerox", |
||||
fillcolor: "rgba(228,26,28,0)", |
||||
line: {color: "transparent"}, |
||||
name: "Stack Accuracy", |
||||
showlegend: false, |
||||
type: "scatter" |
||||
} |
||||
var text = this.Stack_scoresSTD2.map (function(value, i) { |
||||
return `STD: +/-${value}` |
||||
}) |
||||
var trace11 = { |
||||
x: this.xaxis, |
||||
y: this.Stack_scoresMean2, |
||||
text: text, |
||||
line: {color: "rgb(228,26,28)"}, |
||||
mode: "lines+markers", |
||||
marker : { |
||||
symbol: 'cross' }, |
||||
name: "Stack Precision", |
||||
type: "scatter" |
||||
} |
||||
|
||||
var trace12 = { |
||||
x: xaxisReversed, |
||||
y: this.Stack_scoresPositive2.concat(this.Stack_scoresNegative2), |
||||
text: '', |
||||
hoverinfo: 'text', |
||||
fill: "tozerox", |
||||
fillcolor: "rgba(228,26,28,0)", |
||||
line: {color: "transparent"}, |
||||
name: "Stack Precision", |
||||
showlegend: false, |
||||
type: "scatter" |
||||
} |
||||
var text = this.Stack_scoresSTD3.map (function(value, i) { |
||||
return `STD: +/-${value}` |
||||
}) |
||||
var trace13 = { |
||||
x: this.xaxis, |
||||
y: this.Stack_scoresMean3, |
||||
text: text, |
||||
line: {color: "rgb(228,26,28)"}, |
||||
mode: "lines+markers", |
||||
marker : { |
||||
symbol: 'triangle-down' }, |
||||
name: "Stack Recall", |
||||
type: "scatter" |
||||
} |
||||
|
||||
var trace14 = { |
||||
x: xaxisReversed, |
||||
y: this.Stack_scoresPositive3.concat(this.Stack_scoresNegative3), |
||||
text: '', |
||||
hoverinfo: 'text', |
||||
fill: "tozerox", |
||||
fillcolor: "rgba(228,26,28,0)", |
||||
line: {color: "transparent"}, |
||||
name: "Stack Recall", |
||||
showlegend: false, |
||||
type: "scatter" |
||||
} |
||||
var text = this.Stack_scoresSTD4.map (function(value, i) { |
||||
return `STD: +/-${value}` |
||||
}) |
||||
var trace15 = { |
||||
x: this.xaxis, |
||||
y: this.Stack_scoresMean4, |
||||
text: text, |
||||
line: {color: "rgb(228,26,28)"}, |
||||
mode: "lines+markers", |
||||
marker : { |
||||
symbol: 'hexagram' }, |
||||
name: "Stack F1 Score", |
||||
type: "scatter" |
||||
} |
||||
|
||||
var trace16 = { |
||||
x: xaxisReversed, |
||||
y: this.Stack_scoresPositive4.concat(this.Stack_scoresNegative4), |
||||
text: '', |
||||
hoverinfo: 'text', |
||||
fill: "tozerox", |
||||
fillcolor: "rgba(228,26,28,0)", |
||||
line: {color: "transparent"}, |
||||
name: "Stack F1 Score", |
||||
showlegend: false, |
||||
type: "scatter" |
||||
} |
||||
|
||||
const DataforLinePlot = [trace1, trace2, trace3, trace4, trace5, trace6, trace7, trace8, trace9, trace10, trace11, trace12, trace13, trace14, trace15, trace16] |
||||
|
||||
var width = this.WH[0]*3.18 // interactive visualization |
||||
var height = this.WH[1]*0.765 // interactive visualization |
||||
|
||||
var layout = { |
||||
font: { family: 'Helvetica', size: 14, color: '#000000' }, |
||||
paper_bgcolor: "rgb(255,255,255)", |
||||
plot_bgcolor: "rgb(229,229,229)", |
||||
xaxis: { |
||||
gridcolor: "rgb(255,255,255)", |
||||
title: 'Step of the Execution', |
||||
tickformat: '.0f', |
||||
range: [0, this.scoresMean.length + 2], |
||||
showgrid: true, |
||||
showline: false, |
||||
showticklabels: true, |
||||
tickcolor: "rgb(127,127,127)", |
||||
ticks: "outside", |
||||
zeroline: false |
||||
}, |
||||
yaxis: { |
||||
gridcolor: "rgb(255,255,255)", |
||||
title: '# Performance (%) #', |
||||
showgrid: true, |
||||
showline: false, |
||||
showticklabels: true, |
||||
tickcolor: "rgb(127,127,127)", |
||||
ticks: "outside", |
||||
zeroline: false |
||||
}, |
||||
autosize: false, |
||||
width: width, |
||||
height: height, |
||||
margin: { |
||||
l: 50, |
||||
r: 0, |
||||
b: 50, |
||||
t: 5, |
||||
pad: 0 |
||||
}, |
||||
} |
||||
var config = {displayModeBar: false, scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage'], responsive: true} |
||||
Plotly.newPlot('LinePlot', DataforLinePlot, layout, config) |
||||
|
||||
if (this.firstTime == 0) { |
||||
EventBus.$emit('emittedEventCallingReally') |
||||
this.firstTime = 1 |
||||
} |
||||
} |
||||
}, |
||||
mounted() { |
||||
EventBus.$on('updateFlagForFinalResults', data => { this.firstTime = data}) |
||||
|
||||
EventBus.$on('emittedEventCallingLinePlot', data => { |
||||
this.FinalResultsforLinePlot = data}) |
||||
EventBus.$on('emittedEventCallingLinePlot', this.LinePlotView) |
||||
|
||||
EventBus.$on('Responsive', data => { |
||||
this.WH = data}) |
||||
EventBus.$on('ResponsiveandChange', data => { |
||||
this.WH = data}) |
||||
|
||||
// reset the views |
||||
EventBus.$on('resetViews', this.reset) |
||||
} |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue