master
parent 42c8d9c4e7
commit 74151a6094
  1. BIN
      __pycache__/run.cpython-37.pyc
  2. 2
      frontend/index.html
  3. 84
      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. 17
      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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>istacking</title>
<title>StackVis</title>
</head>
<body>
<div id="app"></div>

@ -23,9 +23,12 @@ export default {
brushedBoxPl: [],
previousColor: 0,
selectedAlgorithm: 0,
AllAlgorithms: ['KNN','RF'],
KNNModels: 576, //KNN models
WH: [],
parameters: [],
algorithm1: [],
algorithm2: [],
chart: ''
}
},
@ -34,28 +37,22 @@ export default {
d3.selectAll("#exploding_boxplot > *").remove();
const PerformAlgor1 = JSON.parse(this.PerformanceAllModels[0])
const PerformAlgor2 = JSON.parse(this.PerformanceAllModels[2])
var algorithm1 = []
var algorithm2 = []
this.algorithm1 = []
this.algorithm2 = []
var parameters = []
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]))
}
var temp = i
for (let j = 0; j < Object.keys(PerformAlgor2['0']).length; 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]))
}
EventBus.$emit('ParametersAll', parameters)
var data = algorithm1.concat(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)*/
var data = this.algorithm1.concat(this.algorithm2)
// chart(data,aes)
// aesthetic :
// y : point's value on y axis
// group : how to group data on x axis
@ -104,7 +101,70 @@ export default {
},
brushActivationAll () {
// 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 () {
if (this.selectedAlgorithm == 'KNN') {

@ -85,9 +85,9 @@ export default {
}
}*/
var layout = {
autosize: false,
autosize: true,
barmode: 'group',
width: 550,
width: 650,
height: 400,
xaxis: {
title: 'Algorithm',
@ -132,6 +132,13 @@ export default {
},
exponentformat: 'e',
showexponent: 'all'
},
margin: {
l: 40,
r: 0,
b: 40,
t: 25,
pad: 0
}
}
/*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>
</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">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Models Space Visualization
[Sel.:{{OverSelLength}}/All:{{OverAllLength}}]
<select id="selectBarChart" @change="selectVisualRepresentation()">
<option value="bar">Bar Chart</option>
<option value="line">Line Plot</option>
<option value="diffline">Difference Line Plot</option>
<option value="mds" selected>MDS Projection</option>
<option value="tsne">t-SNE Projection</option>
</select>
[Sel.:{{OverSelLength}}/All:{{OverAllLength}}]
</mdb-card-header>
<mdb-card-body>
<ScatterPlot/>
@ -52,6 +41,16 @@
</mdb-card-body>
</mdb-card>
</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 class="mb-3 mt-3">
<b-col cols="3">
@ -101,22 +100,14 @@
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="6">
<b-col cols="9">
<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>
<Provenance/>
</mdb-card-body>
</mdb-card>
</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-container>
</div>
@ -139,7 +130,6 @@ import BarChart from './BarChart.vue'
import Heatmap from './Heatmap.vue'
import ToggleSelection from './ToggleSelection.vue'
import FinalResultsLinePlot from './FinalResultsLinePlot.vue'
import CurrentStack from './CurrentStack.vue'
import Provenance from './Provenance.vue'
import axios from 'axios'
import { loadProgressBar } from 'axios-progress-bar'
@ -171,7 +161,6 @@ export default Vue.extend({
Heatmap,
ToggleSelection,
Provenance,
CurrentStack,
FinalResultsLinePlot,
mdbCard,
mdbCardBody,
@ -216,6 +205,7 @@ export default Vue.extend({
selectVisualRepresentation () {
const representationSelectionDocum = document.getElementById('selectBarChart')
this.representationSelection = representationSelectionDocum.options[representationSelectionDocum.selectedIndex].value
console.log(this.representationSelection)
EventBus.$emit('RepresentationSelection', this.representationSelection)
},
getCollection () {

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

@ -16,7 +16,7 @@ export default {
data () {
return {
ScatterPlotResults: '',
representationDefault: 'MDS',
representationDef: 'MDS',
colorsforOver: [],
brushedBox : [],
max: 0,
@ -56,10 +56,10 @@ export default {
Plotly.purge('OverviewPlotly')
var colorsforScatterPlot = JSON.parse(this.ScatterPlotResults[0])
console.log(colorsforScatterPlot)
var MDSData = JSON.parse(this.ScatterPlotResults[1])
console.log(MDSData)
var parameters = JSON.parse(this.ScatterPlotResults[2])
var tSNEData = JSON.parse(this.ScatterPlotResults[12])
parameters = JSON.parse(parameters)
var classifiersInfo = this.brushedBox
var keepingArrayIndices = []
@ -75,7 +75,6 @@ export default {
}
}
}
var flag
this.length = keepingArrayIndices.length
EventBus.$emit('sendPointsNumber', this.length)
@ -97,8 +96,7 @@ export default {
counter++
}
}
console.log(MDSData)
console.log(colorsforScatterPlot)
if (this.colorsforOver.length != 0) {
if (this.colorsforOver[1].length != 0) {
MDSData = this.colorsforOver[1]
@ -107,13 +105,15 @@ export default {
colorsforScatterPlot = this.colorsforOver[0]
}
}
console.log(this.colorsforOver)
console.log(MDSData)
console.log(tSNEData)
var classifiersInfoProcessing = []
for (let i = 0; i < modelsDetails.length; i++) {
classifiersInfoProcessing[i] = 'Model ID: ' + modelsIDs[i] + '; Details: ' + modelsDetails[i]
}
var DataGeneral
var layout
if (this.representationDef == 'MDS') {
DataGeneral = [{
type: 'scatter',
mode: 'markers',
@ -149,6 +149,43 @@ export default {
hoverlabel: { bgcolor: "#FFF" },
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}
@ -193,6 +230,8 @@ export default {
this.colorsforOver = data})
EventBus.$on('ParametersAll', data => { this.parametersAll = data })
EventBus.$on('getColors', this.UpdateScatter)
EventBus.$on('RepresentationSelection', data => {this.representationDef = data})
EventBus.$on('RepresentationSelection', this.ScatterPlotView)
}
}
</script>

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

Loading…
Cancel
Save