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.
95 lines
2.5 KiB
95 lines
2.5 KiB
<template>
|
|
<div id="PerMetricBar" class="PerMetricBar"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as Plotly from 'plotly.js'
|
|
import { EventBus } from '../main.js'
|
|
|
|
export default {
|
|
name: 'PerMetricsBarChart',
|
|
data () {
|
|
return {
|
|
barchartmetrics: '',
|
|
WH: [],
|
|
SelBarChartMetrics: []
|
|
}
|
|
},
|
|
methods: {
|
|
LineBar () {
|
|
Plotly.purge('PerMetricBar')
|
|
|
|
var metricsPerModel = JSON.parse(this.barchartmetrics[9])
|
|
var metricsPerModelSel = []
|
|
if (this.SelBarChartMetrics.length == 0) {
|
|
metricsPerModelSel = metricsPerModel
|
|
} else {
|
|
metricsPerModelSel = this.SelBarChartMetrics
|
|
}
|
|
var width = this.WH[0]*3 // interactive visualization
|
|
var height = this.WH[1]/2 // interactive visualization
|
|
var trace1 = {
|
|
x: ['Acc','F1s','Pre','Rec','Jac'],
|
|
y: metricsPerModel,
|
|
name: 'Projection average',
|
|
type: 'bar',
|
|
marker: {
|
|
color: 'rgb(0,0,0)'
|
|
}
|
|
};
|
|
var trace2 = {
|
|
x: ['Acc','F1s','Pre','Rec','Jac'],
|
|
y: metricsPerModelSel,
|
|
name: 'Selected points',
|
|
type: 'bar',
|
|
marker: {
|
|
color: 'rgb(211,211,211)'
|
|
}
|
|
};
|
|
var data = [trace1, trace2];
|
|
var layout = {
|
|
barmode: 'group',autosize: false,
|
|
width: width,
|
|
height: height,
|
|
margin: {
|
|
l: 50,
|
|
r: 30,
|
|
b: 30,
|
|
t: 5,
|
|
pad: 4
|
|
},
|
|
xaxis: {
|
|
title: 'Performance Metrics',
|
|
titlefont: {
|
|
size: 12,
|
|
color: 'black'
|
|
}},
|
|
yaxis: {
|
|
title: 'Performance',
|
|
titlefont: {
|
|
size: 12,
|
|
color: 'black'
|
|
}}};
|
|
|
|
Plotly.newPlot('PerMetricBar', data, layout, {displayModeBar:false}, {staticPlot: true});
|
|
},
|
|
reset () {
|
|
Plotly.purge('PerMetricBar')
|
|
}
|
|
},
|
|
mounted () {
|
|
EventBus.$on('InitializeMetricsBarChart', data => {this.barchartmetrics = data;})
|
|
EventBus.$on('InitializeMetricsBarChart', this.LineBar)
|
|
EventBus.$on('Responsive', data => {
|
|
this.WH = data})
|
|
EventBus.$on('ResponsiveandChange', data => {
|
|
this.WH = data})
|
|
EventBus.$on('UpdateBarChartperMetric', data => {
|
|
this.SelBarChartMetrics = data})
|
|
EventBus.$on('UpdateBarChartperMetric', this.LineBar)
|
|
|
|
// reset view
|
|
EventBus.$on('resetViews', this.reset)
|
|
}
|
|
}
|
|
</script> |