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