StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics https://doi.org/10.1109/TVCG.2020.3030352
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
StackGenVis/frontend/src/components/AlgorithmHyperParam.vue

98 lines
3.1 KiB

6 years ago
<template>
6 years ago
<div id="PCP" class="parcoords" style="height:200px"></div>
6 years ago
</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,
6 years ago
pc: 0,
KNNModels: 576 //KNN models
6 years ago
}
},
methods: {
5 years ago
reset () {
d3.selectAll("#PCP > *").remove();
},
6 years ago
PCPView () {
6 years ago
d3.selectAll("#PCP > *").remove();
if (this.selAlgorithm != '') {
var colors = ['#8dd3c7','#8da0cb']
6 years ago
var colorGiv = 0
var Combined = 0
if (this.selAlgorithm == 'KNN') {
6 years ago
Combined = JSON.parse(this.ModelsPerformance[1])
6 years ago
colorGiv = colors[0]
} else {
6 years ago
Combined = JSON.parse(this.ModelsPerformance[9])
6 years ago
colorGiv = colors[1]
}
6 years ago
var valuesPerf = Object.values(Combined['0'])
6 years ago
var ObjectsParams = Combined['params']
6 years ago
var newObjectsParams = []
6 years ago
var newObjectsParams2 = []
6 years ago
var ArrayCombined = []
var temp
for (var i = 0; i < valuesPerf.length; i++) {
if (this.selAlgorithm === 'KNN') {
// There is a problem here!
6 years ago
newObjectsParams.push({model: i,'perf_metrics': valuesPerf[i],'n_neighbors':ObjectsParams[i].n_neighbors,'metric':ObjectsParams[i].metric,'algorithm':ObjectsParams[i].algorithm,'weights':ObjectsParams[i].weights})
6 years ago
ArrayCombined[i] = newObjectsParams[i]
} else {
6 years ago
newObjectsParams2.push({model: this.KNNModels + i,'perf_metrics': valuesPerf[i],'n_estimators':ObjectsParams[i].n_estimators,'criterion':ObjectsParams[i].criterion})
ArrayCombined[i] = newObjectsParams2[i]
6 years ago
}
6 years ago
}
EventBus.$emit('AllAlModels', ArrayCombined.length)
6 years ago
this.pc = ParCoords()("#PCP")
.data(ArrayCombined)
.color(colorGiv)
6 years ago
.hideAxis(['model'])
6 years ago
.bundlingStrength(0) // set bundling strength
.smoothness(0)
.showControlPoints(false)
.render()
.brushMode('1D-axes')
6 years ago
.reorderable()
6 years ago
.interactive();
6 years ago
this.pc.on("brushend", function(d) {
EventBus.$emit('AllSelModels', d.length)
6 years ago
EventBus.$emit('UpdateBoxPlot', d)
});
6 years ago
}
6 years ago
},
sliders () {
6 years ago
},
6 years ago
6 years ago
clear () {
d3.selectAll("#PCP > *").remove();
6 years ago
},
6 years ago
},
mounted() {
6 years ago
EventBus.$on('ReturningBrushedPointsModels', this.brushed)
6 years ago
EventBus.$on('emittedEventCallingModelSelect', data => { this.selAlgorithm = data })
EventBus.$on('emittedEventCallingModel', data => { this.ModelsPerformance = data })
EventBus.$on('emittedEventCallingModel', this.PCPView)
6 years ago
EventBus.$on('ResponsiveandChange', this.PCPView)
6 years ago
EventBus.$on('emittedEventCallingModelClear', this.clear)
5 years ago
// reset view
EventBus.$on('resetViews', this.reset)
6 years ago
}
}
</script>