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

fixed data space

Browse Source
master
Angelos Chatzimparmpas 5 years ago
parent ba2b38fe8b
commit 8f1ca2a081
10 changed files with 3780 additions and 2147 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. BIN
      __pycache__/run.cpython-37.pyc
  2. 5531
      frontend/package-lock.json
  3. 118
      frontend/package.json
  4. 4
      frontend/src/components/BalancePredictions.vue
  5. 116
      frontend/src/components/DataSpace.vue
  6. 6
      frontend/src/components/Main.vue
  7. 2
      frontend/src/components/PerMetricBarChart.vue
  8. 132
      frontend/src/components/PredictionsSpace.vue
  9. 15
      frontend/src/components/ScatterPlot.vue
  10. 3
      run.py

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

Binary file not shown.

5531
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

118
frontend/package.json
Unescape View File

@ -11,33 +11,33 @@
"start": "npm run dev" "start": "npm run dev"
}, },
"dependencies": { "dependencies": {
"@babel/core": "^7.7.2", "@babel/core": "^7.8.3",
"@babel/runtime": "^7.7.2", "@babel/runtime": "^7.8.3",
"@fortawesome/fontawesome-free": "^5.11.2", "@fortawesome/fontawesome-free": "^5.12.0",
"@fortawesome/fontawesome-svg-core": "^1.2.25", "@fortawesome/fontawesome-svg-core": "^1.2.26",
"@fortawesome/free-solid-svg-icons": "^5.11.2", "@fortawesome/free-solid-svg-icons": "^5.12.0",
"@fortawesome/vue-fontawesome": "^0.1.8", "@fortawesome/vue-fontawesome": "^0.1.9",
"@statnett/vue-plotly": "^0.3.2", "@statnett/vue-plotly": "^0.3.2",
"@types/d3-drag": "^1.2.3", "@types/d3-drag": "^1.2.3",
"@types/node": "^12.12.7", "@types/node": "^13.1.8",
"ajv": "^6.10.2", "ajv": "^6.11.0",
"audit": "0.0.6", "audit": "0.0.6",
"axios": "^0.19.0", "axios": "^0.19.1",
"axios-progress-bar": "^1.2.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.4.1",
"bootstrap-toggle": "^2.2.2", "bootstrap-toggle": "^2.2.2",
"bootstrap-vue": "^2.0.4", "bootstrap-vue": "^2.2.2",
"circlepack-chart": "^1.3.0", "circlepack-chart": "^1.3.0",
"clean-webpack-plugin": "^3.0.0", "clean-webpack-plugin": "^3.0.0",
"colorbrewer": "^1.3.0", "colorbrewer": "^1.3.0",
"d3": "^5.12.0", "d3": "^5.15.0",
"d3-drag": "^1.2.4", "d3-drag": "^1.2.5",
"d3-heatmap": "^1.2.1", "d3-heatmap": "^1.2.1",
"d3-lasso": "0.0.5", "d3-lasso": "0.0.5",
"d3-loom": "^1.0.2", "d3-loom": "^1.0.2",
"d3-selection": "^1.4.0", "d3-selection": "^1.4.1",
"d3-selection-multi": "^1.0.1", "d3-selection-multi": "^1.0.1",
"d3_exploding_boxplot": "^0.2.1", "d3_exploding_boxplot": "^0.2.1",
"file-saver": "^2.0.2", "file-saver": "^2.0.2",
@ -46,17 +46,17 @@
"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.6.3", "interactjs": "^1.7.3",
"jquery": "^3.4.1", "jquery": "^3.4.1",
"mdbvue": "^6.0.0", "mdbvue": "^6.2.0",
"mini-css-extract-plugin": "^0.8.0", "mini-css-extract-plugin": "^0.9.0",
"npm-check-updates": "^3.2.1", "npm-check-updates": "^4.0.1",
"papaparse": "^5.1.0", "papaparse": "^5.1.1",
"parcoord-es": "^2.2.10", "parcoord-es": "^2.2.10",
"plotly.js": "^1.51.1", "plotly.js": "^1.52.1",
"popper.js": "^1.16.0", "popper.js": "^1.16.0",
"react": "^16.11.0", "react": "^16.12.0",
"react-dom": "^16.11.0", "react-dom": "^16.12.0",
"stardust-allofw": "^0.1.1", "stardust-allofw": "^0.1.1",
"stardust-core": "^0.2.4", "stardust-core": "^0.2.4",
"stardust-webgl": "^0.2.4", "stardust-webgl": "^0.2.4",
@ -64,76 +64,76 @@
"toposort": "^2.0.2", "toposort": "^2.0.2",
"transform-loader": "^0.2.4", "transform-loader": "^0.2.4",
"update": "^0.7.4", "update": "^0.7.4",
"vega": "^5.7.3", "vega": "^5.9.1",
"vue": "^2.6.10", "vue": "^2.6.11",
"vue-bootstrap-slider": "^2.1.8", "vue-bootstrap-slider": "^2.1.8",
"vue-papa-parse": "^1.3.0", "vue-papa-parse": "^1.3.0",
"vue-plotly": "^1.0.1", "vue-plotly": "^1.0.1",
"vue-router": "^3.1.3", "vue-router": "^3.1.5",
"vue-slider-component": "^3.0.42", "vue-slider-component": "^3.1.0",
"vue2-simplert-plugin": "^0.5.3", "vue2-simplert-plugin": "^0.5.3",
"webpack-cli": "^3.3.10", "webpack-cli": "^3.3.10",
"webpack-require": "0.0.16" "webpack-require": "0.0.16"
}, },
"devDependencies": { "devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.7.0", "@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-decorators": "^7.7.0", "@babel/plugin-proposal-decorators": "^7.8.3",
"@babel/plugin-proposal-export-namespace-from": "^7.5.2", "@babel/plugin-proposal-export-namespace-from": "^7.8.3",
"@babel/plugin-proposal-function-sent": "^7.7.0", "@babel/plugin-proposal-function-sent": "^7.8.3",
"@babel/plugin-proposal-json-strings": "^7.2.0", "@babel/plugin-proposal-json-strings": "^7.8.3",
"@babel/plugin-proposal-numeric-separator": "^7.2.0", "@babel/plugin-proposal-numeric-separator": "^7.8.3",
"@babel/plugin-proposal-throw-expressions": "^7.2.0", "@babel/plugin-proposal-throw-expressions": "^7.8.3",
"@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-import-meta": "^7.2.0", "@babel/plugin-syntax-import-meta": "^7.8.3",
"@babel/plugin-syntax-jsx": "^7.2.0", "@babel/plugin-syntax-jsx": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.6.2", "@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.7.1", "@babel/preset-env": "^7.8.3",
"autoprefixer": "^9.7.1", "autoprefixer": "^9.7.4",
"babel-eslint": "^10.0.3", "babel-eslint": "^10.0.3",
"babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^8.0.6", "babel-loader": "^8.0.6",
"babel-plugin-transform-vue-jsx": "^3.7.0", "babel-plugin-transform-vue-jsx": "^3.7.0",
"chalk": "^3.0.0", "chalk": "^3.0.0",
"copy-webpack-plugin": "^5.0.5", "copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.2.0", "css-loader": "^3.4.2",
"eslint": "^6.6.0", "eslint": "^6.8.0",
"eslint-config-standard": "^14.1.0", "eslint-config-standard": "^14.1.0",
"eslint-friendly-formatter": "^4.0.1", "eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^3.0.2", "eslint-loader": "^3.0.3",
"eslint-plugin-import": "^2.18.2", "eslint-plugin-import": "^2.20.0",
"eslint-plugin-node": "^10.0.0", "eslint-plugin-node": "^11.0.0",
"eslint-plugin-promise": "^4.2.1", "eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1", "eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.0.0", "eslint-plugin-vue": "^6.1.2",
"extract-text-webpack-plugin": "^3.0.2", "extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^4.2.0", "file-loader": "^5.0.2",
"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": "^6.0.0", "node-notifier": "^6.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.3", "optimize-css-assets-webpack-plugin": "^5.0.3",
"ora": "^4.0.2", "ora": "^4.0.3",
"portfinder": "^1.0.25", "portfinder": "^1.0.25",
"postcss-import": "^12.0.1", "postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0", "postcss-loader": "^3.0.0",
"postcss-url": "^8.0.0", "postcss-url": "^8.0.0",
"rimraf": "^3.0.0", "rimraf": "^3.0.0",
"sass": "^1.23.3", "sass": "^1.25.0",
"sass-loader": "^8.0.0", "sass-loader": "^8.0.2",
"semver": "^6.3.0", "semver": "^7.1.1",
"shelljs": "^0.8.3", "shelljs": "^0.8.3",
"uglifyjs-webpack-plugin": "^2.2.0", "uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^2.2.0", "url-loader": "^3.0.0",
"vue-class-component": "^7.1.0", "vue-class-component": "^7.2.2",
"vue-cli-plugin-vuetify": "^2.0.2", "vue-cli-plugin-vuetify": "^2.0.3",
"vue-loader": "^15.7.2", "vue-loader": "^15.8.3",
"vue-property-decorator": "^8.3.0", "vue-property-decorator": "^8.3.0",
"vue-style-loader": "^4.1.2", "vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10", "vue-template-compiler": "^2.6.11",
"vue2-simplert": "^1.0.0", "vue2-simplert": "^1.0.0",
"vuetify-loader": "^1.3.0", "vuetify-loader": "^1.4.3",
"webpack": "^4.41.2", "webpack": "^4.41.5",
"webpack-bundle-analyzer": "^3.6.0", "webpack-bundle-analyzer": "^3.6.0",
"webpack-dev-server": "^3.9.0", "webpack-dev-server": "^3.10.1",
"webpack-merge": "^4.2.2" "webpack-merge": "^4.2.2"
}, },
"browserslist": [ "browserslist": [

4
frontend/src/components/BalancePredictions.vue
Unescape View File

@ -93,7 +93,7 @@
svg.append("path") svg.append("path")
.attr("class", "mypath") .attr("class", "mypath")
.datum(density2) .datum(density2)
.attr("fill", "#00bbbb") .attr("fill", "#D3D3D3")
.attr("opacity", "1") .attr("opacity", "1")
.attr("stroke", "#000") .attr("stroke", "#000")
.attr("stroke-width", 1) .attr("stroke-width", 1)
@ -111,7 +111,7 @@
// Handmade legend // Handmade legend
var heightforText = 175 var heightforText = 175
svg.append("circle").attr("cx",80).attr("cy",heightforText).attr("r", 6).style("fill", "#000") svg.append("circle").attr("cx",80).attr("cy",heightforText).attr("r", 6).style("fill", "#000")
svg.append("circle").attr("cx",300).attr("cy",heightforText).attr("r", 6).style("fill", "#00bbbb") svg.append("circle").attr("cx",300).attr("cy",heightforText).attr("r", 6).style("fill", "#D3D3D3")
svg.append("text").attr("x", 100).attr("y", heightforText).text("Entire distribution").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 100).attr("y", heightforText).text("Entire distribution").style("font-size", "15px").attr("alignment-baseline","middle")
svg.append("text").attr("x", 320).attr("y", heightforText).text("Selected points").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 320).attr("y", heightforText).text("Selected points").style("font-size", "15px").attr("alignment-baseline","middle")

116
frontend/src/components/DataSpace.vue
Unescape View File

@ -10,68 +10,92 @@ export default {
name: 'DataSpace', name: 'DataSpace',
data () { data () {
return { return {
CollectionData: '', dataPoints: '',
DataSpace: '', highlightedPoints: '',
WH: [] responsiveWidthHeight: [],
colorsValues: ['#00bbbb','#b15928','#ff7f00']
} }
}, },
methods: { methods: {
ScatterPlotDataView () { scatterPlotDataView () {
// responsive visualization
var target_names = JSON.parse(this.DataSpace[4]) let width = this.responsiveWidthHeight[0]*3
const XandYCoordinates = JSON.parse(this.DataSpace[7]) let height = this.responsiveWidthHeight[1]*2.1
const DataSet = JSON.parse(this.DataSpace[14])
const DataSetY = JSON.parse(this.DataSpace[15]) var target_names = JSON.parse(this.dataPoints[4])
const XandYCoordinates = JSON.parse(this.dataPoints[7])
const DataSet = JSON.parse(this.dataPoints[14])
const DataSetY = JSON.parse(this.dataPoints[15])
const originalDataLabels = JSON.parse(this.dataPoints[16])
var DataSetParse = JSON.parse(DataSet) var DataSetParse = JSON.parse(DataSet)
let intData = []
if (this.highlightedPoints.length > 0){
let removedPuncData = this.highlightedPoints.map(function(x){return x.replace(';', '');})
intData = removedPuncData.map(Number)
} else {
intData = []
}
var result = XandYCoordinates.reduce(function(r, a) { var result = XandYCoordinates.reduce(function(r, a) {
var id = 0
a.forEach(function(s, i) { a.forEach(function(s, i) {
var key = i === 0 ? 'Xax' : 'Yax'; 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] || (r[key] = []) // if key not found on result object, add the key with empty array as the value
r[key].push(s)
r[key].push(s);
}) })
return r;
return r
}, {}) }, {})
var dataPointInfo = [] var IDs = [];
for (let i = 0; i < XandYCoordinates.length; i++) {
dataPointInfo[i] = 'Data Point ID: ' + i + '; Details: ' + JSON.stringify(DataSetParse[i]) for (let i = 0; i < result.Xax.length; i++) {
IDs.push(i)
} }
result.ID = IDs
var colors = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a'] var traces = []
var traces = [] for (let i = 0; i < target_names.length; i++) {
var countPrev = 0
var count = 0 const aux_X = result.Xax.filter((item, index) => originalDataLabels[index] == target_names[i]);
for (let i = 0; i < target_names.length; i++) { const aux_Y = result.Yax.filter((item, index) => originalDataLabels[index] == target_names[i]);
count = 0 const aux_ID = result.ID.filter((item, index) => originalDataLabels[index] == target_names[i]);
for (let j = 0; j < DataSetY.length; j++) {
if (i == DataSetY[j]) { var Text = aux_ID.map((item, index) => {
count = count + 1 let popup = 'Data Point ID: ' + item + '; Details: ' + JSON.stringify(DataSetParse[item])
return popup;
});
var Opacity = aux_ID.map((item, index) => {
let opac
if (intData.length == 0) {
opac = 1
} else if (intData.indexOf(item) > -1) {
opac = 1
} else {
opac = 0.5
} }
} return opac;
});
traces.push({ traces.push({
x: result.Xax.slice(countPrev,count+countPrev), x: aux_X,
y: result.Yax.slice(countPrev,count+countPrev), y: aux_Y,
mode: 'markers', mode: 'markers',
name: target_names[i], name: target_names[i],
marker: { marker: { color: this.colorsValues[i], line: { color: 'rgb(0, 0, 0)', width: 2 }, opacity: Opacity },
color: colors[i]
},
hovertemplate: hovertemplate:
"<b>%{text}</b><br><br>" + "<b>%{text}</b><br><br>" +
"<extra></extra>", "<extra></extra>",
text: dataPointInfo.slice(countPrev,count+countPrev), text: Text,
}) })
countPrev = count + countPrev
} }
var width = this.WH[0]*3 // interactive visualization
var height = this.WH[1]*2.1 // interactive visualization
const layout = { const layout = {
title: 'Data Space Projection (t-SNE)', title: 'Data Space Projection (t-SNE)',
xaxis: { xaxis: {
@ -93,15 +117,21 @@ export default {
} }
}, },
mounted() { mounted() {
EventBus.$on('emittedEventCallingDataPlot', data => { // initialize the first data space projection based on the data set
this.CollectionData = data})
EventBus.$on('emittedEventCallingDataSpacePlotView', data => { EventBus.$on('emittedEventCallingDataSpacePlotView', data => {
this.DataSpace = data}) this.dataPoints = data})
EventBus.$on('emittedEventCallingDataSpacePlotView', this.ScatterPlotDataView) EventBus.$on('emittedEventCallingDataSpacePlotView', this.scatterPlotDataView)
// linking based on predictions space brushing
EventBus.$on('updateDataSpaceHighlighting', data => {
this.highlightedPoints = data})
EventBus.$on('updateDataSpaceHighlighting', this.scatterPlotDataView)
// make the view responsive to window changes
EventBus.$on('Responsive', data => { EventBus.$on('Responsive', data => {
this.WH = data}) this.responsiveWidthHeight = data})
EventBus.$on('ResponsiveandChange', data => { EventBus.$on('ResponsiveandChange', data => {
this.WH = data}) this.responsiveWidthHeight = data})
} }
} }
</script> </script>

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

@ -380,9 +380,11 @@ export default Vue.extend({
}) })
}, },
SendSelectedDataPointsToServer () { SendSelectedDataPointsToServer () {
// set a path from which the server will receive the seleceted predictions points
const path = `http://127.0.0.1:5000/data/ServerRequestDataPoint` const path = `http://127.0.0.1:5000/data/ServerRequestDataPoint`
// brushing and linking between predictions space and data space
EventBus.$emit('updateDataSpaceHighlighting', this.DataPointsSel)
const postData = { const postData = {
DataPointsSel: this.DataPointsSel DataPointsSel: this.DataPointsSel
} }

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

@ -44,7 +44,7 @@ export default {
name: 'Selected points', name: 'Selected points',
type: 'bar', type: 'bar',
marker: { marker: {
color: 'rgb(0, 187, 187)' color: 'rgb(211,211,211)'
} }
}; };
var data = [trace1, trace2]; var data = [trace1, trace2];

132
frontend/src/components/PredictionsSpace.vue
Unescape View File

@ -12,84 +12,86 @@ export default {
return { return {
PredictionsData: '', PredictionsData: '',
UpdatedData: '', UpdatedData: '',
WH: [] colorsValues: ['#00bbbb','#b15928','#ff7f00'],
responsiveWidthHeight: []
} }
}, },
methods: { methods: {
ScatterPlotDataView () { ScatterPlotDataView () {
var target_names = JSON.parse(this.PredictionsData[4]) // responsive visualization
const XandYCoordinates = JSON.parse(this.PredictionsData[8]) var width = this.responsiveWidthHeight[0]*3
const DataSet = JSON.parse(this.PredictionsData[14]) var height = this.responsiveWidthHeight[1]*1.48
const DataSetY = JSON.parse(this.PredictionsData[15])
var DataSetParse = JSON.parse(DataSet) var target_names = JSON.parse(this.PredictionsData[4])
const XandYCoordinates = JSON.parse(this.PredictionsData[8])
var result = XandYCoordinates.reduce(function(r, a) { const DataSet = JSON.parse(this.PredictionsData[14])
a.forEach(function(s, i) { const DataSetY = JSON.parse(this.PredictionsData[15])
var key = i === 0 ? 'Xax' : 'Yax'; const originalDataLabels = JSON.parse(this.PredictionsData[16])
var DataSetParse = JSON.parse(DataSet)
r[key] || (r[key] = []); // if key not found on result object, add the key with empty array as the value
var result = XandYCoordinates.reduce(function(r, a) {
r[key].push(s); a.forEach(function(s, i) {
}) var key = i === 0 ? 'Xax' : 'Yax';
return r;
}, {}) r[key] || (r[key] = []); // if key not found on result object, add the key with empty array as the value
var dataPointInfo = [] r[key].push(s);
for (let i = 0; i < XandYCoordinates.length; i++) { })
dataPointInfo[i] = 'Data Point ID: ' + i + '; Details: ' + JSON.stringify(DataSetParse[i]) return r;
} }, {})
var colors = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a'] var IDs = [];
var traces = [] for (let i = 0; i < result.Xax.length; i++) {
var countPrev = 0 IDs.push(i)
var count = 0 }
for (let i = 0; i < target_names.length; i++) { result.ID = IDs
count = 0
for (let j = 0; j < DataSetY.length; j++) { var traces = []
if (i == DataSetY[j]) {
count = count + 1
}
}
traces.push({ for (let i = 0; i < target_names.length; i++) {
x: result.Xax.slice(countPrev,count+countPrev),
y: result.Yax.slice(countPrev,count+countPrev), const aux_X = result.Xax.filter((item, index) => originalDataLabels[index] == target_names[i]);
const aux_Y = result.Yax.filter((item, index) => originalDataLabels[index] == target_names[i]);
const aux_ID = result.ID.filter((item, index) => originalDataLabels[index] == target_names[i]);
var Text = aux_ID.map((item, index) => {
let popup = 'Data Point ID: ' + item + '; Details: ' + JSON.stringify(DataSetParse[item])
return popup;
});
traces.push({
x: aux_X,
y: aux_Y,
mode: 'markers', mode: 'markers',
name: target_names[i], name: target_names[i],
marker: { marker: { color: this.colorsValues[i], line: { color: 'rgb(0, 0, 0)', width: 2 }, opacity: 1 },
color: colors[i]
},
hovertemplate: hovertemplate:
"<b>%{text}</b><br><br>" + "<b>%{text}</b><br><br>" +
"<extra></extra>", "<extra></extra>",
text: dataPointInfo.slice(countPrev,count+countPrev), text: Text,
}) })
countPrev = count + countPrev }
}
var width = this.WH[0]*3 // interactive visualization
var height = this.WH[1]*1.48 // interactive visualization
const layout = {
title: 'Predictions Space Projection (t-SNE)',
xaxis: {
visible: false
},
yaxis: {
visible: false
},
dragmode: 'lasso',
hovermode: "closest",
autosize: true,
width: width,
height: height,
}
var config = {scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage', 'toggleSpikelines', 'autoScale2d', 'hoverClosestGl2d','hoverCompareCartesian','select2d','hoverClosestCartesian','zoomIn2d','zoomOut2d','zoom2d'], responsive: true} const layout = {
title: 'Predictions Space Projection (t-SNE)',
xaxis: {
visible: false
},
yaxis: {
visible: false
},
dragmode: 'lasso',
hovermode: "closest",
autosize: true,
width: width,
height: height,
}
Plotly.newPlot('OverviewPredPlotly', traces, layout, config) var config = {scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage', 'toggleSpikelines', 'autoScale2d', 'hoverClosestGl2d','hoverCompareCartesian','select2d','hoverClosestCartesian','zoomIn2d','zoomOut2d','zoom2d'], responsive: true}
this.selectedPointsOverview()
Plotly.newPlot('OverviewPredPlotly', traces, layout, config)
this.selectedPointsOverview()
}, },
UpdateScatterPlot () { UpdateScatterPlot () {
const XandYCoordinates = JSON.parse(this.UpdatedData[0]) const XandYCoordinates = JSON.parse(this.UpdatedData[0])

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

@ -125,13 +125,14 @@ export default {
"<extra></extra>", "<extra></extra>",
text: classifiersInfoProcessing, text: classifiersInfoProcessing,
marker: { marker: {
color: colorsforScatterPlot, line: { color: 'rgb(0, 0, 0)', width: 2 },
size: 12, color: colorsforScatterPlot,
colorscale: 'Viridis', size: 12,
colorbar: { colorscale: 'Viridis',
title: 'Metrics Average', colorbar: {
titleside: 'Top' title: 'Metrics Average',
}, titleside: 'Top'
},
} }
}] }]

3
run.py
Unescape View File

@ -229,6 +229,7 @@ def DataSetSelection():
del dictionary['InstanceID'] del dictionary['InstanceID']
del dictionary[target] del dictionary[target]
global AllTargets
AllTargets = [o[target] for o in DataResultsRaw] AllTargets = [o[target] for o in DataResultsRaw]
AllTargetsFloatValues = [] AllTargetsFloatValues = []
@ -765,6 +766,7 @@ def InitializeEnsemble():
def ReturnResults(ModelSpaceMDS,ModelSpaceTSNE,DataSpaceList,PredictionSpaceList): def ReturnResults(ModelSpaceMDS,ModelSpaceTSNE,DataSpaceList,PredictionSpaceList):
global Results global Results
global AllTargets
Results = [] Results = []
parametersGen = PreprocessingParam() parametersGen = PreprocessingParam()
@ -800,6 +802,7 @@ def ReturnResults(ModelSpaceMDS,ModelSpaceTSNE,DataSpaceList,PredictionSpaceList
Results.append(json.dumps(ModelsIDs)) # Position: 13 Results.append(json.dumps(ModelsIDs)) # Position: 13
Results.append(json.dumps(XDataJSONEntireSet)) # Position: 14 Results.append(json.dumps(XDataJSONEntireSet)) # Position: 14
Results.append(json.dumps(yData)) # Position: 15 Results.append(json.dumps(yData)) # Position: 15
Results.append(json.dumps(AllTargets)) # Position: 16
return Results return Results

Write Preview
Loading…
Cancel
Save