master
parent 9bfba6023f
commit 1d6e2cf9c2
  1. BIN
      __pycache__/run.cpython-37.pyc
  2. 1
      cache_dir/joblib/run/GridSearchForParameters/378d198d3c0e10692e1f994b1d6cc249/metadata.json
  3. BIN
      cache_dir/joblib/run/GridSearchForParameters/378d198d3c0e10692e1f994b1d6cc249/output.pkl
  4. 1
      cache_dir/joblib/run/GridSearchForParameters/c68ef3375400002ebc70a05b50292b80/metadata.json
  5. BIN
      cache_dir/joblib/run/GridSearchForParameters/c68ef3375400002ebc70a05b50292b80/output.pkl
  6. 28
      cache_dir/joblib/run/GridSearchForParameters/func_code.py
  7. 8339
      frontend/package-lock.json
  8. 47
      frontend/package.json
  9. 69
      frontend/src/components/AlgorithmHyperParam.vue
  10. 82
      frontend/src/components/Algorithms.vue
  11. 39
      frontend/src/components/BarChart.vue
  12. 33
      frontend/src/components/DataSetExecController.vue
  13. 57
      frontend/src/components/DataSpace.vue
  14. 33
      frontend/src/components/FeatureSelection.vue
  15. 104
      frontend/src/components/FinalResultsLinePlot.vue
  16. 107
      frontend/src/components/Heatmap.vue
  17. 410
      frontend/src/components/Main.vue
  18. 27
      frontend/src/components/ParametersSetting.vue
  19. 54
      frontend/src/components/PredictionsSpace.vue
  20. 15
      frontend/src/components/ScatterPlot.vue
  21. 712
      frontend/src/components/StretchedChord.vue
  22. 67
      frontend/src/components/Tuning.vue
  23. 4
      frontend/src/main.js
  24. 554
      run.py

Binary file not shown.

@ -0,0 +1 @@
{"duration": 15.238354921340942, "input_args": {"clf": "RandomForestClassifier(bootstrap=True, class_weight=None, criterion='gini',\n max_depth=None, max_features='auto', max_leaf_nodes=None,\n min_impurity_decrease=0.0, min_impurity_split=None,\n min_samples_leaf=1, min_samples_split=2,\n min_weight_fraction_leaf=0.0, n_estimators='warn',\n n_jobs=None, oob_score=False, random_state=None,\n verbose=0, warm_start=False)", "params": "{'n_estimators': [80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119], 'criterion': ['gini', 'entropy']}"}}

@ -0,0 +1 @@
{"duration": 4.3733649253845215, "input_args": {"clf": "KNeighborsClassifier(algorithm='auto', leaf_size=30, metric='minkowski',\n metric_params=None, n_jobs=None, n_neighbors=5, p=2,\n weights='uniform')", "params": "{'n_neighbors': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24], 'weights': ['uniform', 'distance'], 'algorithm': ['brute', 'kd_tree', 'ball_tree'], 'metric': ['chebyshev', 'manhattan', 'euclidean', 'minkowski']}"}}

@ -0,0 +1,28 @@
# first line: 484
def GridSearchForParameters(clf, params):
grid = GridSearchCV(estimator=clf,
param_grid=params,
scoring='accuracy',
cv=crossValidation,
n_jobs = -1)
grid.fit(XData, yData)
cv_results = []
cv_results.append(grid.cv_results_)
df_cv_results = pd.DataFrame.from_dict(cv_results)
number_of_classifiers = len(df_cv_results.iloc[0][0])
number_of_columns = len(df_cv_results.iloc[0])
df_cv_results_per_item = []
df_cv_results_per_row = []
for i in range(number_of_classifiers):
df_cv_results_per_item = []
for column in df_cv_results.iloc[0]:
df_cv_results_per_item.append(column[i])
df_cv_results_per_row.append(df_cv_results_per_item)
df_cv_results_classifiers = pd.DataFrame(data = df_cv_results_per_row, columns= df_cv_results.columns)
global allParametersPerformancePerModel
parametersPerformancePerModel = df_cv_results_classifiers[['mean_test_score','params']]
parametersPerformancePerModel = parametersPerformancePerModel.to_json()
allParametersPerformancePerModel.append(parametersPerformancePerModel)
return 'Everything is okay'

File diff suppressed because it is too large Load Diff

@ -12,45 +12,50 @@
}, },
"dependencies": { "dependencies": {
"@babel/core": "^7.5.5", "@babel/core": "^7.5.5",
"@fortawesome/fontawesome-free": "^5.9.0", "@fortawesome/fontawesome-free": "^5.10.1",
"@fortawesome/fontawesome-svg-core": "^1.2.19", "@fortawesome/fontawesome-svg-core": "^1.2.21",
"@fortawesome/free-solid-svg-icons": "^5.9.0", "@fortawesome/free-solid-svg-icons": "^5.10.1",
"@fortawesome/vue-fontawesome": "^0.1.6", "@fortawesome/vue-fontawesome": "^0.1.6",
"@statnett/vue-plotly": "^0.3.2", "@statnett/vue-plotly": "^0.3.2",
"@types/node": "^12.6.8", "@types/node": "^12.7.1",
"ajv": "^6.10.2", "ajv": "^6.10.2",
"audit": "0.0.6", "audit": "0.0.6",
"axios": "^0.19.0", "axios": "^0.19.0",
"axios-progress-bar": "^1.2.0",
"babel-preset-vue": "^2.0.2", "babel-preset-vue": "^2.0.2",
"blob": "0.0.5", "blob": "0.0.5",
"bootstrap": "^4.3.1", "bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.26", "bootstrap-vue": "^2.0.0-rc.27",
"clean-webpack-plugin": "^3.0.0", "clean-webpack-plugin": "^3.0.0",
"d3": "^5.9.7", "d3": "^5.9.7",
"d3-loom": "^1.0.2", "d3-loom": "^1.0.2",
"d3_exploding_boxplot": "^0.2.1",
"file-saver": "^2.0.2", "file-saver": "^2.0.2",
"file-system": "^2.2.2", "file-system": "^2.2.2",
"fix": "0.0.6", "fix": "0.0.6",
"fs": "0.0.2", "fs": "0.0.2",
"fs-es6": "0.0.2", "fs-es6": "0.0.2",
"ify-loader": "^1.1.0", "ify-loader": "^1.1.0",
"interactjs": "^1.5.4",
"jquery": "^3.4.1", "jquery": "^3.4.1",
"mdbvue": "^5.7.0", "mdbvue": "^5.8.0",
"mini-css-extract-plugin": "^0.8.0", "mini-css-extract-plugin": "^0.8.0",
"npm-check-updates": "^3.1.20", "npm-check-updates": "^3.1.21",
"papaparse": "^5.0.1", "papaparse": "^5.0.2",
"parcoord-es": "^2.2.10",
"plotly": "^1.0.6", "plotly": "^1.0.6",
"plotly.js": "^1.49.0", "plotly.js": "^1.49.1",
"popper.js": "^1.15.0", "popper.js": "^1.15.0",
"strip-loader": "^0.1.2", "strip-loader": "^0.1.2",
"toposort": "^2.0.2", "toposort": "^2.0.2",
"transform-loader": "^0.2.4", "transform-loader": "^0.2.4",
"update": "^0.7.4",
"vega": "^5.4.0", "vega": "^5.4.0",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-papa-parse": "^1.2.1", "vue-papa-parse": "^1.2.1",
"vue-plotly": "^1.0.0", "vue-plotly": "^1.0.0",
"vue-router": "^3.0.7", "vue-router": "^3.1.2",
"vue-slider-component": "^3.0.33", "vue-slider-component": "^3.0.37",
"webpack-cli": "^3.3.6" "webpack-cli": "^3.3.6"
}, },
"devDependencies": { "devDependencies": {
@ -73,7 +78,7 @@
"babel-plugin-transform-vue-jsx": "^3.7.0", "babel-plugin-transform-vue-jsx": "^3.7.0",
"chalk": "^2.4.2", "chalk": "^2.4.2",
"copy-webpack-plugin": "^5.0.4", "copy-webpack-plugin": "^5.0.4",
"css-loader": "^3.1.0", "css-loader": "^3.2.0",
"eslint": "^6.1.0", "eslint": "^6.1.0",
"eslint-config-standard": "^13.0.1", "eslint-config-standard": "^13.0.1",
"eslint-friendly-formatter": "^4.0.1", "eslint-friendly-formatter": "^4.0.1",
@ -84,10 +89,10 @@
"eslint-plugin-standard": "^4.0.0", "eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.2.3", "eslint-plugin-vue": "^5.2.3",
"extract-text-webpack-plugin": "^3.0.2", "extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^4.1.0", "file-loader": "^4.2.0",
"friendly-errors-webpack-plugin": "^1.7.0", "friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"node-notifier": "^5.4.0", "node-notifier": "^5.4.1",
"optimize-css-assets-webpack-plugin": "^5.0.3", "optimize-css-assets-webpack-plugin": "^5.0.3",
"ora": "^3.4.0", "ora": "^3.4.0",
"portfinder": "^1.0.21", "portfinder": "^1.0.21",
@ -95,22 +100,22 @@
"postcss-loader": "^3.0.0", "postcss-loader": "^3.0.0",
"postcss-url": "^8.0.0", "postcss-url": "^8.0.0",
"rimraf": "^2.6.3", "rimraf": "^2.6.3",
"sass": "^1.22.7", "sass": "^1.22.9",
"sass-loader": "^7.1.0", "sass-loader": "^7.2.0",
"semver": "^6.3.0", "semver": "^6.3.0",
"shelljs": "^0.8.3", "shelljs": "^0.8.3",
"uglifyjs-webpack-plugin": "^2.1.3", "uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^2.1.0", "url-loader": "^2.1.0",
"vue-class-component": "^7.1.0", "vue-class-component": "^7.1.0",
"vue-cli-plugin-vuetify": "^0.6.1", "vue-cli-plugin-vuetify": "^0.6.3",
"vue-loader": "^15.7.1", "vue-loader": "^15.7.1",
"vue-property-decorator": "^8.2.1", "vue-property-decorator": "^8.2.1",
"vue-style-loader": "^4.1.2", "vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10", "vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0", "vuetify-loader": "^1.3.0",
"webpack": "^4.38.0", "webpack": "^4.39.1",
"webpack-bundle-analyzer": "^3.3.2", "webpack-bundle-analyzer": "^3.4.1",
"webpack-dev-server": "^3.7.2", "webpack-dev-server": "^3.8.0",
"webpack-merge": "^4.2.1" "webpack-merge": "^4.2.1"
}, },
"browserslist": [ "browserslist": [

@ -0,0 +1,69 @@
<template>
<div id="PCP" class="parcoords" style="width:600;height:300px"></div>
</template>
<script>
import 'parcoord-es/dist/parcoords.css';
import ParCoords from 'parcoord-es';
import * as d3Base from 'd3'
// attach all d3 plugins to the d3 library
const d3 = Object.assign(d3Base)
import { EventBus } from '../main.js'
export default {
name: 'AlgorithmHyperParam',
data () {
return {
ModelsPerformance: 0,
selAlgorithm: 0,
pc: 0
}
},
methods: {
PCPView () {
var Combined = 0
if (this.selAlgorithm == 'KNN') {
Combined = JSON.parse(this.ModelsPerformance[0])
} else {
Combined = JSON.parse(this.ModelsPerformance[1])
}
var valuesPerf = Object.values(Combined['mean_test_score'])
var ObjectsParams = Combined['params']
var ArrayCombined = new Array(valuesPerf.length)
for (let i = 0; i < valuesPerf.length; i++) {
Object.assign(ObjectsParams[i], {performance: valuesPerf[i]})
ArrayCombined[i] = ObjectsParams[i]
}
this.pc = ParCoords()("#PCP")
.data(ArrayCombined)
.bundlingStrength(0) // set bundling strength
.smoothness(0)
.bundleDimension('performance')
.showControlPoints(false)
.render()
.brushMode('1D-axes')
.reorderable()
.interactive();
},
brushed () {
if (this.pc.brushed()) {
EventBus.$emit('ReturningBrushedPoints', this.pc.brushed())
} else {
EventBus.$emit('ReturningBrushedPoints', this.pc.data())
}
},
clear () {
d3.selectAll("#PCP > *").remove();
}
},
mounted() {
EventBus.$on('emittedEventCallingModelBrushed', this.brushed)
EventBus.$on('emittedEventCallingModelSelect', data => { this.selAlgorithm = data })
EventBus.$on('emittedEventCallingModel', data => { this.ModelsPerformance = data })
EventBus.$on('emittedEventCallingModel', this.PCPView)
EventBus.$on('emittedEventCallingModelClear', this.clear)
}
}
</script>

@ -0,0 +1,82 @@
<template>
<div>
<div id="exploding_boxplot" class="exploding_boxplot"></div>
</div>
</template>
<script>
import interact from 'interactjs'
import { EventBus } from '../main.js'
import * as d3Base from 'd3'
import * as exploding_boxplot from 'd3_exploding_boxplot'
// attach all d3 plugins to the d3 library
const d3 = Object.assign(d3Base)
export default {
name: 'Algorithms',
data () {
return {
PerformanceAllModels: ''
}
},
methods: {
boxplot () {
//generate random data
const PerformAlgor1 = JSON.parse(this.PerformanceAllModels[0])
const PerformAlgor2 = JSON.parse(this.PerformanceAllModels[1])
var algorithm1 = []
var algorithm2 = []
var median = []
var sum = 0
for (let i = 0; i < Object.keys(PerformAlgor1.mean_test_score).length; i++) {
algorithm1.push({Performance: Object.values(PerformAlgor1.mean_test_score)[i]*100,Algorithm:'KNN',Model:'Model ' + i + ', Accuracy '})
sum = sum + Object.values(PerformAlgor1.mean_test_score)[i]*100
}
median.push(sum/Object.keys(PerformAlgor1.mean_test_score).length)
sum = 0
for (let i = 0; i < Object.keys(PerformAlgor2.mean_test_score).length; i++) {
algorithm2.push({Performance: Object.values(PerformAlgor2.mean_test_score)[i]*100,Algorithm:'RF',Model:'Model ' + i + ', Accuracy '})
sum = sum + Object.values(PerformAlgor1.mean_test_score)[i]*100
}
var data = algorithm1.concat(algorithm2)
/*median.push(sum/Object.keys(PerformAlgor2.mean_test_score).length)
if (median[0] > median[1])
var data = algorithm1.concat(algorithm2)
else
var data = algorithm2.concat(algorithm1)*/
// chart(data,aes)
// aesthetic :
// y : point's value on y axis
// group : how to group data on x axis
// color : color of the point / boxplot
// label : displayed text in toolbox
var chart = exploding_boxplot(data, {y:'Performance',group:'Algorithm',color:'Algorithm',label:'Model'})
//call chart on a div
chart('#exploding_boxplot')
var el = document.getElementsByClassName('d3-exploding-boxplot boxcontent')
var doubleClick = document.getElementsByClassName('exploding_boxplot')
doubleClick[0].ondblclick = function(d) {
EventBus.$emit('PCPCallDB')
}
el[0].onclick = function() {
EventBus.$emit('PCPCall', 'KNN')
}
el[1].onclick = function() {
EventBus.$emit('PCPCall', 'RF')
}
}
},
mounted () {
EventBus.$on('emittedEventCallingAllAlgorithms', data => {
this.PerformanceAllModels = data})
EventBus.$on('emittedEventCallingAllAlgorithms', this.boxplot)
}
}
</script>
<style>
@import 'd3_exploding_boxplot/src/d3_exploding_boxplot.css';
</style>

@ -32,8 +32,21 @@ export default {
methods: { methods: {
BarChartView () { BarChartView () {
const PerClassMetrics = JSON.parse(this.BarChartResults[4]) const PerClassMetrics = JSON.parse(this.BarChartResults[4])
const ClassNames = JSON.parse(this.BarChartResults[5]) const ClassNames = JSON.parse(this.BarChartResults[5])
const limit = JSON.parse(this.BarChartResults[12])
var PerClassMetricsRed = []
var limitList = []
if (limit == '') {
for (let i = 0; i < PerClassMetrics.length; i++) {
limitList.push(i)
}
} else {
limitList = []
for (let i = 0; i < limit.length; i++) {
limitList.push(Number(limit[i].match(/\d+/)[0]))
}
}
console.log(limitList)
const precisionPerClass = [] const precisionPerClass = []
const recallPerClass = [] const recallPerClass = []
const f1ScorePerClass = [] const f1ScorePerClass = []
@ -42,11 +55,11 @@ export default {
precisionPerClass[j] = [] precisionPerClass[j] = []
recallPerClass[j] = [] recallPerClass[j] = []
f1ScorePerClass[j] = [] f1ScorePerClass[j] = []
for (let i = 0; i < PerClassMetrics.length; i++) { for (let i = 0; i < limitList.length; i++) { // Fix this tomorrow! 0 to 16 and we want the ids..
precisionPerClass[j].push(PerClassMetrics[i][ClassNames[j]].precision) precisionPerClass[j].push(PerClassMetrics[limitList[i]][ClassNames[j]].precision)
recallPerClass[j].push(PerClassMetrics[i][ClassNames[j]].recall) recallPerClass[j].push(PerClassMetrics[limitList[i]][ClassNames[j]].recall)
f1ScorePerClass[j].push(PerClassMetrics[i][ClassNames[j]]['f1-score']) f1ScorePerClass[j].push(PerClassMetrics[limitList[i]][ClassNames[j]]['f1-score'])
} }
} }
var precisionData var precisionData
@ -55,8 +68,8 @@ export default {
var layoutPrec = { var layoutPrec = {
autosize: false, autosize: false,
width: 400, width: 300,
height: 400, height: 300,
xaxis: { xaxis: {
title: 'Classifier ID', title: 'Classifier ID',
type:"category", type:"category",
@ -87,8 +100,8 @@ export default {
var layoutRec = { var layoutRec = {
autosize: false, autosize: false,
width: 400, width: 300,
height: 400, height: 300,
xaxis: { xaxis: {
title: 'Classifier ID', title: 'Classifier ID',
type:"category", type:"category",
@ -119,8 +132,8 @@ export default {
var layoutf1Score = { var layoutf1Score = {
autosize: false, autosize: false,
width: 400, width: 300,
height: 400, height: 300,
xaxis: { xaxis: {
title: 'Classifier ID', title: 'Classifier ID',
type:"category", type:"category",

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<select id="selectFile" v-on:change="SelectedFileChange"> <select id="selectFile" @change="selectDataSet()">
<option value="DiabetesC.csv">Pima Indian Diabetes</option> <option value="DiabetesC.csv">Pima Indian Diabetes</option>
<option value="BreastC.csv">Breast Cancer Winconsin</option> <option value="BreastC.csv">Breast Cancer Winconsin</option>
<option value="IrisC.csv" selected>Iris</option> <option value="IrisC.csv" selected>Iris</option>
@ -13,26 +13,29 @@
class="mt-2 ml-2"> class="mt-2 ml-2">
<font-awesome-icon icon="upload"/> <font-awesome-icon icon="upload"/>
Upload</button> Upload</button>
<button
id="Execute"
v-on:click="execute">
<font-awesome-icon icon="play" />
{{ value }}
</button>
</div> </div>
</template> </template>
<script> <script>
// import Papa from 'papaparse' // import Papa from 'papaparse'
import { EventBus } from '../main.js'
export default { export default {
name: 'LoadFile', name: 'DataSetExecController',
data () { data () {
return { return {
RetrieveValueCSV: 'IrisC' RetrieveValueCSV: 'IrisC',
value: 'Execute',
InitializeEnsemble: false
} }
}, },
methods: { methods: {
SelectedFileChange () {
const fileName = document.getElementById('selectFile')
this.RetrieveValueCSV = fileName.options[fileName.selectedIndex].value
this.RetrieveValueCSV = this.RetrieveValueCSV.split('.')[0]
this.$emit('RetrieveValueCSVEvent', this.RetrieveValueCSV)
},
upload () { upload () {
// const that = this // const that = this
// const fileToLoad = event.target.files[0] // const fileToLoad = event.target.files[0]
@ -52,6 +55,18 @@ export default {
} }
reader.readAsText(fileToLoad) reader.readAsText(fileToLoad)
*/ */
},
selectDataSet () {
const fileName = document.getElementById('selectFile')
this.RetrieveValueCSV = fileName.options[fileName.selectedIndex].value
this.RetrieveValueCSV = this.RetrieveValueCSV.split('.')[0]
console.log(this.RetrieveValueCSV)
EventBus.$emit('SendToServerDataSetConfirmation', this.RetrieveValueCSV)
},
execute () {
this.InitializeEnsemble = true
this.value = 'ReExecute'
this.$emit('InitializeEnsembleLearningEvent')
} }
} }
} }

@ -0,0 +1,57 @@
<template>
<div id="OverviewDataPlotly" class="OverviewDataPlotly"></div>
</template>
<script>
import * as Plotly from 'plotly.js'
import { EventBus } from '../main.js'
export default {
name: 'DataSpace',
data () {
return {
CollectionData: '',
DataSpace: ''
}
},
methods: {
ScatterPlotDataView () {
const XandYCoordinates = this.DataSpace[0]
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;
}, {})
const Data = [{
x: result.Xax,
y: result.Yax,
mode: 'markers',
}]
const layout = {
title: 'Data Space Projection (tSNE)',
xaxis: {
visible: false
},
yaxis: {
visible: false
}
}
Plotly.newPlot('OverviewDataPlotly', Data, layout)
}
},
mounted() {
EventBus.$on('emittedEventCallingDataPlot', data => {
this.CollectionData = data})
EventBus.$on('emittedEventCallingDataSpacePlotView', data => {
this.DataSpace = data})
EventBus.$on('emittedEventCallingDataSpacePlotView', this.ScatterPlotDataView)
}
}
</script>

@ -10,16 +10,21 @@ export default {
data () { data () {
return { return {
GetResults: '', GetResults: '',
datafromCheckbox: '' datafromCheckbox: '',
loop: 0
} }
}, },
methods: { methods: {
FeatureSelection () { FeatureSelection () {
document.getElementById("myDynamicTable").innerHTML = ""; document.getElementById("myDynamicTable").innerHTML = "";
let Features= this.GetResults[0]
let ClassifierswithoutFI = this.GetResults[1]
let ClassifierswithFI = this.GetResults[2]
var Classifiers
Classifiers = ClassifierswithoutFI.concat(ClassifierswithFI)
console.log(Classifiers)
var myTableDiv = document.getElementById("myDynamicTable"); var myTableDiv = document.getElementById("myDynamicTable");
var table = document.createElement('TABLE'); var table = document.createElement('TABLE');
table.border = '1'; table.border = '1';
@ -27,11 +32,10 @@ export default {
table.appendChild(tableBody); table.appendChild(tableBody);
var checkBoxArray = [] var checkBoxArray = []
for (var i = 0; i < Classifiers.length+1; i++) {
for (var i = 0; i < 3; i++) {
var tr = document.createElement('TR'); var tr = document.createElement('TR');
tableBody.appendChild(tr); tableBody.appendChild(tr);
for (var j = 0; j < 4; j++) { for (var j = 0; j < Features.length; j++) {
if (j == 0){ if (j == 0){
if (i == 0) { if (i == 0) {
var td = document.createElement('TD'); var td = document.createElement('TD');
@ -41,7 +45,7 @@ export default {
} else { } else {
var td = document.createElement('TD'); var td = document.createElement('TD');
td.width = '90'; td.width = '90';
td.appendChild(document.createTextNode('Classifier ' + i)); td.appendChild(document.createTextNode('M ' + (i - 1)));
tr.appendChild(td); tr.appendChild(td);
} }
} }
@ -54,10 +58,10 @@ export default {
var checkbox = document.createElement('input'); var checkbox = document.createElement('input');
checkbox.type = "checkbox"; checkbox.type = "checkbox";
checkbox.checked = true; checkbox.checked = true;
checkbox.name = i; checkbox.name = i-1;
checkbox.text = "F " + j checkbox.text = "F " + j
checkbox.value = "value"; checkbox.value = "value";
checkbox.id = "Cl " + i + ", F " + j; checkbox.id = "M " + (i-1) + ", F " + j;
checkBoxArray.push(checkbox) checkBoxArray.push(checkbox)
var td = document.createElement('TD'); var td = document.createElement('TD');
td.appendChild(myTableDiv.appendChild(checkbox)); td.appendChild(myTableDiv.appendChild(checkbox));
@ -66,11 +70,15 @@ export default {
} }
} }
myTableDiv.appendChild(table); //if (this.loop == 0) {
myTableDiv.appendChild(table);
//}
this.loop++
this.datafromCheckbox = checkBoxArray this.datafromCheckbox = checkBoxArray
}, },
getFeatureSelection () { getFeatureSelection () {
var results = new Array();
var results = new Array()
this.datafromCheckbox.forEach(eachCheckbox => { this.datafromCheckbox.forEach(eachCheckbox => {
if (eachCheckbox.checked == true) { if (eachCheckbox.checked == true) {
results.push('ClassifierID: ' + eachCheckbox.name, 'FeatureName: ' + eachCheckbox.text, 'Check: 1') results.push('ClassifierID: ' + eachCheckbox.name, 'FeatureName: ' + eachCheckbox.text, 'Check: 1')
@ -79,7 +87,6 @@ export default {
results.push('ClassifierID: ' + eachCheckbox.name, 'FeatureName: ' + eachCheckbox.text, 'Check: 0') results.push('ClassifierID: ' + eachCheckbox.name, 'FeatureName: ' + eachCheckbox.text, 'Check: 0')
} }
}); });
console.log(results)
EventBus.$emit('SendSelectedFeaturesEvent', results) EventBus.$emit('SendSelectedFeaturesEvent', results)
} }
}, },

@ -0,0 +1,104 @@
<template>
<div id="LinePlot" class="LinePlot"></div>
</template>
<script>
import * as Plotly from 'plotly.js'
import { EventBus } from '../main.js'
export default {
name: 'FinalResultsLinePlot',
data () {
return {
FinalResultsforLinePlot: 0,
NumberofExecutions: 0,
scoresMean: [],
scoresSTD: [],
scoresPositive : [],
scoresNegative: [],
xaxis: []
}
},
methods: {
LinePlotView () {
this.NumberofExecutions ++
this.xaxis.push(this.NumberofExecutions)
this.scoresMean.push((JSON.parse(this.FinalResultsforLinePlot[0])*100).toFixed(1))
this.scoresSTD.push((JSON.parse(this.FinalResultsforLinePlot[1])*100).toFixed(1))
this.scoresPositive.push(parseFloat(this.scoresMean[this.scoresMean.length - 1]) + parseFloat(this.scoresSTD[this.scoresSTD.length - 1]))
this.scoresNegative.push(parseFloat(this.scoresMean[this.scoresMean.length - 1]) - parseFloat(this.scoresSTD[this.scoresSTD.length - 1]))
var xaxisReversed = []
xaxisReversed = this.xaxis.slice().reverse()
xaxisReversed = this.xaxis.concat(xaxisReversed)
// fill in 'text' array for hover
var text = this.scoresSTD.map (function(value, i) {
return `STD: +/-${value}`
})
var trace1 = {
x: this.xaxis,
y: this.scoresMean,
text: text,
line: {color: "rgb(0,100,80)"},
mode: "lines+markers",
name: "Accuracy",
type: "scatter"
}
var trace2 = {
x: xaxisReversed,
y: this.scoresPositive.concat(this.scoresNegative),
text: '',
hoverinfo: 'text',
fill: "tozerox",
fillcolor: "rgba(0,100,80,0.2)",
line: {color: "transparent"},
name: "Accuracy",
showlegend: false,
type: "scatter"
}
const DataforLinePlot = [trace1, trace2]
const layout = {
title: 'Stack Ensemble Learning Score',
paper_bgcolor: "rgb(255,255,255)",
plot_bgcolor: "rgb(229,229,229)",
xaxis: {
gridcolor: "rgb(255,255,255)",
title: 'Number of Execution',
tickformat: '.0f',
range: [0, this.scoresMean.length + 2],
showgrid: true,
showline: false,
showticklabels: true,
tickcolor: "rgb(127,127,127)",
ticks: "outside",
zeroline: false
},
yaxis: {
gridcolor: "rgb(255,255,255)",
title: 'Accuracy (%)',
range: [0, 100],
showgrid: true,
showline: false,
showticklabels: true,
tickcolor: "rgb(127,127,127)",
ticks: "outside",
zeroline: false
}
}
Plotly.newPlot('LinePlot', DataforLinePlot, layout, {showSendToCloud: true})
}
},
mounted() {
EventBus.$on('emittedEventCallingLinePlot', data => {
this.FinalResultsforLinePlot = data})
EventBus.$on('emittedEventCallingLinePlot', this.LinePlotView)
}
}
</script>

@ -0,0 +1,107 @@
<template>
<div id="Heatmap"></div>
</template>
<script>
import * as d3Base from 'd3'
import { EventBus } from '../main.js'
// attach all d3 plugins to the d3 library
const d3 = Object.assign(d3Base)
export default {
name: "Heatmap",
data () {
return {
GetResultsAll: '',
}
},
methods: {
Heatmap () {
// Clear Heatmap first
var svg = d3.select("#Heatmap");
svg.selectAll("*").remove();
let FeaturesAccuracy = this.GetResultsAll[0]
let Features= this.GetResultsAll[1]
let Classifiers = this.GetResultsAll[2]
let len = Features.length
let indicesYAxis = new Array(len)
for (let i = 0; i < len; i++) {
indicesYAxis[i] = i
}
// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 30, left: 30},
width = 300 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#Heatmap")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
let len2 = Classifiers.length
let indicesXAxis = new Array(len)
for (let i = 0; i < len2; i++) {
indicesXAxis[i] = i
}
// Labels of row and columns
var myGroups = indicesXAxis
var myVars = indicesYAxis
// Build X scales and axis:
var x = d3.scaleBand()
.range([ 0, width ])
.domain(myGroups)
.padding(0.01);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
// Build X scales and axis:
var y = d3.scaleBand()
.range([ height, 0 ])
.domain(myVars)
.padding(0.01);
svg.append("g")
.call(d3.axisLeft(y));
// Build color scale
var myColor = d3.scaleLinear().range(["#deebf7", "#08306b"])
.domain([1,100])
var data = []
var counter = 0
for (let j = 0; j < len2; j++) {
for (let i = 0; i <len; i++) {
data.push({'group':indicesXAxis[j], 'variable':indicesYAxis[i],'value':FeaturesAccuracy[counter][0]*100})
counter++
}
}
// add the squares
svg.selectAll()
.data(data, function(d) {return d.group+':'+d.variable;})
.enter()
.append("rect")
.attr("x", function(d) { return x(d.group) })
.attr("y", function(d) { return y(d.variable) })
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("fill", function(d) { return myColor(d.value)} )
}
},
mounted () {
EventBus.$on('emittedEventCallingHeatmapView', data => { this.GetResultsAll = data })
EventBus.$on('emittedEventCallingHeatmapView', this.Heatmap)
}
}
</script>

@ -1,105 +1,136 @@
<!-- Main Visualization View --> <!-- Main Visualization View -->
<template> <template>
<b-container fluid class="bv-example-row"> <div>
<b-row class="md-3"> <b-container fluid class="bv-example-row">
<b-col cols="3"> <b-row class="md-3">
<mdb-card> <b-col cols="3">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Data Set Selection</mdb-card-header> <mdb-card>
<mdb-card-body> <mdb-card-header color="primary-color" tag="h5" class="text-center">Data Set Selection and Execution</mdb-card-header>
<mdb-card-text class="text-center" > <mdb-card-body>
<LoadFile <mdb-card-text class="text-center" >
v-on:RetrieveValueCSVEvent="updateCSVName($event)" <DataSetExecController
/> v-on:InitializeEnsembleLearningEvent="DataBaseRequestDataSetName()"
</mdb-card-text> />
</mdb-card-body> </mdb-card-text>
</mdb-card> </mdb-card-body>
</b-col> </mdb-card>
<b-col cols="4"> </b-col>
<mdb-card> <b-col cols="6">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Base Classifiers Overview</mdb-card-header> <mdb-card>
<mdb-card-body>
<ScatterPlot/>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="5">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Classifiers, Features, and Classes Chord Visualization</mdb-card-header>
<mdb-card-body>
<StretchedChord/>
</mdb-card-body>
</mdb-card>
</b-col>
</b-row>
<b-row class="mb-3 mt-3">
<b-col cols="3">
<mdb-card >
<mdb-card-header color="primary-color" tag="h5" class="text-center">Hyper-Parameters Setting</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center">
<ParametersSetting
v-on:InitializeEnsembleLearningEvent="DataBaseRequestDataSetName()"
/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="6">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Per Class Metrics Exploration</mdb-card-header> <mdb-card-header color="primary-color" tag="h5" class="text-center">Per Class Metrics Exploration</mdb-card-header>
<mdb-card-body> <mdb-card-body>
<BarChart/> <BarChart/>
</mdb-card-body> </mdb-card-body>
</mdb-card> </mdb-card>
</b-col> </b-col>
<b-col cols="3"> <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-header color="primary-color" tag="h5" class="text-center">Subset Feature Selection</mdb-card-header> <mdb-card-body>
<mdb-card-body> <mdb-card-text class="text-center">
<FeatureSelection/> <DataSpace/>
</mdb-card-body> </mdb-card-text>
</mdb-card> </mdb-card-body>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row class="mb-3 mt-3">
<b-col cols="3"> <b-col cols="3">
<mdb-card> <mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Visual Mapping</mdb-card-header> <mdb-card-header color="primary-color" tag="h5" class="text-center">Algorithms Selection and HyperParameters Search</mdb-card-header>
<mdb-card-body> <mdb-card-body>
<mdb-card-text class="text-center"> <Algorithms/>
<Tuning/> <AlgorithmHyperParam/>
</mdb-card-text>
</mdb-card-body> </mdb-card-body>
</mdb-card> </mdb-card>
</b-col> </b-col>
</b-row> <b-col cols="6">
</b-container> <mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Models, Features, and Classes Connection</mdb-card-header>
<mdb-card-body>
<StretchedChord/>
</mdb-card-body>
<mdb-card-body>
<Heatmap/>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="3">
<mdb-card >
<mdb-card-header color="primary-color" tag="h5" class="text-center">Predictions Space Visualization</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center">
<PredictionsSpace/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
</b-row>
<b-row>
<b-col cols="3">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Base Models Overview</mdb-card-header>
<mdb-card-body>
<ScatterPlot/>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="6">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Subset Feature Selection</mdb-card-header>
<mdb-card-body>
<FeatureSelection/>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="3">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Meta-Model Performance</mdb-card-header>
<mdb-card-body>
<FinalResultsLinePlot/>
</mdb-card-body>
</mdb-card>
</b-col>
</b-row>
</b-container>
</div>
</template> </template>
<script> <script>
import Vue from 'vue' import Vue from 'vue'
import LoadFile from './LoadFile.vue' import DataSetExecController from './DataSetExecController.vue'
import ParametersSetting from './ParametersSetting.vue' import Algorithms from './Algorithms.vue'
import AlgorithmHyperParam from './AlgorithmHyperParam.vue'
import ScatterPlot from './ScatterPlot.vue' import ScatterPlot from './ScatterPlot.vue'
import DataSpace from './DataSpace.vue'
import PredictionsSpace from './PredictionsSpace.vue'
import BarChart from './BarChart.vue' import BarChart from './BarChart.vue'
import StretchedChord from './StretchedChord.vue' import StretchedChord from './StretchedChord.vue'
import Tuning from './Tuning.vue' import Heatmap from './Heatmap.vue'
import FeatureSelection from './FeatureSelection.vue' import FeatureSelection from './FeatureSelection.vue'
import FinalResultsLinePlot from './FinalResultsLinePlot.vue'
import axios from 'axios' import axios from 'axios'
import { loadProgressBar } from 'axios-progress-bar'
import 'axios-progress-bar/dist/nprogress.css'
import { mdbCard, mdbCardBody, mdbCardText, mdbCardHeader } from 'mdbvue' import { mdbCard, mdbCardBody, mdbCardText, mdbCardHeader } from 'mdbvue'
import { EventBus } from '../main.js' import { EventBus } from '../main.js'
import * as jQuery from 'jquery'
import $ from 'jquery'
export default Vue.extend({ export default Vue.extend({
name: 'Main', name: 'Main',
components: { components: {
LoadFile, DataSetExecController,
ParametersSetting, Algorithms,
AlgorithmHyperParam,
ScatterPlot, ScatterPlot,
DataSpace,
PredictionsSpace,
BarChart, BarChart,
StretchedChord, StretchedChord,
Tuning, Heatmap,
FeatureSelection, FeatureSelection,
FinalResultsLinePlot,
mdbCard, mdbCard,
mdbCardBody, mdbCardBody,
mdbCardHeader, mdbCardHeader,
@ -111,37 +142,19 @@ export default Vue.extend({
OverviewResults: 0, OverviewResults: 0,
RetrieveValueFile: 'IrisC', RetrieveValueFile: 'IrisC',
ClassifierIDsList: '', ClassifierIDsList: '',
SelectedFeaturesPerClassifier: '' SelectedFeaturesPerClassifier: '',
FinalResults: 0,
Algorithms: ['KNN','RF'],
selectedAlgorithm: '',
PerformancePerModel: '',
brushed: 0,
ExecutionStart: false,
} }
}, },
methods: { methods: {
updateCSVName (retrieving) {
this.RetrieveValueFile = retrieving
},
DataBaseRequestDataSetName () { DataBaseRequestDataSetName () {
const path = `http://127.0.0.1:5000/data/ServerRequest` this.ExecutionStart = true
const postData = { this.getOverviewResults()
fileName: this.RetrieveValueFile,
featureSelection: this.SelectedFeaturesPerClassifier
}
const axiosConfig = {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
}
}
axios.post(path, postData, axiosConfig)
.then(response => {
console.log(response)
console.log('Send request to server! FileName was sent successfully!')
})
.catch(error => {
console.log(error)
})
this.getCollection()
this.getOverviewResults()
}, },
getCollection () { getCollection () {
this.Collection = this.getCollectionFromBackend() this.Collection = this.getCollectionFromBackend()
@ -160,6 +173,7 @@ export default Vue.extend({
axios.get(path, axiosConfig) axios.get(path, axiosConfig)
.then(response => { .then(response => {
this.Collection = response.data.Collection this.Collection = response.data.Collection
EventBus.$emit('emittedEventCallingDataPlot', this.Collection)
console.log('Collection was overwritten with new data sent by the server!') console.log('Collection was overwritten with new data sent by the server!')
}) })
.catch(error => { .catch(error => {
@ -185,10 +199,42 @@ export default Vue.extend({
this.OverviewResults = response.data.OverviewResults this.OverviewResults = response.data.OverviewResults
console.log('Server successfully sent all the data related to visualizations!') console.log('Server successfully sent all the data related to visualizations!')
EventBus.$emit('emittedEventCallingScatterPlot', this.OverviewResults) EventBus.$emit('emittedEventCallingScatterPlot', this.OverviewResults)
EventBus.$emit('emittedEventCallingBarChart', this.OverviewResults) var length = JSON.parse(this.OverviewResults[0]).length
EventBus.$emit('emittedEventCallingChordView', this.OverviewResults) if (length < 64) {
EventBus.$emit('emittedEventCallingTableView', this.OverviewResults) this.OverviewResults.push(JSON.stringify(this.ClassifierIDsList))
EventBus.$emit('emittedEventCallingBarChart', this.OverviewResults)
/*EventBus.$emit('emittedEventCallingChordView', this.OverviewResults)
EventBus.$emit('emittedEventCallingHeatmapView', this.OverviewResults)
EventBus.$emit('emittedEventCallingTableView', this.OverviewResults)
EventBus.$emit('emittedEventCallingDataSpacePlotView', this.OverviewResults)
EventBus.$emit('emittedEventCallingPredictionsSpacePlotView', this.OverviewResults)*/
this.OverviewResults.pop()
}
this.getFinalResults()
})
.catch(error => {
console.log(error)
})
},
getModelsPerformance () {
this.ModelsPerformance = this.getModelsPerformanceFromBackend()
},
getModelsPerformanceFromBackend () {
const path = `http://localhost:5000/data/PerformanceForEachModel`
const axiosConfig = {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
}
}
axios.get(path, axiosConfig)
.then(response => {
this.PerformancePerModel = response.data.PerformancePerModel
console.log('Server successfully sent all the performance data related to models!')
EventBus.$emit('emittedEventCallingAllAlgorithms', this.PerformancePerModel)
}) })
.catch(error => { .catch(error => {
console.log(error) console.log(error)
@ -210,16 +256,168 @@ export default Vue.extend({
axios.post(path, postData, axiosConfig) axios.post(path, postData, axiosConfig)
.then(response => { .then(response => {
console.log('Sent the selected points to the server (scatterplot)!') console.log('Sent the selected points to the server (scatterplot)!')
if (this.ClassifierIDsList.length < 64) {
this.OverviewResults.push(JSON.stringify(this.ClassifierIDsList))
EventBus.$emit('emittedEventCallingBarChart', this.OverviewResults)
/*EventBus.$emit('emittedEventCallingChordView', this.OverviewResults)
EventBus.$emit('emittedEventCallingHeatmapView', this.OverviewResults)
EventBus.$emit('emittedEventCallingTableView', this.OverviewResults)
EventBus.$emit('emittedEventCallingDataSpacePlotView', this.OverviewResults)
EventBus.$emit('emittedEventCallingPredictionsSpacePlotView', this.OverviewResults)*/
this.OverviewResults.pop()
}
this.getFinalResults()
}) })
.catch(error => { .catch(error => {
console.log(error) console.log(error)
}) })
},
getFinalResults () {
this.FinalResults = this.getFinalResultsFromBackend()
},
getFinalResultsFromBackend () {
const path = `http://localhost:5000/data/SendFinalResultsBacktoVisualize`
const axiosConfig = {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
}
}
axios.get(path, axiosConfig)
.then(response => {
this.FinalResults = response.data.FinalResults
EventBus.$emit('emittedEventCallingLinePlot', this.FinalResults)
})
.catch(error => {
console.log(error)
})
},
fileNameSend () {
const path = `http://127.0.0.1:5000/data/ServerRequest`
const postData = {
fileName: this.RetrieveValueFile,
featureSelection: this.SelectedFeaturesPerClassifier
}
const axiosConfig = {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
}
}
axios.post(path, postData, axiosConfig)
.then(response => {
console.log('Send request to server! FileName was sent successfully!')
this.SendAlgorithmsToServer()
})
.catch(error => {
console.log(error)
})
},
SendAlgorithmsToServer () {
const path = `http://127.0.0.1:5000/data/ServerRequestSelParameters`
const postData = {
Algorithms: this.Algorithms,
}
const axiosConfig = {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
}
}
axios.post(path, postData, axiosConfig)
.then(response => {
console.log('Send request to server! Algorithm name was sent successfully!')
this.getModelsPerformance()
})
.catch(error => {
console.log(error)
})
},
SendBrushedParameters () {
EventBus.$emit('emittedEventCallingModelBrushed')
const path = `http://127.0.0.1:5000/data/SendBrushedParam`
console.log(this.selectedAlgorithm)
const postData = {
brushed: this.brushed,
algorithm: this.selectedAlgorithm
}
const axiosConfig = {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
}
}
axios.post(path, postData, axiosConfig)
.then(response => {
console.log('Send request to server! Brushed parameters sent successfully!')
if (!this.ExecutionStart) {
} else {
this.getCollection()
}
})
.catch(error => {
console.log(error)
})
},
CallPCP () {
EventBus.$emit('emittedEventCallingModelClear')
EventBus.$emit('emittedEventCallingModelSelect', this.selectedAlgorithm)
EventBus.$emit('emittedEventCallingModel', this.PerformancePerModel)
} }
}, },
mounted() { mounted() {
loadProgressBar()
this.fileNameSend()
window.onbeforeunload = function(e) {
//put here the reset function!
return 'Dialog text here.'
}
$(window).unload(function() {
alert('Handler for .unload() called.')
})
EventBus.$on('ReturningBrushedPoints', data => { this.brushed = data })
EventBus.$on('SendSelectedPointsToServerEvent', data => { this.ClassifierIDsList = data }) EventBus.$on('SendSelectedPointsToServerEvent', data => { this.ClassifierIDsList = data })
EventBus.$on('SendSelectedPointsToServerEvent', this.SendSelectedPointsToServer) EventBus.$on('SendSelectedPointsToServerEvent', this.SendSelectedPointsToServer)
EventBus.$on('SendSelectedFeaturesEvent', data => { this.SelectedFeaturesPerClassifier = data }) EventBus.$on('SendSelectedFeaturesEvent', data => { this.SelectedFeaturesPerClassifier = data })
} EventBus.$emit('SendToServerDataSetConfirmation', data => { this.RetrieveValueFile = data })
EventBus.$emit('SendToServerDataSetConfirmation', data => { this.fileNameSend })
EventBus.$on('PCPCall', data => { this.selectedAlgorithm = data })
EventBus.$on('PCPCall', this.CallPCP)
EventBus.$on('PCPCallDB', this.SendBrushedParameters)
//Prevent double click to search for a word.
document.addEventListener('mousedown', function (event) {
if (event.detail > 1) {
event.preventDefault();
// of course, you still do not know what you prevent here...
// You could also check event.ctrlKey/event.shiftKey/event.altKey
// to not prevent something useful.
}
}, false);
},
}) })
</script> </script>
<style>
#nprogress .bar {
background: red !important;
}
#nprogress .peg {
box-shadow: 0 0 10px red, 0 0 5px red !important;
}
#nprogress .spinner-icon {
border-top-color: red !important;
border-left-color: red !important;
}
</style>

@ -1,27 +0,0 @@
<template>
<button
id="Execute"
v-on:click="execute">
<font-awesome-icon icon="play" />
{{ value }}
</button>
</template>
<script>
export default {
name: 'ParametersSetting',
data () {
return {
InitializeEnsemble: false,
value: 'Execute'
};
},
methods: {
execute () {
this.InitializeEnsemble = true
this.value = 'ReExecute'
this.$emit('InitializeEnsembleLearningEvent')
}
}
}
</script>

@ -0,0 +1,54 @@
<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: ''
}
},
methods: {
ScatterPlotDataView () {
const XandYCoordinates = this.PredictionsData[0]
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;
}, {})
const Data = [{
x: result.Xax,
y: result.Yax,
mode: 'markers',
}]
const layout = {
title: 'Predictions Space Projection (tSNE)',
xaxis: {
visible: false
},
yaxis: {
visible: false
}
}
Plotly.newPlot('OverviewPredPlotly', Data, layout)
}
},
mounted() {
EventBus.$on('emittedEventCallingPredictionsSpacePlotView', data => {
this.PredictionsData = data})
EventBus.$on('emittedEventCallingPredictionsSpacePlotView', this.ScatterPlotDataView)
}
}
</script>

@ -20,18 +20,9 @@ export default {
const classifiersInfo = JSON.parse(this.ScatterPlotResults[2]) const classifiersInfo = JSON.parse(this.ScatterPlotResults[2])
var classifiersInfoProcessing = [] var classifiersInfoProcessing = []
let step = 0 for (let i = 0; i < classifiersInfo.length; i++) {
let doubleStep = 1 classifiersInfoProcessing[i] = 'ClassifierID: ' + i + '; Details: '
for (let i = 0; i < classifiersInfo.length / 2; i++) {
classifiersInfoProcessing[i] = 'ClassifierID: ' + step + '; Details: '
step++
for (let j = 0; j < Object.values(classifiersInfo[doubleStep]).length; j++) {
classifiersInfoProcessing[i] = classifiersInfoProcessing[i] + Object.keys(classifiersInfo[doubleStep])[j] + ': ' + Object.values(classifiersInfo[doubleStep])[j]
}
doubleStep = doubleStep + 2
} }
const DataforMDS = [{ const DataforMDS = [{
x: MDSData[0], x: MDSData[0],
y: MDSData[1], y: MDSData[1],
@ -49,7 +40,7 @@ export default {
} }
}] }]
const layout = { const layout = {
title: 'Classifiers Performance MDS', title: 'Models Performance (MDS)',
xaxis: { xaxis: {
visible: false visible: false
}, },

@ -14,399 +14,389 @@ export default {
name: "StretchedChord", name: "StretchedChord",
data () { data () {
return { return {
AllResults: '', AllResults: 0
} }
}, },
methods: { methods: {
StretchChord () { StretchChord () {
const FeatureImportance = JSON.parse(this.AllResults[3]) const FeatureImportance = this.AllResults[0]
const ClassNames = JSON.parse(this.AllResults[5]) const ClassNames = this.AllResults[1]
const ClassifiersIDs = this.AllResults[2]
var SortFeaturesPerClass = [] if (ClassifiersIDs != ''){
var MergeSortFeaturesPerClass = [] var SortFeaturesPerClass = []
var counter = 0 var MergeSortFeaturesPerClass = []
FeatureImportance.forEach(classifier => { var counter = 0
counter++ FeatureImportance.forEach(classifier => {
var length = this.ObjectSize(classifier) var length = this.ObjectSize(classifier)
for (let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
SortFeaturesPerClass.push(this.sortObject(classifier[i], counter, ClassNames[i])) SortFeaturesPerClass.push(this.sortObject(classifier[i], ClassifiersIDs[counter], ClassNames[i]))
}
counter++
})
MergeSortFeaturesPerClass = SortFeaturesPerClass[0]
for (let i = 0; i < SortFeaturesPerClass.length - 1; i++) {
MergeSortFeaturesPerClass = MergeSortFeaturesPerClass.concat(SortFeaturesPerClass[i+1])
} }
}) var margin = {left:60, top:40, right:80, bottom:50},
MergeSortFeaturesPerClass = SortFeaturesPerClass[0] width = Math.max( Math.min(window.innerWidth, 500) - margin.left - margin.right - 20, 10),
for (let i = 0; i < SortFeaturesPerClass.length - 1; i++) { height = Math.max( Math.min(window.innerHeight - 250, 700) - margin.top - margin.bottom - 20, 10),
MergeSortFeaturesPerClass = MergeSortFeaturesPerClass.concat(SortFeaturesPerClass[i+1]) innerRadius = Math.min(width * 0.33, height * .45),
} outerRadius = innerRadius * 1.05;
var margin = {left:80, top:40, right:120, bottom:50},
width = Math.max( Math.min(window.innerWidth, 1100) - margin.left - margin.right - 20, 400),
height = Math.max( Math.min(window.innerHeight - 250, 900) - margin.top - margin.bottom - 20, 400),
innerRadius = Math.min(width * 0.33, height * .45),
outerRadius = innerRadius * 1.05;
//Recalculate the width and height now that we know the radius
width = outerRadius * 2 + margin.right + margin.left;
height = outerRadius * 2 + margin.top + margin.bottom;
//Reset the overall font size
var newFontSize = Math.min(70, Math.max(40, innerRadius * 62.5 / 250));
d3.select("html").style("font-size", newFontSize + "%");
////////////////////////////////////////////////////////////
////////////////// Set-up Chord parameters /////////////////
////////////////////////////////////////////////////////////
var pullOutSize = 20 + 30/135 * innerRadius; //Recalculate the width and height now that we know the radius
var numFormat = d3.format(",.0f"); width = outerRadius * 2 + margin.right + margin.left;
var defaultOpacity = 0.85, height = outerRadius * 2 + margin.top + margin.bottom;
fadeOpacity = 0.075;
//Reset the overall font size
var loom = d3.loom() var newFontSize = Math.min(70, Math.max(40, innerRadius * 62.5 / 250));
.padAngle(0.05) d3.select("html").style("font-size", newFontSize + "%");
//.sortSubgroups(sortCharacter)
//.heightInner(0)
//.sortGroups(function(d) { return d.words })
//.sortLooms(d3.descending)
.emptyPerc(0)
.widthInner(40)
//.widthInner(function(d) { return 6 * d.length; })
.value(function(d) { return d.importancerate; })
.outercolorfun(function(d) { return d.class; })
.inner(function(d) { return d.feature; })
.outer(function(d) { return d.classifier; });
var arc = d3.arc()
.innerRadius(innerRadius*1.01)
.outerRadius(outerRadius);
var string = d3.string()
.radius(innerRadius)
.pullout(pullOutSize);
//////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////
////////////////////// Create SVG ////////////////////////// ////////////////// Set-up Chord parameters /////////////////
//////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////
d3.select("#chart").selectAll("*").remove(); var pullOutSize = 20 + 30/135 * innerRadius;
var numFormat = d3.format(",.0f");
var defaultOpacity = 0.85,
fadeOpacity = 0.075;
var loom = d3.loom()
.padAngle(0.05)
//.sortSubgroups(sortCharacter)
//.heightInner(0)
//.sortGroups(function(d) { return d.words })
//.sortLooms(d3.descending)
.emptyPerc(0)
.widthInner(40)
//.widthInner(function(d) { return 6 * d.length; })
.value(function(d) { return d.importancerate; })
.outercolorfun(function(d) { return d.class; })
.inner(function(d) { return d.feature; })
.outer(function(d) { return d.classifier; });
var arc = d3.arc()
.innerRadius(innerRadius*1.01)
.outerRadius(outerRadius);
var string = d3.string()
.radius(innerRadius)
.pullout(pullOutSize);
var svg = d3.select("#chart").append("svg") ////////////////////////////////////////////////////////////
.attr("width", width + margin.left + margin.right) ////////////////////// Create SVG //////////////////////////
.attr("height", height + margin.top + margin.bottom); ////////////////////////////////////////////////////////////
d3.select("#chart").selectAll("*").remove();
//////////////////////////////////////////////////////////// var svg = d3.select("#chart").append("svg")
///////////////////// Read in data ///////////////////////// .attr("width", width + margin.left + margin.right)
//////////////////////////////////////////////////////////// .attr("height", height + margin.top + margin.bottom);
//////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////
///////////////////// Prepare the data ///////////////////// ///////////////////// Read in data /////////////////////////
//////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////
//Sort the inner characters based on the total number of words spoken
var dataAgg = MergeSortFeaturesPerClass
//Find the total number of words per character
var dataChar = d3.nest()
.key(function(d) { return d.character; })
.rollup(function(leaves) { return d3.sum(leaves, function(d) { return d.words; }); })
.entries(dataAgg)
.sort(function(a, b){ return d3.descending(a.value, b.value); });
//Unflatten the result
var characterOrder = dataChar.map(function(d) { return d.key })
//Sort the characters on a specific order
function sortCharacter(a, b) {
return characterOrder.indexOf(a) - characterOrder.indexOf(b)
}//sortCharacter
//Set more loom functions
loom
.sortSubgroups(sortCharacter)
.heightInner(innerRadius*0.2/characterOrder.length)
////////////////////////////////////////////////////////////
///////////////////////// Colors ///////////////////////////
////////////////////////////////////////////////////////////
var categories = ClassNames
var colors = ["#0000FF", "#ff0000", "#00ff00"]
var color = d3.scaleOrdinal()
.domain(categories)
.range(colors)
//Create a group that already holds the data
var g = svg.append("g")
.attr("transform", "translate(" + (width/2 + margin.left) + "," + (height/2 + margin.top) + ")")
.datum(loom(dataAgg))
//////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////
///////////////////// Set-up title ///////////////////////// ///////////////////// Prepare the data /////////////////////
//////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////
var titles = g.append("g") //Sort the inner characters based on the total number of words spoken
.attr("class", "texts") var dataAgg = MergeSortFeaturesPerClass
.style("opacity", 0)
//Find the total number of words per character
var dataChar = d3.nest()
.key(function(d) { return d.character; })
.rollup(function(leaves) { return d3.sum(leaves, function(d) { return d.words; }); })
.entries(dataAgg)
.sort(function(a, b){ return d3.descending(a.value, b.value); });
//Unflatten the result
var characterOrder = dataChar.map(function(d) { return d.key })
//Sort the characters on a specific order
function sortCharacter(a, b) {
return characterOrder.indexOf(a) - characterOrder.indexOf(b)
}//sortCharacter
titles.append("text") //Set more loom functions
.attr("class", "name-title") loom
.attr("x", 0) .sortSubgroups(sortCharacter)
.attr("y", -innerRadius*5/6) .heightInner(innerRadius*0.2/characterOrder.length)
titles.append("text") ////////////////////////////////////////////////////////////
.attr("class", "value-title") ///////////////////////// Colors ///////////////////////////
.attr("x", 0) ////////////////////////////////////////////////////////////
.attr("y", -innerRadius*5/6 + 25)
var categories = ClassNames
//The character pieces var colors = ["#0000FF", "#ff0000", "#00ff00"]
titles.append("text") var color = d3.scaleOrdinal()
.attr("class", "character-note") .domain(categories)
.attr("x", 0) .range(colors)
.attr("y", innerRadius/2)
.attr("dy", "0.35em") //Create a group that already holds the data
var g = svg.append("g")
//////////////////////////////////////////////////////////// .attr("transform", "translate(" + (width/2 + margin.left) + "," + (height/2 + margin.top) + ")")
////////////////////// Draw outer arcs ///////////////////// .datum(loom(dataAgg))
////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////
///////////////////// Set-up title /////////////////////////
////////////////////////////////////////////////////////////
var arcs = g.append("g") var titles = g.append("g")
.attr("class", "arcs") .attr("class", "texts")
.selectAll("g") .style("opacity", 0)
.data(function(s) {
return s.groups
})
.enter().append("g")
.attr("class", "arc-wrapper")
.each(function(d) {
d.pullOutSize = (pullOutSize * ( d.startAngle > Math.PI + 1e-2 ? -1 : 1))
})
.on("mouseover", function(d) {
//Hide all other arcs titles.append("text")
d3.selectAll(".arc-wrapper") .attr("class", "name-title")
.transition() .attr("x", 0)
.style("opacity", function(s) { return s.outername === d.outername ? 1 : 0.5 }) .attr("y", -innerRadius*5/6)
//Hide all other strings titles.append("text")
d3.selectAll(".string") .attr("class", "value-title")
.transition() .attr("x", 0)
.style("opacity", function(s) { return s.outer.outername === d.outername ? 1 : fadeOpacity }) .attr("y", -innerRadius*5/6 + 25)
//The character pieces
titles.append("text")
.attr("class", "character-note")
.attr("x", 0)
.attr("y", innerRadius/2)
.attr("dy", "0.35em")
////////////////////////////////////////////////////////////
////////////////////// Draw outer arcs /////////////////////
////////////////////////////////////////////////////////////
var arcs = g.append("g")
.attr("class", "arcs")
.selectAll("g")
.data(function(s) {
return s.groups
})
.enter().append("g")
.attr("class", "arc-wrapper")
.each(function(d) {
d.pullOutSize = (pullOutSize * ( d.startAngle > Math.PI + 1e-2 ? -1 : 1))
})
.on("mouseover", function(d) {
//Find the data for the strings of the hovered over location //Hide all other arcs
var locationData = loom(dataAgg).filter(function(s) { return s.outer.outername === d.outername }) d3.selectAll(".arc-wrapper")
//Hide the characters who haven't said a word .transition()
d3.selectAll(".inner-label") .style("opacity", function(s) { return s.outername === d.outername ? 1 : 0.5 })
.transition()
.style("opacity", function(s) {
//Find out how many words the character said at the hovered over location
var char = locationData.filter(function(c) { return c.outer.innername === s.name })
return char.length === 0 ? 0.1 : 1
})
})
.on("mouseout", function(d) {
//Sjow all arc labels
d3.selectAll(".arc-wrapper")
.transition()
.style("opacity", 1)
//Show all strings again
d3.selectAll(".string")
.transition()
.style("opacity", defaultOpacity)
//Show all characters again //Hide all other strings
d3.selectAll(".inner-label") d3.selectAll(".string")
.transition() .transition()
.style("opacity", 1) .style("opacity", function(s) { return s.outer.outername === d.outername ? 1 : fadeOpacity })
})
//Find the data for the strings of the hovered over location
var outerArcs = arcs.append("path") var locationData = loom(dataAgg).filter(function(s) { return s.outer.outername === d.outername })
.attr("class", "arc") //Hide the characters who haven't said a word
//.style("fill", function(d) { return color(d.outer.innername) }) d3.selectAll(".inner-label")
.attr("d", arc) .transition()
.attr("transform", function(d, i) { //Pull the two slices apart .style("opacity", function(s) {
return "translate(" + d.pullOutSize + ',' + 0 + ")" //Find out how many words the character said at the hovered over location
}) var char = locationData.filter(function(c) { return c.outer.innername === s.name })
return char.length === 0 ? 0.1 : 1
//////////////////////////////////////////////////////////// })
//////////////////// Draw outer labels ///////////////////// })
//////////////////////////////////////////////////////////// .on("mouseout", function(d) {
//Sjow all arc labels
d3.selectAll(".arc-wrapper")
.transition()
.style("opacity", 1)
//Show all strings again
d3.selectAll(".string")
.transition()
.style("opacity", defaultOpacity)
//Show all characters again
d3.selectAll(".inner-label")
.transition()
.style("opacity", 1)
})
//The text needs to be rotated with the offset in the clockwise direction var outerArcs = arcs.append("path")
var outerLabels = arcs.append("g") .attr("class", "arc")
.each(function(d) { d.angle = ((d.startAngle + d.endAngle) / 2) }) //.style("fill", function(d) { return color(d.outer.innername) })
.attr("class", "outer-labels") .attr("d", arc)
.attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null }) .attr("transform", function(d, i) { //Pull the two slices apart
.attr("transform", function(d,i) { return "translate(" + d.pullOutSize + ',' + 0 + ")"
var c = arc.centroid(d) })
return "translate(" + (c[0] + d.pullOutSize) + "," + c[1] + ")" ////////////////////////////////////////////////////////////
+ "rotate(" + (d.angle * 180 / Math.PI - 90) + ")" //////////////////// Draw outer labels /////////////////////
+ "translate(" + 26 + ",0)" ////////////////////////////////////////////////////////////
+ (d.angle > Math.PI ? "rotate(180)" : "")
})
//The outer name
outerLabels.append("text")
.attr("class", "outer-label")
.attr("dy", ".35em")
.text(function(d,i){ return d.outername })
//The value below it
outerLabels.append("text")
.attr("class", "outer-label-value")
.attr("dy", "1.5em")
.text(function(d,i){ return 'Relation:' + numFormat(d.value) + '%'})
//////////////////////////////////////////////////////////// //The text needs to be rotated with the offset in the clockwise direction
////////////////// Draw inner strings ////////////////////// var outerLabels = arcs.append("g")
//////////////////////////////////////////////////////////// .each(function(d) { d.angle = ((d.startAngle + d.endAngle) / 2) })
.attr("class", "outer-labels")
var strings = g.append("g") .attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null })
.attr("class", "stringWrapper") .attr("transform", function(d,i) {
.style("isolation", "isolate") var c = arc.centroid(d)
.selectAll("path") return "translate(" + (c[0] + d.pullOutSize) + "," + c[1] + ")"
.data(function(strings) { + "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
return strings + "translate(" + 26 + ",0)"
}) + (d.angle > Math.PI ? "rotate(180)" : "")
.enter().append("path")
.attr("class", "string")
.style("mix-blend-mode", "multiply")
.attr("d", string)
.style("fill", function(d) {
return d3.rgb( color(d.outer.outercolor) ).brighter(0.2)
}) })
.style("opacity", defaultOpacity)
////////////////////////////////////////////////////////////
//////////////////// Draw inner labels /////////////////////
////////////////////////////////////////////////////////////
//The text also needs to be displaced in the horizontal directions //The outer name
//And also rotated with the offset in the clockwise direction outerLabels.append("text")
var innerLabels = g.append("g") .attr("class", "outer-label")
.attr("class","inner-labels") .attr("dy", ".35em")
.selectAll("text") .text(function(d,i){ return d.outername })
.data(function(s) {
return s.innergroups
})
.enter().append("text")
.attr("class", "inner-label")
.attr("x", function(d,i) { return d.x })
.attr("y", function(d,i) { return d.y })
.style("text-anchor", "middle")
.attr("dy", ".35em")
.text(function(d,i) { return d.name })
.on("mouseover", function(d) {
//Show all the strings of the highlighted character and hide all else //The value below it
d3.selectAll(".string") outerLabels.append("text")
.transition() .attr("class", "outer-label-value")
.style("opacity", function(s) { .attr("dy", "1.5em")
return s.outer.innername !== d.name ? fadeOpacity : 1 .text(function(d,i){ return 'Rel.:' + numFormat(d.value) + '%'})
////////////////////////////////////////////////////////////
////////////////// Draw inner strings //////////////////////
////////////////////////////////////////////////////////////
var strings = g.append("g")
.attr("class", "stringWrapper")
.style("isolation", "isolate")
.selectAll("path")
.data(function(strings) {
return strings
})
.enter().append("path")
.attr("class", "string")
.style("mix-blend-mode", "multiply")
.attr("d", string)
.style("fill", function(d) {
return d3.rgb( color(d.outer.outercolor) ).brighter(0.2)
}) })
.style("opacity", defaultOpacity)
////////////////////////////////////////////////////////////
//////////////////// Draw inner labels /////////////////////
////////////////////////////////////////////////////////////
//The text also needs to be displaced in the horizontal directions
//And also rotated with the offset in the clockwise direction
var innerLabels = g.append("g")
.attr("class","inner-labels")
.selectAll("text")
.data(function(s) {
return s.innergroups
})
.enter().append("text")
.attr("class", "inner-label")
.attr("x", function(d,i) { return d.x })
.attr("y", function(d,i) { return d.y })
.style("text-anchor", "middle")
.attr("dy", ".35em")
.text(function(d,i) { return d.name })
.on("mouseover", function(d) {
//Update the word count of the outer labels //Show all the strings of the highlighted character and hide all else
var characterData = loom(dataAgg).filter(function(s) { return s.outer.innername === d.name }) d3.selectAll(".string")
d3.selectAll(".outer-label-value") .transition()
.text(function(s,i){ .style("opacity", function(s) {
//Find which characterData is the correct one based on location return s.outer.innername !== d.name ? fadeOpacity : 1
var loc = characterData.filter(function(c) { return c.outer.outername === s.outername }) })
if(loc.length === 0) {
var value = 0
} else {
var value = loc[0].outer.value
}
return numFormat(value) + (value === 1 ? " word" : " words")
}) //Update the word count of the outer labels
var characterData = loom(dataAgg).filter(function(s) { return s.outer.innername === d.name })
//Hide the arc where the character hasn't said a thing d3.selectAll(".outer-label-value")
d3.selectAll(".arc-wrapper") .text(function(s,i){
.transition() //Find which characterData is the correct one based on location
.style("opacity", function(s) { var loc = characterData.filter(function(c) { return c.outer.outername === s.outername })
//Find which characterData is the correct one based on location if(loc.length === 0) {
var loc = characterData.filter(function(c) { return c.outer.outername === s.outername }) var value = 0
return loc.length === 0 ? 0.1 : 1 } else {
}) var value = loc[0].outer.value
}
return numFormat(value) + (value === 1 ? " Imp." : " Imp.")
})
//Hide the arc where the character hasn't said a thing
d3.selectAll(".arc-wrapper")
.transition()
.style("opacity", function(s) {
//Find which characterData is the correct one based on location
var loc = characterData.filter(function(c) { return c.outer.outername === s.outername })
return loc.length === 0 ? 0.1 : 1
})
//Update the title to show the total word count of the character })
d3.selectAll(".texts") .on("mouseout", function(d) {
.transition()
.style("opacity", 1)
d3.select(".name-title")
.text(d.name)
d3.select(".value-title")
.text(function() {
var words = dataChar.filter(function(s) { return s.key === d.name })
return numFormat(words[0].value)
})
}) //Put the string opacity back to normal
.on("mouseout", function(d) { d3.selectAll(".string")
.transition()
//Put the string opacity back to normal .style("opacity", defaultOpacity)
d3.selectAll(".string")
.transition() //Return the word count to what it was
.style("opacity", defaultOpacity) d3.selectAll(".outer-label-value")
.text(function(s,i){ return 'Imp.: ' + numFormat(s.value) })
//Show all arcs again
d3.selectAll(".arc-wrapper")
.transition()
.style("opacity", 1)
//Return the word count to what it was //Hide the title
d3.selectAll(".outer-label-value") d3.selectAll(".texts")
.text(function(s,i){ return 'Importance Rate: ' + numFormat(s.value) }) .transition()
.style("opacity", 0)
//Show all arcs again })
d3.selectAll(".arc-wrapper")
.transition() ////////////////////////////////////////////////////////////
.style("opacity", 1) ///////////////////// Extra functions //////////////////////
////////////////////////////////////////////////////////////
//Hide the title
d3.selectAll(".texts") //Sort alphabetically
.transition() function sortAlpha(a, b){
.style("opacity", 0) if(a < b) return -1
if(a > b) return 1
}) return 0
}//sortAlpha
////////////////////////////////////////////////////////////
///////////////////// Extra functions ////////////////////// //Sort on the number of words
//////////////////////////////////////////////////////////// function sortWords(a, b){
if(a.words < b.words) return -1
//Sort alphabetically if(a.words > b.words) return 1
function sortAlpha(a, b){ return 0
if(a < b) return -1 }//sortWords
if(a > b) return 1
return 0 /*Taken from http://bl.ocks.org/mbostock/7555321
}//sortAlpha //Wraps SVG text*/
function wrap(text, width) {
//Sort on the number of words text.each(function() {
function sortWords(a, b){ var text = d3.select(this),
if(a.words < b.words) return -1 words = text.text().split(/\s+/).reverse(),
if(a.words > b.words) return 1 word,
return 0 line = [],
}//sortWords lineNumber = 0,
lineHeight = 1.2, // ems
/*Taken from http://bl.ocks.org/mbostock/7555321 y = parseFloat(text.attr("y")),
//Wraps SVG text*/ x = parseFloat(text.attr("x")),
function wrap(text, width) { dy = parseFloat(text.attr("dy")),
text.each(function() { tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em")
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(), while (word = words.pop()) {
word, line.push(word)
line = [],
lineNumber = 0,
lineHeight = 1.2, // ems
y = parseFloat(text.attr("y")),
x = parseFloat(text.attr("x")),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em")
while (word = words.pop()) {
line.push(word)
tspan.text(line.join(" "))
if (tspan.node().getComputedTextLength() > width) {
line.pop()
tspan.text(line.join(" ")) tspan.text(line.join(" "))
line = [word] if (tspan.node().getComputedTextLength() > width) {
tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word) line.pop()
} tspan.text(line.join(" "))
} line = [word]
}) tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word)
}//wrap }
}
})
}//wrap
}
}, },
sortObject (obj, classifierID, ClassName) { sortObject (obj, classifierID, ClassName) {
var arr = [] var arr = []
@ -414,8 +404,8 @@ export default {
if (Object.prototype.hasOwnProperty.call(obj, prop)) { if (Object.prototype.hasOwnProperty.call(obj, prop)) {
//if ((this.LimitFeatureImportance/100) < Math.abs(obj[prop])) { //if ((this.LimitFeatureImportance/100) < Math.abs(obj[prop])) {
arr.push({ arr.push({
'feature': 'Feature ' + prop, 'feature': 'F ' + prop,
'classifier': 'Classifier ' + classifierID, 'classifier': 'Cl ' + classifierID,
'class': ClassName, 'class': ClassName,
'importancerate': Math.abs(Math.round(obj[prop] * 100)) 'importancerate': Math.abs(Math.round(obj[prop] * 100))
}) })

@ -1,67 +0,0 @@
<template>
<div>
<div>Limiting Feature Importance<vue-slider v-model="LimitFeatureImportance"></vue-slider></div>
<div>{{ LimitFeatureImportance }}</div>
</div>
</template>
<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
export default {
name: 'Tuning',
components: {
VueSlider
},
data () {
return {
LimitFeatureImportance: 10
}
},
mounted () {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
</style>

@ -6,9 +6,9 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'
import router from './router' import router from './router'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUpload, faPlay } from '@fortawesome/free-solid-svg-icons' import { faUpload, faPlay, faCheck, faSave} from '@fortawesome/free-solid-svg-icons'
library.add(faUpload, faPlay) library.add(faUpload, faPlay, faCheck, faSave)
Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.component('font-awesome-icon', FontAwesomeIcon)

554
run.py

@ -5,23 +5,29 @@ from flask_cors import CORS, cross_origin
import json import json
import collections import collections
import numpy as np import numpy as np
from numpy import array import re
from numpy import array
import pandas as pd import pandas as pd
import warnings import warnings
import copy import copy
from joblib import Memory from joblib import Memory
from itertools import chain
from sklearn.linear_model import LogisticRegression from sklearn.linear_model import LogisticRegression
from sklearn.neighbors import KNeighborsClassifier from sklearn.neighbors import KNeighborsClassifier
from sklearn.naive_bayes import GaussianNB from sklearn.naive_bayes import GaussianNB
from sklearn.ensemble import RandomForestClassifier from sklearn.ensemble import RandomForestClassifier
from mlxtend.classifier import StackingCVClassifier from sklearn.pipeline import make_pipeline
from sklearn import model_selection from sklearn import model_selection
from sklearn.model_selection import GridSearchCV from sklearn.model_selection import GridSearchCV
from sklearn.manifold import MDS from sklearn.manifold import MDS
from sklearn.manifold import TSNE
from sklearn.metrics import classification_report from sklearn.metrics import classification_report
from sklearn.preprocessing import scale from sklearn.preprocessing import scale
from mlxtend.classifier import StackingCVClassifier
from mlxtend.feature_selection import ColumnSelector
# This block of code is for the connection between the server, the database, and the client (plus routing). # This block of code is for the connection between the server, the database, and the client (plus routing).
# Access MongoDB # Access MongoDB
@ -36,18 +42,65 @@ cors = CORS(app, resources={r"/data/*": {"origins": "*"}})
@cross_origin(origin='localhost',headers=['Content-Type','Authorization']) @cross_origin(origin='localhost',headers=['Content-Type','Authorization'])
@app.route('/data/ServerRequest', methods=["GET", "POST"]) @app.route('/data/ServerRequest', methods=["GET", "POST"])
def RetrieveFileName(): def RetrieveFileName():
global fileName
fileName = request.get_data().decode('utf8').replace("'", '"') fileName = request.get_data().decode('utf8').replace("'", '"')
global featureSelection global featureSelection
featureSelection = request.get_data().decode('utf8').replace("'", '"') featureSelection = request.get_data().decode('utf8').replace("'", '"')
featureSelection = json.loads(featureSelection) featureSelection = json.loads(featureSelection)
return jsonify(fileName)
# Sent data to client
@app.route('/data/ClientRequest', methods=["GET", "POST"])
def CollectionData():
global DataRawLength global DataRawLength
global DataResultsRaw global DataResultsRaw
global RANDOM_SEED
RANDOM_SEED = 42
global XData
XData = []
global yData
yData = []
global ClassifierIDsList
ClassifierIDsList = ''
# Initializing models
global classifiersId
classifiersId = []
global classifiersIDwithFI
classifiersIDwithFI = []
global classifiersIDPlusParams
classifiersIDPlusParams = []
global classifierID
classifierID = 0
global resultsList
resultsList = []
global allParametersPerformancePerModel
allParametersPerformancePerModel = []
global all_classifiers
all_classifiers = []
global crossValidation
crossValidation = 3
global scoring
#scoring = {'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted', 'neg_log_loss': 'neg_log_loss', 'r2': 'r2', 'neg_mean_absolute_error': 'neg_mean_absolute_error', 'neg_mean_absolute_error': 'neg_mean_absolute_error'}
scoring = {'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted'}
global loopFeatures
loopFeatures = 2
global flag
flag = 0
global yPredictProb
yPredictProb = []
global results
results = []
global target_names
target_names = []
DataRawLength = -1 DataRawLength = -1
data = json.loads(fileName) data = json.loads(fileName)
if data['fileName'] == 'BreastC': if data['fileName'] == 'BreastC':
@ -62,13 +115,58 @@ def CollectionData():
item['InstanceID'] = index item['InstanceID'] = index
DataResultsRaw.append(item) DataResultsRaw.append(item)
DataRawLength = len(DataResultsRaw) DataRawLength = len(DataResultsRaw)
json.dumps(DataResultsRaw) DataSetSelection()
return 'Everything is okay'
# Sent data to client
@app.route('/data/ClientRequest', methods=["GET", "POST"])
def CollectionData():
json.dumps(DataResultsRaw)
response = { response = {
'Collection': DataResultsRaw 'Collection': DataResultsRaw
} }
return jsonify(response) return jsonify(response)
def DataSetSelection():
DataResults = copy.deepcopy(DataResultsRaw)
for dictionary in DataResultsRaw:
for key in dictionary.keys():
if (key.find('*') != -1):
target = key
continue
continue
DataResultsRaw.sort(key=lambda x: x[target], reverse=True)
DataResults.sort(key=lambda x: x[target], reverse=True)
for dictionary in DataResults:
del dictionary['_id']
del dictionary['InstanceID']
del dictionary[target]
AllTargets = [o[target] for o in DataResultsRaw]
AllTargetsFloatValues = []
previous = None
Class = 0
for i, value in enumerate(AllTargets):
if (i == 0):
previous = value
target_names.append(value)
if (value == previous):
AllTargetsFloatValues.append(Class)
else:
Class = Class + 1
target_names.append(value)
AllTargetsFloatValues.append(Class)
previous = value
ArrayDataResults = pd.DataFrame.from_dict(DataResults)
global XData, yData, RANDOM_SEED
XData, yData = ArrayDataResults, AllTargetsFloatValues
warnings.simplefilter('ignore')
return 'Everything is okay'
# Main function # Main function
if __name__ == '__main__': if __name__ == '__main__':
@ -84,24 +182,29 @@ def catch_all(path):
# This block of code is for server computations # This block of code is for server computations
def column_index(df, query_cols):
cols = df.columns.values
sidx = np.argsort(cols)
return sidx[np.searchsorted(cols,query_cols,sorter=sidx)].tolist()
global mem global mem
mem = Memory("./cache_dir") mem = Memory("./cache_dir")
def GridSearch(clf, params, scoring, FI, target_names): def GridSearch(clf, params, FI):
global XData
global yData
global scoring
global target_names
grid = GridSearchCV(estimator=clf, grid = GridSearchCV(estimator=clf,
param_grid=params, param_grid=params,
scoring=scoring, scoring=scoring,
cv=5, cv=crossValidation,
refit='accuracy', refit='accuracy',
n_jobs = -1) n_jobs = -1)
grid.fit(XData, yData) grid.fit(XData, yData)
cv_results = [] cv_results = []
cv_results.append(grid.cv_results_) cv_results.append(grid.cv_results_)
df_cv_results = pd.DataFrame.from_dict(cv_results) df_cv_results = pd.DataFrame.from_dict(cv_results)
number_of_classifiers = len(df_cv_results.iloc[0][0]) number_of_classifiers = len(df_cv_results.iloc[0][0])
number_of_columns = len(df_cv_results.iloc[0]) number_of_columns = len(df_cv_results.iloc[0])
df_cv_results_per_item = [] df_cv_results_per_item = []
@ -117,8 +220,12 @@ def GridSearch(clf, params, scoring, FI, target_names):
parameters = df_cv_results_classifiers['params'] parameters = df_cv_results_classifiers['params']
PerClassMetrics = [] PerClassMetrics = []
FeatureImp = [] FeatureImp = []
PerFeatureAccuracy = []
global subset global subset
print(XData.columns) global loopFeatures
global flag
global yPredictProb
counter = 0
subset = XData subset = XData
for i, eachClassifierParams in enumerate(grid.cv_results_['params']): for i, eachClassifierParams in enumerate(grid.cv_results_['params']):
eachClassifierParamsDictList = {} eachClassifierParamsDictList = {}
@ -126,51 +233,52 @@ def GridSearch(clf, params, scoring, FI, target_names):
Listvalue = [] Listvalue = []
Listvalue.append(value) Listvalue.append(value)
eachClassifierParamsDictList[key] = Listvalue eachClassifierParamsDictList[key] = Listvalue
if (FI == 1): counter = counter + 1
if (featureSelection['featureSelection'] == ''):
subset = XData
else:
featureSelected = []
if ((i+1) == int(''.join(x for x in featureSelection['featureSelection'][0] if x.isdigit()))):
if (int(''.join(x for x in featureSelection['featureSelection'][2] if x.isdigit())) == 1):
featureSelected.append('petal_l')
if (int(''.join(x for x in featureSelection['featureSelection'][5] if x.isdigit())) == 1):
featureSelected.append('petal_w')
if (int(''.join(x for x in featureSelection['featureSelection'][8] if x.isdigit())) == 1):
featureSelected.append('sepal_l')
if (int(''.join(x for x in featureSelection['featureSelection'][11] if x.isdigit())) == 1):
featureSelected.append('sepal_w')
else:
if (int(''.join(x for x in featureSelection['featureSelection'][14] if x.isdigit())) == 1):
featureSelected.append('petal_l')
if (int(''.join(x for x in featureSelection['featureSelection'][17] if x.isdigit())) == 1):
featureSelected.append('petal_w')
if (int(''.join(x for x in featureSelection['featureSelection'][20] if x.isdigit())) == 1):
featureSelected.append('sepal_l')
if (int(''.join(x for x in featureSelection['featureSelection'][23] if x.isdigit())) == 1):
featureSelected.append('sepal_w')
print(featureSelected)
subset = XData[featureSelected]
grid = GridSearchCV(estimator=clf, grid = GridSearchCV(estimator=clf,
param_grid=eachClassifierParamsDictList, param_grid=eachClassifierParamsDictList,
scoring=scoring, scoring=scoring,
cv=5, cv=crossValidation,
refit='accuracy', refit='accuracy',
n_jobs = -1) n_jobs = -1)
grid.fit(subset, yData) if (featureSelection['featureSelection'] == ''):
subset = XData
else:
featureSelected = []
if (int(''.join(x for x in featureSelection['featureSelection'][loopFeatures] if x.isdigit())) == 1):
featureSelected.append('petal_l')
loopFeatures = loopFeatures + 3
if (int(''.join(x for x in featureSelection['featureSelection'][loopFeatures] if x.isdigit())) == 1):
featureSelected.append('petal_w')
loopFeatures = loopFeatures + 3
if (int(''.join(x for x in featureSelection['featureSelection'][loopFeatures] if x.isdigit())) == 1):
featureSelected.append('sepal_l')
loopFeatures = loopFeatures + 3
if (int(''.join(x for x in featureSelection['featureSelection'][loopFeatures] if x.isdigit())) == 1):
featureSelected.append('sepal_w')
loopFeatures = loopFeatures + 3
subset = XData[featureSelected]
element = (column_index(XData, featureSelected))
columns[flag] = element
flag = flag + 1
grid.fit(subset, yData)
if (FI == 0):
n_feats = XData.shape[1]
for i in range(n_feats):
scores = model_selection.cross_val_score(grid.best_estimator_, XData.values[:, i].reshape(-1, 1), yData, cv=crossValidation)
PerFeatureAccuracy.append(scores.mean())
yPredict = grid.predict(subset) yPredict = grid.predict(subset)
yPredictProb.append(grid.predict_proba(subset))
PerClassMetrics.append(classification_report(yData, yPredict, target_names=target_names, digits=2, output_dict=True)) PerClassMetrics.append(classification_report(yData, yPredict, target_names=target_names, digits=2, output_dict=True))
if (FI == 1): if (FI == 1):
X = subset.values X = subset.values
Y = array(yData) Y = array(yData)
FeatureImp.append(class_feature_importance(X, Y, grid.best_estimator_.feature_importances_)) FeatureImp.append(class_feature_importance(X, Y, grid.best_estimator_.feature_importances_))
FeatureImpPandas = pd.DataFrame(FeatureImp) FeatureImpPandas = pd.DataFrame(FeatureImp)
PerClassMetricsPandas = pd.DataFrame(PerClassMetrics) PerClassMetricsPandas = pd.DataFrame(PerClassMetrics)
PerFeatureAccuracyPandas = pd.DataFrame(PerFeatureAccuracy)
return df_cv_results_classifiers, parameters, FeatureImpPandas, PerClassMetricsPandas return df_cv_results_classifiers, parameters, FeatureImpPandas, PerClassMetricsPandas, PerFeatureAccuracyPandas
def class_feature_importance(X, Y, feature_importances): def class_feature_importance(X, Y, feature_importances):
N, M = X.shape N, M = X.shape
@ -186,89 +294,31 @@ def class_feature_importance(X, Y, feature_importances):
#GridSearch = mem.cache(GridSearch) #GridSearch = mem.cache(GridSearch)
def InitializeEnsemble(): def InitializeEnsemble():
DataResults = copy.deepcopy(DataResultsRaw) global resultsList
for dictionary in DataResultsRaw: df_cv_results_classifiersList = []
for key in dictionary.keys(): parametersList = []
if (key.find('*') != -1): FeatureImportanceList = []
target = key PerClassMetricsList = []
continue FeatureAccuracyList = []
continue for j, result in enumerate(resultsList):
df_cv_results_classifiersList.append(resultsList[j][0])
DataResultsRaw.sort(key=lambda x: x[target], reverse=True) parametersList.append(resultsList[j][1])
DataResults.sort(key=lambda x: x[target], reverse=True) FeatureImportanceList.append(resultsList[j][2])
PerClassMetricsList.append(resultsList[j][3])
for dictionary in DataResults: FeatureAccuracyList.append(resultsList[j][4])
del dictionary['_id']
del dictionary['InstanceID'] df_cv_results_classifiers = pd.concat(df_cv_results_classifiersList, ignore_index=True, sort=False)
del dictionary[target] parameters = pd.concat(parametersList, ignore_index=True, sort=False)
FeatureImportance = pd.concat(FeatureImportanceList, ignore_index=True, sort=False)
AllTargets = [o[target] for o in DataResultsRaw] PerClassMetrics = pd.concat(PerClassMetricsList, ignore_index=True, sort=False)
AllTargetsFloatValues = [] FeatureAccuracy = pd.concat(FeatureAccuracyList, ignore_index=True, sort=False)
previous = None global scoring
Class = 0
target_names = []
for i, value in enumerate(AllTargets):
if (i == 0):
previous = value
target_names.append(value)
if (value == previous):
AllTargetsFloatValues.append(Class)
else:
Class = Class + 1
target_names.append(value)
AllTargetsFloatValues.append(Class)
previous = value
ArrayDataResults = pd.DataFrame.from_dict(DataResults)
global XData, yData, RANDOM_SEED
XData, yData = ArrayDataResults, AllTargetsFloatValues
warnings.simplefilter('ignore')
RANDOM_SEED = 42
ClassifierIDsList = ''
key = 0
# Initializing models
#scoring = {'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted', 'neg_log_loss': 'neg_log_loss', 'r2': 'r2', 'neg_mean_absolute_error': 'neg_mean_absolute_error', 'neg_mean_absolute_error': 'neg_mean_absolute_error'}
scoring = {'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted'}
NumberofscoringMetrics = len(scoring) NumberofscoringMetrics = len(scoring)
results = []
clf = KNeighborsClassifier()
params = {'n_neighbors': [1, 2, 10]}
IF = 0
#params = {'n_neighbors': [1, 3, 5],
# 'weights': ['uniform', 'distance'],
# 'metric': ['euclidean', 'manhattan']}
results.append(GridSearch(clf, params, scoring, IF, target_names))
clf = RandomForestClassifier()
params = {'n_estimators': [10, 50]}
IF = 1
results.append(GridSearch(clf, params, scoring, IF, target_names))
df_cv_results_classifiers = pd.concat([results[0][0], results[1][0]], ignore_index=True, sort=False)
parameters = pd.concat([results[0][1], results[1][1]], ignore_index=True, sort=False)
FeatureImportance = pd.concat([results[0][2], results[1][2]], ignore_index=True, sort=False)
PerClassMetrics = pd.concat([results[0][3], results[1][3]], ignore_index=True, sort=False)
classifiersIDPlusParams = []
classifierID = 0
for oneClassifier in parameters:
classifiersIDPlusParams.append(classifierID)
classifiersIDPlusParams.append(oneClassifier)
classifierID = classifierID + 1
del df_cv_results_classifiers['params'] del df_cv_results_classifiers['params']
df_cv_results_classifiers_metrics = df_cv_results_classifiers.copy() df_cv_results_classifiers_metrics = df_cv_results_classifiers.copy()
df_cv_results_classifiers_metrics = df_cv_results_classifiers_metrics.ix[:, 0:NumberofscoringMetrics+1] df_cv_results_classifiers_metrics = df_cv_results_classifiers_metrics.ix[:, 0:NumberofscoringMetrics+1]
del df_cv_results_classifiers_metrics['mean_fit_time'] del df_cv_results_classifiers_metrics['mean_fit_time']
del df_cv_results_classifiers_metrics['mean_score_time'] del df_cv_results_classifiers_metrics['mean_score_time']
@ -279,90 +329,126 @@ def InitializeEnsemble():
for elements in row: for elements in row:
rowSum = elements + rowSum rowSum = elements + rowSum
sumPerClassifier.append(rowSum) sumPerClassifier.append(rowSum)
mergedPredList = zip(*yPredictProb)
mergedPredListListForm = []
for el in mergedPredList:
mergedPredListListForm.append(list(chain(*el)))
XClassifiers = df_cv_results_classifiers_metrics XClassifiers = df_cv_results_classifiers_metrics
embedding = MDS(n_components=2, random_state=RANDOM_SEED)
X_transformed = embedding.fit_transform(XClassifiers).T
X_transformed = X_transformed.tolist() PredictionSpace = FunTsne(mergedPredListListForm)
DataSpace = FunTsne(XData)
ModelSpace = FunMDS(XClassifiers)
global ClassifierIDsList
key = 0
EnsembleModel(ClassifierIDsList, key) EnsembleModel(ClassifierIDsList, key)
DataSpaceList = DataSpace.tolist()
PredictionSpaceList = PredictionSpace.tolist()
global ResultsforOverview global Results
ResultsforOverview = []
Results = []
FeatureImportance = FeatureImportance.to_json(orient='records') FeatureImportance = FeatureImportance.to_json(orient='records')
PerClassMetrics = PerClassMetrics.to_json(orient='records') PerClassMetrics = PerClassMetrics.to_json(orient='records')
ResultsforOverview.append(json.dumps(sumPerClassifier)) FeatureAccuracy = FeatureAccuracy.to_json(orient='records')
ResultsforOverview.append(json.dumps(X_transformed)) DataSpaceList = DataSpace.tolist()
ResultsforOverview.append(json.dumps(classifiersIDPlusParams)) XDataJSON = XData.columns.tolist()
ResultsforOverview.append(FeatureImportance) Results.append(json.dumps(sumPerClassifier)) # Position: 0
ResultsforOverview.append(PerClassMetrics) Results.append(json.dumps(ModelSpace)) # Position: 1
ResultsforOverview.append(json.dumps(target_names)) Results.append(json.dumps(classifiersIDPlusParams)) # Position: 2
Results.append(FeatureImportance) # Position: 3
return ResultsforOverview Results.append(PerClassMetrics) # Position: 4
Results.append(json.dumps(target_names)) # Position: 5
Results.append(FeatureAccuracy) # Position: 6
Results.append(json.dumps(XDataJSON)) # Position: 7
Results.append(json.dumps(classifiersId)) # Position: 8
Results.append(json.dumps(classifiersIDwithFI)) # Position: 9
Results.append(json.dumps(DataSpaceList)) # Position: 10
Results.append(json.dumps(PredictionSpaceList)) # Position: 11
return Results
# Retrieve data from client # Retrieve data from client
@cross_origin(origin='localhost',headers=['Content-Type','Authorization']) @cross_origin(origin='localhost',headers=['Content-Type','Authorization'])
@app.route('/data/ServerRequestSelPoin', methods=["GET", "POST"]) @app.route('/data/ServerRequestSelPoin', methods=["GET", "POST"])
def RetrieveSelClassifiersID(): def RetrieveSelClassifiersID():
global ClassifierIDsList
ClassifierIDsList = request.get_data().decode('utf8').replace("'", '"') ClassifierIDsList = request.get_data().decode('utf8').replace("'", '"')
key = 1 key = 1
EnsembleModel(ClassifierIDsList, key) EnsembleModel(ClassifierIDsList, key)
return 'Everything Okay' return 'Everything Okay'
def FunMDS (data):
mds = MDS(n_components=2, random_state=RANDOM_SEED)
XTransformed = mds.fit_transform(data).T
XTransformed = XTransformed.tolist()
return XTransformed
def FunTsne (data):
tsne = TSNE(n_components=2).fit_transform(data)
tsne.shape
return tsne
def EnsembleModel (ClassifierIDsList, keyRetrieved): def EnsembleModel (ClassifierIDsList, keyRetrieved):
global scores
scores = []
global all_classifiers
if (keyRetrieved == 0): if (keyRetrieved == 0):
all_classifiers = [] all_classifiers = []
all_classifiers.append(KNeighborsClassifier(n_neighbors=1)) columns = []
all_classifiers.append(KNeighborsClassifier(n_neighbors=2)) columns = [XData.columns.get_loc(c) for c in XData.columns if c in XData]
all_classifiers.append(KNeighborsClassifier(n_neighbors=10)) for index, eachelem in enumerate(algorithmList):
all_classifiers.append(RandomForestClassifier(random_state=RANDOM_SEED, n_estimators = 1)) if (eachelem == 'KNN'):
all_classifiers.append(RandomForestClassifier(random_state=RANDOM_SEED, n_estimators = 50)) for each in resultsList[index][1]:
lr = LogisticRegression() all_classifiers.append(make_pipeline(ColumnSelector(cols=columns), KNeighborsClassifier().set_params(**each)))
else:
for each in resultsList[index][1]:
all_classifiers.append(make_pipeline(ColumnSelector(cols=columns), RandomForestClassifier().set_params(**each)))
lr = LogisticRegression()
sclf = StackingCVClassifier(classifiers=all_classifiers, sclf = StackingCVClassifier(classifiers=all_classifiers,
use_probas=True, use_probas=True,
meta_classifier=lr, meta_classifier=lr,
random_state=RANDOM_SEED, random_state=RANDOM_SEED,
n_jobs = -1) n_jobs = -1)
for clf, label in zip([sclf], for clf, label in zip([sclf],
['StackingClassifierAllClassifiers']): ['StackingClassifier']):
scores = model_selection.cross_val_score(clf, subset, yData,
cv=5, scoring='accuracy')
print("Accuracy: %0.2f (+/- %0.2f) [%s]"
% (scores.mean(), scores.std(), label))
else:
all_classifiers = []
ClassifierIDsList = ClassifierIDsList.split('"')
for loop in ClassifierIDsList:
if ('ClassifierID' in loop):
if (loop == 'ClassifierID: 0'):
all_classifiers.append(KNeighborsClassifier(n_neighbors=1))
elif (loop == 'ClassifierID: 1'):
all_classifiers.append(KNeighborsClassifier(n_neighbors=2))
elif (loop == 'ClassifierID: 2'):
all_classifiers.append(KNeighborsClassifier(n_neighbors=10))
elif (loop == 'ClassifierID: 3'):
all_classifiers.append(RandomForestClassifier(random_state=RANDOM_SEED, n_estimators = 1))
else:
all_classifiers.append(RandomForestClassifier(random_state=RANDOM_SEED, n_estimators = 50))
lr = LogisticRegression() scores = model_selection.cross_val_score(clf, XData, yData,
cv=crossValidation, scoring='accuracy')
else:
all_classifiersSelection = []
ClassifierIDsList = json.loads(ClassifierIDsList)
for loop in ClassifierIDsList['ClassifiersList']:
temp = [int(s) for s in re.findall(r'\b\d+\b', loop)]
all_classifiersSelection.append(all_classifiers[temp[0]])
sclf = StackingCVClassifier(classifiers=all_classifiers, lr = LogisticRegression()
sclf = StackingCVClassifier(classifiers=all_classifiersSelection,
use_probas=True, use_probas=True,
meta_classifier=lr, meta_classifier=lr,
random_state=RANDOM_SEED, random_state=RANDOM_SEED,
n_jobs = -1) n_jobs = -1)
for clf, label in zip([sclf], for clf, label in zip([sclf],
['StackingClassifierSelectedClassifiers']): ['StackingClassifier']):
scores = model_selection.cross_val_score(clf, subset, yData, scores = model_selection.cross_val_score(clf, XData, yData,
cv=5, scoring='accuracy') cv=crossValidation, scoring='accuracy')
print("Accuracy: %0.2f (+/- %0.2f) [%s]"
% (scores.mean(), scores.std(), label)) # Sending the final results to be visualized as a line plot
@app.route('/data/SendFinalResultsBacktoVisualize', methods=["GET", "POST"])
def SendToPlotFinalResults():
FinalResults = []
FinalResults.append(scores.mean())
FinalResults.append(scores.std())
response = {
'FinalResults': FinalResults
}
return jsonify(response)
# Sending the overview classifiers' results to be visualized as a scatterplot # Sending the overview classifiers' results to be visualized as a scatterplot
@app.route('/data/PlotClassifiers', methods=["GET", "POST"]) @app.route('/data/PlotClassifiers', methods=["GET", "POST"])
@ -371,6 +457,118 @@ def SendToPlot():
pass pass
InitializeEnsemble() InitializeEnsemble()
response = { response = {
'OverviewResults': ResultsforOverview 'OverviewResults': Results
} }
return jsonify(response) return jsonify(response)
algorithmList = []
# Retrieve data from client
@cross_origin(origin='localhost',headers=['Content-Type','Authorization'])
@app.route('/data/ServerRequestSelParameters', methods=["GET", "POST"])
def RetrieveModel():
global RetrievedModel
RetrievedModel = request.get_data().decode('utf8').replace("'", '"')
RetrievedModel = json.loads(RetrievedModel)
global parametersPerformancePerModel
parametersPerformancePerModel = []
global algorithms
algorithms = RetrievedModel['Algorithms']
for eachAlgor in algorithms:
if (eachAlgor) == 'KNN':
clf = KNeighborsClassifier()
params = {'n_neighbors': list(range(1, 25)), 'weights': ['uniform', 'distance'], 'algorithm': ['brute', 'kd_tree', 'ball_tree'], 'metric': ['chebyshev', 'manhattan', 'euclidean', 'minkowski']}
else:
clf = RandomForestClassifier()
params = {'n_estimators': list(range(80, 120)), 'criterion': ['gini', 'entropy']}
GridSearchForParameters(clf, params)
SendEachClassifiersPerformanceToVisualize()
return 'Everything Okay'
def GridSearchForParameters(clf, params):
grid = GridSearchCV(estimator=clf,
param_grid=params,
scoring='accuracy',
cv=crossValidation,
n_jobs = -1)
grid.fit(XData, yData)
cv_results = []
cv_results.append(grid.cv_results_)
df_cv_results = pd.DataFrame.from_dict(cv_results)
number_of_classifiers = len(df_cv_results.iloc[0][0])
number_of_columns = len(df_cv_results.iloc[0])
df_cv_results_per_item = []
df_cv_results_per_row = []
for i in range(number_of_classifiers):
df_cv_results_per_item = []
for column in df_cv_results.iloc[0]:
df_cv_results_per_item.append(column[i])
df_cv_results_per_row.append(df_cv_results_per_item)
df_cv_results_classifiers = pd.DataFrame(data = df_cv_results_per_row, columns= df_cv_results.columns)
global allParametersPerformancePerModel
parametersPerformancePerModel = df_cv_results_classifiers[['mean_test_score','params']]
parametersPerformancePerModel = parametersPerformancePerModel.to_json()
allParametersPerformancePerModel.append(parametersPerformancePerModel)
return 'Everything is okay'
#GridSearchForParameters = mem.cache(GridSearchForParameters)
# Sending each model's results
@app.route('/data/PerformanceForEachModel', methods=["GET", "POST"])
def SendEachClassifiersPerformanceToVisualize ():
response = {
'PerformancePerModel': allParametersPerformancePerModel
}
return jsonify(response)
def Remove(duplicate):
final_list = []
for num in duplicate:
if num not in final_list:
final_list.append(num)
return final_list
# Retrieve data from client
@cross_origin(origin='localhost',headers=['Content-Type','Authorization'])
@app.route('/data/SendBrushedParam', methods=["GET", "POST"])
def RetrieveModelsParam():
RetrieveModelsPar = request.get_data().decode('utf8').replace("'", '"')
RetrieveModelsPar = json.loads(RetrieveModelsPar)
algorithm = RetrieveModelsPar['algorithm']
RetrieveModelsParPandas = pd.DataFrame(RetrieveModelsPar['brushed'])
RetrieveModelsParPandas = RetrieveModelsParPandas.drop(columns=['performance'])
RetrieveModelsParPandas = RetrieveModelsParPandas.to_dict(orient='list')
RetrieveModels = {}
for key, value in RetrieveModelsParPandas.items():
withoutDuplicates = Remove(value)
RetrieveModels[key] = withoutDuplicates
global classifierID
global algorithmList
results = []
print(algorithm)
algorithmList.append(algorithm)
if (algorithm == 'KNN'):
clf = KNeighborsClassifier()
params = RetrieveModels
IF = 0
results.append(GridSearch(clf, params, IF))
resultsList.append(results[0])
for j, oneClassifier in enumerate(results[0][1]):
classifiersId.append(classifierID)
classifiersIDPlusParams.append(classifierID)
classifierID = classifierID + 1
else:
clf = RandomForestClassifier()
params = RetrieveModels
IF = 1
results.append(GridSearch(clf, params, IF))
resultsList.append(results[0])
for oneClassifier, j in enumerate(results[0][1]):
classifiersIDPlusParams.append(classifierID)
classifiersIDwithFI.append(classifierID)
classifierID = classifierID + 1
return 'Everything Okay'
Loading…
Cancel
Save