parent
877575a375
commit
ba8ddb2831
Binary file not shown.
@ -1 +1 @@ |
||||
{"duration": 4.569021940231323, "input_args": {}} |
||||
{"duration": 7.80327582359314, "input_args": {}} |
||||
@ -0,0 +1,99 @@ |
||||
<template> |
||||
<div> |
||||
<div class="row align-items-center"> |
||||
<div class="col-lg-2"><p>Positive</p></div> |
||||
<div class="col-lg-8"><div id="slider-stepPos"></div></div> |
||||
<div class="col-lg-2"><p id="value-stepPos"></p></div> |
||||
</div> |
||||
<div class="row align-items-center"> |
||||
<div class="col-lg-2"><p>Negative</p></div> |
||||
<div class="col-lg-8"><div id="slider-stepNeg"></div></div> |
||||
<div class="col-lg-2"><p id="value-stepNeg"></p></div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { EventBus } from '../main.js' |
||||
import { sliderBottom } from 'd3-simple-slider' |
||||
import * as d3Base from 'd3' |
||||
|
||||
// attach all d3 plugins to the d3 library |
||||
const d3 = Object.assign(d3Base, { sliderBottom }) |
||||
|
||||
export default { |
||||
name: 'Slider', |
||||
data () { |
||||
return { |
||||
} |
||||
}, |
||||
methods: { |
||||
InitSliders () { |
||||
var dataCorrect = [55.0, 60.0, 65.0, 70.0, 75.0, 80.0, 85.0, 90.0, 95.0]; |
||||
var dataWrong = [5.0, 10.0, 15.0, 20.0, 25.0, 30.0, 35.0, 40.0, 45.0]; |
||||
|
||||
var sliderStepPos = d3 |
||||
.sliderBottom() |
||||
.min(d3.min(dataCorrect)) |
||||
.max(d3.max(dataCorrect)) |
||||
.width(300) |
||||
.tickFormat(d3.format(".0f")) |
||||
.ticks(9) |
||||
.step(5) |
||||
.default(75.0) |
||||
.on('onchange', val => { |
||||
d3.select('p#value-stepPos').text(d3.format(".0f")(val)); |
||||
EventBus.$emit('SendtheChangeinRangePos', d3.format(".0f")(val)) |
||||
}); |
||||
|
||||
var gStepPos = d3 |
||||
.select('div#slider-stepPos') |
||||
.append('svg') |
||||
.attr('width', 500) |
||||
.attr('height', 100) |
||||
.append('g') |
||||
.attr('transform', 'translate(30,30)'); |
||||
|
||||
gStepPos.call(sliderStepPos); |
||||
|
||||
d3.select('p#value-stepPos').text(d3.format(".0f")(sliderStepPos.value())); |
||||
|
||||
var sliderStepNeg = d3 |
||||
.sliderBottom() |
||||
.min(d3.min(dataWrong)) |
||||
.max(d3.max(dataWrong)) |
||||
.width(300) |
||||
.tickFormat(d3.format(".0f")) |
||||
.ticks(9) |
||||
.step(5) |
||||
.default(25.0) |
||||
.on('onchange', val => { |
||||
d3.select('p#value-stepNeg').text(d3.format(".0f")(val)); |
||||
EventBus.$emit('SendtheChangeinRangeNeg', d3.format(".0f")(val)) |
||||
}); |
||||
|
||||
var gStepNeg = d3 |
||||
.select('div#slider-stepNeg') |
||||
.append('svg') |
||||
.attr('width', 500) |
||||
.attr('height', 100) |
||||
.append('g') |
||||
.attr('transform', 'translate(30,30)'); |
||||
|
||||
gStepNeg.call(sliderStepNeg); |
||||
|
||||
d3.select('p#value-stepNeg').text(d3.format(".0f")(sliderStepNeg.value())); |
||||
}, |
||||
reset () { |
||||
EventBus.$emit('reset') |
||||
EventBus.$emit('alternateFlagLock') |
||||
}, |
||||
initialize () { |
||||
EventBus.$emit('ConfirmDataSet') |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.InitSliders() |
||||
}, |
||||
} |
||||
</script> |
||||
@ -0,0 +1,379 @@ |
||||
(function (global, factory) { |
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : |
||||
typeof define === 'function' && define.amd ? define(['exports'], factory) : |
||||
(factory((global.greadability = global.greadability || {}))); |
||||
}(this, (function (exports) { 'use strict'; |
||||
|
||||
var greadability = function (nodes, links, id) { |
||||
var i, |
||||
j, |
||||
n = nodes.length, |
||||
m, |
||||
degree = new Array(nodes.length), |
||||
cMax, |
||||
idealAngle = 70, |
||||
dMax; |
||||
|
||||
/* |
||||
* Tracks the global graph readability metrics. |
||||
*/ |
||||
var graphStats = { |
||||
crossing: 0, // Normalized link crossings
|
||||
crossingAngle: 0, // Normalized average dev from 70 deg
|
||||
angularResolutionMin: 0, // Normalized avg dev from ideal min angle
|
||||
angularResolutionDev: 0, // Normalized avg dev from each link
|
||||
}; |
||||
|
||||
var getSumOfArray = function (numArray) { |
||||
var i = 0, n = numArray.length, sum = 0; |
||||
for (; i < n; ++i) sum += numArray[i]; |
||||
return sum; |
||||
}; |
||||
|
||||
var initialize = function () { |
||||
var i, j, link; |
||||
var nodeById = {}; |
||||
// Filter out self loops
|
||||
links = links.filter(function (l) { |
||||
return l.source !== l.target; |
||||
}); |
||||
|
||||
m = links.length; |
||||
|
||||
if (!id) { |
||||
id = function (d) { return d.index; }; |
||||
} |
||||
|
||||
for (i = 0; i < n; ++i) { |
||||
nodes[i].index = i; |
||||
degree[i] = []; |
||||
nodeById[id(nodes[i], i, nodeById)] = nodes[i]; |
||||
} |
||||
|
||||
// Make sure source and target are nodes and not indices.
|
||||
for (i = 0; i < m; ++i) { |
||||
link = links[i]; |
||||
if (typeof link.source !== "object") link.source = nodeById[link.source]; |
||||
if (typeof link.target !== "object") link.target = nodeById[link.target]; |
||||
} |
||||
|
||||
// Filter out duplicate links
|
||||
var filteredLinks = []; |
||||
links.forEach(function (l) { |
||||
var s = l.source, t = l.target; |
||||
if (s.index > t.index) { |
||||
filteredLinks.push({source: t, target: s}); |
||||
} else { |
||||
filteredLinks.push({source: s, target: t}); |
||||
} |
||||
}); |
||||
links = filteredLinks; |
||||
links.sort(function (a, b) { |
||||
if (a.source.index < b.source.index) return -1; |
||||
if (a.source.index > b.source.index) return 1; |
||||
if (a.target.index < b.target.index) return -1; |
||||
if (a.target.index > b.target.index) return 1; |
||||
return 0; |
||||
}); |
||||
i = 1; |
||||
while (i < links.length) { |
||||
if (links[i-1].source.index === links[i].source.index && |
||||
links[i-1].target.index === links[i].target.index) { |
||||
links.splice(i, 1); |
||||
} |
||||
else ++i; |
||||
} |
||||
|
||||
// Update length, if a duplicate was deleted.
|
||||
m = links.length; |
||||
|
||||
// Calculate degree.
|
||||
for (i = 0; i < m; ++i) { |
||||
link = links[i]; |
||||
link.index = i; |
||||
|
||||
degree[link.source.index].push(link); |
||||
degree[link.target.index].push(link); |
||||
}; |
||||
} |
||||
|
||||
// Assume node.x and node.y are the coordinates
|
||||
|
||||
function direction (pi, pj, pk) { |
||||
var p1 = [pk[0] - pi[0], pk[1] - pi[1]]; |
||||
var p2 = [pj[0] - pi[0], pj[1] - pi[1]]; |
||||
return p1[0] * p2[1] - p2[0] * p1[1]; |
||||
} |
||||
|
||||
// Is point k on the line segment formed by points i and j?
|
||||
// Inclusive, so if pk == pi or pk == pj then return true.
|
||||
function onSegment (pi, pj, pk) { |
||||
return Math.min(pi[0], pj[0]) <= pk[0] && |
||||
pk[0] <= Math.max(pi[0], pj[0]) && |
||||
Math.min(pi[1], pj[1]) <= pk[1] && |
||||
pk[1] <= Math.max(pi[1], pj[1]); |
||||
} |
||||
|
||||
function linesCross (line1, line2) { |
||||
var d1, d2, d3, d4; |
||||
|
||||
// CLRS 2nd ed. pg. 937
|
||||
d1 = direction(line2[0], line2[1], line1[0]); |
||||
d2 = direction(line2[0], line2[1], line1[1]); |
||||
d3 = direction(line1[0], line1[1], line2[0]); |
||||
d4 = direction(line1[0], line1[1], line2[1]); |
||||
|
||||
if (((d1 > 0 && d2 < 0) || (d1 < 0 && d2 > 0)) && |
||||
((d3 > 0 && d4 < 0) || (d3 < 0 && d4 > 0))) { |
||||
return true; |
||||
} else if (d1 === 0 && onSegment(line2[0], line2[1], line1[0])) { |
||||
return true; |
||||
} else if (d2 === 0 && onSegment(line2[0], line2[1], line1[1])) { |
||||
return true; |
||||
} else if (d3 === 0 && onSegment(line1[0], line1[1], line2[0])) { |
||||
return true; |
||||
} else if (d4 === 0 && onSegment(line1[0], line1[1], line2[1])) { |
||||
return true; |
||||
} |
||||
|
||||
return false; |
||||
} |
||||
|
||||
function linksCross (link1, link2) { |
||||
// Self loops are not intersections
|
||||
if (link1.index === link2.index || |
||||
link1.source === link1.target || |
||||
link2.source === link2.target) { |
||||
return false; |
||||
} |
||||
|
||||
// Links cannot intersect if they share a node
|
||||
if (link1.source === link2.source || |
||||
link1.source === link2.target || |
||||
link1.target === link2.source || |
||||
link1.target === link2.target) { |
||||
return false; |
||||
} |
||||
|
||||
var line1 = [ |
||||
[link1.source.x, link1.source.y], |
||||
[link1.target.x, link1.target.y] |
||||
]; |
||||
|
||||
var line2 = [ |
||||
[link2.source.x, link2.source.y], |
||||
[link2.target.x, link2.target.y] |
||||
]; |
||||
|
||||
return linesCross(line1, line2); |
||||
} |
||||
|
||||
function linkCrossings () { |
||||
var i, j, c = 0, d = 0, link1, link2, line1, line2;; |
||||
|
||||
// Sum the upper diagonal of the edge crossing matrix.
|
||||
for (i = 0; i < m; ++i) { |
||||
for (j = i + 1; j < m; ++j) { |
||||
link1 = links[i], link2 = links[j]; |
||||
|
||||
// Check if link i and link j intersect
|
||||
if (linksCross(link1, link2)) { |
||||
line1 = [ |
||||
[link1.source.x, link1.source.y], |
||||
[link1.target.x, link1.target.y] |
||||
]; |
||||
line2 = [ |
||||
[link2.source.x, link2.source.y], |
||||
[link2.target.x, link2.target.y] |
||||
]; |
||||
++c; |
||||
d += Math.abs(idealAngle - acuteLinesAngle(line1, line2)); |
||||
} |
||||
} |
||||
} |
||||
|
||||
return {c: 2*c, d: 2*d}; |
||||
} |
||||
|
||||
function linesegmentsAngle (line1, line2) { |
||||
// Finds the (counterclockwise) angle from line segement line1 to
|
||||
// line segment line2. Assumes the lines share one end point.
|
||||
// If both endpoints are the same, or if both lines have zero
|
||||
// length, then return 0 angle.
|
||||
// Param order matters:
|
||||
// linesegmentsAngle(line1, line2) != linesegmentsAngle(line2, line1)
|
||||
var temp, len, angle1, angle2, sLine1, sLine2; |
||||
|
||||
// Re-orient so that line1[0] and line2[0] are the same.
|
||||
if (line1[0][0] === line2[1][0] && line1[0][1] === line2[1][1]) { |
||||
temp = line2[1]; |
||||
line2[1] = line2[0]; |
||||
line2[0] = temp; |
||||
} else if (line1[1][0] === line2[0][0] && line1[1][1] === line2[0][1]) { |
||||
temp = line1[1]; |
||||
line1[1] = line1[0]; |
||||
line1[0] = temp; |
||||
} else if (line1[1][0] === line2[1][0] && line1[1][1] === line2[1][1]) { |
||||
temp = line1[1]; |
||||
line1[1] = line1[0]; |
||||
line1[0] = temp; |
||||
temp = line2[1]; |
||||
line2[1] = line2[0]; |
||||
line2[0] = temp; |
||||
} |
||||
|
||||
// Shift the line so that the first point is at (0,0).
|
||||
sLine1 = [ |
||||
[line1[0][0] - line1[0][0], line1[0][1] - line1[0][1]], |
||||
[line1[1][0] - line1[0][0], line1[1][1] - line1[0][1]] |
||||
]; |
||||
// Normalize the line length.
|
||||
len = Math.hypot(sLine1[1][0], sLine1[1][1]); |
||||
if (len === 0) return 0; |
||||
sLine1[1][0] /= len; |
||||
sLine1[1][1] /= len; |
||||
// If y < 0, angle = acos(x), otherwise angle = 360 - acos(x)
|
||||
angle1 = Math.acos(sLine1[1][0]) * 180 / Math.PI; |
||||
if (sLine1[1][1] < 0) angle1 = 360 - angle1; |
||||
|
||||
// Shift the line so that the first point is at (0,0).
|
||||
sLine2 = [ |
||||
[line2[0][0] - line2[0][0], line2[0][1] - line2[0][1]], |
||||
[line2[1][0] - line2[0][0], line2[1][1] - line2[0][1]] |
||||
]; |
||||
// Normalize the line length.
|
||||
len = Math.hypot(sLine2[1][0], sLine2[1][1]); |
||||
if (len === 0) return 0; |
||||
sLine2[1][0] /= len; |
||||
sLine2[1][1] /= len; |
||||
// If y < 0, angle = acos(x), otherwise angle = 360 - acos(x)
|
||||
angle2 = Math.acos(sLine2[1][0]) * 180 / Math.PI; |
||||
if (sLine2[1][1] < 0) angle2 = 360 - angle2; |
||||
|
||||
return angle1 <= angle2 ? angle2 - angle1 : 360 - (angle1 - angle2); |
||||
} |
||||
|
||||
function acuteLinesAngle (line1, line2) { |
||||
// Acute angle of intersection, in degrees. Assumes these lines
|
||||
// intersect.
|
||||
var slope1 = (line1[1][1] - line1[0][1]) / (line1[1][0] - line1[0][0]); |
||||
var slope2 = (line2[1][1] - line2[0][1]) / (line2[1][0] - line2[0][0]); |
||||
|
||||
// If these lines are two links incident on the same node, need
|
||||
// to check if the angle is 0 or 180.
|
||||
if (slope1 === slope2) { |
||||
// If line2 is not on line1 and line1 is not on line2, then
|
||||
// the lines share only one point and the angle must be 180.
|
||||
if (!(onSegment(line1[0], line1[1], line2[0]) && onSegment(line1[0], line1[1], line2[1])) || |
||||
!(onSegment(line2[0], line2[1], line1[0]) && onSegment(line2[0], line2[1], line1[1]))) |
||||
return 180; |
||||
else return 0; |
||||
} |
||||
|
||||
var angle = Math.abs(Math.atan(slope1) - Math.atan(slope2)); |
||||
|
||||
return (angle > Math.PI / 2 ? Math.PI - angle : angle) * 180 / Math.PI; |
||||
} |
||||
|
||||
function angularRes () { |
||||
var j, |
||||
resMin = 0, |
||||
resDev = 0, |
||||
nonZeroDeg, |
||||
node, |
||||
minAngle, |
||||
idealMinAngle, |
||||
incident, |
||||
line0, |
||||
line1, |
||||
line2, |
||||
incidentLinkAngles, |
||||
nextLink; |
||||
|
||||
nonZeroDeg = degree.filter(function (d) { return d.length >= 1; }).length; |
||||
|
||||
for (j = 0; j < n; ++j) { |
||||
node = nodes[j]; |
||||
line0 = [[node.x, node.y], [node.x+1, node.y]]; |
||||
|
||||
// Links that are incident to this node (already filtered out self loops)
|
||||
incident = degree[j]; |
||||
|
||||
if (incident.length <= 1) continue; |
||||
|
||||
idealMinAngle = 360 / incident.length; |
||||
|
||||
// Sort edges by the angle they make from an imaginary vector
|
||||
// emerging at angle 0 on the unit circle.
|
||||
// Necessary for calculating angles of incident edges correctly
|
||||
incident.sort(function (a, b) { |
||||
line1 = [ |
||||
[a.source.x, a.source.y], |
||||
[a.target.x, a.target.y] |
||||
]; |
||||
line2 = [ |
||||
[b.source.x, b.source.y], |
||||
[b.target.x, b.target.y] |
||||
]; |
||||
var angleA = linesegmentsAngle(line0, line1); |
||||
var angleB = linesegmentsAngle(line0, line2); |
||||
return angleA < angleB ? -1 : angleA > angleB ? 1 : 0; |
||||
}); |
||||
|
||||
incidentLinkAngles = incident.map(function (l, i) { |
||||
nextLink = incident[(i + 1) % incident.length]; |
||||
line1 = [ |
||||
[l.source.x, l.source.y], |
||||
[l.target.x, l.target.y] |
||||
]; |
||||
line2 = [ |
||||
[nextLink.source.x, nextLink.source.y], |
||||
[nextLink.target.x, nextLink.target.y] |
||||
]; |
||||
return linesegmentsAngle(line1, line2); |
||||
}); |
||||
|
||||
minAngle = Math.min.apply(null, incidentLinkAngles); |
||||
|
||||
resMin += Math.abs(idealMinAngle - minAngle) / idealMinAngle; |
||||
|
||||
resDev += getSumOfArray(incidentLinkAngles.map(function (angle) { |
||||
return Math.abs(idealMinAngle - angle) / idealMinAngle; |
||||
})) / (2 * incident.length - 2); |
||||
} |
||||
|
||||
// Divide by number of nodes with degree != 0
|
||||
resMin = resMin / nonZeroDeg; |
||||
|
||||
// Divide by number of nodes with degree != 0
|
||||
resDev = resDev / nonZeroDeg; |
||||
|
||||
return {resMin: resMin, resDev: resDev}; |
||||
} |
||||
|
||||
initialize(); |
||||
|
||||
cMax = (m * (m - 1) / 2) - getSumOfArray(degree.map(function (d) { return d.length * (d.length - 1); })) / 2; |
||||
|
||||
var crossInfo = linkCrossings(); |
||||
|
||||
dMax = crossInfo.c * idealAngle; |
||||
|
||||
graphStats.crossing = 1 - (cMax > 0 ? crossInfo.c / cMax : 0); |
||||
|
||||
graphStats.crossingAngle = 1 - (dMax > 0 ? crossInfo.d / dMax : 0); |
||||
|
||||
var angularResInfo = angularRes(); |
||||
|
||||
graphStats.angularResolutionMin = 1 - angularResInfo.resMin; |
||||
|
||||
graphStats.angularResolutionDev = 1 - angularResInfo.resDev; |
||||
|
||||
return graphStats; |
||||
}; |
||||
|
||||
exports.greadability = greadability; |
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true }); |
||||
|
||||
}))); |
||||
Loading…
Reference in new issue