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

new

Browse Source
master
Angelos Chatzimparmpas 4 years ago
parent f8d144c060
commit 44aabbbf6e
4 changed files with 129 additions and 50 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-38.pyc
  2. 166
      frontend/src/components/FeatureSpaceDetail.vue
  3. 11
      frontend/src/components/FeatureSpaceOverview.vue
  4. 2
      run.py

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

Binary file not shown.

166
frontend/src/components/FeatureSpaceDetail.vue
Unescape View File

@ -1,5 +1,6 @@
<template>
<div class="column">
<svg id="chartID" class="chart"></svg>
<div id="FeatureGraph" style="border-style: solid; border-width: 2px; border-color: yellow; min-height: 819px; max-height: 819px; min-width: 819px"></div>
<div id="toolbar" style="min-height: 67px; max-height: 67px; margin-top: 25px">
<div class="panel panel-default" data-placement="center">
@ -7,17 +8,19 @@
<table class="table table-borderless centerTable" >
<tbody>
<tr>
<div style="border: 1px solid black; height:70px; margin-top:19px">
<td scope="row"><button class="btn btn-primary active" id="initButton" v-on:click="setLayerExplore" style="margin-left: -1px !important" ><font-awesome-icon icon="wrench" style="margin-right: 5px"/>Transformation</button></td>
<td><button class="btn btn-primary" v-on:click="setLayerCompare" style="margin-left: -1.4px"><font-awesome-icon icon="balance-scale" style="margin-right: 5px" />Generation</button></td>
</div>
<td>
<div id="buildLegend" style="min-width: 160px;">
<div id="legend"></div>
<div id="legendText"></div>
<div id="legendText" style="border: 1px solid black; min-height: 70px; max-height: 70px; min-width:181px; margin-top: 16px; margin-left:-12px;"></div>
</div>
</td>
<td>
<div class="row align-items-center">
<div class="col-lg-4"><p>Collinear (>)</p></div>
<div class="row align-items-center " style="height: 69px; margin-top:7px; min-width: 160px; border: 1px solid black">
<div class="col-lg-4"><p>Fs COR (>)</p></div>
<div class="col-lg-7"><div id="thres"></div></div>
</div>
</td>
@ -82,7 +85,7 @@ export default {
.attr('width', 200)
.attr('height', 80)
.append('g')
.attr('transform', 'translate(30,30)');
.attr('transform', 'translate(18,20)');
gStepPos.call(sliderStepPos);
@ -485,6 +488,8 @@ export default {
var svg = d3.select("#FeatureGraph");
svg.selectAll("*").remove();
var svg = d3.select('#chartID')
svg.selectAll("*").remove()
var width = 819;
var height = 819;
@ -674,17 +679,45 @@ export default {
node.append('title').text(function (d) { return d.name; });
EventBus.$emit('brushLink', -1)
});
var paramGroups = [
{name: 'chargeStrength', values: [-30, -80]},
{name: 'linkDistance', values: [30, -80]},
{name: 'linkStrength', values: [0, 1]},
var chartWidth = 350;
var chartHeight = 65;
var margin = {left: 25, right: 25, top: 10, bottom: 40};
var chartSvg = d3.select('svg.chart')
.attr('width', chartWidth)
.attr('height', chartHeight)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
chartWidth = chartWidth - margin.left - margin.right;
chartHeight = chartHeight - margin.top - margin.bottom;
var x = d3.scaleLinear()
.domain([75, 100])
.range([0, chartWidth]);
chartSvg.append('g')
.attr('transform', 'translate(0,' + chartHeight + ')')
.call(d3.axisBottom(x).ticks(7))
.append("text")
.attr("fill", "#000")
.attr('transform', 'translate(' + chartWidth/2 + ',' + 0 + ')')
.attr("y", chartHeight + 10)
.attr("dy", "0.71em")
.attr("text-anchor", "middle")
.text("Graph readability (%)");
var readabilityCircles = chartSvg.append('g').selectAll('circle');
// 48 parameters
var paramGroups = [
{name: 'chargeStrength', values: [-80]},
{name: 'linkDistance', values: [-80]},
{name: 'linkStrength', values: [0.25, 0.5]},
{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')
@ -693,6 +726,7 @@ export default {
.text(function (d) { return d; });
dispatch.on('layoutend', function (params, i) {
if (!bestParams || params.graphReadability > bestParams.graphReadability) {
bestParams = params;
selectedParams = bestParams;
@ -701,7 +735,31 @@ export default {
.data(d3.map(bestParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; }))
.text(function (d) { return d + ' = ' + bestParams[d]; });
}
// Plot the number line.
readabilityCircles = readabilityCircles
.data(readabilityCircles.data().concat(params))
.enter().append('circle')
.attr('cx', function (d) { return x(d.graphReadability*100); })
.attr('cy', 5)
.attr('r', 4)
.on('click', function (d) {
selectedParams = d;
readabilityCircles.classed('selected', false);
d3.select(this).classed('selected', true).raise();
bestSoFar
.data(d3.map(selectedParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; }))
.text(function (d) { return d + ' = ' + selectedParams[d]; });
drawGraph();
})
.merge(readabilityCircles)
.classed('selected', function (d) { return d === selectedParams; });
readabilityCircles.filter(function (d) { return d === selectedParams; })
.raise();
drawGraph();
});
var i = 0;
@ -724,9 +782,9 @@ export default {
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.graphReadability = greadability.greadability(graph.nodes, graph.links); // crossing > angularResolDev > angularResolMin > Angle
p.graphReadability = (p.graphReadability.crossing * 1 + p.graphReadability.crossingAngle * 0.1 +
p.graphReadability.angularResolutionMin * 0.4 + p.graphReadability.angularResolutionDev * 0.75) / 2.25
p.positions = graph.nodes.map(function (n) { return {x: n.x, y: n.y}; });
@ -963,8 +1021,6 @@ export default {
zoom_handler(svg);
drawGraph();
for (let i = 0; i < listofNodes.length; i++) {
var numb = graph.nodes[i]['group'].match(/\d/g)
numb = parseInt(numb.join(""))
@ -1001,11 +1057,10 @@ export default {
d.fy = null;
}
stepper.stop();
if (legendCall) {
var svgLegend = d3.select("#legend").append("svg")
.attr("width", 160)
.attr("width", 170)
.attr("height", 90)
.attr("id", "legendNode")
@ -1133,61 +1188,64 @@ export default {
})
});
var textLine = d3.select('#legendText').append("svg").attr('width', 160).attr('height', 90)
var textLine = d3.select('#legendText').append("svg").attr('width', 170).attr('height', 90)
var marginBorder = 18
var marginBorderX = 10
textLine.append('line')
.style("stroke", "black")
.style("stroke-width", 3)
.attr("x1", 35)
.attr("y1", 50)
.attr("x2", 74)
.attr("y2", 50)
.attr("x1", 35 + marginBorderX)
.attr("y1", 50 - marginBorder)
.attr("x2", 74 + marginBorderX)
.attr("y2", 50 - marginBorder)
textLine.append("text")
.attr("dx", "75")
.attr("dy", "55")
.attr("dx", 75 + marginBorderX)
.attr("dy", 55 - marginBorder)
.text("VIF")
textLine.append('line')
.style("stroke", "black")
.style("stroke-width", 3)
.attr("x1", 42)
.attr("y1", 31)
.attr("x2", 53)
.attr("y2", 31)
.attr("x1", 42 + marginBorderX)
.attr("y1", 31 - marginBorder)
.attr("x2", 53 + marginBorderX)
.attr("y2", 31 - marginBorder)
textLine.append("text")
.attr("dx", "54")
.attr("dy", "36")
.attr("dx", 54 + marginBorderX)
.attr("dy", 36 - marginBorder)
.text("Per class COR")
textLine.append('line')
.style("stroke", "black")
.style("stroke-width", 3)
.attr("x1", 32)
.attr("y1", 67)
.attr("x2", 74)
.attr("y2", 67)
.attr("x1", 32 + marginBorderX)
.attr("y1", 67 - marginBorder)
.attr("x2", 74 + marginBorderX)
.attr("y2", 67 - marginBorder)
textLine.append("text")
.attr("dx", "75")
.attr("dy", "72")
.attr("dx", 75 + marginBorderX)
.attr("dy", 72 - marginBorder)
.text("Target COR")
textLine.append('line')
.style("stroke", "#6baed6")
.style("stroke-width", 3)
.attr("x1", 18)
.attr("y1", 50)
.attr("x2", 26)
.attr("y2", 50)
.attr("x1", 18 + marginBorderX)
.attr("y1", 50 - marginBorder)
.attr("x2", 26 + marginBorderX)
.attr("y2", 50 - marginBorder)
textLine.append("text")
.attr("dx", "0")
.attr("dy", "55")
.attr("dx", 0 + marginBorderX)
.attr("dy", 55 - marginBorder)
.style("fill", "#6baed6")
.text("MI")
}
stepper.stop();
}
});
@ -1283,6 +1341,8 @@ export default {
reset () {
var svg = d3.select("#FeatureGraph");
svg.selectAll("*").remove();
var svg = d3.select('#chartID')
svg.selectAll("*").remove()
},
},
mounted () {
@ -1387,4 +1447,24 @@ table td {
padding-left: 6px !important;
}
#chartID {
position: absolute;
transform: translate(-390px, 840px);
}
.chart circle {
fill: black;
fill-opacity: 0.05;
stroke: black;
stroke-opacity: 0.05;
cursor: pointer;
}
.chart circle.selected {
fill: #0062cc;
fill-opacity: 1;
stroke: #0062cc;
stroke-opacity: 1;
}
</style>

11
frontend/src/components/FeatureSpaceOverview.vue
Unescape View File

@ -38,14 +38,14 @@
<div class="button" data-key="191" title="Toggle Root">/</div>
</div>
</div>
<div class="tool">
<div id="help">Labels</div>
<div id="legendTarget" style="min-width: 130px; min-height: 50px; margin-top:-10px"></div>
</div>
<div class="tool">
<div class="tlabel" style="text-align:left" title="Change Root">&nbsp;Navigate</div>
<div id="selection" class="tlabel"></div>
</div>
<div class="tool">
<div id="help">Labels</div>
<div id="legendTarget" style="min-width: 492.7px; min-height: 50px; margin-top:-10px"></div>
</div>
</div>
<div id="contextmenu">
@ -561,8 +561,7 @@ export default {
function fullpath(d, idx) {
idx = idx || 0;
curPath.push(d);
return (d.parent ? fullpath(d.parent, curPath.length) : '') +
'/<span class="nodepath'+(d.name === root.name ? ' highlight' : '')+
return '/<span class="nodepath'+
'" data-sel="'+ idx +'" title="Set Root to '+ d.name +'">' +
d.name + '</span>';
}

2
run.py
Unescape View File

@ -436,7 +436,7 @@ def executeModel(exeCall, flagEx):
scores = []
XData = XDataStored.copy()
# Bayesian Optimization for 150 iterations
if (keyFirstTime):
create_global_function()
params = {"C": (0.0001, 10000), "gamma": (0.0001, 10000)}

Write Preview
Loading…
Cancel
Save