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

new

Browse Source
master
Angelos Chatzimparmpas 5 years ago
parent bb7976a5b5
commit e4080bcb25
1 changed files with 0 additions and 489 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. 489
      frontend/src/components/FeatureSpace2 copy.vue

489
frontend/src/components/FeatureSpace2 copy.vue
Unescape View File

@ -1,489 +0,0 @@
<template>
<div class="column">
<div id="FeatureGraph2"></div>
</div>
</template>
<script>
import { EventBus } from '../main.js'
import * as greadability from '../greadability.js'
import * as d3Base from 'd3'
// attach all d3 plugins to the d3 library
const d3 = Object.assign(d3Base)
export default {
name: 'FeatureSpace2',
data () {
return {
dataFS2: [],
jsonData: [],
}
},
methods: {
initializeNetwork () {
var listofNodes = this.dataFS2[0]
var dataLoc = JSON.parse(this.dataFS2[3])
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.dataFS2[0]
var uniqueTarget = JSON.parse(this.dataFS2[15])
var corrTarget = JSON.parse(this.dataFS2[7])
var corrGlob = JSON.parse(this.dataFS2[11])
var VIFVar = JSON.parse(this.dataFS2[19])
var MIVar = JSON.parse(this.dataFS2[23])
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(['#a6bddb','#74a9cf','#3690c0','#0570b0','#045a8d','#023858']);
var svg = d3.select("#FeatureGraph2");
svg.selectAll("*").remove();
var width = 800;
var height = 500;
var numTicks = 200;
var selectedParams;
var bestParams;
var dispatch = d3.dispatch('layoutend');
svg = d3.select("#FeatureGraph2").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+listofNodes.length); })
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+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'+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)
}
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+listofNodes.length); })
.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("#FeatureGraph2");
svg.selectAll("*").remove();
},
},
mounted () {
EventBus.$on('quad2', data => { this.dataFS2 = data })
EventBus.$on('quad2', this.initializeNetwork)
}
}
</script>
<style>
text {
font-family: sans-serif;
}
svg {
display: block;
}
.column {
float: left;
margin: 0 10px;
}
</style>
Write Preview
Loading…
Cancel
Save