ISOVIS
/
StackGenVis
9
0
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

push last

Browse Source
master
Angelos Chatzimparmpas 5 years ago
parent 42c8d9c4e7
commit 74151a6094
9 changed files with 153 additions and 111 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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

BIN
__pycache__/run.cpython-37.pyc
View File

Binary file not shown.

2
frontend/index.html
Unescape View File

@ -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>

86
frontend/src/components/Algorithms.vue
Unescape View File

@ -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') {

11
frontend/src/components/BarChart.vue
Unescape View File

@ -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++) {

53
frontend/src/components/CurrentStack.vue
Unescape View File

@ -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>

42
frontend/src/components/Main.vue
Unescape View File

@ -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 () {

15
frontend/src/components/PerMetricBarChart.vue
Unescape View File

@ -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>

53
frontend/src/components/ScatterPlot.vue
Unescape View File

@ -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>

2
run.py
Unescape View File

@ -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

Write Preview
Loading…
Cancel
Save