master
parent 42c8d9c4e7
commit 74151a6094
  1. BIN
      __pycache__/run.cpython-37.pyc
  2. 2
      frontend/index.html
  3. 86
      frontend/src/components/Algorithms.vue
  4. 11
      frontend/src/components/BarChart.vue
  5. 53
      frontend/src/components/CurrentStack.vue
  6. 42
      frontend/src/components/Main.vue
  7. 15
      frontend/src/components/PerMetricBarChart.vue
  8. 53
      frontend/src/components/ScatterPlot.vue
  9. 2
      run.py

Binary file not shown.

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>istacking</title> <title>StackVis</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

@ -23,9 +23,12 @@ export default {
brushedBoxPl: [], brushedBoxPl: [],
previousColor: 0, previousColor: 0,
selectedAlgorithm: 0, selectedAlgorithm: 0,
AllAlgorithms: ['KNN','RF'],
KNNModels: 576, //KNN models KNNModels: 576, //KNN models
WH: [], WH: [],
parameters: [], parameters: [],
algorithm1: [],
algorithm2: [],
chart: '' chart: ''
} }
}, },
@ -34,28 +37,22 @@ export default {
d3.selectAll("#exploding_boxplot > *").remove(); d3.selectAll("#exploding_boxplot > *").remove();
const PerformAlgor1 = JSON.parse(this.PerformanceAllModels[0]) const PerformAlgor1 = JSON.parse(this.PerformanceAllModels[0])
const PerformAlgor2 = JSON.parse(this.PerformanceAllModels[2]) const PerformAlgor2 = JSON.parse(this.PerformanceAllModels[2])
var algorithm1 = [] this.algorithm1 = []
var algorithm2 = [] this.algorithm2 = []
var parameters = [] var parameters = []
for (var i = 0; i < Object.keys(PerformAlgor1['0']).length; i++) { for (var i = 0; i < Object.keys(PerformAlgor1['0']).length; i++) {
algorithm1.push({Performance: Object.values(PerformAlgor1['0'])[i]*100,Algorithm:'KNN',Model:'Model ' + i + '; Parameters '+JSON.stringify(Object.values(PerformAlgor1['params'])[i])+'; Performance '}) this.algorithm1.push({Performance: Object.values(PerformAlgor1['0'])[i]*100,Algorithm:'KNN',Model:'Model ' + i + '; Parameters '+JSON.stringify(Object.values(PerformAlgor1['params'])[i])+'; Performance ',ModelID:i})
parameters.push(JSON.stringify(Object.values(PerformAlgor1['params'])[i])) parameters.push(JSON.stringify(Object.values(PerformAlgor1['params'])[i]))
} }
var temp = i var temp = i
for (let j = 0; j < Object.keys(PerformAlgor2['0']).length; j++) { for (let j = 0; j < Object.keys(PerformAlgor2['0']).length; j++) {
temp = i + j temp = i + j
algorithm2.push({Performance: Object.values(PerformAlgor2['0'])[j]*100,Algorithm:'RF',Model:'Model ' + temp + '; Parameters '+JSON.stringify(Object.values(PerformAlgor2['params'])[j])+'; Performance '}) this.algorithm2.push({Performance: Object.values(PerformAlgor2['0'])[j]*100,Algorithm:'RF',Model:'Model ' + temp + '; Parameters '+JSON.stringify(Object.values(PerformAlgor2['params'])[j])+'; Performance ',ModelID:temp})
parameters.push(JSON.stringify(Object.values(PerformAlgor2['params'])[j])) parameters.push(JSON.stringify(Object.values(PerformAlgor2['params'])[j]))
} }
EventBus.$emit('ParametersAll', parameters) EventBus.$emit('ParametersAll', parameters)
var data = algorithm1.concat(algorithm2) var data = this.algorithm1.concat(this.algorithm2)
/*median.push(sum/Object.keys(PerformAlgor2['0']).length)
if (median[0] > median[1])
var data = algorithm1.concat(algorithm2)
else
var data = algorithm2.concat(algorithm1)*/
// chart(data,aes)
// aesthetic : // aesthetic :
// y : point's value on y axis // y : point's value on y axis
// group : how to group data on x axis // group : how to group data on x axis
@ -104,7 +101,70 @@ export default {
}, },
brushActivationAll () { brushActivationAll () {
// continue here and select the correct points. // continue here and select the correct points.
console.log(this.chart.returnBrush()) var limiter = this.chart.returnBrush()
var algorithm = []
const previousColor = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f']
var modelsActive = []
for (var j = 0; j < this.AllAlgorithms.length; j++) {
algorithm = []
modelsActive = []
if (this.AllAlgorithms[j] === 'KNN') {
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point KNN')
algorithm = this.algorithm1
} else {
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point RF')
algorithm = this.algorithm2
}
for (let k = 0; k < allPoints.length; k++) {
if (algorithm[k].Performance < limiter[0] && algorithm[k].Performance > limiter[1]) {
modelsActive.push(algorithm[k].ModelID)
}
}
for (let i = 0; i < allPoints.length; i++) {
if (this.AllAlgorithms[j] === 'KNN') {
allPoints[i].style.fill = previousColor[0]
} else {
allPoints[i].style.fill = previousColor[1]
}
}
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.AllAlgorithms[j] === '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 (this.AllAlgorithms[j] === 'KNN') {
if (modelsActive.indexOf(i) == -1) {
allPoints[i].style.fill = "#d3d3d3"
allPoints[i].style.opacity = '0.4'
}
} else {
if (modelsActive.indexOf(i+this.KNNModels) == -1) {
allPoints[i].style.fill = "#d3d3d3"
allPoints[i].style.opacity = '0.4'
}
}
}
}
}
this.UpdateBarChart()
}, },
brushed () { brushed () {
if (this.selectedAlgorithm == 'KNN') { if (this.selectedAlgorithm == 'KNN') {

@ -85,9 +85,9 @@ export default {
} }
}*/ }*/
var layout = { var layout = {
autosize: false, autosize: true,
barmode: 'group', barmode: 'group',
width: 550, width: 650,
height: 400, height: 400,
xaxis: { xaxis: {
title: 'Algorithm', title: 'Algorithm',
@ -132,6 +132,13 @@ export default {
}, },
exponentformat: 'e', exponentformat: 'e',
showexponent: 'all' showexponent: 'all'
},
margin: {
l: 40,
r: 0,
b: 40,
t: 25,
pad: 0
} }
} }
/*for (let j = 0; j < ClassNames.length; j++) { /*for (let j = 0; j < ClassNames.length; j++) {

@ -1,53 +0,0 @@
<template>
<div>
<div id="CircleChart"></div>
</div>
</template>
<script>
import { EventBus } from '../main.js'
import CirclePack from 'circlepack-chart';
export default {
name: 'CurrentStack',
data () {
return {
}
},
methods: {
stack () {
console.log('mpike')
const CHILDREN_PROB_DECAY = 1; // per level
const MAX_CHILDREN = 1000;
const MAX_VALUE = 100;
function genNode(name='root', probOfChildren=1) {
if (Math.random() < probOfChildren) {
return {
name,
children: [...Array(Math.round(Math.random() * MAX_CHILDREN))]
.map((_, i) => genNode(i, probOfChildren - CHILDREN_PROB_DECAY))
}
} else {
return {
name,
value: Math.round(Math.random() * MAX_VALUE)
}
}
}
const color = d3.scaleOrdinal(d3.schemePaired);
CirclePack()
.data(genNode())
.sort((a, b) => a.value - b.value) // sort ascending by size
.color(d => color(d.name))
.showLabels(false)
.excludeRoot(true)
.tooltipContent((d, node) => `Size: <i>${node.value}</i>`)
(document.getElementById('CircleChart'));
},
mount () {
this.stack()
}
}
}
</script>

@ -15,25 +15,14 @@
</mdb-card-body> </mdb-card-body>
</mdb-card> </mdb-card>
</b-col> </b-col>
<b-col cols="3">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Data Space Visualization</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center">
<DataSpace/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="3"> <b-col cols="3">
<mdb-card> <mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Models Space Visualization <mdb-card-header color="primary-color" tag="h5" class="text-center">Models Space Visualization
[Sel.:{{OverSelLength}}/All:{{OverAllLength}}]
<select id="selectBarChart" @change="selectVisualRepresentation()"> <select id="selectBarChart" @change="selectVisualRepresentation()">
<option value="bar">Bar Chart</option> <option value="mds" selected>MDS Projection</option>
<option value="line">Line Plot</option> <option value="tsne">t-SNE Projection</option>
<option value="diffline">Difference Line Plot</option>
</select> </select>
[Sel.:{{OverSelLength}}/All:{{OverAllLength}}]
</mdb-card-header> </mdb-card-header>
<mdb-card-body> <mdb-card-body>
<ScatterPlot/> <ScatterPlot/>
@ -52,6 +41,16 @@
</mdb-card-body> </mdb-card-body>
</mdb-card> </mdb-card>
</b-col> </b-col>
<b-col cols="3">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Data Space Visualization</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center">
<DataSpace/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
</b-row> </b-row>
<b-row class="mb-3 mt-3"> <b-row class="mb-3 mt-3">
<b-col cols="3"> <b-col cols="3">
@ -101,22 +100,14 @@
</mdb-card-body> </mdb-card-body>
</mdb-card> </mdb-card>
</b-col> </b-col>
<b-col cols="6"> <b-col cols="9">
<mdb-card> <mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Current Stacking Ensemble</mdb-card-header> <mdb-card-header color="primary-color" tag="h5" class="text-center">Current Stacking Ensemble and Provenance Visualization</mdb-card-header>
<mdb-card-body> <mdb-card-body>
<Provenance/> <Provenance/>
</mdb-card-body> </mdb-card-body>
</mdb-card> </mdb-card>
</b-col> </b-col>
<b-col cols="3">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Provenance Visualization</mdb-card-header>
<mdb-card-body>
<CurrentStack/>
</mdb-card-body>
</mdb-card>
</b-col>
</b-row> </b-row>
</b-container> </b-container>
</div> </div>
@ -139,7 +130,6 @@ import BarChart from './BarChart.vue'
import Heatmap from './Heatmap.vue' import Heatmap from './Heatmap.vue'
import ToggleSelection from './ToggleSelection.vue' import ToggleSelection from './ToggleSelection.vue'
import FinalResultsLinePlot from './FinalResultsLinePlot.vue' import FinalResultsLinePlot from './FinalResultsLinePlot.vue'
import CurrentStack from './CurrentStack.vue'
import Provenance from './Provenance.vue' import Provenance from './Provenance.vue'
import axios from 'axios' import axios from 'axios'
import { loadProgressBar } from 'axios-progress-bar' import { loadProgressBar } from 'axios-progress-bar'
@ -171,7 +161,6 @@ export default Vue.extend({
Heatmap, Heatmap,
ToggleSelection, ToggleSelection,
Provenance, Provenance,
CurrentStack,
FinalResultsLinePlot, FinalResultsLinePlot,
mdbCard, mdbCard,
mdbCardBody, mdbCardBody,
@ -216,6 +205,7 @@ export default Vue.extend({
selectVisualRepresentation () { selectVisualRepresentation () {
const representationSelectionDocum = document.getElementById('selectBarChart') const representationSelectionDocum = document.getElementById('selectBarChart')
this.representationSelection = representationSelectionDocum.options[representationSelectionDocum.selectedIndex].value this.representationSelection = representationSelectionDocum.options[representationSelectionDocum.selectedIndex].value
console.log(this.representationSelection)
EventBus.$emit('RepresentationSelection', this.representationSelection) EventBus.$emit('RepresentationSelection', this.representationSelection)
}, },
getCollection () { getCollection () {

@ -10,8 +10,7 @@ export default {
name: 'PerMetricsBarChart', name: 'PerMetricsBarChart',
data () { data () {
return { return {
barchartmetrics: '', barchartmetrics: ''
representationDefault: 'bar'
} }
}, },
methods: { methods: {
@ -19,7 +18,7 @@ export default {
var metricsPerModel = JSON.parse(this.barchartmetrics[9]) var metricsPerModel = JSON.parse(this.barchartmetrics[9])
var vh = 80 var vh = 80
if (this.representationDefault === 'bar'){ /*if (this.representationDefault === 'bar'){
var type = 'bar'; var type = 'bar';
} else if (this.representationDefault === 'line'){ } else if (this.representationDefault === 'line'){
var type = 'line'; var type = 'line';
@ -29,9 +28,9 @@ export default {
var difference = []; var difference = [];
for (var i=0; i<metricsPerModel.length; i++){ for (var i=0; i<metricsPerModel.length; i++){
difference.push(metricsPerModel[i] - metricsPerModel[i]); difference.push(metricsPerModel[i] - metricsPerModel[i]);
} }*/
if (type == 'difference'){ /*if (type == 'difference'){
var trace = { var trace = {
x: kValuesLegend, x: kValuesLegend,
y: difference, y: difference,
@ -69,7 +68,7 @@ export default {
}}}; }}};
Plotly.newPlot('PerMetricBar', data, layout, {displayModeBar:false}, {staticPlot: true}); Plotly.newPlot('PerMetricBar', data, layout, {displayModeBar:false}, {staticPlot: true});
} else{ } else{*/
var trace1 = { var trace1 = {
x: ['Acc','F1s','Pre','Rec','Jac'], x: ['Acc','F1s','Pre','Rec','Jac'],
y: metricsPerModel, y: metricsPerModel,
@ -114,14 +113,12 @@ export default {
}}}; }}};
Plotly.newPlot('PerMetricBar', data, layout, {displayModeBar:false}, {staticPlot: true}); Plotly.newPlot('PerMetricBar', data, layout, {displayModeBar:false}, {staticPlot: true});
} //}
} }
}, },
mounted () { mounted () {
EventBus.$on('InitializeMetricsBarChart', data => {this.barchartmetrics = data;}) EventBus.$on('InitializeMetricsBarChart', data => {this.barchartmetrics = data;})
EventBus.$on('InitializeMetricsBarChart', this.LineBar) EventBus.$on('InitializeMetricsBarChart', this.LineBar)
EventBus.$on('RepresentationSelection', this.LineBar)
EventBus.$on('RepresentationSelection', data => {this.representationDefault = data})
} }
} }
</script> </script>

@ -16,7 +16,7 @@ export default {
data () { data () {
return { return {
ScatterPlotResults: '', ScatterPlotResults: '',
representationDefault: 'MDS', representationDef: 'MDS',
colorsforOver: [], colorsforOver: [],
brushedBox : [], brushedBox : [],
max: 0, max: 0,
@ -56,10 +56,10 @@ export default {
Plotly.purge('OverviewPlotly') Plotly.purge('OverviewPlotly')
var colorsforScatterPlot = JSON.parse(this.ScatterPlotResults[0]) var colorsforScatterPlot = JSON.parse(this.ScatterPlotResults[0])
console.log(colorsforScatterPlot)
var MDSData = JSON.parse(this.ScatterPlotResults[1]) var MDSData = JSON.parse(this.ScatterPlotResults[1])
console.log(MDSData)
var parameters = JSON.parse(this.ScatterPlotResults[2]) var parameters = JSON.parse(this.ScatterPlotResults[2])
var tSNEData = JSON.parse(this.ScatterPlotResults[12])
parameters = JSON.parse(parameters) parameters = JSON.parse(parameters)
var classifiersInfo = this.brushedBox var classifiersInfo = this.brushedBox
var keepingArrayIndices = [] var keepingArrayIndices = []
@ -75,7 +75,6 @@ export default {
} }
} }
} }
var flag var flag
this.length = keepingArrayIndices.length this.length = keepingArrayIndices.length
EventBus.$emit('sendPointsNumber', this.length) EventBus.$emit('sendPointsNumber', this.length)
@ -97,8 +96,7 @@ export default {
counter++ counter++
} }
} }
console.log(MDSData)
console.log(colorsforScatterPlot)
if (this.colorsforOver.length != 0) { if (this.colorsforOver.length != 0) {
if (this.colorsforOver[1].length != 0) { if (this.colorsforOver[1].length != 0) {
MDSData = this.colorsforOver[1] MDSData = this.colorsforOver[1]
@ -107,13 +105,15 @@ export default {
colorsforScatterPlot = this.colorsforOver[0] colorsforScatterPlot = this.colorsforOver[0]
} }
} }
console.log(this.colorsforOver) console.log(MDSData)
console.log(tSNEData)
var classifiersInfoProcessing = [] var classifiersInfoProcessing = []
for (let i = 0; i < modelsDetails.length; i++) { for (let i = 0; i < modelsDetails.length; i++) {
classifiersInfoProcessing[i] = 'Model ID: ' + modelsIDs[i] + '; Details: ' + modelsDetails[i] classifiersInfoProcessing[i] = 'Model ID: ' + modelsIDs[i] + '; Details: ' + modelsDetails[i]
} }
var DataGeneral var DataGeneral
var layout var layout
if (this.representationDef == 'MDS') {
DataGeneral = [{ DataGeneral = [{
type: 'scatter', type: 'scatter',
mode: 'markers', mode: 'markers',
@ -149,6 +149,43 @@ export default {
hoverlabel: { bgcolor: "#FFF" }, hoverlabel: { bgcolor: "#FFF" },
legend: {orientation: 'h', y: -0.3}, legend: {orientation: 'h', y: -0.3},
} }
} else {
DataGeneral = [{
type: 'scatter',
mode: 'markers',
x: tSNEData[0],
y: tSNEData[1],
hovertemplate:
"<b>%{text}</b><br><br>" +
"<extra></extra>",
text: classifiersInfoProcessing,
marker: {
color: colorsforScatterPlot,
size: 12,
colorscale: 'Viridis',
colorbar: {
title: 'Metrics Average',
titleside: 'Top'
},
}
}]
layout = {
title: 'Models Performance (MDS)',
xaxis: {
visible: false
},
yaxis: {
visible: false
},
autosize: true,
width: 400,
height: 400,
dragmode: 'lasso',
hovermode: "closest",
hoverlabel: { bgcolor: "#FFF" },
legend: {orientation: 'h', y: -0.3},
}
}
var config = {scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage', 'toggleSpikelines', 'autoScale2d', 'hoverClosestGl2d','hoverCompareCartesian','select2d','hoverClosestCartesian','zoomIn2d','zoomOut2d','zoom2d'], responsive: true} var config = {scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage', 'toggleSpikelines', 'autoScale2d', 'hoverClosestGl2d','hoverCompareCartesian','select2d','hoverClosestCartesian','zoomIn2d','zoomOut2d','zoom2d'], responsive: true}
@ -193,6 +230,8 @@ export default {
this.colorsforOver = data}) this.colorsforOver = data})
EventBus.$on('ParametersAll', data => { this.parametersAll = data }) EventBus.$on('ParametersAll', data => { this.parametersAll = data })
EventBus.$on('getColors', this.UpdateScatter) EventBus.$on('getColors', this.UpdateScatter)
EventBus.$on('RepresentationSelection', data => {this.representationDef = data})
EventBus.$on('RepresentationSelection', this.ScatterPlotView)
} }
} }
</script> </script>

@ -496,6 +496,7 @@ def InitializeEnsemble():
ModelSpaceMDS = FunMDS(XClassifiers) ModelSpaceMDS = FunMDS(XClassifiers)
ModelSpaceTSNE = FunTsne(XClassifiers) ModelSpaceTSNE = FunTsne(XClassifiers)
ModelSpaceTSNE = ModelSpaceTSNE.tolist() ModelSpaceTSNE = ModelSpaceTSNE.tolist()
print(ModelSpaceTSNE)
global ClassifierIDsList global ClassifierIDsList
key = 0 key = 0
EnsembleModel(ClassifierIDsList, key) EnsembleModel(ClassifierIDsList, key)
@ -530,6 +531,7 @@ def ReturnResults(sumPerClassifier,ModelSpaceMDS,ModelSpaceTSNE,preProcessResult
Results.append(json.dumps(metricsPerModel)) # Position: 9 Results.append(json.dumps(metricsPerModel)) # Position: 9
Results.append(perm_imp_eli5PDCon) # Position: 10 Results.append(perm_imp_eli5PDCon) # Position: 10
Results.append(featureScoresCon) # Position: 11 Results.append(featureScoresCon) # Position: 11
Results.append(json.dumps(ModelSpaceTSNE)) # Position: 12
return Results return Results
# Retrieve data from client # Retrieve data from client

Loading…
Cancel
Save