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

150 lines
4.7 KiB

6 years ago
<template>
<div id="OverviewPredPlotly" class="OverviewPredPlotly"></div>
</template>
<script>
import * as Plotly from 'plotly.js'
import { EventBus } from '../main.js'
export default {
name: 'PredictionsSpace',
data () {
return {
PredictionsData: '',
UpdatedData: '',
5 years ago
colorsValues: ['#6a3d9a','#b15928','#e31a1c'],
5 years ago
responsiveWidthHeight: []
6 years ago
}
},
methods: {
ScatterPlotDataView () {
5 years ago
// responsive visualization
var width = this.responsiveWidthHeight[0]*3
var height = this.responsiveWidthHeight[1]*1.48
var target_names = JSON.parse(this.PredictionsData[4])
const XandYCoordinates = JSON.parse(this.PredictionsData[8])
const DataSet = JSON.parse(this.PredictionsData[14])
const DataSetY = JSON.parse(this.PredictionsData[15])
const originalDataLabels = JSON.parse(this.PredictionsData[16])
var DataSetParse = JSON.parse(DataSet)
var result = XandYCoordinates.reduce(function(r, a) {
a.forEach(function(s, i) {
var key = i === 0 ? 'Xax' : 'Yax';
r[key] || (r[key] = []); // if key not found on result object, add the key with empty array as the value
r[key].push(s);
})
return r;
}, {})
var IDs = [];
for (let i = 0; i < result.Xax.length; i++) {
IDs.push(i)
}
result.ID = IDs
var traces = []
for (let i = 0; i < target_names.length; i++) {
const aux_X = result.Xax.filter((item, index) => originalDataLabels[index] == target_names[i]);
const aux_Y = result.Yax.filter((item, index) => originalDataLabels[index] == target_names[i]);
const aux_ID = result.ID.filter((item, index) => originalDataLabels[index] == target_names[i]);
var Text = aux_ID.map((item, index) => {
let popup = 'Data Point ID: ' + item + '; Details: ' + JSON.stringify(DataSetParse[item])
return popup;
});
traces.push({
x: aux_X,
y: aux_Y,
mode: 'markers',
name: target_names[i],
5 years ago
marker: { color: this.colorsValues[i], line: { color: 'rgb(0, 0, 0)', width: 2 }, opacity: 1, size: 12 },
hovertemplate:
"<b>%{text}</b><br><br>" +
"<extra></extra>",
5 years ago
text: Text,
})
5 years ago
}
5 years ago
const layout = {
title: 'Predictions Space Projection (t-SNE)',
xaxis: {
visible: false
},
yaxis: {
visible: false
},
dragmode: 'lasso',
hovermode: "closest",
autosize: true,
width: width,
height: height,
}
5 years ago
var config = {scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage', 'toggleSpikelines', 'autoScale2d', 'hoverClosestGl2d','hoverCompareCartesian','select2d','hoverClosestCartesian','zoomIn2d','zoomOut2d','zoom2d'], responsive: true}
Plotly.newPlot('OverviewPredPlotly', traces, layout, config)
this.selectedPointsOverview()
},
UpdateScatterPlot () {
const XandYCoordinates = JSON.parse(this.UpdatedData[0])
Plotly.animate('OverviewPredPlotly', {
data: [
{x: XandYCoordinates[0], y: XandYCoordinates[1]}
],
traces: [0],
layout: {}
}, {
transition: {
duration: 1000,
easing: 'cubic-in-out'
},
frame: {
duration: 1000
}
})
this.selectedPointsOverview()
},
selectedPointsOverview () {
const OverviewPlotly = document.getElementById('OverviewPredPlotly')
OverviewPlotly.on('plotly_selected', function (evt) {
if (typeof evt !== 'undefined') {
const DataPoints = []
for (let i = 0; evt.points.length; i++) {
if (evt.points[i] === undefined) {
break
} else {
const OnlyId = evt.points[i].text.split(' ')
DataPoints.push(OnlyId[3])
}
}
if (DataPoints != '') {
EventBus.$emit('SendSelectedDataPointsToServerEvent', DataPoints)
} else {
EventBus.$emit('SendSelectedDataPointsToServerEvent', '')
}
}
})
},
6 years ago
},
mounted() {
EventBus.$on('updatePredictionsSpace', data => { this.UpdatedData = data })
EventBus.$on('updatePredictionsSpace', this.UpdateScatterPlot)
6 years ago
EventBus.$on('emittedEventCallingPredictionsSpacePlotView', data => {
this.PredictionsData = data})
EventBus.$on('emittedEventCallingPredictionsSpacePlotView', this.ScatterPlotDataView)
EventBus.$on('Responsive', data => {
this.WH = data})
EventBus.$on('ResponsiveandChange', data => {
this.WH = data})
6 years ago
}
}
</script>