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

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

@ -93,7 +93,7 @@
svg.append("path")
.attr("class", "mypath")
.datum(density2)
.attr("fill", "#00bbbb")
.attr("fill", "#D3D3D3")
.attr("opacity", "1")
.attr("stroke", "#000")
.attr("stroke-width", 1)
@ -111,7 +111,7 @@
// Handmade legend
var heightforText = 175
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", 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',
data () {
return {
CollectionData: '',
DataSpace: '',
WH: []
dataPoints: '',
highlightedPoints: '',
responsiveWidthHeight: [],
colorsValues: ['#00bbbb','#b15928','#ff7f00']
}
},
methods: {
ScatterPlotDataView () {
var target_names = JSON.parse(this.DataSpace[4])
const XandYCoordinates = JSON.parse(this.DataSpace[7])
const DataSet = JSON.parse(this.DataSpace[14])
const DataSetY = JSON.parse(this.DataSpace[15])
scatterPlotDataView () {
// responsive visualization
let width = this.responsiveWidthHeight[0]*3
let height = this.responsiveWidthHeight[1]*2.1
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)
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 id = 0
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 = []
for (let i = 0; i < XandYCoordinates.length; i++) {
dataPointInfo[i] = 'Data Point ID: ' + i + '; Details: ' + JSON.stringify(DataSetParse[i])
var IDs = [];
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 countPrev = 0
var count = 0
for (let i = 0; i < target_names.length; i++) {
count = 0
for (let j = 0; j < DataSetY.length; j++) {
if (i == DataSetY[j]) {
count = count + 1
var traces = []
for (let i = 0; i < target_names.length; i++) {
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;
});
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({
x: result.Xax.slice(countPrev,count+countPrev),
y: result.Yax.slice(countPrev,count+countPrev),
x: aux_X,
y: aux_Y,
mode: 'markers',
name: target_names[i],
marker: {
color: colors[i]
},
marker: { color: this.colorsValues[i], line: { color: 'rgb(0, 0, 0)', width: 2 }, opacity: Opacity },
hovertemplate:
"<b>%{text}</b><br><br>" +
"<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 = {
title: 'Data Space Projection (t-SNE)',
xaxis: {
@ -93,15 +117,21 @@ export default {
}
},
mounted() {
EventBus.$on('emittedEventCallingDataPlot', data => {
this.CollectionData = data})
// initialize the first data space projection based on the data set
EventBus.$on('emittedEventCallingDataSpacePlotView', data => {
this.DataSpace = data})
EventBus.$on('emittedEventCallingDataSpacePlotView', this.ScatterPlotDataView)
this.dataPoints = data})
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 => {
this.WH = data})
this.responsiveWidthHeight = data})
EventBus.$on('ResponsiveandChange', data => {
this.WH = data})
this.responsiveWidthHeight = data})
}
}
</script>

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

@ -380,9 +380,11 @@ export default Vue.extend({
})
},
SendSelectedDataPointsToServer () {
// set a path from which the server will receive the seleceted predictions points
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 = {
DataPointsSel: this.DataPointsSel
}

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

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

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

@ -12,84 +12,86 @@ export default {
return {
PredictionsData: '',
UpdatedData: '',
WH: []
colorsValues: ['#00bbbb','#b15928','#ff7f00'],
responsiveWidthHeight: []
}
},
methods: {
ScatterPlotDataView () {
var target_names = JSON.parse(this.PredictionsData[4])
const XandYCoordinates = JSON.parse(this.PredictionsData[8])
const DataSet = JSON.parse(this.PredictionsData[14])
const DataSetY = JSON.parse(this.PredictionsData[15])
var DataSetParse = JSON.parse(DataSet)
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;
}, {})
var dataPointInfo = []
for (let i = 0; i < XandYCoordinates.length; i++) {
dataPointInfo[i] = 'Data Point ID: ' + i + '; Details: ' + JSON.stringify(DataSetParse[i])
}
var colors = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a']
var traces = []
var countPrev = 0
var count = 0
for (let i = 0; i < target_names.length; i++) {
count = 0
for (let j = 0; j < DataSetY.length; j++) {
if (i == DataSetY[j]) {
count = count + 1
}
}
// responsive visualization
var width = this.responsiveWidthHeight[0]*3
var height = this.responsiveWidthHeight[1]*1.48
var target_names = JSON.parse(this.PredictionsData[4])
const XandYCoordinates = JSON.parse(this.PredictionsData[8])
const DataSet = JSON.parse(this.PredictionsData[14])
const DataSetY = JSON.parse(this.PredictionsData[15])
const originalDataLabels = JSON.parse(this.PredictionsData[16])
var DataSetParse = JSON.parse(DataSet)
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;
}, {})
var IDs = [];
for (let i = 0; i < result.Xax.length; i++) {
IDs.push(i)
}
result.ID = IDs
var traces = []
traces.push({
x: result.Xax.slice(countPrev,count+countPrev),
y: result.Yax.slice(countPrev,count+countPrev),
for (let i = 0; i < target_names.length; i++) {
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',
name: target_names[i],
marker: {
color: colors[i]
},
marker: { color: this.colorsValues[i], line: { color: 'rgb(0, 0, 0)', width: 2 }, opacity: 1 },
hovertemplate:
"<b>%{text}</b><br><br>" +
"<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)
this.selectedPointsOverview()
var config = {scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage', 'toggleSpikelines', 'autoScale2d', 'hoverClosestGl2d','hoverCompareCartesian','select2d','hoverClosestCartesian','zoomIn2d','zoomOut2d','zoom2d'], responsive: true}
Plotly.newPlot('OverviewPredPlotly', traces, layout, config)
this.selectedPointsOverview()
},
UpdateScatterPlot () {
const XandYCoordinates = JSON.parse(this.UpdatedData[0])

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

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

3
run.py
Unescape View File

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

Write Preview
Loading…
Cancel
Save