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

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>