|
|
|
@ -1,6 +1,5 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="column"> |
|
|
|
|
<svg class="chart"></svg> |
|
|
|
|
<div id="FeatureGraph2"></div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
@ -51,13 +50,12 @@ export default { |
|
|
|
|
}, |
|
|
|
|
graphVizualization () { |
|
|
|
|
|
|
|
|
|
var svg = d3.select("#FeatureGraph2"); |
|
|
|
|
svg.selectAll("*").remove(); |
|
|
|
|
|
|
|
|
|
var width = 600; |
|
|
|
|
var height = 500; |
|
|
|
|
|
|
|
|
|
var chartWidth = 600; |
|
|
|
|
var chartHeight = 60; |
|
|
|
|
var margin = {left: 10, right: 10, top: 10, bottom: 40}; |
|
|
|
|
|
|
|
|
|
var numTicks = 200; |
|
|
|
|
|
|
|
|
|
var selectedParams; |
|
|
|
@ -65,36 +63,10 @@ export default { |
|
|
|
|
|
|
|
|
|
var dispatch = d3.dispatch('layoutend'); |
|
|
|
|
|
|
|
|
|
var svg = d3.select("#FeatureGraph2").append("svg") |
|
|
|
|
svg = d3.select("#FeatureGraph2").append("svg") |
|
|
|
|
.attr("width", width) |
|
|
|
|
.attr("height", height); |
|
|
|
|
|
|
|
|
|
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([0, 1]) |
|
|
|
|
.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("Average readability score"); |
|
|
|
|
|
|
|
|
|
var readabilityCircles = chartSvg.append('g').selectAll('circle'); |
|
|
|
|
|
|
|
|
|
var graph = this.jsonData |
|
|
|
|
|
|
|
|
|
var link = svg.append('g') |
|
|
|
@ -110,21 +82,6 @@ export default { |
|
|
|
|
.data(graph.nodes) |
|
|
|
|
.enter().append('g') |
|
|
|
|
|
|
|
|
|
var circles = node.append("circle") |
|
|
|
|
.attr("r", 5); |
|
|
|
|
|
|
|
|
|
console.log(node) |
|
|
|
|
|
|
|
|
|
var labels = node.append("text") |
|
|
|
|
.text(function(d) { |
|
|
|
|
console.log(d) |
|
|
|
|
return d.name; |
|
|
|
|
}) |
|
|
|
|
.attr('x', 6) |
|
|
|
|
.attr('y', 3); |
|
|
|
|
|
|
|
|
|
node.append('title').text(function (d) { return d.name; }); |
|
|
|
|
|
|
|
|
|
var paramGroups = [ |
|
|
|
|
{name: 'chargeStrength', values: [-30, -80]}, |
|
|
|
|
{name: 'linkDistance', values: [30, -80]}, |
|
|
|
@ -152,33 +109,6 @@ export default { |
|
|
|
|
.text(function (d) { return d + ' = ' + bestParams[d]; }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
d3.select('.progress').text('Testing ' + (i + 1) + ' of ' + paramList.length + ' parameter settings'); |
|
|
|
|
|
|
|
|
|
// Plot the number line. |
|
|
|
|
readabilityCircles = readabilityCircles |
|
|
|
|
.data(readabilityCircles.data().concat(params)) |
|
|
|
|
.enter().append('circle') |
|
|
|
|
.attr('cx', function (d) { return x(d.graphReadability); }) |
|
|
|
|
.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; |
|
|
|
@ -211,10 +141,77 @@ export default { |
|
|
|
|
|
|
|
|
|
++i; |
|
|
|
|
if (i >= paramList.length) { |
|
|
|
|
|
|
|
|
|
var circles = node.append("circle") |
|
|
|
|
.attr("r", 5); |
|
|
|
|
|
|
|
|
|
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', 6) |
|
|
|
|
.attr('y', 3); |
|
|
|
|
|
|
|
|
|
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) { |
|
|
|
|
console.log(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("transform", function(d) { |
|
|
|
|
return "translate(" + d.x + "," + d.y + ")"; |
|
|
|
|
}) |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
function drawGraph () { |
|
|
|
|
graph.nodes.forEach(function (n, i) { |
|
|
|
|
n.x = selectedParams.positions[i].x; |
|
|
|
@ -244,16 +241,7 @@ export default { |
|
|
|
|
n.y = n.y + height/2 - yMid; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
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("transform", function(d) { |
|
|
|
|
return "translate(" + d.x + "," + d.y + ")"; |
|
|
|
|
}) |
|
|
|
|
tickActions(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function generateParams (paramGroups, paramList, currParam) { |
|
|
|
@ -295,7 +283,7 @@ export default { |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
reset () { |
|
|
|
|
var svg = d3.select("#FeatureSpaceVisual"); |
|
|
|
|
var svg = d3.select("#FeatureGraph2"); |
|
|
|
|
svg.selectAll("*").remove(); |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
@ -328,21 +316,6 @@ svg { |
|
|
|
|
stroke-width: 1px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.chart circle { |
|
|
|
|
fill: #aaa; |
|
|
|
|
fill-opacity: 0.1; |
|
|
|
|
stroke: #aaa; |
|
|
|
|
stroke-opacity: 0.4; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.chart circle.selected { |
|
|
|
|
fill: #d30000; |
|
|
|
|
fill-opacity: 0.6; |
|
|
|
|
stroke: #d30000; |
|
|
|
|
stroke-opacity: 0.8; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.column { |
|
|
|
|
float: left; |
|
|
|
|
margin: 0 10px; |
|
|
|
|