ISOVIS
/
FeatureEnVi
3
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

new

Browse Source
master
Angelos Chatzimparmpas 4 years ago
parent cb90c4ce13
commit 673edd1d77
6 changed files with 1449 additions and 203 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. 540
      frontend/src/components/FeatureSpace1.vue
  3. 21
      frontend/src/components/FeatureSpace2.vue
  4. 542
      frontend/src/components/FeatureSpace3.vue
  5. 542
      frontend/src/components/FeatureSpace4.vue
  6. 7
      frontend/src/components/Main.vue

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

Binary file not shown.

540
frontend/src/components/FeatureSpace1.vue
Unescape View File

@ -1,30 +1,12 @@
<template>
<div>
<label id="data" for="param-dataset" data-toggle="tooltip" data-placement="right" title="Tip: use one of the data sets already provided or upload a new file.">{{ dataset }}</label>
<select id="selectFile" @change="selectDataSet()">
<option value="HeartC.csv" selected>Heart Disease</option>
<option value="IrisC.csv">Iris</option>
<option value="local">Upload New File</option>
</select>
<button class="btn-outline-success"
id="initializeID"
v-on:click="initialize">
<font-awesome-icon icon="search" />
{{ searchText }}
</button>
<button class="btn-outline-danger"
id="resetID"
v-on:click="reset">
<font-awesome-icon icon="trash" />
{{ resetText }}
</button>
<div class="column">
<div id="FeatureGraph1"></div>
</div>
</template>
<script>
import Papa from 'papaparse'
import { EventBus } from '../main.js'
import {$,jQuery} from 'jquery';
import * as greadability from '../greadability.js'
import * as d3Base from 'd3'
// attach all d3 plugins to the d3 library
@ -34,53 +16,485 @@ export default {
name: 'FeatureSpace1',
data () {
return {
defaultDataSet: 'HeartC', // default value for the first data set
searchText: 'Hyper-parameter search',
resetText: 'Reset',
dataset: 'Data set'
dataFS1: [],
jsonData: [],
}
},
methods: {
selectDataSet () {
const fileName = document.getElementById('selectFile')
this.defaultDataSet = fileName.options[fileName.selectedIndex].value
this.defaultDataSet = this.defaultDataSet.split('.')[0]
if (this.defaultDataSet == "DiabetesC" || this.defaultDataSet == "HeartC" || this.defaultDataSet == "IrisC" || this.defaultDataSet == "StanceC") { // This is a function that handles a new file, which users can upload.
this.dataset = "Data set"
d3.select("#data").select("input").remove(); // Remove the selection field.
EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet)
} else {
EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet)
d3.select("#data").select("input").remove();
this.dataset = ""
var data
d3.select("#data")
.append("input")
.attr("type", "file")
.style("font-size", "18.5px")
.style("width", "200px")
.on("change", function() {
var file = d3.event.target.files[0];
Papa.parse(file, {
header: true,
dynamicTyping: true,
skipEmptyLines: true,
complete: function(results) {
data = results.data;
EventBus.$emit('SendToServerLocalFile', data)
initializeNetwork () {
var listofNodes = this.dataFS1[0]
var dataLoc = JSON.parse(this.dataFS1[2])
var nodes = []
listofNodes.forEach(element => nodes.push({"name": element}))
var links = []
Object.entries(dataLoc).forEach(
function ([feature, value]) {
Object.entries(value).forEach( function ([featureInside, value]) {
if (feature != featureInside) {
if (value >= 0) {
links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 1})
} else {
links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 2})
}
}
})
})
this.jsonData = {"nodes": nodes, "links": links};
this.graphVizualization()
},
graphVizualization () {
var listofNodes = this.dataFS1[0]
var uniqueTarget = JSON.parse(this.dataFS1[14])
var corrTarget = JSON.parse(this.dataFS1[6])
var corrGlob = JSON.parse(this.dataFS1[10])
var VIFVar = JSON.parse(this.dataFS1[18])
var MIVar = JSON.parse(this.dataFS1[22])
var colorCateg = d3.scaleOrdinal(d3.schemeAccent)
var corrTargetFormatted = []
for (let i = 0; i < Object.keys(corrTarget).length; i++) {
var corrTargetFormattedLoc = []
for (let j = 0; j < Object.keys(corrTarget[i]).length; j++) {
if (j > uniqueTarget.length - 1) {
corrTargetFormattedLoc.push(Math.round(Object.values(corrTarget[i])[j] * 100))
}
}
corrTargetFormatted.push(corrTargetFormattedLoc)
}
var corrGlobFormatted = []
for (let i = 0; i < Object.keys(corrGlob).length; i++) {
if (i != 0) {
corrGlobFormatted.push(Math.round(Object.values(corrGlob)[i]['0'] * 100))
}
}
var VIFVarFormatted = []
for (let i = 0; i < Object.keys(VIFVar).length; i++) {
if (i != 0) {
if (Object.values(VIFVar)[i] > 10) {
VIFVarFormatted.push(4)
} else if (Object.values(VIFVar)[i] > 5) {
VIFVarFormatted.push(2)
} else {
VIFVarFormatted.push(0)
}
}
}
function min(input) {
if (toString.call(input) !== "[object Array]")
return false;
return Math.min.apply(null, input);
}
function max(input) {
if (toString.call(input) !== "[object Array]")
return false;
return Math.max.apply(null, input);
}
function normalize(min, max) {
var delta = max - min;
return function (val) {
return (val - min) / delta;
};
}
var MIMin = min(MIVar)
var MIMax = max(MIVar)
MIVar = MIVar.map(normalize(MIMin, MIMax))
var colorsScaleNodes = d3.scaleLinear()
.domain([MIMin, MIMax])
.range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']);
var svg = d3.select("#FeatureGraph1");
svg.selectAll("*").remove();
var width = 800;
var height = 500;
var numTicks = 200;
var selectedParams;
var bestParams;
var dispatch = d3.dispatch('layoutend');
svg = d3.select("#FeatureGraph1").append("svg")
.attr("width", width)
.attr("height", height);
var graph = this.jsonData
var link = svg.append('g')
.attr('class', 'links')
.selectAll('line')
.data(graph.links)
.enter().append('line')
.attr("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.append('g')
.attr('class', 'nodes')
.selectAll('g')
.data(graph.nodes)
.enter().append('g')
var paramGroups = [
{name: 'chargeStrength', values: [-30, -80]},
{name: 'linkDistance', values: [30, -80]},
{name: 'linkStrength', values: [0, 1]},
{name: 'gravity', values: [0, 0.5]},
{name: 'iterations', values: [1, 2]},
{name: 'alphaDecay', values: [0, 0.0228, 0.05]},
{name: 'velocityDecay', values: [0.4, 0.8]}
];
var paramList = generateParams(paramGroups);
var bestSoFar = d3.select('.best').selectAll('li')
.data(paramGroups.map(function (d) { return d.name; }))
.enter().append('li')
.text(function (d) { return d; });
dispatch.on('layoutend', function (params, i) {
if (!bestParams || params.graphReadability > bestParams.graphReadability) {
bestParams = params;
selectedParams = bestParams;
bestSoFar
.data(d3.map(bestParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; }))
.text(function (d) { return d + ' = ' + bestParams[d]; });
}
});
var i = 0;
var stepper = d3.timer(function () {
var p = paramList[i];
var forceSim = getForceSimFromParams(p);
// Reset node attributes.
graph.nodes.forEach(function (n) {
n.x = n.y = n.vx = n.vy = 0;
});
forceSim.nodes(graph.nodes)
.stop();
forceSim.force('link')
.links(graph.links);
for (var t = 0; t < numTicks; ++t) {
forceSim.tick();
}
p.graphReadability = greadability.greadability(graph.nodes, graph.links);
p.graphReadability = (p.graphReadability.crossing + p.graphReadability.crossingAngle +
p.graphReadability.angularResolutionMin + p.graphReadability.angularResolutionDev) / 4
p.positions = graph.nodes.map(function (n) { return {x: n.x, y: n.y}; });
dispatch.call('layoutend', forceSim, p, i);
++i;
if (i >= paramList.length) {
var widthLoc = 100;
var arcSize = (6 * widthLoc / 100);
var innerRadius = arcSize * 2;
var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc)
.attr("id", function(d, i) { return "svg" + (i); })
graph.nodes.forEach(function(itemVal, indexNode) {
// var data = [[
// {value: 70, label: "", color: '#ff0000', lcolor: ''},
// {value: 33, label: "", color: '#00ff00', lcolor: ''},
// {value: 100, label: "44.5", color: '#000000', lcolor: 'black'}
// ];]
var data = []
for(let k = 0; k < uniqueTarget.length; k++) {
data.push({value: corrTargetFormatted[k][indexNode], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''})
}
var length = data.length
data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])})
var border = VIFVarFormatted[indexNode]
var arcs = data.map(function (obj, i) {
if (i == length) {
return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border);
} else {
return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius);
}
});
var arcsGrey = data.map(function (obj, i) {
return d3.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius));
});
var pieData = data.map(function (obj, i) {
return [
{value: obj.value, arc: arcs[i], object: obj},
{value: (100 - obj.value), arc: arcsGrey[i], object: obj},
{value: 0, arc: arcs[i], object: obj}];
});
var pie = d3.pie().sort(null).value(function (d) {
return d.value;
});
var id = indexNode
var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter()
.append('g')
.attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
var gText = d3.select('#svg'+id).selectAll('g.textClass').data([{}]).enter()
.append('g')
.classed('textClass', true)
.attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
g.selectAll('path').data(function (d) {
return pie(d);
}).enter().append('path')
.attr('id', function (d, i) {
if (i == 1) {
return "Text" + d.data.object.label
}
})
.attr('d', function (d) {
return d.data.arc(d);
}).attr('fill', function (d, i) {
return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none';
});
g.each(function (d, index) {
var el = d3.select(this);
var path = el.selectAll('path').each(function (r, i) {
if (i === 1) {
var centroid = r.data.arc.centroid({
startAngle: r.startAngle + 0.05,
endAngle: r.startAngle + 0.001 + 0.05
});
var lableObj = r.data.object;
g.append('text')
.attr('font-size', ((2 * width) / 100))
.attr('dominant-baseline', 'central')
.append("textPath")
.attr("textLength", function (d, i) {
return 0;
})
.attr("startOffset", '5')
.attr("dy", '-3em')
.text(lableObj.value + '%');
}
if (i === 0) {
var centroidText = r.data.arc.centroid({
startAngle: r.startAngle,
endAngle: r.startAngle
});
var lableObj = r.data.object;
gText.append('text')
.attr('font-size', ((2 * width) / 100))
.text(lableObj.label)
.style('fill', lableObj.lcolor)
.attr('transform', "translate(" + (10) + "," + (0 + ") rotate(" + (180) + ")"))
.attr('dominant-baseline', 'central');
}
});
});
})
var drag_handler = d3.drag()
.on("start", drag_start)
.on("drag", drag_drag)
.on("end", drag_end);
drag_handler(node);
var labels = node.append("text")
.text(function(d) {
return d.name;
})
.attr('x', 20)
.attr('y', 8);
node.append('title').text(function (d) { return d.name; });
//add zoom capabilities
var zoom_handler = d3.zoom()
.on("zoom", zoom_actions);
zoom_handler(svg);
drawGraph();
//Zoom functions
function zoom_actions(){
svg.attr("transform", d3.event.transform)
}
});
})
}
},
reset () {
EventBus.$emit('reset')
EventBus.$emit('alternateFlagLock')
function drag_start(d) {
if (!d3.event.active) forceSim.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
//make sure you can't drag the circle outside the box
function drag_drag(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
tickActions();
}
function drag_end(d) {
if (!d3.event.active) forceSim.alphaTarget(0);
d.fx = null;
d.fy = null;
}
stepper.stop();
}
});
function tickActions() {
link
.attr('x1', function (d) { return d.source.x; })
.attr('x2', function (d) { return d.target.x; })
.attr('y1', function (d) { return d.source.y; })
.attr('y2', function (d) { return d.target.y; });
node
.attr("id", function(d, i) { return "g" + (i); })
.attr("transform", function(d, i) {
d.x = d.x - 50
d.y = d.y - 50
return "translate(" + d.x + "," + d.y + ")";
})
};
function drawGraph () {
graph.nodes.forEach(function (n, i) {
n.x = selectedParams.positions[i].x;
n.y = selectedParams.positions[i].y;
});
var xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
var xMin = xDistance[0];
xDistance = xDistance[1] - xDistance[0];
var yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
var yMin = yDistance[0];
yDistance = yDistance[1] - yDistance[0];
graph.nodes.forEach(function (n, i) {
n.x = (height - 10) * (n.x - xMin) / Math.max(xDistance, yDistance);
n.y = (height - 10) * (n.y - yMin) / Math.max(xDistance, yDistance);
});
xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
var xMid = (xDistance[1] + xDistance[0]) / 2;
yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
var yMid = (yDistance[1] - yDistance[0]) / 2;
graph.nodes.forEach(function (n, i) {
n.x = n.x + width/2 - xMid;
n.y = n.y + height/2 - yMid;
});
tickActions();
}
function generateParams (paramGroups, paramList, currParam) {
var p = paramGroups[0];
if (!paramList) paramList = [];
if (!currParam) currParam = {};
p.values.forEach(function (v) {
var setting = {};
setting[p.name] = v;
if (paramGroups.length === 1) {
paramList.push(Object.assign(setting, currParam));
} else {
generateParams(paramGroups.slice(1), paramList, Object.assign(setting, currParam));
}
});
return paramList;
}
function getForceSimFromParams (params) {
var forceSim = d3.forceSimulation()
.force('link', d3.forceLink().iterations(params.iterations))
.force('charge', d3.forceManyBody().strength(params.chargeStrength))
.force('x', d3.forceX(0).strength(params.gravity))
.force('y', d3.forceY(0).strength(params.gravity))
.force('center', d3.forceCenter(0, 0))
.alphaDecay(params.alphaDecay)
.velocityDecay(params.velocityDecay);
if (params.linkStrength !== null) {
forceSim.force('link').strength(params.linkStrength);
}
return forceSim;
}
},
reset () {
var svg = d3.select("#FeatureGraph1");
svg.selectAll("*").remove();
},
},
initialize () {
EventBus.$emit('ConfirmDataSet')
}
mounted () {
EventBus.$on('quad1', data => { this.dataFS1 = data })
EventBus.$on('quad1', this.initializeNetwork)
}
}
</script>
<style>
text {
font-family: sans-serif;
}
svg {
display: block;
}
.links line {
stroke: #D3D3D3;
stroke-opacity: 0.6;
}
.nodes circle {
fill: #000000;
stroke: #fff;
stroke-width: 1px;
}
.column {
float: left;
margin: 0 10px;
}
</style>

21
frontend/src/components/FeatureSpace2.vue
Unescape View File

@ -1,7 +1,6 @@
<template>
<div class="column">
<div id="FeatureGraph2"></div>
<div id="result"></div>
</div>
</template>
@ -52,6 +51,7 @@ export default {
},
graphVizualization () {
var listofNodes = this.dataFS2[0]
var uniqueTarget = JSON.parse(this.dataFS2[15])
var corrTarget = JSON.parse(this.dataFS2[7])
var corrGlob = JSON.parse(this.dataFS2[11])
@ -216,10 +216,10 @@ export default {
var innerRadius = arcSize * 2;
var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc)
.attr("id", function(d, i) { return "svg" + (i); })
.attr("id", function(d, i) { return "svg" + (i+listofNodes.length); })
graph.nodes.forEach(function(itemVal, indexNode) {
console.log(indexNode)
// var data = [[
// {value: 70, label: "", color: '#ff0000', lcolor: ''},
// {value: 33, label: "", color: '#00ff00', lcolor: ''},
@ -235,7 +235,6 @@ export default {
data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])})
var border = VIFVarFormatted[indexNode]
var arcs = data.map(function (obj, i) {
if (i == length) {
return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border);
@ -258,16 +257,15 @@ export default {
var pie = d3.pie().sort(null).value(function (d) {
return d.value;
});
var g = d3.select('#svg'+indexNode).selectAll('g').data(pieData).enter()
var id = indexNode+listofNodes.length
var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter()
.append('g')
.attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
var gText = d3.select('#svg'+indexNode).selectAll('g.textClass').data([{}]).enter()
var gText = d3.select('#svg'+id).selectAll('g.textClass').data([{}]).enter()
.append('g')
.classed('textClass', true)
.attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
g.selectAll('path').data(function (d) {
return pie(d);
}).enter().append('path')
@ -283,7 +281,6 @@ export default {
});
g.each(function (d, index) {
console.log(d)
var el = d3.select(this);
var path = el.selectAll('path').each(function (r, i) {
@ -384,7 +381,7 @@ export default {
.attr('y2', function (d) { return d.target.y; });
node
.attr("id", function(d, i) { return "g" + (i); })
.attr("id", function(d, i) { return "g" + (i+listofNodes.length); })
.attr("transform", function(d, i) {
d.x = d.x - 50
d.y = d.y - 50
@ -468,8 +465,8 @@ export default {
},
},
mounted () {
EventBus.$on('quad', data => { this.dataFS2 = data })
EventBus.$on('quad', this.initializeNetwork)
EventBus.$on('quad2', data => { this.dataFS2 = data })
EventBus.$on('quad2', this.initializeNetwork)
}
}
</script>

542
frontend/src/components/FeatureSpace3.vue
Unescape View File

@ -1,30 +1,12 @@
<template>
<div>
<label id="data" for="param-dataset" data-toggle="tooltip" data-placement="right" title="Tip: use one of the data sets already provided or upload a new file.">{{ dataset }}</label>
<select id="selectFile" @change="selectDataSet()">
<option value="HeartC.csv" selected>Heart Disease</option>
<option value="IrisC.csv">Iris</option>
<option value="local">Upload New File</option>
</select>
<button class="btn-outline-success"
id="initializeID"
v-on:click="initialize">
<font-awesome-icon icon="search" />
{{ searchText }}
</button>
<button class="btn-outline-danger"
id="resetID"
v-on:click="reset">
<font-awesome-icon icon="trash" />
{{ resetText }}
</button>
<div class="column">
<div id="FeatureGraph3"></div>
</div>
</template>
<script>
import Papa from 'papaparse'
import { EventBus } from '../main.js'
import {$,jQuery} from 'jquery';
import * as greadability from '../greadability.js'
import * as d3Base from 'd3'
// attach all d3 plugins to the d3 library
@ -34,53 +16,487 @@ export default {
name: 'FeatureSpace3',
data () {
return {
defaultDataSet: 'HeartC', // default value for the first data set
searchText: 'Hyper-parameter search',
resetText: 'Reset',
dataset: 'Data set'
dataFS3: [],
jsonData: [],
}
},
methods: {
selectDataSet () {
const fileName = document.getElementById('selectFile')
this.defaultDataSet = fileName.options[fileName.selectedIndex].value
this.defaultDataSet = this.defaultDataSet.split('.')[0]
if (this.defaultDataSet == "DiabetesC" || this.defaultDataSet == "HeartC" || this.defaultDataSet == "IrisC" || this.defaultDataSet == "StanceC") { // This is a function that handles a new file, which users can upload.
this.dataset = "Data set"
d3.select("#data").select("input").remove(); // Remove the selection field.
EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet)
} else {
EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet)
d3.select("#data").select("input").remove();
this.dataset = ""
var data
d3.select("#data")
.append("input")
.attr("type", "file")
.style("font-size", "18.5px")
.style("width", "200px")
.on("change", function() {
var file = d3.event.target.files[0];
Papa.parse(file, {
header: true,
dynamicTyping: true,
skipEmptyLines: true,
complete: function(results) {
data = results.data;
EventBus.$emit('SendToServerLocalFile', data)
initializeNetwork () {
var listofNodes = this.dataFS3[0]
var dataLoc = JSON.parse(this.dataFS3[4])
var nodes = []
listofNodes.forEach(element => nodes.push({"name": element}))
var links = []
Object.entries(dataLoc).forEach(
function ([feature, value]) {
Object.entries(value).forEach( function ([featureInside, value]) {
if (feature != featureInside) {
if (value >= 0) {
links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 1})
} else {
links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 2})
}
}
})
})
this.jsonData = {"nodes": nodes, "links": links};
this.graphVizualization()
},
graphVizualization () {
var listofNodes = this.dataFS3[0]
var uniqueTarget = JSON.parse(this.dataFS3[16])
var corrTarget = JSON.parse(this.dataFS3[8])
var corrGlob = JSON.parse(this.dataFS3[12])
var VIFVar = JSON.parse(this.dataFS3[20])
var MIVar = JSON.parse(this.dataFS3[24])
var colorCateg = d3.scaleOrdinal(d3.schemeAccent)
var corrTargetFormatted = []
for (let i = 0; i < Object.keys(corrTarget).length; i++) {
var corrTargetFormattedLoc = []
for (let j = 0; j < Object.keys(corrTarget[i]).length; j++) {
if (j > uniqueTarget.length - 1) {
corrTargetFormattedLoc.push(Math.round(Object.values(corrTarget[i])[j] * 100))
}
}
corrTargetFormatted.push(corrTargetFormattedLoc)
}
var corrGlobFormatted = []
for (let i = 0; i < Object.keys(corrGlob).length; i++) {
if (i != 0) {
corrGlobFormatted.push(Math.round(Object.values(corrGlob)[i]['0'] * 100))
}
}
var VIFVarFormatted = []
for (let i = 0; i < Object.keys(VIFVar).length; i++) {
if (i != 0) {
if (Object.values(VIFVar)[i] > 10) {
VIFVarFormatted.push(4)
} else if (Object.values(VIFVar)[i] > 5) {
VIFVarFormatted.push(2)
} else {
VIFVarFormatted.push(0)
}
}
}
function min(input) {
if (toString.call(input) !== "[object Array]")
return false;
return Math.min.apply(null, input);
}
function max(input) {
if (toString.call(input) !== "[object Array]")
return false;
return Math.max.apply(null, input);
}
function normalize(min, max) {
var delta = max - min;
return function (val) {
return (val - min) / delta;
};
}
var MIMin = min(MIVar)
var MIMax = max(MIVar)
MIVar = MIVar.map(normalize(MIMin, MIMax))
var colorsScaleNodes = d3.scaleLinear()
.domain([MIMin, MIMax])
.range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']);
var svg = d3.select("#FeatureGraph3");
svg.selectAll("*").remove();
var width = 800;
var height = 500;
var numTicks = 200;
var selectedParams;
var bestParams;
var dispatch = d3.dispatch('layoutend');
svg = d3.select("#FeatureGraph3").append("svg")
.attr("width", width)
.attr("height", height);
var graph = this.jsonData
var link = svg.append('g')
.attr('class', 'links')
.selectAll('line')
.data(graph.links)
.enter().append('line')
.attr("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.append('g')
.attr('class', 'nodes')
.selectAll('g')
.data(graph.nodes)
.enter().append('g')
var paramGroups = [
{name: 'chargeStrength', values: [-30, -80]},
{name: 'linkDistance', values: [30, -80]},
{name: 'linkStrength', values: [0, 1]},
{name: 'gravity', values: [0, 0.5]},
{name: 'iterations', values: [1, 2]},
{name: 'alphaDecay', values: [0, 0.0228, 0.05]},
{name: 'velocityDecay', values: [0.4, 0.8]}
];
var paramList = generateParams(paramGroups);
var bestSoFar = d3.select('.best').selectAll('li')
.data(paramGroups.map(function (d) { return d.name; }))
.enter().append('li')
.text(function (d) { return d; });
dispatch.on('layoutend', function (params, i) {
if (!bestParams || params.graphReadability > bestParams.graphReadability) {
bestParams = params;
selectedParams = bestParams;
bestSoFar
.data(d3.map(bestParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; }))
.text(function (d) { return d + ' = ' + bestParams[d]; });
}
});
var i = 0;
var stepper = d3.timer(function () {
var p = paramList[i];
var forceSim = getForceSimFromParams(p);
// Reset node attributes.
graph.nodes.forEach(function (n) {
n.x = n.y = n.vx = n.vy = 0;
});
forceSim.nodes(graph.nodes)
.stop();
forceSim.force('link')
.links(graph.links);
for (var t = 0; t < numTicks; ++t) {
forceSim.tick();
}
p.graphReadability = greadability.greadability(graph.nodes, graph.links);
p.graphReadability = (p.graphReadability.crossing + p.graphReadability.crossingAngle +
p.graphReadability.angularResolutionMin + p.graphReadability.angularResolutionDev) / 4
p.positions = graph.nodes.map(function (n) { return {x: n.x, y: n.y}; });
dispatch.call('layoutend', forceSim, p, i);
++i;
if (i >= paramList.length) {
var widthLoc = 100;
var arcSize = (6 * widthLoc / 100);
var innerRadius = arcSize * 2;
var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc)
.attr("id", function(d, i) { return "svg" + (listofNodes.length*2+i); })
graph.nodes.forEach(function(itemVal, indexNode) {
// var data = [[
// {value: 70, label: "", color: '#ff0000', lcolor: ''},
// {value: 33, label: "", color: '#00ff00', lcolor: ''},
// {value: 100, label: "44.5", color: '#000000', lcolor: 'black'}
// ];]
var data = []
for(let k = 0; k < uniqueTarget.length; k++) {
data.push({value: corrTargetFormatted[k][indexNode], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''})
}
var length = data.length
data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])})
var border = VIFVarFormatted[indexNode]
var arcs = data.map(function (obj, i) {
if (i == length) {
return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border);
} else {
return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius);
}
});
var arcsGrey = data.map(function (obj, i) {
return d3.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius));
});
var pieData = data.map(function (obj, i) {
return [
{value: obj.value, arc: arcs[i], object: obj},
{value: (100 - obj.value), arc: arcsGrey[i], object: obj},
{value: 0, arc: arcs[i], object: obj}];
});
var pie = d3.pie().sort(null).value(function (d) {
return d.value;
});
var id = listofNodes.length*2+indexNode
var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter()
.append('g')
.attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
var gText = d3.select('#svg'+id).selectAll('g.textClass').data([{}]).enter()
.append('g')
.classed('textClass', true)
.attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
g.selectAll('path').data(function (d) {
return pie(d);
}).enter().append('path')
.attr('id', function (d, i) {
if (i == 1) {
return "Text" + d.data.object.label
}
})
.attr('d', function (d) {
return d.data.arc(d);
}).attr('fill', function (d, i) {
return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none';
});
g.each(function (d, index) {
var el = d3.select(this);
var path = el.selectAll('path').each(function (r, i) {
if (i === 1) {
var centroid = r.data.arc.centroid({
startAngle: r.startAngle + 0.05,
endAngle: r.startAngle + 0.001 + 0.05
});
var lableObj = r.data.object;
g.append('text')
.attr('font-size', ((2 * width) / 100))
.attr('dominant-baseline', 'central')
.append("textPath")
.attr("textLength", function (d, i) {
return 0;
})
.attr("startOffset", '5')
.attr("dy", '-3em')
.text(lableObj.value + '%');
}
if (i === 0) {
var centroidText = r.data.arc.centroid({
startAngle: r.startAngle,
endAngle: r.startAngle
});
var lableObj = r.data.object;
gText.append('text')
.attr('font-size', ((2 * width) / 100))
.text(lableObj.label)
.style('fill', lableObj.lcolor)
.attr('transform', "translate(" + (10) + "," + (0 + ") rotate(" + (180) + ")"))
.attr('dominant-baseline', 'central');
}
});
});
})
var drag_handler = d3.drag()
.on("start", drag_start)
.on("drag", drag_drag)
.on("end", drag_end);
drag_handler(node);
var labels = node.append("text")
.text(function(d) {
return d.name;
})
.attr('x', 20)
.attr('y', 8);
node.append('title').text(function (d) { return d.name; });
//add zoom capabilities
var zoom_handler = d3.zoom()
.on("zoom", zoom_actions);
zoom_handler(svg);
drawGraph();
//Zoom functions
function zoom_actions(){
svg.attr("transform", d3.event.transform)
}
});
})
}
},
reset () {
EventBus.$emit('reset')
EventBus.$emit('alternateFlagLock')
function drag_start(d) {
if (!d3.event.active) forceSim.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
//make sure you can't drag the circle outside the box
function drag_drag(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
tickActions();
}
function drag_end(d) {
if (!d3.event.active) forceSim.alphaTarget(0);
d.fx = null;
d.fy = null;
}
stepper.stop();
}
});
function tickActions() {
link
.attr('x1', function (d) { return d.source.x; })
.attr('x2', function (d) { return d.target.x; })
.attr('y1', function (d) { return d.source.y; })
.attr('y2', function (d) { return d.target.y; });
node
.attr("id", function(d, i) { return "g" + (listofNodes.length*2+i); })
.attr("transform", function(d, i) {
d.x = d.x - 50
d.y = d.y - 50
return "translate(" + d.x + "," + d.y + ")";
})
};
function drawGraph () {
graph.nodes.forEach(function (n, i) {
n.x = selectedParams.positions[i].x;
n.y = selectedParams.positions[i].y;
});
var xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
var xMin = xDistance[0];
xDistance = xDistance[1] - xDistance[0];
var yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
var yMin = yDistance[0];
yDistance = yDistance[1] - yDistance[0];
graph.nodes.forEach(function (n, i) {
n.x = (height - 10) * (n.x - xMin) / Math.max(xDistance, yDistance);
n.y = (height - 10) * (n.y - yMin) / Math.max(xDistance, yDistance);
});
xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
var xMid = (xDistance[1] + xDistance[0]) / 2;
yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
var yMid = (yDistance[1] - yDistance[0]) / 2;
graph.nodes.forEach(function (n, i) {
n.x = n.x + width/2 - xMid;
n.y = n.y + height/2 - yMid;
});
tickActions();
}
function generateParams (paramGroups, paramList, currParam) {
var p = paramGroups[0];
if (!paramList) paramList = [];
if (!currParam) currParam = {};
p.values.forEach(function (v) {
var setting = {};
setting[p.name] = v;
if (paramGroups.length === 1) {
paramList.push(Object.assign(setting, currParam));
} else {
generateParams(paramGroups.slice(1), paramList, Object.assign(setting, currParam));
}
});
return paramList;
}
function getForceSimFromParams (params) {
var forceSim = d3.forceSimulation()
.force('link', d3.forceLink().iterations(params.iterations))
.force('charge', d3.forceManyBody().strength(params.chargeStrength))
.force('x', d3.forceX(0).strength(params.gravity))
.force('y', d3.forceY(0).strength(params.gravity))
.force('center', d3.forceCenter(0, 0))
.alphaDecay(params.alphaDecay)
.velocityDecay(params.velocityDecay);
if (params.linkStrength !== null) {
forceSim.force('link').strength(params.linkStrength);
}
return forceSim;
}
},
reset () {
var svg = d3.select("#FeatureGraph3");
svg.selectAll("*").remove();
},
},
initialize () {
EventBus.$emit('ConfirmDataSet')
}
mounted () {
EventBus.$on('quad3', data => { this.dataFS3 = data })
EventBus.$on('quad3', this.initializeNetwork)
}
}
</script>
<style>
text {
font-family: sans-serif;
}
svg {
display: block;
}
.links line {
stroke: #D3D3D3;
stroke-opacity: 0.6;
}
.nodes circle {
fill: #000000;
stroke: #fff;
stroke-width: 1px;
}
.column {
float: left;
margin: 0 10px;
}
</style>

542
frontend/src/components/FeatureSpace4.vue
Unescape View File

@ -1,30 +1,12 @@
<template>
<div>
<label id="data" for="param-dataset" data-toggle="tooltip" data-placement="right" title="Tip: use one of the data sets already provided or upload a new file.">{{ dataset }}</label>
<select id="selectFile" @change="selectDataSet()">
<option value="HeartC.csv" selected>Heart Disease</option>
<option value="IrisC.csv">Iris</option>
<option value="local">Upload New File</option>
</select>
<button class="btn-outline-success"
id="initializeID"
v-on:click="initialize">
<font-awesome-icon icon="search" />
{{ searchText }}
</button>
<button class="btn-outline-danger"
id="resetID"
v-on:click="reset">
<font-awesome-icon icon="trash" />
{{ resetText }}
</button>
<div class="column">
<div id="FeatureGraph4"></div>
</div>
</template>
<script>
import Papa from 'papaparse'
import { EventBus } from '../main.js'
import {$,jQuery} from 'jquery';
import * as greadability from '../greadability.js'
import * as d3Base from 'd3'
// attach all d3 plugins to the d3 library
@ -34,53 +16,487 @@ export default {
name: 'FeatureSpace4',
data () {
return {
defaultDataSet: 'HeartC', // default value for the first data set
searchText: 'Hyper-parameter search',
resetText: 'Reset',
dataset: 'Data set'
dataFS4: [],
jsonData: [],
}
},
methods: {
selectDataSet () {
const fileName = document.getElementById('selectFile')
this.defaultDataSet = fileName.options[fileName.selectedIndex].value
this.defaultDataSet = this.defaultDataSet.split('.')[0]
if (this.defaultDataSet == "DiabetesC" || this.defaultDataSet == "HeartC" || this.defaultDataSet == "IrisC" || this.defaultDataSet == "StanceC") { // This is a function that handles a new file, which users can upload.
this.dataset = "Data set"
d3.select("#data").select("input").remove(); // Remove the selection field.
EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet)
} else {
EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet)
d3.select("#data").select("input").remove();
this.dataset = ""
var data
d3.select("#data")
.append("input")
.attr("type", "file")
.style("font-size", "18.5px")
.style("width", "200px")
.on("change", function() {
var file = d3.event.target.files[0];
Papa.parse(file, {
header: true,
dynamicTyping: true,
skipEmptyLines: true,
complete: function(results) {
data = results.data;
EventBus.$emit('SendToServerLocalFile', data)
initializeNetwork () {
var listofNodes = this.dataFS4[0]
var dataLoc = JSON.parse(this.dataFS4[5])
var nodes = []
listofNodes.forEach(element => nodes.push({"name": element}))
var links = []
Object.entries(dataLoc).forEach(
function ([feature, value]) {
Object.entries(value).forEach( function ([featureInside, value]) {
if (feature != featureInside) {
if (value >= 0) {
links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 1})
} else {
links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 2})
}
}
})
})
this.jsonData = {"nodes": nodes, "links": links};
this.graphVizualization()
},
graphVizualization () {
var listofNodes = this.dataFS4[0]
var uniqueTarget = JSON.parse(this.dataFS4[17])
var corrTarget = JSON.parse(this.dataFS4[9])
var corrGlob = JSON.parse(this.dataFS4[13])
var VIFVar = JSON.parse(this.dataFS4[21])
var MIVar = JSON.parse(this.dataFS4[25])
var colorCateg = d3.scaleOrdinal(d3.schemeAccent)
var corrTargetFormatted = []
for (let i = 0; i < Object.keys(corrTarget).length; i++) {
var corrTargetFormattedLoc = []
for (let j = 0; j < Object.keys(corrTarget[i]).length; j++) {
if (j > uniqueTarget.length - 1) {
corrTargetFormattedLoc.push(Math.round(Object.values(corrTarget[i])[j] * 100))
}
}
corrTargetFormatted.push(corrTargetFormattedLoc)
}
var corrGlobFormatted = []
for (let i = 0; i < Object.keys(corrGlob).length; i++) {
if (i != 0) {
corrGlobFormatted.push(Math.round(Object.values(corrGlob)[i]['0'] * 100))
}
}
var VIFVarFormatted = []
for (let i = 0; i < Object.keys(VIFVar).length; i++) {
if (i != 0) {
if (Object.values(VIFVar)[i] > 10) {
VIFVarFormatted.push(4)
} else if (Object.values(VIFVar)[i] > 5) {
VIFVarFormatted.push(2)
} else {
VIFVarFormatted.push(0)
}
}
}
function min(input) {
if (toString.call(input) !== "[object Array]")
return false;
return Math.min.apply(null, input);
}
function max(input) {
if (toString.call(input) !== "[object Array]")
return false;
return Math.max.apply(null, input);
}
function normalize(min, max) {
var delta = max - min;
return function (val) {
return (val - min) / delta;
};
}
var MIMin = min(MIVar)
var MIMax = max(MIVar)
MIVar = MIVar.map(normalize(MIMin, MIMax))
var colorsScaleNodes = d3.scaleLinear()
.domain([MIMin, MIMax])
.range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']);
var svg = d3.select("#FeatureGraph4");
svg.selectAll("*").remove();
var width = 800;
var height = 500;
var numTicks = 200;
var selectedParams;
var bestParams;
var dispatch = d3.dispatch('layoutend');
svg = d3.select("#FeatureGraph4").append("svg")
.attr("width", width)
.attr("height", height);
var graph = this.jsonData
var link = svg.append('g')
.attr('class', 'links')
.selectAll('line')
.data(graph.links)
.enter().append('line')
.attr("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.append('g')
.attr('class', 'nodes')
.selectAll('g')
.data(graph.nodes)
.enter().append('g')
var paramGroups = [
{name: 'chargeStrength', values: [-30, -80]},
{name: 'linkDistance', values: [30, -80]},
{name: 'linkStrength', values: [0, 1]},
{name: 'gravity', values: [0, 0.5]},
{name: 'iterations', values: [1, 2]},
{name: 'alphaDecay', values: [0, 0.0228, 0.05]},
{name: 'velocityDecay', values: [0.4, 0.8]}
];
var paramList = generateParams(paramGroups);
var bestSoFar = d3.select('.best').selectAll('li')
.data(paramGroups.map(function (d) { return d.name; }))
.enter().append('li')
.text(function (d) { return d; });
dispatch.on('layoutend', function (params, i) {
if (!bestParams || params.graphReadability > bestParams.graphReadability) {
bestParams = params;
selectedParams = bestParams;
bestSoFar
.data(d3.map(bestParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; }))
.text(function (d) { return d + ' = ' + bestParams[d]; });
}
});
var i = 0;
var stepper = d3.timer(function () {
var p = paramList[i];
var forceSim = getForceSimFromParams(p);
// Reset node attributes.
graph.nodes.forEach(function (n) {
n.x = n.y = n.vx = n.vy = 0;
});
forceSim.nodes(graph.nodes)
.stop();
forceSim.force('link')
.links(graph.links);
for (var t = 0; t < numTicks; ++t) {
forceSim.tick();
}
p.graphReadability = greadability.greadability(graph.nodes, graph.links);
p.graphReadability = (p.graphReadability.crossing + p.graphReadability.crossingAngle +
p.graphReadability.angularResolutionMin + p.graphReadability.angularResolutionDev) / 4
p.positions = graph.nodes.map(function (n) { return {x: n.x, y: n.y}; });
dispatch.call('layoutend', forceSim, p, i);
++i;
if (i >= paramList.length) {
var widthLoc = 100;
var arcSize = (6 * widthLoc / 100);
var innerRadius = arcSize * 2;
var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc)
.attr("id", function(d, i) { return "svg" + (listofNodes.length*3+i); })
graph.nodes.forEach(function(itemVal, indexNode) {
// var data = [[
// {value: 70, label: "", color: '#ff0000', lcolor: ''},
// {value: 33, label: "", color: '#00ff00', lcolor: ''},
// {value: 100, label: "44.5", color: '#000000', lcolor: 'black'}
// ];]
var data = []
for(let k = 0; k < uniqueTarget.length; k++) {
data.push({value: corrTargetFormatted[k][indexNode], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''})
}
var length = data.length
data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])})
var border = VIFVarFormatted[indexNode]
var arcs = data.map(function (obj, i) {
if (i == length) {
return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border);
} else {
return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius);
}
});
var arcsGrey = data.map(function (obj, i) {
return d3.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius));
});
var pieData = data.map(function (obj, i) {
return [
{value: obj.value, arc: arcs[i], object: obj},
{value: (100 - obj.value), arc: arcsGrey[i], object: obj},
{value: 0, arc: arcs[i], object: obj}];
});
var pie = d3.pie().sort(null).value(function (d) {
return d.value;
});
var id = listofNodes.length*3+indexNode
var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter()
.append('g')
.attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
var gText = d3.select('#svg'+id).selectAll('g.textClass').data([{}]).enter()
.append('g')
.classed('textClass', true)
.attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
g.selectAll('path').data(function (d) {
return pie(d);
}).enter().append('path')
.attr('id', function (d, i) {
if (i == 1) {
return "Text" + d.data.object.label
}
})
.attr('d', function (d) {
return d.data.arc(d);
}).attr('fill', function (d, i) {
return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none';
});
g.each(function (d, index) {
var el = d3.select(this);
var path = el.selectAll('path').each(function (r, i) {
if (i === 1) {
var centroid = r.data.arc.centroid({
startAngle: r.startAngle + 0.05,
endAngle: r.startAngle + 0.001 + 0.05
});
var lableObj = r.data.object;
g.append('text')
.attr('font-size', ((2 * width) / 100))
.attr('dominant-baseline', 'central')
.append("textPath")
.attr("textLength", function (d, i) {
return 0;
})
.attr("startOffset", '5')
.attr("dy", '-3em')
.text(lableObj.value + '%');
}
if (i === 0) {
var centroidText = r.data.arc.centroid({
startAngle: r.startAngle,
endAngle: r.startAngle
});
var lableObj = r.data.object;
gText.append('text')
.attr('font-size', ((2 * width) / 100))
.text(lableObj.label)
.style('fill', lableObj.lcolor)
.attr('transform', "translate(" + (10) + "," + (0 + ") rotate(" + (180) + ")"))
.attr('dominant-baseline', 'central');
}
});
});
})
var drag_handler = d3.drag()
.on("start", drag_start)
.on("drag", drag_drag)
.on("end", drag_end);
drag_handler(node);
var labels = node.append("text")
.text(function(d) {
return d.name;
})
.attr('x', 20)
.attr('y', 8);
node.append('title').text(function (d) { return d.name; });
//add zoom capabilities
var zoom_handler = d3.zoom()
.on("zoom", zoom_actions);
zoom_handler(svg);
drawGraph();
//Zoom functions
function zoom_actions(){
svg.attr("transform", d3.event.transform)
}
});
})
}
},
reset () {
EventBus.$emit('reset')
EventBus.$emit('alternateFlagLock')
function drag_start(d) {
if (!d3.event.active) forceSim.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
//make sure you can't drag the circle outside the box
function drag_drag(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
tickActions();
}
function drag_end(d) {
if (!d3.event.active) forceSim.alphaTarget(0);
d.fx = null;
d.fy = null;
}
stepper.stop();
}
});
function tickActions() {
link
.attr('x1', function (d) { return d.source.x; })
.attr('x2', function (d) { return d.target.x; })
.attr('y1', function (d) { return d.source.y; })
.attr('y2', function (d) { return d.target.y; });
node
.attr("id", function(d, i) { return "g" + (listofNodes.length*3+i); })
.attr("transform", function(d, i) {
d.x = d.x - 50
d.y = d.y - 50
return "translate(" + d.x + "," + d.y + ")";
})
};
function drawGraph () {
graph.nodes.forEach(function (n, i) {
n.x = selectedParams.positions[i].x;
n.y = selectedParams.positions[i].y;
});
var xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
var xMin = xDistance[0];
xDistance = xDistance[1] - xDistance[0];
var yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
var yMin = yDistance[0];
yDistance = yDistance[1] - yDistance[0];
graph.nodes.forEach(function (n, i) {
n.x = (height - 10) * (n.x - xMin) / Math.max(xDistance, yDistance);
n.y = (height - 10) * (n.y - yMin) / Math.max(xDistance, yDistance);
});
xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
var xMid = (xDistance[1] + xDistance[0]) / 2;
yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
var yMid = (yDistance[1] - yDistance[0]) / 2;
graph.nodes.forEach(function (n, i) {
n.x = n.x + width/2 - xMid;
n.y = n.y + height/2 - yMid;
});
tickActions();
}
function generateParams (paramGroups, paramList, currParam) {
var p = paramGroups[0];
if (!paramList) paramList = [];
if (!currParam) currParam = {};
p.values.forEach(function (v) {
var setting = {};
setting[p.name] = v;
if (paramGroups.length === 1) {
paramList.push(Object.assign(setting, currParam));
} else {
generateParams(paramGroups.slice(1), paramList, Object.assign(setting, currParam));
}
});
return paramList;
}
function getForceSimFromParams (params) {
var forceSim = d3.forceSimulation()
.force('link', d3.forceLink().iterations(params.iterations))
.force('charge', d3.forceManyBody().strength(params.chargeStrength))
.force('x', d3.forceX(0).strength(params.gravity))
.force('y', d3.forceY(0).strength(params.gravity))
.force('center', d3.forceCenter(0, 0))
.alphaDecay(params.alphaDecay)
.velocityDecay(params.velocityDecay);
if (params.linkStrength !== null) {
forceSim.force('link').strength(params.linkStrength);
}
return forceSim;
}
},
reset () {
var svg = d3.select("#FeatureGraph4");
svg.selectAll("*").remove();
},
},
initialize () {
EventBus.$emit('ConfirmDataSet')
}
mounted () {
EventBus.$on('quad4', data => { this.dataFS4 = data })
EventBus.$on('quad4', this.initializeNetwork)
}
}
</script>
<style>
text {
font-family: sans-serif;
}
svg {
display: block;
}
.links line {
stroke: #D3D3D3;
stroke-opacity: 0.6;
}
.nodes circle {
fill: #000000;
stroke: #fff;
stroke-width: 1px;
}
.column {
float: left;
margin: 0 10px;
}
</style>

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

@ -495,7 +495,10 @@ export default Vue.extend({
.then(response => {
console.log('Server successfully send the correlation matrices!')
this.correlResul = response.data.correlResul
EventBus.$emit('quad', this.correlResul)
EventBus.$emit('quad1', this.correlResul)
EventBus.$emit('quad2', this.correlResul)
EventBus.$emit('quad3', this.correlResul)
EventBus.$emit('quad4', this.correlResul)
})
.catch(error => {
console.log(error)
@ -617,7 +620,7 @@ body {
top: 0px;
bottom: 0px;
margin-top: -4px !important;
overflow: hidden !important;
//overflow: hidden !important;
}
.modal-backdrop {

Write Preview
Loading…
Cancel
Save