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.
104 lines
3.0 KiB
104 lines
3.0 KiB
<template>
|
|
<div id="LinePlot" class="LinePlot"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as Plotly from 'plotly.js'
|
|
import { EventBus } from '../main.js'
|
|
|
|
export default {
|
|
name: 'FinalResultsLinePlot',
|
|
data () {
|
|
return {
|
|
FinalResultsforLinePlot: 0,
|
|
NumberofExecutions: 0,
|
|
scoresMean: [],
|
|
scoresSTD: [],
|
|
scoresPositive : [],
|
|
scoresNegative: [],
|
|
xaxis: []
|
|
}
|
|
},
|
|
methods: {
|
|
LinePlotView () {
|
|
this.NumberofExecutions ++
|
|
this.xaxis.push(this.NumberofExecutions)
|
|
|
|
this.scoresMean.push((JSON.parse(this.FinalResultsforLinePlot[0])*100).toFixed(1))
|
|
this.scoresSTD.push((JSON.parse(this.FinalResultsforLinePlot[1])*100).toFixed(1))
|
|
|
|
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]))
|
|
|
|
|
|
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}`
|
|
})
|
|
|
|
var trace1 = {
|
|
x: this.xaxis,
|
|
y: this.scoresMean,
|
|
text: text,
|
|
line: {color: "rgb(0,100,80)"},
|
|
mode: "lines+markers",
|
|
name: "Accuracy",
|
|
type: "scatter"
|
|
}
|
|
|
|
var trace2 = {
|
|
x: xaxisReversed,
|
|
y: this.scoresPositive.concat(this.scoresNegative),
|
|
text: '',
|
|
hoverinfo: 'text',
|
|
fill: "tozerox",
|
|
fillcolor: "rgba(0,100,80,0.2)",
|
|
line: {color: "transparent"},
|
|
name: "Accuracy",
|
|
showlegend: false,
|
|
type: "scatter"
|
|
}
|
|
|
|
const DataforLinePlot = [trace1, trace2]
|
|
const layout = {
|
|
title: 'Stack Ensemble Learning Score',
|
|
paper_bgcolor: "rgb(255,255,255)",
|
|
plot_bgcolor: "rgb(229,229,229)",
|
|
xaxis: {
|
|
gridcolor: "rgb(255,255,255)",
|
|
title: 'Number of 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: 'Accuracy (%)',
|
|
range: [0, 100],
|
|
showgrid: true,
|
|
showline: false,
|
|
showticklabels: true,
|
|
tickcolor: "rgb(127,127,127)",
|
|
ticks: "outside",
|
|
zeroline: false
|
|
}
|
|
}
|
|
Plotly.newPlot('LinePlot', DataforLinePlot, layout, {showSendToCloud: true, responsive: true})
|
|
}
|
|
},
|
|
mounted() {
|
|
EventBus.$on('emittedEventCallingLinePlot', data => {
|
|
this.FinalResultsforLinePlot = data})
|
|
EventBus.$on('emittedEventCallingLinePlot', this.LinePlotView)
|
|
}
|
|
}
|
|
</script> |