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

154 lines
5.6 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 interact from 'interactjs'
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: '',
brushedBoxPl: [],
previousColor: 0,
selectedAlgorithm: 0,
WH: []
6 years ago
}
},
methods: {
boxplot () {
6 years ago
d3.selectAll("#exploding_boxplot > *").remove();
6 years ago
//generate random data
6 years ago
const PerformAlgor1 = JSON.parse(this.PerformanceAllModels[0])
const PerformAlgor2 = JSON.parse(this.PerformanceAllModels[1])
var algorithm1 = []
var algorithm2 = []
var median = []
var sum = 0
for (let i = 0; i < Object.keys(PerformAlgor1.mean_test_score).length; i++) {
algorithm1.push({Accuracy: Object.values(PerformAlgor1.mean_test_score)[i]*100,Algorithm:'KNN',Model:'Model ' + i + ', Accuracy '})
sum = sum + Object.values(PerformAlgor1.mean_test_score)[i]*100
}
median.push(sum/Object.keys(PerformAlgor1.mean_test_score).length)
sum = 0
for (let i = 0; i < Object.keys(PerformAlgor2.mean_test_score).length; i++) {
algorithm2.push({Accuracy: Object.values(PerformAlgor2.mean_test_score)[i]*100,Algorithm:'RF',Model:'Model ' + i + ', Accuracy '})
sum = sum + Object.values(PerformAlgor1.mean_test_score)[i]*100
}
6 years ago
var data = algorithm1.concat(algorithm2)
6 years ago
/*median.push(sum/Object.keys(PerformAlgor2.mean_test_score).length)
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
var chart = exploding_boxplot(data, {y:'Accuracy',group:'Algorithm',color:'Algorithm',label:'Model'})
chart.width(this.WH[0]*3)
chart.height(this.WH[1])
//call chart on a div
chart('#exploding_boxplot')
6 years ago
6 years ago
var el = document.getElementsByClassName('d3-exploding-boxplot boxcontent')
var doubleClick = document.getElementsByClassName('exploding_boxplot')
doubleClick[0].ondblclick = function(d) {
EventBus.$emit('PCPCallDB')
}
el[0].onclick = function() {
EventBus.$emit('PCPCall', 'KNN')
}
el[1].onclick = function() {
EventBus.$emit('PCPCall', 'RF')
}
},
brushed () {
var allPoints = document.getElementsByClassName("d3-exploding-boxplot point")
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'
if (modelsActive.indexOf(i) == -1) {
allPoints[i].style.fill = "#d3d3d3"
allPoints[i].style.opacity = '0.4'
}
}
6 years ago
}
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 () {
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
}
</script>