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

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

@ -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)*/
// chart(data,aes)
var data = this.algorithm1.concat(this.algorithm2)
// 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') {

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

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

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

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

@ -10,8 +10,7 @@ export default {
name: 'PerMetricsBarChart',
data () {
return {
barchartmetrics: '',
representationDefault: 'bar'
barchartmetrics: ''
}
},
methods: {
@ -19,7 +18,7 @@ export default {
var metricsPerModel = JSON.parse(this.barchartmetrics[9])
var vh = 80
if (this.representationDefault === 'bar'){
/*if (this.representationDefault === 'bar'){
var type = 'bar';
} else if (this.representationDefault === 'line'){
var type = 'line';
@ -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>

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

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

2
run.py
Unescape View File

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

Write Preview
Loading…
Cancel
Save