2215 lines
65 KiB
JavaScript
2215 lines
65 KiB
JavaScript
|
|
const SMALL$1 = 1e-10;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Returns the intersection area of a bunch of circles (where each circle
|
|||
|
|
* is an object having an x,y and radius property)
|
|||
|
|
* @param {ReadonlyArray<{x: number, y: number, radius: number}>} circles
|
|||
|
|
* @param {undefined | { area?: number, arcArea?: number, polygonArea?: number, arcs?: ReadonlyArray<{ circle: {x: number, y: number, radius: number}, width: number, p1: {x: number, y: number}, p2: {x: number, y: number} }>, innerPoints: ReadonlyArray<{
|
|||
|
|
x: number;
|
|||
|
|
y: number;
|
|||
|
|
parentIndex: [number, number];
|
|||
|
|
}>, intersectionPoints: ReadonlyArray<{
|
|||
|
|
x: number;
|
|||
|
|
y: number;
|
|||
|
|
parentIndex: [number, number];
|
|||
|
|
}> }} stats
|
|||
|
|
* @returns {number}
|
|||
|
|
*/
|
|||
|
|
function intersectionArea(circles, stats) {
|
|||
|
|
// get all the intersection points of the circles
|
|||
|
|
const intersectionPoints = getIntersectionPoints(circles);
|
|||
|
|
|
|||
|
|
// filter out points that aren't included in all the circles
|
|||
|
|
const innerPoints = intersectionPoints.filter((p) => containedInCircles(p, circles));
|
|||
|
|
|
|||
|
|
let arcArea = 0;
|
|||
|
|
let polygonArea = 0;
|
|||
|
|
/** @type {{ circle: {x: number, y: number, radius: number}, width: number, p1: {x: number, y: number}, p2: {x: number, y: number} }[]} */
|
|||
|
|
const arcs = [];
|
|||
|
|
|
|||
|
|
// if we have intersection points that are within all the circles,
|
|||
|
|
// then figure out the area contained by them
|
|||
|
|
if (innerPoints.length > 1) {
|
|||
|
|
// sort the points by angle from the center of the polygon, which lets
|
|||
|
|
// us just iterate over points to get the edges
|
|||
|
|
const center = getCenter(innerPoints);
|
|||
|
|
for (let i = 0; i < innerPoints.length; ++i) {
|
|||
|
|
const p = innerPoints[i];
|
|||
|
|
p.angle = Math.atan2(p.x - center.x, p.y - center.y);
|
|||
|
|
}
|
|||
|
|
innerPoints.sort((a, b) => b.angle - a.angle);
|
|||
|
|
|
|||
|
|
// iterate over all points, get arc between the points
|
|||
|
|
// and update the areas
|
|||
|
|
let p2 = innerPoints[innerPoints.length - 1];
|
|||
|
|
for (let i = 0; i < innerPoints.length; ++i) {
|
|||
|
|
const p1 = innerPoints[i];
|
|||
|
|
|
|||
|
|
// polygon area updates easily ...
|
|||
|
|
polygonArea += (p2.x + p1.x) * (p1.y - p2.y);
|
|||
|
|
|
|||
|
|
// updating the arc area is a little more involved
|
|||
|
|
const midPoint = { x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2 };
|
|||
|
|
/** @types null | { circle: {x: number, y: number, radius: number}, width: number, p1: {x: number, y: number}, p2: {x: number, y: number} } */
|
|||
|
|
let arc = null;
|
|||
|
|
|
|||
|
|
for (let j = 0; j < p1.parentIndex.length; ++j) {
|
|||
|
|
if (p2.parentIndex.includes(p1.parentIndex[j])) {
|
|||
|
|
// figure out the angle halfway between the two points
|
|||
|
|
// on the current circle
|
|||
|
|
const circle = circles[p1.parentIndex[j]];
|
|||
|
|
const a1 = Math.atan2(p1.x - circle.x, p1.y - circle.y);
|
|||
|
|
const a2 = Math.atan2(p2.x - circle.x, p2.y - circle.y);
|
|||
|
|
|
|||
|
|
let angleDiff = a2 - a1;
|
|||
|
|
if (angleDiff < 0) {
|
|||
|
|
angleDiff += 2 * Math.PI;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// and use that angle to figure out the width of the
|
|||
|
|
// arc
|
|||
|
|
const a = a2 - angleDiff / 2;
|
|||
|
|
let width = distance(midPoint, {
|
|||
|
|
x: circle.x + circle.radius * Math.sin(a),
|
|||
|
|
y: circle.y + circle.radius * Math.cos(a),
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// clamp the width to the largest is can actually be
|
|||
|
|
// (sometimes slightly overflows because of FP errors)
|
|||
|
|
if (width > circle.radius * 2) {
|
|||
|
|
width = circle.radius * 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// pick the circle whose arc has the smallest width
|
|||
|
|
if (arc == null || arc.width > width) {
|
|||
|
|
arc = { circle, width, p1, p2, large: width > circle.radius, sweep: true };
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (arc != null) {
|
|||
|
|
arcs.push(arc);
|
|||
|
|
arcArea += circleArea(arc.circle.radius, arc.width);
|
|||
|
|
p2 = p1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// no intersection points, is either disjoint - or is completely
|
|||
|
|
// overlapped. figure out which by examining the smallest circle
|
|||
|
|
let smallest = circles[0];
|
|||
|
|
for (let i = 1; i < circles.length; ++i) {
|
|||
|
|
if (circles[i].radius < smallest.radius) {
|
|||
|
|
smallest = circles[i];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// make sure the smallest circle is completely contained in all
|
|||
|
|
// the other circles
|
|||
|
|
let disjoint = false;
|
|||
|
|
for (let i = 0; i < circles.length; ++i) {
|
|||
|
|
if (distance(circles[i], smallest) > Math.abs(smallest.radius - circles[i].radius)) {
|
|||
|
|
disjoint = true;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (disjoint) {
|
|||
|
|
arcArea = polygonArea = 0;
|
|||
|
|
} else {
|
|||
|
|
arcArea = smallest.radius * smallest.radius * Math.PI;
|
|||
|
|
arcs.push({
|
|||
|
|
circle: smallest,
|
|||
|
|
p1: { x: smallest.x, y: smallest.y + smallest.radius },
|
|||
|
|
p2: { x: smallest.x - SMALL$1, y: smallest.y + smallest.radius },
|
|||
|
|
width: smallest.radius * 2,
|
|||
|
|
large: true,
|
|||
|
|
sweep: true,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
polygonArea /= 2;
|
|||
|
|
|
|||
|
|
if (stats) {
|
|||
|
|
stats.area = arcArea + polygonArea;
|
|||
|
|
stats.arcArea = arcArea;
|
|||
|
|
stats.polygonArea = polygonArea;
|
|||
|
|
stats.arcs = arcs;
|
|||
|
|
stats.innerPoints = innerPoints;
|
|||
|
|
stats.intersectionPoints = intersectionPoints;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return arcArea + polygonArea;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* returns whether a point is contained by all of a list of circles
|
|||
|
|
* @param {{x: number, y: number}} point
|
|||
|
|
* @param {ReadonlyArray<{x: number, y: number, radius: number}>} circles
|
|||
|
|
* @returns {boolean}
|
|||
|
|
*/
|
|||
|
|
function containedInCircles(point, circles) {
|
|||
|
|
return circles.every((circle) => distance(point, circle) < circle.radius + SMALL$1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Gets all intersection points between a bunch of circles
|
|||
|
|
* @param {ReadonlyArray<{x: number, y: number, radius: number}>} circles
|
|||
|
|
* @returns {ReadonlyArray<{x: number, y: number, parentIndex: [number, number]}>}
|
|||
|
|
*/
|
|||
|
|
function getIntersectionPoints(circles) {
|
|||
|
|
/** @type {{x: number, y: number, parentIndex: [number, number]}[]} */
|
|||
|
|
const ret = [];
|
|||
|
|
for (let i = 0; i < circles.length; ++i) {
|
|||
|
|
for (let j = i + 1; j < circles.length; ++j) {
|
|||
|
|
const intersect = circleCircleIntersection(circles[i], circles[j]);
|
|||
|
|
for (const p of intersect) {
|
|||
|
|
p.parentIndex = [i, j];
|
|||
|
|
ret.push(p);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return ret;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Circular segment area calculation. See http://mathworld.wolfram.com/CircularSegment.html
|
|||
|
|
* @param {number} r
|
|||
|
|
* @param {number} width
|
|||
|
|
* @returns {number}
|
|||
|
|
**/
|
|||
|
|
function circleArea(r, width) {
|
|||
|
|
return r * r * Math.acos(1 - width / r) - (r - width) * Math.sqrt(width * (2 * r - width));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* euclidean distance between two points
|
|||
|
|
* @param {{x: number, y: number}} p1
|
|||
|
|
* @param {{x: number, y: number}} p2
|
|||
|
|
* @returns {number}
|
|||
|
|
**/
|
|||
|
|
function distance(p1, p2) {
|
|||
|
|
return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Returns the overlap area of two circles of radius r1 and r2 - that
|
|||
|
|
* have their centers separated by distance d. Simpler faster
|
|||
|
|
* circle intersection for only two circles
|
|||
|
|
* @param {number} r1
|
|||
|
|
* @param {number} r2
|
|||
|
|
* @param {number} d
|
|||
|
|
* @returns {number}
|
|||
|
|
*/
|
|||
|
|
function circleOverlap(r1, r2, d) {
|
|||
|
|
// no overlap
|
|||
|
|
if (d >= r1 + r2) {
|
|||
|
|
return 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// completely overlapped
|
|||
|
|
if (d <= Math.abs(r1 - r2)) {
|
|||
|
|
return Math.PI * Math.min(r1, r2) * Math.min(r1, r2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const w1 = r1 - (d * d - r2 * r2 + r1 * r1) / (2 * d);
|
|||
|
|
const w2 = r2 - (d * d - r1 * r1 + r2 * r2) / (2 * d);
|
|||
|
|
return circleArea(r1, w1) + circleArea(r2, w2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Given two circles (containing a x/y/radius attributes),
|
|||
|
|
* returns the intersecting points if possible
|
|||
|
|
* note: doesn't handle cases where there are infinitely many
|
|||
|
|
* intersection points (circles are equivalent):, or only one intersection point
|
|||
|
|
* @param {{x: number, y: number, radius: number}} p1
|
|||
|
|
* @param {{x: number, y: number, radius: number}} p2
|
|||
|
|
* @returns {ReadonlyArray<{x: number, y: number}>}
|
|||
|
|
**/
|
|||
|
|
function circleCircleIntersection(p1, p2) {
|
|||
|
|
const d = distance(p1, p2);
|
|||
|
|
const r1 = p1.radius;
|
|||
|
|
const r2 = p2.radius;
|
|||
|
|
|
|||
|
|
// if to far away, or self contained - can't be done
|
|||
|
|
if (d >= r1 + r2 || d <= Math.abs(r1 - r2)) {
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const a = (r1 * r1 - r2 * r2 + d * d) / (2 * d);
|
|||
|
|
const h = Math.sqrt(r1 * r1 - a * a);
|
|||
|
|
const x0 = p1.x + (a * (p2.x - p1.x)) / d;
|
|||
|
|
const y0 = p1.y + (a * (p2.y - p1.y)) / d;
|
|||
|
|
const rx = -(p2.y - p1.y) * (h / d);
|
|||
|
|
const ry = -(p2.x - p1.x) * (h / d);
|
|||
|
|
|
|||
|
|
return [
|
|||
|
|
{ x: x0 + rx, y: y0 - ry },
|
|||
|
|
{ x: x0 - rx, y: y0 + ry },
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Returns the center of a bunch of points
|
|||
|
|
* @param {ReadonlyArray<{x: number, y: number}>} points
|
|||
|
|
* @returns {{x: number, y: number}}
|
|||
|
|
*/
|
|||
|
|
function getCenter(points) {
|
|||
|
|
const center = { x: 0, y: 0 };
|
|||
|
|
for (const point of points) {
|
|||
|
|
center.x += point.x;
|
|||
|
|
center.y += point.y;
|
|||
|
|
}
|
|||
|
|
center.x /= points.length;
|
|||
|
|
center.y /= points.length;
|
|||
|
|
return center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** finds the zeros of a function, given two starting points (which must
|
|||
|
|
* have opposite signs */
|
|||
|
|
function bisect(f, a, b, parameters) {
|
|||
|
|
parameters = parameters || {};
|
|||
|
|
const maxIterations = parameters.maxIterations || 100;
|
|||
|
|
const tolerance = parameters.tolerance || 1e-10;
|
|||
|
|
const fA = f(a);
|
|||
|
|
const fB = f(b);
|
|||
|
|
let delta = b - a;
|
|||
|
|
|
|||
|
|
if (fA * fB > 0) {
|
|||
|
|
throw 'Initial bisect points must have opposite signs';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (fA === 0) return a;
|
|||
|
|
if (fB === 0) return b;
|
|||
|
|
|
|||
|
|
for (let i = 0; i < maxIterations; ++i) {
|
|||
|
|
delta /= 2;
|
|||
|
|
const mid = a + delta;
|
|||
|
|
const fMid = f(mid);
|
|||
|
|
|
|||
|
|
if (fMid * fA >= 0) {
|
|||
|
|
a = mid;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (Math.abs(delta) < tolerance || fMid === 0) {
|
|||
|
|
return mid;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return a + delta;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// need some basic operations on vectors, rather than adding a dependency,
|
|||
|
|
// just define here
|
|||
|
|
function zeros(x) {
|
|||
|
|
const r = new Array(x);
|
|||
|
|
for (let i = 0; i < x; ++i) {
|
|||
|
|
r[i] = 0;
|
|||
|
|
}
|
|||
|
|
return r;
|
|||
|
|
}
|
|||
|
|
function zerosM(x, y) {
|
|||
|
|
return zeros(x).map(() => zeros(y));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function dot(a, b) {
|
|||
|
|
let ret = 0;
|
|||
|
|
for (let i = 0; i < a.length; ++i) {
|
|||
|
|
ret += a[i] * b[i];
|
|||
|
|
}
|
|||
|
|
return ret;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function norm2(a) {
|
|||
|
|
return Math.sqrt(dot(a, a));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function scale(ret, value, c) {
|
|||
|
|
for (let i = 0; i < value.length; ++i) {
|
|||
|
|
ret[i] = value[i] * c;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function weightedSum(ret, w1, v1, w2, v2) {
|
|||
|
|
for (let j = 0; j < ret.length; ++j) {
|
|||
|
|
ret[j] = w1 * v1[j] + w2 * v2[j];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** minimizes a function using the downhill simplex method */
|
|||
|
|
function nelderMead(f, x0, parameters) {
|
|||
|
|
parameters = parameters || {};
|
|||
|
|
|
|||
|
|
const maxIterations = parameters.maxIterations || x0.length * 200;
|
|||
|
|
const nonZeroDelta = parameters.nonZeroDelta || 1.05;
|
|||
|
|
const zeroDelta = parameters.zeroDelta || 0.001;
|
|||
|
|
const minErrorDelta = parameters.minErrorDelta || 1e-6;
|
|||
|
|
const minTolerance = parameters.minErrorDelta || 1e-5;
|
|||
|
|
const rho = parameters.rho !== undefined ? parameters.rho : 1;
|
|||
|
|
const chi = parameters.chi !== undefined ? parameters.chi : 2;
|
|||
|
|
const psi = parameters.psi !== undefined ? parameters.psi : -0.5;
|
|||
|
|
const sigma = parameters.sigma !== undefined ? parameters.sigma : 0.5;
|
|||
|
|
let maxDiff;
|
|||
|
|
|
|||
|
|
// initialize simplex.
|
|||
|
|
const N = x0.length;
|
|||
|
|
const simplex = new Array(N + 1);
|
|||
|
|
simplex[0] = x0;
|
|||
|
|
simplex[0].fx = f(x0);
|
|||
|
|
simplex[0].id = 0;
|
|||
|
|
for (let i = 0; i < N; ++i) {
|
|||
|
|
const point = x0.slice();
|
|||
|
|
point[i] = point[i] ? point[i] * nonZeroDelta : zeroDelta;
|
|||
|
|
simplex[i + 1] = point;
|
|||
|
|
simplex[i + 1].fx = f(point);
|
|||
|
|
simplex[i + 1].id = i + 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateSimplex(value) {
|
|||
|
|
for (let i = 0; i < value.length; i++) {
|
|||
|
|
simplex[N][i] = value[i];
|
|||
|
|
}
|
|||
|
|
simplex[N].fx = value.fx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const sortOrder = (a, b) => a.fx - b.fx;
|
|||
|
|
|
|||
|
|
const centroid = x0.slice();
|
|||
|
|
const reflected = x0.slice();
|
|||
|
|
const contracted = x0.slice();
|
|||
|
|
const expanded = x0.slice();
|
|||
|
|
|
|||
|
|
for (let iteration = 0; iteration < maxIterations; ++iteration) {
|
|||
|
|
simplex.sort(sortOrder);
|
|||
|
|
|
|||
|
|
if (parameters.history) {
|
|||
|
|
// copy the simplex (since later iterations will mutate) and
|
|||
|
|
// sort it to have a consistent order between iterations
|
|||
|
|
const sortedSimplex = simplex.map((x) => {
|
|||
|
|
const state = x.slice();
|
|||
|
|
state.fx = x.fx;
|
|||
|
|
state.id = x.id;
|
|||
|
|
return state;
|
|||
|
|
});
|
|||
|
|
sortedSimplex.sort((a, b) => a.id - b.id);
|
|||
|
|
|
|||
|
|
parameters.history.push({
|
|||
|
|
x: simplex[0].slice(),
|
|||
|
|
fx: simplex[0].fx,
|
|||
|
|
simplex: sortedSimplex,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
maxDiff = 0;
|
|||
|
|
for (let i = 0; i < N; ++i) {
|
|||
|
|
maxDiff = Math.max(maxDiff, Math.abs(simplex[0][i] - simplex[1][i]));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (Math.abs(simplex[0].fx - simplex[N].fx) < minErrorDelta && maxDiff < minTolerance) {
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// compute the centroid of all but the worst point in the simplex
|
|||
|
|
for (let i = 0; i < N; ++i) {
|
|||
|
|
centroid[i] = 0;
|
|||
|
|
for (let j = 0; j < N; ++j) {
|
|||
|
|
centroid[i] += simplex[j][i];
|
|||
|
|
}
|
|||
|
|
centroid[i] /= N;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// reflect the worst point past the centroid and compute loss at reflected
|
|||
|
|
// point
|
|||
|
|
const worst = simplex[N];
|
|||
|
|
weightedSum(reflected, 1 + rho, centroid, -rho, worst);
|
|||
|
|
reflected.fx = f(reflected);
|
|||
|
|
|
|||
|
|
// if the reflected point is the best seen, then possibly expand
|
|||
|
|
if (reflected.fx < simplex[0].fx) {
|
|||
|
|
weightedSum(expanded, 1 + chi, centroid, -chi, worst);
|
|||
|
|
expanded.fx = f(expanded);
|
|||
|
|
if (expanded.fx < reflected.fx) {
|
|||
|
|
updateSimplex(expanded);
|
|||
|
|
} else {
|
|||
|
|
updateSimplex(reflected);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// if the reflected point is worse than the second worst, we need to
|
|||
|
|
// contract
|
|||
|
|
else if (reflected.fx >= simplex[N - 1].fx) {
|
|||
|
|
let shouldReduce = false;
|
|||
|
|
|
|||
|
|
if (reflected.fx > worst.fx) {
|
|||
|
|
// do an inside contraction
|
|||
|
|
weightedSum(contracted, 1 + psi, centroid, -psi, worst);
|
|||
|
|
contracted.fx = f(contracted);
|
|||
|
|
if (contracted.fx < worst.fx) {
|
|||
|
|
updateSimplex(contracted);
|
|||
|
|
} else {
|
|||
|
|
shouldReduce = true;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// do an outside contraction
|
|||
|
|
weightedSum(contracted, 1 - psi * rho, centroid, psi * rho, worst);
|
|||
|
|
contracted.fx = f(contracted);
|
|||
|
|
if (contracted.fx < reflected.fx) {
|
|||
|
|
updateSimplex(contracted);
|
|||
|
|
} else {
|
|||
|
|
shouldReduce = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (shouldReduce) {
|
|||
|
|
// if we don't contract here, we're done
|
|||
|
|
if (sigma >= 1) break;
|
|||
|
|
|
|||
|
|
// do a reduction
|
|||
|
|
for (let i = 1; i < simplex.length; ++i) {
|
|||
|
|
weightedSum(simplex[i], 1 - sigma, simplex[0], sigma, simplex[i]);
|
|||
|
|
simplex[i].fx = f(simplex[i]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
updateSimplex(reflected);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
simplex.sort(sortOrder);
|
|||
|
|
return { fx: simplex[0].fx, x: simplex[0] };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// searches along line 'pk' for a point that satifies the wolfe conditions
|
|||
|
|
/// See 'Numerical Optimization' by Nocedal and Wright p59-60
|
|||
|
|
/// f : objective function
|
|||
|
|
/// pk : search direction
|
|||
|
|
/// current: object containing current gradient/loss
|
|||
|
|
/// next: output: contains next gradient/loss
|
|||
|
|
/// returns a: step size taken
|
|||
|
|
function wolfeLineSearch(f, pk, current, next, a, c1, c2) {
|
|||
|
|
const phi0 = current.fx;
|
|||
|
|
const phiPrime0 = dot(current.fxprime, pk);
|
|||
|
|
let phi = phi0;
|
|||
|
|
let phi_old = phi0;
|
|||
|
|
let phiPrime = phiPrime0;
|
|||
|
|
let a0 = 0;
|
|||
|
|
|
|||
|
|
a = a || 1;
|
|||
|
|
c1 = c1 || 1e-6;
|
|||
|
|
c2 = c2 || 0.1;
|
|||
|
|
|
|||
|
|
function zoom(a_lo, a_high, phi_lo) {
|
|||
|
|
for (let iteration = 0; iteration < 16; ++iteration) {
|
|||
|
|
a = (a_lo + a_high) / 2;
|
|||
|
|
weightedSum(next.x, 1.0, current.x, a, pk);
|
|||
|
|
phi = next.fx = f(next.x, next.fxprime);
|
|||
|
|
phiPrime = dot(next.fxprime, pk);
|
|||
|
|
|
|||
|
|
if (phi > phi0 + c1 * a * phiPrime0 || phi >= phi_lo) {
|
|||
|
|
a_high = a;
|
|||
|
|
} else {
|
|||
|
|
if (Math.abs(phiPrime) <= -c2 * phiPrime0) {
|
|||
|
|
return a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (phiPrime * (a_high - a_lo) >= 0) {
|
|||
|
|
a_high = a_lo;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
a_lo = a;
|
|||
|
|
phi_lo = phi;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (let iteration = 0; iteration < 10; ++iteration) {
|
|||
|
|
weightedSum(next.x, 1.0, current.x, a, pk);
|
|||
|
|
phi = next.fx = f(next.x, next.fxprime);
|
|||
|
|
phiPrime = dot(next.fxprime, pk);
|
|||
|
|
if (phi > phi0 + c1 * a * phiPrime0 || (iteration && phi >= phi_old)) {
|
|||
|
|
return zoom(a0, a, phi_old);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (Math.abs(phiPrime) <= -c2 * phiPrime0) {
|
|||
|
|
return a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (phiPrime >= 0) {
|
|||
|
|
return zoom(a, a0, phi);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
phi_old = phi;
|
|||
|
|
a0 = a;
|
|||
|
|
a *= 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function conjugateGradient(f, initial, params) {
|
|||
|
|
// allocate all memory up front here, keep out of the loop for perfomance
|
|||
|
|
// reasons
|
|||
|
|
let current = { x: initial.slice(), fx: 0, fxprime: initial.slice() };
|
|||
|
|
let next = { x: initial.slice(), fx: 0, fxprime: initial.slice() };
|
|||
|
|
const yk = initial.slice();
|
|||
|
|
let pk;
|
|||
|
|
let temp;
|
|||
|
|
let a = 1;
|
|||
|
|
let maxIterations;
|
|||
|
|
|
|||
|
|
params = params || {};
|
|||
|
|
maxIterations = params.maxIterations || initial.length * 20;
|
|||
|
|
|
|||
|
|
current.fx = f(current.x, current.fxprime);
|
|||
|
|
pk = current.fxprime.slice();
|
|||
|
|
scale(pk, current.fxprime, -1);
|
|||
|
|
|
|||
|
|
for (let i = 0; i < maxIterations; ++i) {
|
|||
|
|
a = wolfeLineSearch(f, pk, current, next, a);
|
|||
|
|
|
|||
|
|
// todo: history in wrong spot?
|
|||
|
|
if (params.history) {
|
|||
|
|
params.history.push({
|
|||
|
|
x: current.x.slice(),
|
|||
|
|
fx: current.fx,
|
|||
|
|
fxprime: current.fxprime.slice(),
|
|||
|
|
alpha: a,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!a) {
|
|||
|
|
// faiiled to find point that satifies wolfe conditions.
|
|||
|
|
// reset direction for next iteration
|
|||
|
|
scale(pk, current.fxprime, -1);
|
|||
|
|
} else {
|
|||
|
|
// update direction using Polak–Ribiere CG method
|
|||
|
|
weightedSum(yk, 1, next.fxprime, -1, current.fxprime);
|
|||
|
|
|
|||
|
|
const delta_k = dot(current.fxprime, current.fxprime);
|
|||
|
|
const beta_k = Math.max(0, dot(yk, next.fxprime) / delta_k);
|
|||
|
|
|
|||
|
|
weightedSum(pk, beta_k, pk, -1, next.fxprime);
|
|||
|
|
|
|||
|
|
temp = current;
|
|||
|
|
current = next;
|
|||
|
|
next = temp;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (norm2(current.fxprime) <= 1e-5) {
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (params.history) {
|
|||
|
|
params.history.push({
|
|||
|
|
x: current.x.slice(),
|
|||
|
|
fx: current.fx,
|
|||
|
|
fxprime: current.fxprime.slice(),
|
|||
|
|
alpha: a,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return current;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* given a list of set objects, and their corresponding overlaps
|
|||
|
|
* updates the (x, y, radius) attribute on each set such that their positions
|
|||
|
|
* roughly correspond to the desired overlaps
|
|||
|
|
* @param {readonly {sets: readonly string[]; size: number; weight?: number}[]} sets
|
|||
|
|
* @returns {{[setid: string]: {x: number, y: number, radius: number}}}
|
|||
|
|
*/
|
|||
|
|
function venn(sets, parameters = {}) {
|
|||
|
|
parameters.maxIterations = parameters.maxIterations || 500;
|
|||
|
|
|
|||
|
|
const initialLayout = parameters.initialLayout || bestInitialLayout;
|
|||
|
|
const loss = parameters.lossFunction || lossFunction;
|
|||
|
|
|
|||
|
|
// add in missing pairwise areas as having 0 size
|
|||
|
|
const areas = addMissingAreas(sets, parameters);
|
|||
|
|
|
|||
|
|
// initial layout is done greedily
|
|||
|
|
const circles = initialLayout(areas, parameters);
|
|||
|
|
|
|||
|
|
// transform x/y coordinates to a vector to optimize
|
|||
|
|
const setids = Object.keys(circles);
|
|||
|
|
/** @type {number[]} */
|
|||
|
|
const initial = [];
|
|||
|
|
for (const setid of setids) {
|
|||
|
|
initial.push(circles[setid].x);
|
|||
|
|
initial.push(circles[setid].y);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// optimize initial layout from our loss function
|
|||
|
|
const solution = nelderMead(
|
|||
|
|
(values) => {
|
|||
|
|
const current = {};
|
|||
|
|
for (let i = 0; i < setids.length; ++i) {
|
|||
|
|
const setid = setids[i];
|
|||
|
|
current[setid] = {
|
|||
|
|
x: values[2 * i],
|
|||
|
|
y: values[2 * i + 1],
|
|||
|
|
radius: circles[setid].radius,
|
|||
|
|
// size : circles[setid].size
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
return loss(current, areas);
|
|||
|
|
},
|
|||
|
|
initial,
|
|||
|
|
parameters
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// transform solution vector back to x/y points
|
|||
|
|
const positions = solution.x;
|
|||
|
|
for (let i = 0; i < setids.length; ++i) {
|
|||
|
|
const setid = setids[i];
|
|||
|
|
circles[setid].x = positions[2 * i];
|
|||
|
|
circles[setid].y = positions[2 * i + 1];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return circles;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const SMALL = 1e-10;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Returns the distance necessary for two circles of radius r1 + r2 to
|
|||
|
|
* have the overlap area 'overlap'
|
|||
|
|
* @param {number} r1
|
|||
|
|
* @param {number} r2
|
|||
|
|
* @param {number} overlap
|
|||
|
|
* @returns {number}
|
|||
|
|
*/
|
|||
|
|
function distanceFromIntersectArea(r1, r2, overlap) {
|
|||
|
|
// handle complete overlapped circles
|
|||
|
|
if (Math.min(r1, r2) * Math.min(r1, r2) * Math.PI <= overlap + SMALL) {
|
|||
|
|
return Math.abs(r1 - r2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return bisect((distance) => circleOverlap(r1, r2, distance) - overlap, 0, r1 + r2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Missing pair-wise intersection area data can cause problems:
|
|||
|
|
* treating as an unknown means that sets will be laid out overlapping,
|
|||
|
|
* which isn't what people expect. To reflect that we want disjoint sets
|
|||
|
|
* here, set the overlap to 0 for all missing pairwise set intersections
|
|||
|
|
* @param {ReadonlyArray<{sets: ReadonlyArray<string>, size: number}>} areas
|
|||
|
|
* @returns {ReadonlyArray<{sets: ReadonlyArray<string>, size: number}>}
|
|||
|
|
*/
|
|||
|
|
function addMissingAreas(areas, parameters = {}) {
|
|||
|
|
const distinct = parameters.distinct;
|
|||
|
|
const r = areas.map((s) => Object.assign({}, s));
|
|||
|
|
|
|||
|
|
function toKey(arr) {
|
|||
|
|
return arr.join(';');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (distinct) {
|
|||
|
|
// recreate the full ones by adding things up but just to level two since the rest doesn't matter
|
|||
|
|
/** @types Map<string, number> */
|
|||
|
|
const count = new Map();
|
|||
|
|
for (const area of r) {
|
|||
|
|
for (let i = 0; i < area.sets.length; i++) {
|
|||
|
|
const si = String(area.sets[i]);
|
|||
|
|
count.set(si, area.size + (count.get(si) || 0));
|
|||
|
|
for (let j = i + 1; j < area.sets.length; j++) {
|
|||
|
|
const sj = String(area.sets[j]);
|
|||
|
|
const k1 = `${si};${sj}`;
|
|||
|
|
const k2 = `${sj};${si}`;
|
|||
|
|
count.set(k1, area.size + (count.get(k1) || 0));
|
|||
|
|
count.set(k2, area.size + (count.get(k2) || 0));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
for (const area of r) {
|
|||
|
|
if (area.sets.length < 3) {
|
|||
|
|
area.size = count.get(toKey(area.sets));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// two circle intersections that aren't defined
|
|||
|
|
const ids = [];
|
|||
|
|
|
|||
|
|
/** @type {Set<string>} */
|
|||
|
|
const pairs = new Set();
|
|||
|
|
for (const area of r) {
|
|||
|
|
if (area.sets.length === 1) {
|
|||
|
|
ids.push(area.sets[0]);
|
|||
|
|
} else if (area.sets.length === 2) {
|
|||
|
|
const a = area.sets[0];
|
|||
|
|
const b = area.sets[1];
|
|||
|
|
pairs.add(toKey(area.sets));
|
|||
|
|
pairs.add(toKey([b, a]));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ids.sort((a, b) => (a === b ? 0 : a < b ? -1 : +1));
|
|||
|
|
|
|||
|
|
for (let i = 0; i < ids.length; ++i) {
|
|||
|
|
const a = ids[i];
|
|||
|
|
for (let j = i + 1; j < ids.length; ++j) {
|
|||
|
|
const b = ids[j];
|
|||
|
|
if (!pairs.has(toKey([a, b]))) {
|
|||
|
|
r.push({ sets: [a, b], size: 0 });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return r;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Returns two matrices, one of the euclidean distances between the sets
|
|||
|
|
* and the other indicating if there are subset or disjoint set relationships
|
|||
|
|
* @param {ReadonlyArray<{sets: ReadonlyArray<number>}>} areas
|
|||
|
|
* @param {ReadonlyArray<{size: number}>} sets
|
|||
|
|
* @param {ReadonlyArray<number>} setids
|
|||
|
|
*/
|
|||
|
|
function getDistanceMatrices(areas, sets, setids) {
|
|||
|
|
// initialize an empty distance matrix between all the points
|
|||
|
|
/**
|
|||
|
|
* @type {number[][]}
|
|||
|
|
*/
|
|||
|
|
const distances = zerosM(sets.length, sets.length);
|
|||
|
|
/**
|
|||
|
|
* @type {number[][]}
|
|||
|
|
*/
|
|||
|
|
const constraints = zerosM(sets.length, sets.length);
|
|||
|
|
|
|||
|
|
// compute required distances between all the sets such that
|
|||
|
|
// the areas match
|
|||
|
|
areas
|
|||
|
|
.filter((x) => x.sets.length === 2)
|
|||
|
|
.forEach((current) => {
|
|||
|
|
const left = setids[current.sets[0]];
|
|||
|
|
const right = setids[current.sets[1]];
|
|||
|
|
const r1 = Math.sqrt(sets[left].size / Math.PI);
|
|||
|
|
const r2 = Math.sqrt(sets[right].size / Math.PI);
|
|||
|
|
const distance = distanceFromIntersectArea(r1, r2, current.size);
|
|||
|
|
|
|||
|
|
distances[left][right] = distances[right][left] = distance;
|
|||
|
|
|
|||
|
|
// also update constraints to indicate if its a subset or disjoint
|
|||
|
|
// relationship
|
|||
|
|
let c = 0;
|
|||
|
|
if (current.size + 1e-10 >= Math.min(sets[left].size, sets[right].size)) {
|
|||
|
|
c = 1;
|
|||
|
|
} else if (current.size <= 1e-10) {
|
|||
|
|
c = -1;
|
|||
|
|
}
|
|||
|
|
constraints[left][right] = constraints[right][left] = c;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return { distances, constraints };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// computes the gradient and loss simultaneously for our constrained MDS optimizer
|
|||
|
|
function constrainedMDSGradient(x, fxprime, distances, constraints) {
|
|||
|
|
for (let i = 0; i < fxprime.length; ++i) {
|
|||
|
|
fxprime[i] = 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let loss = 0;
|
|||
|
|
for (let i = 0; i < distances.length; ++i) {
|
|||
|
|
const xi = x[2 * i];
|
|||
|
|
const yi = x[2 * i + 1];
|
|||
|
|
for (let j = i + 1; j < distances.length; ++j) {
|
|||
|
|
const xj = x[2 * j];
|
|||
|
|
const yj = x[2 * j + 1];
|
|||
|
|
const dij = distances[i][j];
|
|||
|
|
const constraint = constraints[i][j];
|
|||
|
|
|
|||
|
|
const squaredDistance = (xj - xi) * (xj - xi) + (yj - yi) * (yj - yi);
|
|||
|
|
const distance = Math.sqrt(squaredDistance);
|
|||
|
|
const delta = squaredDistance - dij * dij;
|
|||
|
|
|
|||
|
|
if ((constraint > 0 && distance <= dij) || (constraint < 0 && distance >= dij)) {
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
loss += 2 * delta * delta;
|
|||
|
|
|
|||
|
|
fxprime[2 * i] += 4 * delta * (xi - xj);
|
|||
|
|
fxprime[2 * i + 1] += 4 * delta * (yi - yj);
|
|||
|
|
|
|||
|
|
fxprime[2 * j] += 4 * delta * (xj - xi);
|
|||
|
|
fxprime[2 * j + 1] += 4 * delta * (yj - yi);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return loss;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* takes the best working variant of either constrained MDS or greedy
|
|||
|
|
* @param {ReadonlyArray<{sets: ReadonlyArray<string>, size: number}>} areas
|
|||
|
|
*/
|
|||
|
|
function bestInitialLayout(areas, params = {}) {
|
|||
|
|
let initial = greedyLayout(areas, params);
|
|||
|
|
const loss = params.lossFunction || lossFunction;
|
|||
|
|
|
|||
|
|
// greedylayout is sufficient for all 2/3 circle cases. try out
|
|||
|
|
// constrained MDS for higher order problems, take its output
|
|||
|
|
// if it outperforms. (greedy is aesthetically better on 2/3 circles
|
|||
|
|
// since it axis aligns)
|
|||
|
|
if (areas.length >= 8) {
|
|||
|
|
const constrained = constrainedMDSLayout(areas, params);
|
|||
|
|
const constrainedLoss = loss(constrained, areas);
|
|||
|
|
const greedyLoss = loss(initial, areas);
|
|||
|
|
|
|||
|
|
if (constrainedLoss + 1e-8 < greedyLoss) {
|
|||
|
|
initial = constrained;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return initial;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* use the constrained MDS variant to generate an initial layout
|
|||
|
|
* @param {ReadonlyArray<{sets: ReadonlyArray<string>, size: number}>} areas
|
|||
|
|
* @returns {{[key: string]: {x: number, y: number, radius: number}}}
|
|||
|
|
*/
|
|||
|
|
function constrainedMDSLayout(areas, params = {}) {
|
|||
|
|
const restarts = params.restarts || 10;
|
|||
|
|
|
|||
|
|
// bidirectionally map sets to a rowid (so we can create a matrix)
|
|||
|
|
const sets = [];
|
|||
|
|
const setids = {};
|
|||
|
|
for (const area of areas) {
|
|||
|
|
if (area.sets.length === 1) {
|
|||
|
|
setids[area.sets[0]] = sets.length;
|
|||
|
|
sets.push(area);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let { distances, constraints } = getDistanceMatrices(areas, sets, setids);
|
|||
|
|
|
|||
|
|
// keep distances bounded, things get messed up otherwise.
|
|||
|
|
// TODO: proper preconditioner?
|
|||
|
|
const norm = norm2(distances.map(norm2)) / distances.length;
|
|||
|
|
distances = distances.map((row) => row.map((value) => value / norm));
|
|||
|
|
|
|||
|
|
const obj = (x, fxprime) => constrainedMDSGradient(x, fxprime, distances, constraints);
|
|||
|
|
|
|||
|
|
let best = null;
|
|||
|
|
for (let i = 0; i < restarts; ++i) {
|
|||
|
|
const initial = zeros(distances.length * 2).map(Math.random);
|
|||
|
|
|
|||
|
|
const current = conjugateGradient(obj, initial, params);
|
|||
|
|
if (!best || current.fx < best.fx) {
|
|||
|
|
best = current;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const positions = best.x;
|
|||
|
|
|
|||
|
|
// translate rows back to (x,y,radius) coordinates
|
|||
|
|
/** @type {{[key: string]: {x: number, y: number, radius: number}}} */
|
|||
|
|
const circles = {};
|
|||
|
|
for (let i = 0; i < sets.length; ++i) {
|
|||
|
|
const set = sets[i];
|
|||
|
|
circles[set.sets[0]] = {
|
|||
|
|
x: positions[2 * i] * norm,
|
|||
|
|
y: positions[2 * i + 1] * norm,
|
|||
|
|
radius: Math.sqrt(set.size / Math.PI),
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (params.history) {
|
|||
|
|
for (const h of params.history) {
|
|||
|
|
scale(h.x, norm);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return circles;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Lays out a Venn diagram greedily, going from most overlapped sets to
|
|||
|
|
* least overlapped, attempting to position each new set such that the
|
|||
|
|
* overlapping areas to already positioned sets are basically right
|
|||
|
|
* @param {ReadonlyArray<{size: number, sets: ReadonlyArray<string>}>} areas
|
|||
|
|
* @return {{[key: string]: {x: number, y: number, radius: number}}}
|
|||
|
|
*/
|
|||
|
|
function greedyLayout(areas, params) {
|
|||
|
|
const loss = params && params.lossFunction ? params.lossFunction : lossFunction;
|
|||
|
|
|
|||
|
|
// define a circle for each set
|
|||
|
|
/** @type {{[key: string]: {x: number, y: number, radius: number}}} */
|
|||
|
|
const circles = {};
|
|||
|
|
/** @type {{[key: string]: {set: string, size: number, weight: number}[]}} */
|
|||
|
|
const setOverlaps = {};
|
|||
|
|
for (const area of areas) {
|
|||
|
|
if (area.sets.length === 1) {
|
|||
|
|
const set = area.sets[0];
|
|||
|
|
circles[set] = {
|
|||
|
|
x: 1e10,
|
|||
|
|
y: 1e10,
|
|||
|
|
rowid: circles.length,
|
|||
|
|
size: area.size,
|
|||
|
|
radius: Math.sqrt(area.size / Math.PI),
|
|||
|
|
};
|
|||
|
|
setOverlaps[set] = [];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
areas = areas.filter((a) => a.sets.length === 2);
|
|||
|
|
|
|||
|
|
// map each set to a list of all the other sets that overlap it
|
|||
|
|
for (const current of areas) {
|
|||
|
|
let weight = current.weight != null ? current.weight : 1.0;
|
|||
|
|
const left = current.sets[0];
|
|||
|
|
const right = current.sets[1];
|
|||
|
|
|
|||
|
|
// completely overlapped circles shouldn't be positioned early here
|
|||
|
|
if (current.size + SMALL >= Math.min(circles[left].size, circles[right].size)) {
|
|||
|
|
weight = 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setOverlaps[left].push({ set: right, size: current.size, weight });
|
|||
|
|
setOverlaps[right].push({ set: left, size: current.size, weight });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// get list of most overlapped sets
|
|||
|
|
const mostOverlapped = [];
|
|||
|
|
Object.keys(setOverlaps).forEach((set) => {
|
|||
|
|
let size = 0;
|
|||
|
|
for (let i = 0; i < setOverlaps[set].length; ++i) {
|
|||
|
|
size += setOverlaps[set][i].size * setOverlaps[set][i].weight;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
mostOverlapped.push({ set, size });
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// sort by size desc
|
|||
|
|
function sortOrder(a, b) {
|
|||
|
|
return b.size - a.size;
|
|||
|
|
}
|
|||
|
|
mostOverlapped.sort(sortOrder);
|
|||
|
|
|
|||
|
|
// keep track of what sets have been laid out
|
|||
|
|
const positioned = {};
|
|||
|
|
function isPositioned(element) {
|
|||
|
|
return element.set in positioned;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* adds a point to the output
|
|||
|
|
* @param {{x: number, y: number}} point
|
|||
|
|
* @param {number} index
|
|||
|
|
*/
|
|||
|
|
function positionSet(point, index) {
|
|||
|
|
circles[index].x = point.x;
|
|||
|
|
circles[index].y = point.y;
|
|||
|
|
positioned[index] = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// add most overlapped set at (0,0)
|
|||
|
|
positionSet({ x: 0, y: 0 }, mostOverlapped[0].set);
|
|||
|
|
|
|||
|
|
// get distances between all points. TODO, necessary?
|
|||
|
|
// answer: probably not
|
|||
|
|
// var distances = venn.getDistanceMatrices(circles, areas).distances;
|
|||
|
|
for (let i = 1; i < mostOverlapped.length; ++i) {
|
|||
|
|
const setIndex = mostOverlapped[i].set;
|
|||
|
|
const overlap = setOverlaps[setIndex].filter(isPositioned);
|
|||
|
|
const set = circles[setIndex];
|
|||
|
|
overlap.sort(sortOrder);
|
|||
|
|
|
|||
|
|
if (overlap.length === 0) {
|
|||
|
|
// this shouldn't happen anymore with addMissingAreas
|
|||
|
|
throw 'ERROR: missing pairwise overlap information';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** @type {{x: number, y: number}[]} */
|
|||
|
|
const points = [];
|
|||
|
|
for (var j = 0; j < overlap.length; ++j) {
|
|||
|
|
// get appropriate distance from most overlapped already added set
|
|||
|
|
const p1 = circles[overlap[j].set];
|
|||
|
|
const d1 = distanceFromIntersectArea(set.radius, p1.radius, overlap[j].size);
|
|||
|
|
|
|||
|
|
// sample positions at 90 degrees for maximum aesthetics
|
|||
|
|
points.push({ x: p1.x + d1, y: p1.y });
|
|||
|
|
points.push({ x: p1.x - d1, y: p1.y });
|
|||
|
|
points.push({ y: p1.y + d1, x: p1.x });
|
|||
|
|
points.push({ y: p1.y - d1, x: p1.x });
|
|||
|
|
|
|||
|
|
// if we have at least 2 overlaps, then figure out where the
|
|||
|
|
// set should be positioned analytically and try those too
|
|||
|
|
for (let k = j + 1; k < overlap.length; ++k) {
|
|||
|
|
const p2 = circles[overlap[k].set];
|
|||
|
|
const d2 = distanceFromIntersectArea(set.radius, p2.radius, overlap[k].size);
|
|||
|
|
|
|||
|
|
const extraPoints = circleCircleIntersection(
|
|||
|
|
{ x: p1.x, y: p1.y, radius: d1 },
|
|||
|
|
{ x: p2.x, y: p2.y, radius: d2 }
|
|||
|
|
);
|
|||
|
|
points.push(...extraPoints);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// we have some candidate positions for the set, examine loss
|
|||
|
|
// at each position to figure out where to put it at
|
|||
|
|
let bestLoss = 1e50;
|
|||
|
|
let bestPoint = points[0];
|
|||
|
|
for (const point of points) {
|
|||
|
|
circles[setIndex].x = point.x;
|
|||
|
|
circles[setIndex].y = point.y;
|
|||
|
|
const localLoss = loss(circles, areas);
|
|||
|
|
if (localLoss < bestLoss) {
|
|||
|
|
bestLoss = localLoss;
|
|||
|
|
bestPoint = point;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
positionSet(bestPoint, setIndex);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return circles;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Given a bunch of sets, and the desired overlaps between these sets - computes
|
|||
|
|
* the distance from the actual overlaps to the desired overlaps. Note that
|
|||
|
|
* this method ignores overlaps of more than 2 circles
|
|||
|
|
* @param {{[key: string]: <{x: number, y: number, radius: number}>}} circles
|
|||
|
|
* @param {ReadonlyArray<{size: number, sets: ReadonlyArray<string>, weight?: number}>} overlaps
|
|||
|
|
* @returns {number}
|
|||
|
|
*/
|
|||
|
|
function lossFunction(circles, overlaps) {
|
|||
|
|
let output = 0;
|
|||
|
|
|
|||
|
|
for (const area of overlaps) {
|
|||
|
|
if (area.sets.length === 1) {
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
/** @type {number} */
|
|||
|
|
let overlap;
|
|||
|
|
if (area.sets.length === 2) {
|
|||
|
|
const left = circles[area.sets[0]];
|
|||
|
|
const right = circles[area.sets[1]];
|
|||
|
|
overlap = circleOverlap(left.radius, right.radius, distance(left, right));
|
|||
|
|
} else {
|
|||
|
|
overlap = intersectionArea(area.sets.map((d) => circles[d]));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const weight = area.weight != null ? area.weight : 1.0;
|
|||
|
|
output += weight * (overlap - area.size) * (overlap - area.size);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return output;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function logRatioLossFunction(circles, overlaps) {
|
|||
|
|
let output = 0;
|
|||
|
|
|
|||
|
|
for (const area of overlaps) {
|
|||
|
|
if (area.sets.length === 1) {
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
/** @type {number} */
|
|||
|
|
let overlap;
|
|||
|
|
if (area.sets.length === 2) {
|
|||
|
|
const left = circles[area.sets[0]];
|
|||
|
|
const right = circles[area.sets[1]];
|
|||
|
|
overlap = circleOverlap(left.radius, right.radius, distance(left, right));
|
|||
|
|
} else {
|
|||
|
|
overlap = intersectionArea(area.sets.map((d) => circles[d]));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const weight = area.weight != null ? area.weight : 1.0;
|
|||
|
|
const differenceFromIdeal = Math.log((overlap + 1) / (area.size + 1));
|
|||
|
|
output += weight * differenceFromIdeal * differenceFromIdeal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return output;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* orientates a bunch of circles to point in orientation
|
|||
|
|
* @param {{x :number, y: number, radius: number}[]} circles
|
|||
|
|
* @param {number | undefined} orientation
|
|||
|
|
* @param {((a: {x :number, y: number, radius: number}, b: {x :number, y: number, radius: number}) => number) | undefined} orientationOrder
|
|||
|
|
*/
|
|||
|
|
function orientateCircles(circles, orientation, orientationOrder) {
|
|||
|
|
if (orientationOrder == null) {
|
|||
|
|
circles.sort((a, b) => b.radius - a.radius);
|
|||
|
|
} else {
|
|||
|
|
circles.sort(orientationOrder);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// shift circles so largest circle is at (0, 0)
|
|||
|
|
if (circles.length > 0) {
|
|||
|
|
const largestX = circles[0].x;
|
|||
|
|
const largestY = circles[0].y;
|
|||
|
|
|
|||
|
|
for (const circle of circles) {
|
|||
|
|
circle.x -= largestX;
|
|||
|
|
circle.y -= largestY;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (circles.length === 2) {
|
|||
|
|
// if the second circle is a subset of the first, arrange so that
|
|||
|
|
// it is off to one side. hack for https://github.com/benfred/venn.js/issues/120
|
|||
|
|
const dist = distance(circles[0], circles[1]);
|
|||
|
|
if (dist < Math.abs(circles[1].radius - circles[0].radius)) {
|
|||
|
|
circles[1].x = circles[0].x + circles[0].radius - circles[1].radius - 1e-10;
|
|||
|
|
circles[1].y = circles[0].y;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// rotate circles so that second largest is at an angle of 'orientation'
|
|||
|
|
// from largest
|
|||
|
|
if (circles.length > 1) {
|
|||
|
|
const rotation = Math.atan2(circles[1].x, circles[1].y) - orientation;
|
|||
|
|
const c = Math.cos(rotation);
|
|||
|
|
const s = Math.sin(rotation);
|
|||
|
|
|
|||
|
|
for (const circle of circles) {
|
|||
|
|
const x = circle.x;
|
|||
|
|
const y = circle.y;
|
|||
|
|
circle.x = c * x - s * y;
|
|||
|
|
circle.y = s * x + c * y;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// mirror solution if third solution is above plane specified by
|
|||
|
|
// first two circles
|
|||
|
|
if (circles.length > 2) {
|
|||
|
|
let angle = Math.atan2(circles[2].x, circles[2].y) - orientation;
|
|||
|
|
while (angle < 0) {
|
|||
|
|
angle += 2 * Math.PI;
|
|||
|
|
}
|
|||
|
|
while (angle > 2 * Math.PI) {
|
|||
|
|
angle -= 2 * Math.PI;
|
|||
|
|
}
|
|||
|
|
if (angle > Math.PI) {
|
|||
|
|
const slope = circles[1].y / (1e-10 + circles[1].x);
|
|||
|
|
for (const circle of circles) {
|
|||
|
|
var d = (circle.x + slope * circle.y) / (1 + slope * slope);
|
|||
|
|
circle.x = 2 * d - circle.x;
|
|||
|
|
circle.y = 2 * d * slope - circle.y;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
*
|
|||
|
|
* @param {ReadonlyArray<{x: number, y: number, radius: number}>} circles
|
|||
|
|
* @returns {{x: number, y: number, radius: number}[][]}
|
|||
|
|
*/
|
|||
|
|
function disjointCluster(circles) {
|
|||
|
|
// union-find clustering to get disjoint sets
|
|||
|
|
circles.forEach((circle) => {
|
|||
|
|
circle.parent = circle;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// path compression step in union find
|
|||
|
|
function find(circle) {
|
|||
|
|
if (circle.parent !== circle) {
|
|||
|
|
circle.parent = find(circle.parent);
|
|||
|
|
}
|
|||
|
|
return circle.parent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function union(x, y) {
|
|||
|
|
const xRoot = find(x);
|
|||
|
|
const yRoot = find(y);
|
|||
|
|
xRoot.parent = yRoot;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// get the union of all overlapping sets
|
|||
|
|
for (let i = 0; i < circles.length; ++i) {
|
|||
|
|
for (let j = i + 1; j < circles.length; ++j) {
|
|||
|
|
const maxDistance = circles[i].radius + circles[j].radius;
|
|||
|
|
if (distance(circles[i], circles[j]) + 1e-10 < maxDistance) {
|
|||
|
|
union(circles[j], circles[i]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// find all the disjoint clusters and group them together
|
|||
|
|
/** @type {Map<string, {x: number, y: number, radius: number}[]>} */
|
|||
|
|
const disjointClusters = new Map();
|
|||
|
|
for (let i = 0; i < circles.length; ++i) {
|
|||
|
|
const setid = find(circles[i]).parent.setid;
|
|||
|
|
if (!disjointClusters.has(setid)) {
|
|||
|
|
disjointClusters.set(setid, []);
|
|||
|
|
}
|
|||
|
|
disjointClusters.get(setid).push(circles[i]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// cleanup bookkeeping
|
|||
|
|
circles.forEach((circle) => {
|
|||
|
|
delete circle.parent;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// return in more usable form
|
|||
|
|
return Array.from(disjointClusters.values());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @param {ReadonlyArray<{x :number, y: number, radius: number}>} circles
|
|||
|
|
* @returns {{xRange: [number, number], yRange: [number, number]}}
|
|||
|
|
*/
|
|||
|
|
function getBoundingBox(circles) {
|
|||
|
|
const minMax = (d) => {
|
|||
|
|
const hi = circles.reduce((acc, c) => Math.max(acc, c[d] + c.radius), Number.NEGATIVE_INFINITY);
|
|||
|
|
const lo = circles.reduce((acc, c) => Math.min(acc, c[d] - c.radius), Number.POSITIVE_INFINITY);
|
|||
|
|
return { max: hi, min: lo };
|
|||
|
|
};
|
|||
|
|
return { xRange: minMax('x'), yRange: minMax('y') };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
*
|
|||
|
|
* @param {{[setid: string]: {x: number, y: number, radius: number}}} solution
|
|||
|
|
* @param {undefined | number} orientation
|
|||
|
|
* @param {((a: {x :number, y: number, radius: number}, b: {x :number, y: number, radius: number}) => number) | undefined} orientationOrder
|
|||
|
|
* @returns {{[setid: string]: {x: number, y: number, radius: number}}}
|
|||
|
|
*/
|
|||
|
|
function normalizeSolution(solution, orientation, orientationOrder) {
|
|||
|
|
if (orientation == null) {
|
|||
|
|
orientation = Math.PI / 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// work with a list instead of a dictionary, and take a copy so we
|
|||
|
|
// don't mutate input
|
|||
|
|
let circles = fromObjectNotation(solution).map((d) => Object.assign({}, d));
|
|||
|
|
|
|||
|
|
// get all the disjoint clusters
|
|||
|
|
const clusters = disjointCluster(circles);
|
|||
|
|
|
|||
|
|
// orientate all disjoint sets, get sizes
|
|||
|
|
for (const cluster of clusters) {
|
|||
|
|
orientateCircles(cluster, orientation, orientationOrder);
|
|||
|
|
const bounds = getBoundingBox(cluster);
|
|||
|
|
cluster.size = (bounds.xRange.max - bounds.xRange.min) * (bounds.yRange.max - bounds.yRange.min);
|
|||
|
|
cluster.bounds = bounds;
|
|||
|
|
}
|
|||
|
|
clusters.sort((a, b) => b.size - a.size);
|
|||
|
|
|
|||
|
|
// orientate the largest at 0,0, and get the bounds
|
|||
|
|
circles = clusters[0];
|
|||
|
|
let returnBounds = circles.bounds;
|
|||
|
|
const spacing = (returnBounds.xRange.max - returnBounds.xRange.min) / 50;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @param {ReadonlyArray<{x: number, y: number, radius: number, setid: string}>} cluster
|
|||
|
|
* @param {boolean} right
|
|||
|
|
* @param {boolean} bottom
|
|||
|
|
*/
|
|||
|
|
function addCluster(cluster, right, bottom) {
|
|||
|
|
if (!cluster) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const bounds = cluster.bounds;
|
|||
|
|
/** @type {number} */
|
|||
|
|
let xOffset;
|
|||
|
|
/** @type {number} */
|
|||
|
|
let yOffset;
|
|||
|
|
|
|||
|
|
if (right) {
|
|||
|
|
xOffset = returnBounds.xRange.max - bounds.xRange.min + spacing;
|
|||
|
|
} else {
|
|||
|
|
xOffset = returnBounds.xRange.max - bounds.xRange.max;
|
|||
|
|
const centreing =
|
|||
|
|
(bounds.xRange.max - bounds.xRange.min) / 2 - (returnBounds.xRange.max - returnBounds.xRange.min) / 2;
|
|||
|
|
if (centreing < 0) {
|
|||
|
|
xOffset += centreing;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (bottom) {
|
|||
|
|
yOffset = returnBounds.yRange.max - bounds.yRange.min + spacing;
|
|||
|
|
} else {
|
|||
|
|
yOffset = returnBounds.yRange.max - bounds.yRange.max;
|
|||
|
|
const centreing =
|
|||
|
|
(bounds.yRange.max - bounds.yRange.min) / 2 - (returnBounds.yRange.max - returnBounds.yRange.min) / 2;
|
|||
|
|
if (centreing < 0) {
|
|||
|
|
yOffset += centreing;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (const c of cluster) {
|
|||
|
|
c.x += xOffset;
|
|||
|
|
c.y += yOffset;
|
|||
|
|
circles.push(c);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let index = 1;
|
|||
|
|
while (index < clusters.length) {
|
|||
|
|
addCluster(clusters[index], true, false);
|
|||
|
|
addCluster(clusters[index + 1], false, true);
|
|||
|
|
addCluster(clusters[index + 2], true, true);
|
|||
|
|
index += 3;
|
|||
|
|
|
|||
|
|
// have one cluster (in top left). lay out next three relative
|
|||
|
|
// to it in a grid
|
|||
|
|
returnBounds = getBoundingBox(circles);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// convert back to solution form
|
|||
|
|
return toObjectNotation(circles);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Scales a solution from venn.venn or venn.greedyLayout such that it fits in
|
|||
|
|
* a rectangle of width/height - with padding around the borders. also
|
|||
|
|
* centers the diagram in the available space at the same time.
|
|||
|
|
* If the scale parameter is not null, this automatic scaling is ignored in favor of this custom one
|
|||
|
|
* @param {{[setid: string]: {x: number, y: number, radius: number}}} solution
|
|||
|
|
* @param {number} width
|
|||
|
|
* @param {number} height
|
|||
|
|
* @param {number} padding
|
|||
|
|
* @param {boolean} scaleToFit
|
|||
|
|
* @returns {{[setid: string]: {x: number, y: number, radius: number}}}
|
|||
|
|
*/
|
|||
|
|
function scaleSolution(solution, width, height, padding, scaleToFit) {
|
|||
|
|
const circles = fromObjectNotation(solution);
|
|||
|
|
|
|||
|
|
width -= 2 * padding;
|
|||
|
|
height -= 2 * padding;
|
|||
|
|
|
|||
|
|
const { xRange, yRange } = getBoundingBox(circles);
|
|||
|
|
|
|||
|
|
if (xRange.max === xRange.min || yRange.max === yRange.min) {
|
|||
|
|
console.log('not scaling solution: zero size detected');
|
|||
|
|
return solution;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** @type {number} */
|
|||
|
|
let xScaling;
|
|||
|
|
/** @type {number} */
|
|||
|
|
let yScaling;
|
|||
|
|
if (scaleToFit) {
|
|||
|
|
const toScaleDiameter = Math.sqrt(scaleToFit / Math.PI) * 2;
|
|||
|
|
xScaling = width / toScaleDiameter;
|
|||
|
|
yScaling = height / toScaleDiameter;
|
|||
|
|
} else {
|
|||
|
|
xScaling = width / (xRange.max - xRange.min);
|
|||
|
|
yScaling = height / (yRange.max - yRange.min);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const scaling = Math.min(yScaling, xScaling);
|
|||
|
|
// while we're at it, center the diagram too
|
|||
|
|
const xOffset = (width - (xRange.max - xRange.min) * scaling) / 2;
|
|||
|
|
const yOffset = (height - (yRange.max - yRange.min) * scaling) / 2;
|
|||
|
|
|
|||
|
|
return toObjectNotation(
|
|||
|
|
circles.map((circle) => ({
|
|||
|
|
radius: scaling * circle.radius,
|
|||
|
|
x: padding + xOffset + (circle.x - xRange.min) * scaling,
|
|||
|
|
y: padding + yOffset + (circle.y - yRange.min) * scaling,
|
|||
|
|
setid: circle.setid,
|
|||
|
|
}))
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @param {readonly {x: number, y: number, radius: number, setid: string}[]} circles
|
|||
|
|
* @returns {{[setid: string]: {x: number, y: number, radius: number, setid: string}}}
|
|||
|
|
*/
|
|||
|
|
function toObjectNotation(circles) {
|
|||
|
|
/** @type {{[setid: string]: {x: number, y: number, radius: number, setid: string}}} */
|
|||
|
|
const r = {};
|
|||
|
|
for (const circle of circles) {
|
|||
|
|
r[circle.setid] = circle;
|
|||
|
|
}
|
|||
|
|
return r;
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* @param {{[setid: string]: {x: number, y: number, radius: number}}} solution
|
|||
|
|
* @returns {{x: number, y: number, radius: number, setid: string}[]}}
|
|||
|
|
*/
|
|||
|
|
function fromObjectNotation(solution) {
|
|||
|
|
const setids = Object.keys(solution);
|
|||
|
|
return setids.map((id) => Object.assign(solution[id], { setid: id }));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* VennDiagram includes an optional `options` parameter containing the following option(s):
|
|||
|
|
*
|
|||
|
|
* `colourScheme: Array<String>`
|
|||
|
|
* A list of color values to be applied when coloring diagram circles.
|
|||
|
|
*
|
|||
|
|
* `symmetricalTextCentre: Boolean`
|
|||
|
|
* Whether to symmetrically center each circle's text horizontally and vertically.
|
|||
|
|
* Defaults to `false`.
|
|||
|
|
*
|
|||
|
|
* `textFill: String`
|
|||
|
|
* The color to be applied to the text within each circle.
|
|||
|
|
*
|
|||
|
|
* @param {object} options
|
|||
|
|
*/
|
|||
|
|
function VennDiagram(options = {}) {
|
|||
|
|
let useViewBox = false,
|
|||
|
|
width = 600,
|
|||
|
|
height = 350,
|
|||
|
|
padding = 15,
|
|||
|
|
duration = 1000,
|
|||
|
|
orientation = Math.PI / 2,
|
|||
|
|
normalize = true,
|
|||
|
|
scaleToFit = null,
|
|||
|
|
wrap = true,
|
|||
|
|
styled = true,
|
|||
|
|
fontSize = null,
|
|||
|
|
orientationOrder = null,
|
|||
|
|
distinct = false,
|
|||
|
|
round = null,
|
|||
|
|
symmetricalTextCentre = options && options.symmetricalTextCentre ? options.symmetricalTextCentre : false,
|
|||
|
|
// mimic the behaviour of d3.scale.category10 from the previous
|
|||
|
|
// version of d3
|
|||
|
|
colourMap = {},
|
|||
|
|
// so this is the same as d3.schemeCategory10, which is only defined in d3 4.0
|
|||
|
|
// since we can support older versions of d3 as long as we don't force this,
|
|||
|
|
// I'm hackily redefining below. TODO: remove this and change to d3.schemeCategory10
|
|||
|
|
colourScheme =
|
|||
|
|
options && options.colourScheme
|
|||
|
|
? options.colourScheme
|
|||
|
|
: options && options.colorScheme
|
|||
|
|
? options.colorScheme
|
|||
|
|
: [
|
|||
|
|
'#1f77b4',
|
|||
|
|
'#ff7f0e',
|
|||
|
|
'#2ca02c',
|
|||
|
|
'#d62728',
|
|||
|
|
'#9467bd',
|
|||
|
|
'#8c564b',
|
|||
|
|
'#e377c2',
|
|||
|
|
'#7f7f7f',
|
|||
|
|
'#bcbd22',
|
|||
|
|
'#17becf',
|
|||
|
|
],
|
|||
|
|
colourIndex = 0,
|
|||
|
|
colours = function (key) {
|
|||
|
|
if (key in colourMap) {
|
|||
|
|
return colourMap[key];
|
|||
|
|
}
|
|||
|
|
var ret = (colourMap[key] = colourScheme[colourIndex]);
|
|||
|
|
colourIndex += 1;
|
|||
|
|
if (colourIndex >= colourScheme.length) {
|
|||
|
|
colourIndex = 0;
|
|||
|
|
}
|
|||
|
|
return ret;
|
|||
|
|
},
|
|||
|
|
layoutFunction = venn,
|
|||
|
|
loss = lossFunction;
|
|||
|
|
|
|||
|
|
function chart(selection) {
|
|||
|
|
let data = selection.datum();
|
|||
|
|
|
|||
|
|
// handle 0-sized sets by removing from input
|
|||
|
|
const toRemove = new Set();
|
|||
|
|
data.forEach((datum) => {
|
|||
|
|
if (datum.size == 0 && datum.sets.length == 1) {
|
|||
|
|
toRemove.add(datum.sets[0]);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
data = data.filter((datum) => !datum.sets.some((set) => toRemove.has(set)));
|
|||
|
|
|
|||
|
|
let circles = {};
|
|||
|
|
let textCentres = {};
|
|||
|
|
|
|||
|
|
if (data.length > 0) {
|
|||
|
|
let solution = layoutFunction(data, { lossFunction: loss, distinct });
|
|||
|
|
|
|||
|
|
if (normalize) {
|
|||
|
|
solution = normalizeSolution(solution, orientation, orientationOrder);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
circles = scaleSolution(solution, width, height, padding, scaleToFit);
|
|||
|
|
textCentres = computeTextCentres(circles, data, symmetricalTextCentre);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Figure out the current label for each set. These can change
|
|||
|
|
// and D3 won't necessarily update (fixes https://github.com/benfred/venn.js/issues/103)
|
|||
|
|
const labels = {};
|
|||
|
|
data.forEach((datum) => {
|
|||
|
|
if (datum.label) {
|
|||
|
|
labels[datum.sets] = datum.label;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function label(d) {
|
|||
|
|
if (d.sets in labels) {
|
|||
|
|
return labels[d.sets];
|
|||
|
|
}
|
|||
|
|
if (d.sets.length == 1) {
|
|||
|
|
return '' + d.sets[0];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// create svg if not already existing
|
|||
|
|
selection.selectAll('svg').data([circles]).enter().append('svg');
|
|||
|
|
|
|||
|
|
const svg = selection.select('svg');
|
|||
|
|
|
|||
|
|
if (useViewBox) {
|
|||
|
|
svg.attr('viewBox', `0 0 ${width} ${height}`);
|
|||
|
|
} else {
|
|||
|
|
svg.attr('width', width).attr('height', height);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// to properly transition intersection areas, we need the
|
|||
|
|
// previous circles locations. load from elements
|
|||
|
|
const previous = {};
|
|||
|
|
let hasPrevious = false;
|
|||
|
|
svg.selectAll('.venn-area path').each(function (d) {
|
|||
|
|
const path = this.getAttribute('d');
|
|||
|
|
if (d.sets.length == 1 && path && !distinct) {
|
|||
|
|
hasPrevious = true;
|
|||
|
|
previous[d.sets[0]] = circleFromPath(path);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// interpolate intersection area paths between previous and
|
|||
|
|
// current paths
|
|||
|
|
function pathTween(d) {
|
|||
|
|
return (t) => {
|
|||
|
|
const c = d.sets.map((set) => {
|
|||
|
|
let start = previous[set];
|
|||
|
|
let end = circles[set];
|
|||
|
|
if (!start) {
|
|||
|
|
start = { x: width / 2, y: height / 2, radius: 1 };
|
|||
|
|
}
|
|||
|
|
if (!end) {
|
|||
|
|
end = { x: width / 2, y: height / 2, radius: 1 };
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
x: start.x * (1 - t) + end.x * t,
|
|||
|
|
y: start.y * (1 - t) + end.y * t,
|
|||
|
|
radius: start.radius * (1 - t) + end.radius * t,
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
return intersectionAreaPath(c, round);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// update data, joining on the set ids
|
|||
|
|
const nodes = svg.selectAll('.venn-area').data(data, (d) => d.sets);
|
|||
|
|
|
|||
|
|
// create new nodes
|
|||
|
|
const enter = nodes
|
|||
|
|
.enter()
|
|||
|
|
.append('g')
|
|||
|
|
.attr(
|
|||
|
|
'class',
|
|||
|
|
(d) =>
|
|||
|
|
`venn-area venn-${d.sets.length == 1 ? 'circle' : 'intersection'}${
|
|||
|
|
d.colour || d.color ? ' venn-coloured' : ''
|
|||
|
|
}`
|
|||
|
|
)
|
|||
|
|
.attr('data-venn-sets', (d) => d.sets.join('_'));
|
|||
|
|
|
|||
|
|
const enterPath = enter.append('path');
|
|||
|
|
const enterText = enter
|
|||
|
|
.append('text')
|
|||
|
|
.attr('class', 'label')
|
|||
|
|
.text((d) => label(d))
|
|||
|
|
.attr('text-anchor', 'middle')
|
|||
|
|
.attr('dy', '.35em')
|
|||
|
|
.attr('x', width / 2)
|
|||
|
|
.attr('y', height / 2);
|
|||
|
|
|
|||
|
|
// apply minimal style if wanted
|
|||
|
|
if (styled) {
|
|||
|
|
enterPath
|
|||
|
|
.style('fill-opacity', '0')
|
|||
|
|
.filter((d) => d.sets.length == 1)
|
|||
|
|
.style('fill', (d) => (d.colour ? d.colour : d.color ? d.color : colours(d.sets)))
|
|||
|
|
.style('fill-opacity', '.25');
|
|||
|
|
|
|||
|
|
enterText.style('fill', (d) => {
|
|||
|
|
if (d.colour || d.color) {
|
|||
|
|
return '#FFF';
|
|||
|
|
}
|
|||
|
|
if (options.textFill) {
|
|||
|
|
return options.textFill;
|
|||
|
|
}
|
|||
|
|
return d.sets.length == 1 ? colours(d.sets) : '#444';
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function asTransition(s) {
|
|||
|
|
if (typeof s.transition === 'function') {
|
|||
|
|
return s.transition('venn').duration(duration);
|
|||
|
|
}
|
|||
|
|
return s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// update existing, using pathTween if necessary
|
|||
|
|
let update = selection;
|
|||
|
|
if (hasPrevious && typeof update.transition === 'function') {
|
|||
|
|
update = asTransition(selection);
|
|||
|
|
update.selectAll('path').attrTween('d', pathTween);
|
|||
|
|
} else {
|
|||
|
|
update.selectAll('path').attr('d', (d) => intersectionAreaPath(d.sets.map((set) => circles[set])), round);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const updateText = update
|
|||
|
|
.selectAll('text')
|
|||
|
|
.filter((d) => d.sets in textCentres)
|
|||
|
|
.text((d) => label(d))
|
|||
|
|
.attr('x', (d) => Math.floor(textCentres[d.sets].x))
|
|||
|
|
.attr('y', (d) => Math.floor(textCentres[d.sets].y));
|
|||
|
|
|
|||
|
|
if (wrap) {
|
|||
|
|
if (hasPrevious) {
|
|||
|
|
// d3 4.0 uses 'on' for events on transitions,
|
|||
|
|
// but d3 3.0 used 'each' instead. switch appropriately
|
|||
|
|
if ('on' in updateText) {
|
|||
|
|
updateText.on('end', wrapText(circles, label));
|
|||
|
|
} else {
|
|||
|
|
updateText.each('end', wrapText(circles, label));
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
updateText.each(wrapText(circles, label));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// remove old
|
|||
|
|
const exit = asTransition(nodes.exit()).remove();
|
|||
|
|
if (typeof nodes.transition === 'function') {
|
|||
|
|
exit.selectAll('path').attrTween('d', pathTween);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const exitText = exit
|
|||
|
|
.selectAll('text')
|
|||
|
|
.attr('x', width / 2)
|
|||
|
|
.attr('y', height / 2);
|
|||
|
|
|
|||
|
|
// if we've been passed a fontSize explicitly, use it to
|
|||
|
|
// transition
|
|||
|
|
if (fontSize !== null) {
|
|||
|
|
enterText.style('font-size', '0px');
|
|||
|
|
updateText.style('font-size', fontSize);
|
|||
|
|
exitText.style('font-size', '0px');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return { circles, textCentres, nodes, enter, update, exit };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
chart.wrap = function (_) {
|
|||
|
|
if (!arguments.length) return wrap;
|
|||
|
|
wrap = _;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chart.useViewBox = function () {
|
|||
|
|
useViewBox = true;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chart.width = function (_) {
|
|||
|
|
if (!arguments.length) return width;
|
|||
|
|
width = _;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chart.height = function (_) {
|
|||
|
|
if (!arguments.length) return height;
|
|||
|
|
height = _;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chart.padding = function (_) {
|
|||
|
|
if (!arguments.length) return padding;
|
|||
|
|
padding = _;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chart.distinct = function (_) {
|
|||
|
|
if (!arguments.length) return distinct;
|
|||
|
|
distinct = _;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chart.colours = function (_) {
|
|||
|
|
if (!arguments.length) return colours;
|
|||
|
|
colours = _;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chart.colors = function (_) {
|
|||
|
|
if (!arguments.length) return colours;
|
|||
|
|
colours = _;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chart.fontSize = function (_) {
|
|||
|
|
if (!arguments.length) return fontSize;
|
|||
|
|
fontSize = _;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chart.round = function (_) {
|
|||
|
|
if (!arguments.length) return round;
|
|||
|
|
round = _;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chart.duration = function (_) {
|
|||
|
|
if (!arguments.length) return duration;
|
|||
|
|
duration = _;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chart.layoutFunction = function (_) {
|
|||
|
|
if (!arguments.length) return layoutFunction;
|
|||
|
|
layoutFunction = _;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chart.normalize = function (_) {
|
|||
|
|
if (!arguments.length) return normalize;
|
|||
|
|
normalize = _;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chart.scaleToFit = function (_) {
|
|||
|
|
if (!arguments.length) return scaleToFit;
|
|||
|
|
scaleToFit = _;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chart.styled = function (_) {
|
|||
|
|
if (!arguments.length) return styled;
|
|||
|
|
styled = _;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chart.orientation = function (_) {
|
|||
|
|
if (!arguments.length) return orientation;
|
|||
|
|
orientation = _;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chart.orientationOrder = function (_) {
|
|||
|
|
if (!arguments.length) return orientationOrder;
|
|||
|
|
orientationOrder = _;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chart.lossFunction = function (_) {
|
|||
|
|
if (!arguments.length) return loss;
|
|||
|
|
loss = _ === 'default' ? lossFunction : _ === 'logRatio' ? logRatioLossFunction : _;
|
|||
|
|
return chart;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return chart;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// sometimes text doesn't fit inside the circle, if thats the case lets wrap
|
|||
|
|
// the text here such that it fits
|
|||
|
|
// todo: looks like this might be merged into d3 (
|
|||
|
|
// https://github.com/mbostock/d3/issues/1642),
|
|||
|
|
// also worth checking out is
|
|||
|
|
// http://engineering.findthebest.com/wrapping-axis-labels-in-d3-js/
|
|||
|
|
// this seems to be one of those things that should be easy but isn't
|
|||
|
|
function wrapText(circles, labeller) {
|
|||
|
|
return function (data) {
|
|||
|
|
const text = this;
|
|||
|
|
const width = circles[data.sets[0]].radius || 50;
|
|||
|
|
const label = labeller(data) || '';
|
|||
|
|
|
|||
|
|
const words = label.split(/\s+/).reverse();
|
|||
|
|
const maxLines = 3;
|
|||
|
|
const minChars = (label.length + words.length) / maxLines;
|
|||
|
|
|
|||
|
|
let word = words.pop();
|
|||
|
|
let line = [word];
|
|||
|
|
let lineNumber = 0;
|
|||
|
|
const lineHeight = 1.1; // ems
|
|||
|
|
text.textContent = null; // clear
|
|||
|
|
const tspans = [];
|
|||
|
|
|
|||
|
|
function append(word) {
|
|||
|
|
const tspan = text.ownerDocument.createElementNS(text.namespaceURI, 'tspan');
|
|||
|
|
tspan.textContent = word;
|
|||
|
|
tspans.push(tspan);
|
|||
|
|
text.append(tspan);
|
|||
|
|
return tspan;
|
|||
|
|
}
|
|||
|
|
let tspan = append(word);
|
|||
|
|
|
|||
|
|
while (true) {
|
|||
|
|
word = words.pop();
|
|||
|
|
if (!word) {
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
line.push(word);
|
|||
|
|
const joined = line.join(' ');
|
|||
|
|
tspan.textContent = joined;
|
|||
|
|
if (joined.length > minChars && tspan.getComputedTextLength() > width) {
|
|||
|
|
line.pop();
|
|||
|
|
tspan.textContent = line.join(' ');
|
|||
|
|
line = [word];
|
|||
|
|
tspan = append(word);
|
|||
|
|
lineNumber++;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const initial = 0.35 - (lineNumber * lineHeight) / 2;
|
|||
|
|
const x = text.getAttribute('x');
|
|||
|
|
const y = text.getAttribute('y');
|
|||
|
|
tspans.forEach((t, i) => {
|
|||
|
|
t.setAttribute('x', x);
|
|||
|
|
t.setAttribute('y', y);
|
|||
|
|
t.setAttribute('dy', `${initial + i * lineHeight}em`);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
*
|
|||
|
|
* @param {{x: number, y: number}} current
|
|||
|
|
* @param {ReadonlyArray<{x: number, y: number}>} interior
|
|||
|
|
* @param {ReadonlyArray<{x: number, y: number}>} exterior
|
|||
|
|
* @returns {number}
|
|||
|
|
*/
|
|||
|
|
function circleMargin(current, interior, exterior) {
|
|||
|
|
let margin = interior[0].radius - distance(interior[0], current);
|
|||
|
|
|
|||
|
|
for (let i = 1; i < interior.length; ++i) {
|
|||
|
|
const m = interior[i].radius - distance(interior[i], current);
|
|||
|
|
if (m <= margin) {
|
|||
|
|
margin = m;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (let i = 0; i < exterior.length; ++i) {
|
|||
|
|
const m = distance(exterior[i], current) - exterior[i].radius;
|
|||
|
|
if (m <= margin) {
|
|||
|
|
margin = m;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return margin;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* compute the center of some circles by maximizing the margin of
|
|||
|
|
* the center point relative to the circles (interior) after subtracting
|
|||
|
|
* nearby circles (exterior)
|
|||
|
|
* @param {readonly {x: number, y: number, radius: number}[]} interior
|
|||
|
|
* @param {readonly {x: number, y: number, radius: number}[]} exterior
|
|||
|
|
* @param {boolean} symmetricalTextCentre
|
|||
|
|
* @returns {{x:number, y: number}}
|
|||
|
|
*/
|
|||
|
|
function computeTextCentre(interior, exterior, symmetricalTextCentre) {
|
|||
|
|
// get an initial estimate by sampling around the interior circles
|
|||
|
|
// and taking the point with the biggest margin
|
|||
|
|
/** @type {{x: number, y: number}[]} */
|
|||
|
|
const points = [];
|
|||
|
|
for (const c of interior) {
|
|||
|
|
points.push({ x: c.x, y: c.y });
|
|||
|
|
points.push({ x: c.x + c.radius / 2, y: c.y });
|
|||
|
|
points.push({ x: c.x - c.radius / 2, y: c.y });
|
|||
|
|
points.push({ x: c.x, y: c.y + c.radius / 2 });
|
|||
|
|
points.push({ x: c.x, y: c.y - c.radius / 2 });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let initial = points[0];
|
|||
|
|
let margin = circleMargin(points[0], interior, exterior);
|
|||
|
|
|
|||
|
|
for (let i = 1; i < points.length; ++i) {
|
|||
|
|
const m = circleMargin(points[i], interior, exterior);
|
|||
|
|
if (m >= margin) {
|
|||
|
|
initial = points[i];
|
|||
|
|
margin = m;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// maximize the margin numerically
|
|||
|
|
const solution = nelderMead(
|
|||
|
|
(p) => -1 * circleMargin({ x: p[0], y: p[1] }, interior, exterior),
|
|||
|
|
[initial.x, initial.y],
|
|||
|
|
{ maxIterations: 500, minErrorDelta: 1e-10 }
|
|||
|
|
).x;
|
|||
|
|
|
|||
|
|
const ret = { x: symmetricalTextCentre ? 0 : solution[0], y: solution[1] };
|
|||
|
|
|
|||
|
|
// check solution, fallback as needed (happens if fully overlapped
|
|||
|
|
// etc)
|
|||
|
|
let valid = true;
|
|||
|
|
for (const i of interior) {
|
|||
|
|
if (distance(ret, i) > i.radius) {
|
|||
|
|
valid = false;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (const e of exterior) {
|
|||
|
|
if (distance(ret, e) < e.radius) {
|
|||
|
|
valid = false;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (valid) {
|
|||
|
|
return ret;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (interior.length == 1) {
|
|||
|
|
return { x: interior[0].x, y: interior[0].y };
|
|||
|
|
}
|
|||
|
|
const areaStats = {};
|
|||
|
|
intersectionArea(interior, areaStats);
|
|||
|
|
|
|||
|
|
if (areaStats.arcs.length === 0) {
|
|||
|
|
return { x: 0, y: -1000, disjoint: true };
|
|||
|
|
}
|
|||
|
|
if (areaStats.arcs.length == 1) {
|
|||
|
|
return { x: areaStats.arcs[0].circle.x, y: areaStats.arcs[0].circle.y };
|
|||
|
|
}
|
|||
|
|
if (exterior.length) {
|
|||
|
|
// try again without other circles
|
|||
|
|
return computeTextCentre(interior, []);
|
|||
|
|
}
|
|||
|
|
// take average of all the points in the intersection
|
|||
|
|
// polygon. this should basically never happen
|
|||
|
|
// and has some issues:
|
|||
|
|
// https://github.com/benfred/venn.js/issues/48#issuecomment-146069777
|
|||
|
|
return getCenter(areaStats.arcs.map((a) => a.p1));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// given a dictionary of {setid : circle}, returns
|
|||
|
|
// a dictionary of setid to list of circles that completely overlap it
|
|||
|
|
function getOverlappingCircles(circles) {
|
|||
|
|
const ret = {};
|
|||
|
|
const circleids = Object.keys(circles);
|
|||
|
|
for (const circleid of circleids) {
|
|||
|
|
ret[circleid] = [];
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < circleids.length; i++) {
|
|||
|
|
const ci = circleids[i];
|
|||
|
|
const a = circles[ci];
|
|||
|
|
for (let j = i + 1; j < circleids.length; ++j) {
|
|||
|
|
const cj = circleids[j];
|
|||
|
|
const b = circles[cj];
|
|||
|
|
const d = distance(a, b);
|
|||
|
|
|
|||
|
|
if (d + b.radius <= a.radius + 1e-10) {
|
|||
|
|
ret[cj].push(ci);
|
|||
|
|
} else if (d + a.radius <= b.radius + 1e-10) {
|
|||
|
|
ret[ci].push(cj);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return ret;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function computeTextCentres(circles, areas, symmetricalTextCentre) {
|
|||
|
|
const ret = {};
|
|||
|
|
const overlapped = getOverlappingCircles(circles);
|
|||
|
|
for (let i = 0; i < areas.length; ++i) {
|
|||
|
|
const area = areas[i].sets;
|
|||
|
|
const areaids = {};
|
|||
|
|
const exclude = {};
|
|||
|
|
|
|||
|
|
for (let j = 0; j < area.length; ++j) {
|
|||
|
|
areaids[area[j]] = true;
|
|||
|
|
const overlaps = overlapped[area[j]];
|
|||
|
|
// keep track of any circles that overlap this area,
|
|||
|
|
// and don't consider for purposes of computing the text
|
|||
|
|
// centre
|
|||
|
|
for (let k = 0; k < overlaps.length; ++k) {
|
|||
|
|
exclude[overlaps[k]] = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const interior = [];
|
|||
|
|
const exterior = [];
|
|||
|
|
for (let setid in circles) {
|
|||
|
|
if (setid in areaids) {
|
|||
|
|
interior.push(circles[setid]);
|
|||
|
|
} else if (!(setid in exclude)) {
|
|||
|
|
exterior.push(circles[setid]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const centre = computeTextCentre(interior, exterior, symmetricalTextCentre);
|
|||
|
|
ret[area] = centre;
|
|||
|
|
if (centre.disjoint && areas[i].size > 0) {
|
|||
|
|
console.log('WARNING: area ' + area + ' not represented on screen');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return ret;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// sorts all areas in the venn diagram, so that
|
|||
|
|
// a particular area is on top (relativeTo) - and
|
|||
|
|
// all other areas are so that the smallest areas are on top
|
|||
|
|
function sortAreas(div, relativeTo) {
|
|||
|
|
// figure out sets that are completely overlapped by relativeTo
|
|||
|
|
const overlaps = getOverlappingCircles(div.selectAll('svg').datum());
|
|||
|
|
const exclude = new Set();
|
|||
|
|
for (const check of relativeTo.sets) {
|
|||
|
|
for (let setid in overlaps) {
|
|||
|
|
const overlap = overlaps[setid];
|
|||
|
|
for (let j = 0; j < overlap.length; ++j) {
|
|||
|
|
if (overlap[j] == check) {
|
|||
|
|
exclude.add(setid);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// checks that all sets are in exclude;
|
|||
|
|
function shouldExclude(sets) {
|
|||
|
|
return sets.every((set) => !exclude.has(set));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// need to sort div's so that Z order is correct
|
|||
|
|
div.selectAll('g').sort((a, b) => {
|
|||
|
|
// highest order set intersections first
|
|||
|
|
if (a.sets.length != b.sets.length) {
|
|||
|
|
return a.sets.length - b.sets.length;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (a == relativeTo) {
|
|||
|
|
return shouldExclude(b.sets) ? -1 : 1;
|
|||
|
|
}
|
|||
|
|
if (b == relativeTo) {
|
|||
|
|
return shouldExclude(a.sets) ? 1 : -1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// finally by size
|
|||
|
|
return b.size - a.size;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @param {number} x
|
|||
|
|
* @param {number} y
|
|||
|
|
* @param {number} r
|
|||
|
|
* @returns {string}
|
|||
|
|
*/
|
|||
|
|
function circlePath(x, y, r) {
|
|||
|
|
const ret = [];
|
|||
|
|
ret.push('\nM', x, y);
|
|||
|
|
ret.push('\nm', -r, 0);
|
|||
|
|
ret.push('\na', r, r, 0, 1, 0, r * 2, 0);
|
|||
|
|
ret.push('\na', r, r, 0, 1, 0, -r * 2, 0);
|
|||
|
|
return ret.join(' ');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* inverse of the circlePath function, returns a circle object from an svg path
|
|||
|
|
* @param {string} path
|
|||
|
|
* @returns {{x: number, y: number, radius: number}}
|
|||
|
|
*/
|
|||
|
|
function circleFromPath(path) {
|
|||
|
|
const tokens = path.split(' ');
|
|||
|
|
return { x: Number.parseFloat(tokens[1]), y: Number.parseFloat(tokens[2]), radius: -Number.parseFloat(tokens[4]) };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function intersectionAreaArcs(circles) {
|
|||
|
|
if (circles.length === 0) {
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
const stats = {};
|
|||
|
|
intersectionArea(circles, stats);
|
|||
|
|
return stats.arcs;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function arcsToPath(arcs, round) {
|
|||
|
|
if (arcs.length === 0) {
|
|||
|
|
return 'M 0 0';
|
|||
|
|
}
|
|||
|
|
const rFactor = Math.pow(10, round || 0);
|
|||
|
|
const r = round != null ? (v) => Math.round(v * rFactor) / rFactor : (v) => v;
|
|||
|
|
if (arcs.length == 1) {
|
|||
|
|
const circle = arcs[0].circle;
|
|||
|
|
return circlePath(r(circle.x), r(circle.y), r(circle.radius));
|
|||
|
|
}
|
|||
|
|
// draw path around arcs
|
|||
|
|
const ret = ['\nM', r(arcs[0].p2.x), r(arcs[0].p2.y)];
|
|||
|
|
for (const arc of arcs) {
|
|||
|
|
const radius = r(arc.circle.radius);
|
|||
|
|
ret.push('\nA', radius, radius, 0, arc.large ? 1 : 0, arc.sweep ? 1 : 0, r(arc.p1.x), r(arc.p1.y));
|
|||
|
|
}
|
|||
|
|
return ret.join(' ');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* returns a svg path of the intersection area of a bunch of circles
|
|||
|
|
* @param {ReadonlyArray<{x: number, y: number, radius: number}>} circles
|
|||
|
|
* @returns {string}
|
|||
|
|
*/
|
|||
|
|
function intersectionAreaPath(circles, round) {
|
|||
|
|
return arcsToPath(intersectionAreaArcs(circles), round);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function layout(data, options = {}) {
|
|||
|
|
const {
|
|||
|
|
lossFunction: loss,
|
|||
|
|
layoutFunction: layout = venn,
|
|||
|
|
normalize = true,
|
|||
|
|
orientation = Math.PI / 2,
|
|||
|
|
orientationOrder,
|
|||
|
|
width = 600,
|
|||
|
|
height = 350,
|
|||
|
|
padding = 15,
|
|||
|
|
scaleToFit = false,
|
|||
|
|
symmetricalTextCentre = false,
|
|||
|
|
distinct,
|
|||
|
|
round = 2,
|
|||
|
|
} = options;
|
|||
|
|
|
|||
|
|
let solution = layout(data, {
|
|||
|
|
lossFunction: loss === 'default' || !loss ? lossFunction : loss === 'logRatio' ? logRatioLossFunction : loss,
|
|||
|
|
distinct,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (normalize) {
|
|||
|
|
solution = normalizeSolution(solution, orientation, orientationOrder);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const circles = scaleSolution(solution, width, height, padding, scaleToFit);
|
|||
|
|
const textCentres = computeTextCentres(circles, data, symmetricalTextCentre);
|
|||
|
|
|
|||
|
|
const circleLookup = new Map(
|
|||
|
|
Object.keys(circles).map((set) => [
|
|||
|
|
set,
|
|||
|
|
{
|
|||
|
|
set,
|
|||
|
|
x: circles[set].x,
|
|||
|
|
y: circles[set].y,
|
|||
|
|
radius: circles[set].radius,
|
|||
|
|
},
|
|||
|
|
])
|
|||
|
|
);
|
|||
|
|
const helpers = data.map((area) => {
|
|||
|
|
const circles = area.sets.map((s) => circleLookup.get(s));
|
|||
|
|
const arcs = intersectionAreaArcs(circles);
|
|||
|
|
const path = arcsToPath(arcs, round);
|
|||
|
|
return { circles, arcs, path, area, has: new Set(area.sets) };
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function genDistinctPath(sets) {
|
|||
|
|
let r = '';
|
|||
|
|
for (const e of helpers) {
|
|||
|
|
if (e.has.size > sets.length && sets.every((s) => e.has.has(s))) {
|
|||
|
|
r += ' ' + e.path;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return r;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return helpers.map(({ circles, arcs, path, area }) => {
|
|||
|
|
return {
|
|||
|
|
data: area,
|
|||
|
|
text: textCentres[area.sets],
|
|||
|
|
circles,
|
|||
|
|
arcs,
|
|||
|
|
path,
|
|||
|
|
distinctPath: path + genDistinctPath(area.sets),
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export { VennDiagram, bestInitialLayout, circleArea, circleCircleIntersection, circleFromPath, circleOverlap, circlePath, computeTextCentre, computeTextCentres, disjointCluster, distance, distanceFromIntersectArea, greedyLayout, intersectionArea, intersectionAreaPath, layout, logRatioLossFunction, lossFunction, normalizeSolution, scaleSolution, sortAreas, venn, wrapText };
|