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/Algorithms.vue

252 lines
9.3 KiB

6 years ago
<template>
<div>
6 years ago
<div id="exploding_boxplot" class="exploding_boxplot" ref="myClickable"></div>
6 years ago
</div>
</template>
<script>
import { EventBus } from '../main.js'
import * as d3Base from 'd3'
import * as exploding_boxplot from 'd3_exploding_boxplot'
6 years ago
import 'd3_exploding_boxplot/src/d3_exploding_boxplot.css'
import $ from 'jquery'
6 years ago
// attach all d3 plugins to the d3 library
const d3 = Object.assign(d3Base)
export default {
name: 'Algorithms',
data () {
return {
6 years ago
PerformanceAllModels: '',
6 years ago
brushedAll: [],
6 years ago
brushedBoxPl: [],
previousColor: 0,
selectedAlgorithm: 0,
6 years ago
KNNModels: 576, //KNN models
WH: [],
parameters: [],
chart: ''
6 years ago
}
},
methods: {
boxplot () {
6 years ago
d3.selectAll("#exploding_boxplot > *").remove();
const PerformAlgor1 = JSON.parse(this.PerformanceAllModels[0])
6 years ago
const PerformAlgor2 = JSON.parse(this.PerformanceAllModels[2])
6 years ago
var algorithm1 = []
var algorithm2 = []
6 years ago
var parameters = []
for (var i = 0; i < Object.keys(PerformAlgor1['0']).length; i++) {
algorithm1.push({Performance: Object.values(PerformAlgor1['0'])[i]*100,Algorithm:'KNN',Model:'Model ' + i + '; Parameters '+JSON.stringify(Object.values(PerformAlgor1['params'])[i])+'; Performance '})
parameters.push(JSON.stringify(Object.values(PerformAlgor1['params'])[i]))
6 years ago
}
6 years ago
var temp = i
for (let j = 0; j < Object.keys(PerformAlgor2['0']).length; j++) {
temp = i + j
algorithm2.push({Performance: Object.values(PerformAlgor2['0'])[j]*100,Algorithm:'RF',Model:'Model ' + temp + '; Parameters '+JSON.stringify(Object.values(PerformAlgor2['params'])[j])+'; Performance '})
parameters.push(JSON.stringify(Object.values(PerformAlgor2['params'])[j]))
6 years ago
}
6 years ago
EventBus.$emit('ParametersAll', parameters)
6 years ago
var data = algorithm1.concat(algorithm2)
6 years ago
/*median.push(sum/Object.keys(PerformAlgor2['0']).length)
6 years ago
if (median[0] > median[1])
var data = algorithm1.concat(algorithm2)
else
var data = algorithm2.concat(algorithm1)*/
6 years ago
6 years ago
// chart(data,aes)
// aesthetic :
// y : point's value on y axis
// group : how to group data on x axis
// color : color of the point / boxplot
// label : displayed text in toolbox
6 years ago
this.chart = exploding_boxplot(data, {y:'Performance',group:'Algorithm',color:'Algorithm',label:'Model'})
6 years ago
6 years ago
this.chart.width(this.WH[0]*3)
this.chart.height(this.WH[1])
//call chart on a div
this.chart('#exploding_boxplot')
const previousColor = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f']
6 years ago
var el = document.getElementsByClassName('d3-exploding-boxplot boxcontent')
6 years ago
this.brushStatus = document.getElementsByClassName('extent')
6 years ago
el[0].onclick = function() {
6 years ago
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point KNN')
for (let i = 0; i < allPoints.length; i++) {
//if (modelsActive.indexOf(i) == -1) {
allPoints[i].style.fill = previousColor[0]
allPoints[i].style.opacity = '1.0'
//}
}
6 years ago
EventBus.$emit('PCPCall', 'KNN')
}
el[1].onclick = function() {
6 years ago
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point RF')
for (let i = 0; i < allPoints.length; i++) {
//if (modelsActive.indexOf(i) == -1) {
allPoints[i].style.fill = previousColor[1]
allPoints[i].style.opacity = '1.0'
//}
}
6 years ago
EventBus.$emit('PCPCall', 'RF')
}
6 years ago
const myObserver = new ResizeObserver(entries => {
EventBus.$emit('brusheAllOn')
});
var brushRect = document.querySelector('.extent');
myObserver.observe(brushRect);
},
brushActivationAll () {
// continue here and select the correct points.
console.log(this.chart.returnBrush())
6 years ago
},
brushed () {
6 years ago
if (this.selectedAlgorithm == 'KNN') {
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point KNN')
} else {
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point RF')
}
6 years ago
const previousColor = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f']
6 years ago
var modelsActive = []
for (let j = 0; j < this.brushedBoxPl.length; j++) {
modelsActive.push(this.brushedBoxPl[j].model)
}
for (let i = 0; i < allPoints.length; i++) {
if (this.selectedAlgorithm == 'KNN') {
allPoints[i].style.fill = previousColor[0]
} else {
allPoints[i].style.fill = previousColor[1]
}
6 years ago
}
6 years ago
if (modelsActive.length == 0) {
for (let i = 0; i < allPoints.length; i++) {
//if (modelsActive.indexOf(i) == -1) {
allPoints[i].style.fill = "#d3d3d3"
allPoints[i].style.opacity = '1.0'
//}
}
} else if (modelsActive.length == allPoints.length) {
for (let i = 0; i < allPoints.length; i++) {
if (this.selectedAlgorithm == 'KNN') {
allPoints[i].style.fill = previousColor[0]
allPoints[i].style.opacity = '1.0'
} else {
allPoints[i].style.fill = previousColor[1]
allPoints[i].style.opacity = '1.0'
}
}
} else {
for (let i = 0; i < allPoints.length; i++) {
allPoints[i].style.opacity = '1.0'
6 years ago
if (this.selectedAlgorithm == 'KNN') {
if (modelsActive.indexOf(i) == -1) {
allPoints[i].style.fill = "#d3d3d3"
allPoints[i].style.opacity = '0.4'
}
} else {
if (modelsActive.indexOf(i+this.KNNModels) == -1) {
allPoints[i].style.fill = "#d3d3d3"
allPoints[i].style.opacity = '0.4'
}
6 years ago
}
}
6 years ago
}
6 years ago
this.UpdateBarChart()
},
UpdateBarChart () {
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point')
var activeModels = []
var algorithmsSelected = []
var parameters = []
for (let i = 0; i < allPoints.length; i++) {
if (allPoints[i].style.fill != "rgb(211, 211, 211)") {
activeModels.push(allPoints[i].__data__.Model)
if (allPoints[i].__data__.Algorithm === 'KNN') {
algorithmsSelected.push('KNN')
}
else {
algorithmsSelected.push('RF')
}
}
}
if (activeModels.length == 0){
} else {
for (let i = 0; i<activeModels.length; i++) {
var array = activeModels[i].split(';')
var temp2 = array[1].split(' ')
parameters.push(temp2[2])
}
EventBus.$emit('ReturningAlgorithmsBar', algorithmsSelected)
EventBus.$emit('ReturningBrushedPointsParamsBar', parameters)
}
},
selectedPointsPerAlgorithm () {
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point')
var activeModels = []
var algorithmsSelected = []
var parameters = []
for (let i = 0; i < allPoints.length; i++) {
if (allPoints[i].style.fill != "rgb(211, 211, 211)") {
activeModels.push(allPoints[i].__data__.Model)
if (allPoints[i].__data__.Algorithm === 'KNN') {
algorithmsSelected.push('KNN')
}
else {
algorithmsSelected.push('RF')
}
}
}
if (activeModels.length == 0){
alert('No models selected, please, retry!')
} else {
for (let i = 0; i<activeModels.length; i++) {
var array = activeModels[i].split(';')
var temp2 = array[1].split(' ')
parameters.push(temp2[2])
}
EventBus.$emit('ReturningAlgorithms', algorithmsSelected)
EventBus.$emit('ReturningBrushedPointsParams', parameters)
}
6 years ago
},
previousBoxPlotState () {
var el = document.getElementsByClassName('d3-exploding-boxplot box')
if (document.getElementById('PCP').style.display == 'none') {
} else {
if (this.selectedAlgorithm == 'KNN') {
$(el)[0].dispatchEvent(new Event('click'))
} else if (this.selectedAlgorithm == 'RF') {
$(el)[2].dispatchEvent(new Event('click'))
} else {
}
6 years ago
}
}
},
mounted () {
6 years ago
EventBus.$on('emittedEventCallingModelBrushed', this.selectedPointsPerAlgorithm)
6 years ago
EventBus.$on('emittedEventCallingAllAlgorithms', data => {
this.PerformanceAllModels = data})
EventBus.$on('emittedEventCallingAllAlgorithms', this.boxplot)
6 years ago
EventBus.$on('emittedEventCallingBrushedBoxPlot', data => {
this.brushedBoxPl = data})
EventBus.$on('emittedEventCallingBrushedBoxPlot', this.brushed),
EventBus.$on('Responsive', data => {
this.WH = data})
EventBus.$on('ResponsiveandChange', data => {
this.WH = data})
EventBus.$on('ResponsiveandChange', this.boxplot)
EventBus.$on('ResponsiveandChange', this.previousBoxPlotState)
EventBus.$on('emittedEventCallingSelectedALgorithm', data => {
this.selectedAlgorithm = data})
6 years ago
EventBus.$on('brusheAllOn', this.brushActivationAll)
6 years ago
}
6 years ago
}
6 years ago
</script>