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

new

Browse Source
master
Angelos Chatzimparmpas 4 years ago
parent d0fffd5c73
commit cb90c4ce13
2 changed files with 119 additions and 116 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. 233
      frontend/src/components/FeatureSpace2.vue
  2. 2
      frontend/src/components/Main.vue

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

@ -1,6 +1,7 @@
<template> <template>
<div class="column"> <div class="column">
<div id="FeatureGraph2"></div> <div id="FeatureGraph2"></div>
<div id="result"></div>
</div> </div>
</template> </template>
@ -81,9 +82,9 @@ export default {
for (let i = 0; i < Object.keys(VIFVar).length; i++) { for (let i = 0; i < Object.keys(VIFVar).length; i++) {
if (i != 0) { if (i != 0) {
if (Object.values(VIFVar)[i] > 10) { if (Object.values(VIFVar)[i] > 10) {
VIFVarFormatted.push(2) VIFVarFormatted.push(4)
} else if (Object.values(VIFVar)[i] > 5) { } else if (Object.values(VIFVar)[i] > 5) {
VIFVarFormatted.push(1) VIFVarFormatted.push(2)
} else { } else {
VIFVarFormatted.push(0) VIFVarFormatted.push(0)
} }
@ -115,15 +116,14 @@ export default {
MIVar = MIVar.map(normalize(MIMin, MIMax)) MIVar = MIVar.map(normalize(MIMin, MIMax))
var colorsScaleNodes = d3.scaleLinear() var colorsScaleNodes = d3.scaleLinear()
.domain(d3.ticks(MIMin, MIMax, 5)) .domain([MIMin, MIMax])
.range(['#fb6a4a','#ef3b2c','#cb181d','#a50f15','#67000d']); .range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']);
var svg = d3.select("#FeatureGraph2"); var svg = d3.select("#FeatureGraph2");
svg.selectAll("*").remove(); svg.selectAll("*").remove();
var marginSVG = { top: 0, right: 50, bottom: 0, left: 50}
var width = 800; var width = 800;
var height = 600; var height = 500;
var numTicks = 200; var numTicks = 200;
@ -133,8 +133,8 @@ export default {
var dispatch = d3.dispatch('layoutend'); var dispatch = d3.dispatch('layoutend');
svg = d3.select("#FeatureGraph2").append("svg") svg = d3.select("#FeatureGraph2").append("svg")
.attr("width", width + marginSVG.left + marginSVG.right) .attr("width", width)
.attr("height", height + marginSVG.top + marginSVG.bottom); .attr("height", height);
var graph = this.jsonData var graph = this.jsonData
@ -209,117 +209,119 @@ export default {
dispatch.call('layoutend', forceSim, p, i); dispatch.call('layoutend', forceSim, p, i);
++i; ++i;
if (i >= paramList.length) { 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) {
console.log(indexNode)
// var data = [[ // var data = [[
// {value: 70, label: "", color: '#ff0000', lcolor: ''}, // {value: 70, label: "", color: '#ff0000', lcolor: ''},
// {value: 33, label: "", color: '#00ff00', lcolor: ''}, // {value: 33, label: "", color: '#00ff00', lcolor: ''},
// {value: 100, label: "44.5", color: '#000000', lcolor: 'black'} // {value: 100, label: "44.5", color: '#000000', lcolor: 'black'}
// ];] // ];]
var data = [] var data = []
for(let k = 0; k < uniqueTarget.length; k++) {
data.push({value: corrTargetFormatted[k][0], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''}) for(let k = 0; k < uniqueTarget.length; k++) {
} data.push({value: corrTargetFormatted[k][indexNode], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''})
data.push({value: 100, label: corrGlobFormatted[0], color: '#000000', lcolor: colorsScaleNodes(MIVar[0])}) }
var length = data.length
var length = data.length data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])})
var border = VIFVarFormatted[0] var border = VIFVarFormatted[indexNode]
var widthLoc = 100;
var arcSize = (6 * widthLoc / 100); var arcs = data.map(function (obj, i) {
var innerRadius = arcSize * 2; if (i == length) {
return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border);
var svgNodes = node.append('svg').attr('width', widthLoc).attr('height', widthLoc); } else {
return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius);
var arcs = data.map(function (obj, i) { }
var data = [] });
for(let k = 0; k < uniqueTarget.length; k++) {
data.push({value: corrTargetFormatted[k][0], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''}) var arcsGrey = data.map(function (obj, i) {
} return d3.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius));
data.push({value: 100, label: corrGlobFormatted[0], color: '#000000', lcolor: colorsScaleNodes(MIVar[0])}) });
var length = data.length
var border = VIFVarFormatted[i] var pieData = data.map(function (obj, i) {
if (i == length - 1) { return [
return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border); {value: obj.value, arc: arcs[i], object: obj},
} else { {value: (100 - obj.value), arc: arcsGrey[i], object: obj},
return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius); {value: 0, arc: arcs[i], object: obj}];
} });
});
var pie = d3.pie().sort(null).value(function (d) {
var arcsGrey = data.map(function (obj, i) { return d.value;
return d3.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius)); });
});
var g = d3.select('#svg'+indexNode).selectAll('g').data(pieData).enter()
var pieData = data.map(function (obj, i) { .append('g')
return [ .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
{value: obj.value, arc: arcs[i], object: obj}, var gText = d3.select('#svg'+indexNode).selectAll('g.textClass').data([{}]).enter()
{value: (100 - obj.value), arc: arcsGrey[i], object: obj}, .append('g')
{value: 0, arc: arcs[i], object: obj}]; .classed('textClass', true)
}); .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
var pie = d3.pie().sort(null).value(function (d) {
return d.value; g.selectAll('path').data(function (d) {
}); return pie(d);
}).enter().append('path')
var g = svgNodes.select('g').data(pieData).enter() .attr('id', function (d, i) {
.append('g') if (i == 1) {
.attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)'); return "Text" + d.data.object.label
var gText = svgNodes.selectAll('g.textClass').data([{}]).enter() }
.append('g') })
.classed('textClass', true) .attr('d', function (d) {
.attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)'); return d.data.arc(d);
}).attr('fill', function (d, i) {
return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none';
g.selectAll('path').data(function (d) { });
return pie(d);
}).enter().append('path') g.each(function (d, index) {
.attr('id', function (d, i) { console.log(d)
if (i == 1) {
return "Text" + d.data.object.label var el = d3.select(this);
} var path = el.selectAll('path').each(function (r, i) {
}) if (i === 1) {
.attr('d', function (d) { var centroid = r.data.arc.centroid({
return d.data.arc(d); startAngle: r.startAngle + 0.05,
}).attr('fill', function (d, i) { endAngle: r.startAngle + 0.001 + 0.05
return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none'; });
}); var lableObj = r.data.object;
g.append('text')
svgNodes.selectAll('g').each(function (d, index) { .attr('font-size', ((2 * width) / 100))
var el = d3.select(this); .attr('dominant-baseline', 'central')
var path = el.selectAll('path').each(function (r, i) { .append("textPath")
if (i === 1) { .attr("textLength", function (d, i) {
var centroid = r.data.arc.centroid({ return 0;
startAngle: r.startAngle + 0.05, })
endAngle: r.startAngle + 0.001 + 0.05 .attr("startOffset", '5')
}); .attr("dy", '-3em')
var lableObj = r.data.object; .text(lableObj.value + '%');
g.append('text') }
.attr('font-size', ((2 * width) / 100)) if (i === 0) {
.attr('dominant-baseline', 'central') var centroidText = r.data.arc.centroid({
.append("textPath") startAngle: r.startAngle,
.attr("textLength", function (d, i) { endAngle: r.startAngle
return 0; });
}) var lableObj = r.data.object;
.attr("startOffset", '5') gText.append('text')
.attr("dy", '-3em') .attr('font-size', ((2 * width) / 100))
.text(lableObj.value + '%'); .text(lableObj.label)
} .style('fill', lableObj.lcolor)
if (i === 0) { .attr('transform', "translate(" + (10) + "," + (0 + ") rotate(" + (180) + ")"))
var centroidText = r.data.arc.centroid({ .attr('dominant-baseline', 'central');
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(" + (6) + "," + (0 + ") rotate(" + (180) + ")"))
.attr('dominant-baseline', 'central');
}
});
});
var drag_handler = d3.drag() var drag_handler = d3.drag()
.on("start", drag_start) .on("start", drag_start)
@ -333,7 +335,7 @@ export default {
return d.name; return d.name;
}) })
.attr('x', 20) .attr('x', 20)
.attr('y', 15); .attr('y', 8);
node.append('title').text(function (d) { return d.name; }); node.append('title').text(function (d) { return d.name; });
@ -382,6 +384,7 @@ export default {
.attr('y2', function (d) { return d.target.y; }); .attr('y2', function (d) { return d.target.y; });
node node
.attr("id", function(d, i) { return "g" + (i); })
.attr("transform", function(d, i) { .attr("transform", function(d, i) {
d.x = d.x - 50 d.x = d.x - 50
d.y = d.y - 50 d.y = d.y - 50
@ -482,7 +485,7 @@ svg {
} }
.links line { .links line {
stroke: #999; stroke: #D3D3D3;
stroke-opacity: 0.6; stroke-opacity: 0.6;
} }

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

@ -617,7 +617,7 @@ body {
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
margin-top: -4px !important; margin-top: -4px !important;
overflow-x: hidden !important; overflow: hidden !important;
} }
.modal-backdrop { .modal-backdrop {

Write Preview
Loading…
Cancel
Save