Chen Xiao
+22
@@ -0,0 +1,22 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2013 Ben Frederickson
|
||||
Copyright (c) 2021 Samuel Gratzl
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+267
@@ -0,0 +1,267 @@
|
||||
# venn.js
|
||||
|
||||
[![License: MIT][mit-image]][mit-url] [![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]
|
||||
|
||||
This is a maintained fork of [https://github.com/benfred/venn.js](https://github.com/benfred/venn.js).
|
||||
|
||||
A javascript library for laying out area proportional venn and euler diagrams.
|
||||
|
||||
Details of how this library works can be found on the [blog
|
||||
post](https://www.benfrederickson.com/venn-diagrams-with-d3.js/)
|
||||
the original author wrote about this. A follow up post [discusses testing strategy and
|
||||
algorithmic improvements](https://www.benfrederickson.com/better-venn-diagrams/).
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm install --save @upsetjs/venn.js
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
There are two modes in which this library can be used.
|
||||
First, in a managed case by using the `VennDiagram` function that will render the data using D3.
|
||||
Second, in a manual case as a layout library that is just preparing the data for you.
|
||||
|
||||
In the following, these set data are used:
|
||||
|
||||
```js
|
||||
const sets = [
|
||||
{ sets: ['A'], size: 12 },
|
||||
{ sets: ['B'], size: 12 },
|
||||
{ sets: ['A', 'B'], size: 2 },
|
||||
];
|
||||
```
|
||||
|
||||
### Managed Usage
|
||||
|
||||
This library depends on [d3.js](https://d3js.org/) to display the venn
|
||||
diagrams.
|
||||
|
||||
##### Simple layout
|
||||
|
||||
To lay out a simple diagram, just define the sets and their sizes along with the sizes
|
||||
of all the set intersections.
|
||||
|
||||
The VennDiagram object will calculate a layout that is proportional to the
|
||||
input sizes, and display it in the appropriate selection when called:
|
||||
|
||||
```js
|
||||
const chart = venn.VennDiagram();
|
||||
d3.select('#venn').datum(sets).call(chart);
|
||||
```
|
||||
|
||||
[View this example](https://upset.js.org/venn.js/examples/simple.html)
|
||||
|
||||
[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/RwrKPEe)
|
||||
|
||||
##### Changing the Style
|
||||
|
||||
The style of the Venn Diagram can be customized by using D3 after the diagram
|
||||
has been drawn. For instance to draw a Venn Diagram with white text and a darker fill:
|
||||
|
||||
```js
|
||||
const chart = venn.VennDiagram();
|
||||
d3.select('#inverted').datum(sets).call(chart);
|
||||
|
||||
d3.selectAll('#inverted .venn-circle path').style('fill-opacity', 0.8);
|
||||
|
||||
d3.selectAll('#inverted text').style('fill', 'white');
|
||||
```
|
||||
|
||||
[View this example, along with other possible styles](https://upset.js.org/venn.js/examples/styled.html)
|
||||
|
||||
The position of text within each circle of the diagram may also be modified via the `symmetricalTextCentre` property (defaults to `false`):
|
||||
|
||||
```js
|
||||
// draw a diagram with text symmetrically positioned in each circle's centre
|
||||
const chart = venn.VennDiagram({ symmetricalTextCentre: true });
|
||||
```
|
||||
|
||||
##### Dynamic layout
|
||||
|
||||
To have a layout that reacts to a change in input, all that you need to do is
|
||||
update the dataset and call the chart again:
|
||||
|
||||
```js
|
||||
// draw the initial diagram
|
||||
const chart = venn.VennDiagram();
|
||||
d3.select('#venn').datum(getSetIntersections()).call(chart);
|
||||
|
||||
// redraw the diagram on any change in input
|
||||
d3.selectAll('input').on('change', function () {
|
||||
d3.select('#venn').datum(getSetIntersections()).call(chart);
|
||||
});
|
||||
```
|
||||
|
||||
[View this example](https://upset.js.org/venn.js/examples/dynamic.html)
|
||||
|
||||
##### Making the diagram interactive
|
||||
|
||||
Making the diagram interactive is basically the same idea as changing the style: just add event listeners to the elements in the venn diagram. To change the text size and circle colours on mouseenter:
|
||||
|
||||
```js
|
||||
d3.selectAll('#rings .venn-circle')
|
||||
.on('mouseenter', function () {
|
||||
const node = d3.select(this).transition();
|
||||
node.select('path').style('fill-opacity', 0.2);
|
||||
node.select('text').style('font-weight', '100').style('font-size', '36px');
|
||||
})
|
||||
.on('mouseleave', function () {
|
||||
const node = d3.select(this).transition();
|
||||
node.select('path').style('fill-opacity', 0);
|
||||
node.select('text').style('font-weight', '100').style('font-size', '24px');
|
||||
});
|
||||
```
|
||||
|
||||
[View this example](https://upset.js.org/venn.js/examples/interactive.html)
|
||||
|
||||
The colour scheme for the diagram's circles may also be modified via the `colorScheme` option, and the text within each circle can have its fill modified via the `textFill` option:
|
||||
|
||||
```js
|
||||
const chart = venn.VennDiagram({
|
||||
colorScheme: ['rgb(235, 237, 238)', '#F26250'],
|
||||
textFill: '#FFF',
|
||||
});
|
||||
```
|
||||
|
||||
##### Adding tooltips
|
||||
|
||||
Another common case is adding a tooltip when hovering over the elements in the diagram. The only
|
||||
tricky thing here is maintaining the correct Z-order so that the smallest intersection areas
|
||||
are on top, while still making the area that is being hovered over appear on top of the others:
|
||||
|
||||
```js
|
||||
// draw venn diagram
|
||||
const div = d3.select('#venn');
|
||||
div.datum(sets).call(venn.VennDiagram());
|
||||
|
||||
// add a tooltip
|
||||
const tooltip = d3.select('body').append('div').attr('class', 'venntooltip');
|
||||
|
||||
// add listeners to all the groups to display tooltip on mouseenter
|
||||
div
|
||||
.selectAll('g')
|
||||
.on('mouseenter', function (d) {
|
||||
// sort all the areas relative to the current item
|
||||
venn.sortAreas(div, d);
|
||||
|
||||
// Display a tooltip with the current size
|
||||
tooltip.transition().duration(400).style('opacity', 0.9);
|
||||
tooltip.text(d.size + ' users');
|
||||
|
||||
// highlight the current path
|
||||
const selection = d3.select(this).transition('tooltip').duration(400);
|
||||
selection
|
||||
.select('path')
|
||||
.style('stroke-width', 3)
|
||||
.style('fill-opacity', d.sets.length == 1 ? 0.4 : 0.1)
|
||||
.style('stroke-opacity', 1);
|
||||
})
|
||||
|
||||
.on('mousemove', function () {
|
||||
tooltip.style('left', d3.event.pageX + 'px').style('top', d3.event.pageY - 28 + 'px');
|
||||
})
|
||||
|
||||
.on('mouseleave', function (d) {
|
||||
tooltip.transition().duration(400).style('opacity', 0);
|
||||
const selection = d3.select(this).transition('tooltip').duration(400);
|
||||
selection
|
||||
.select('path')
|
||||
.style('stroke-width', 0)
|
||||
.style('fill-opacity', d.sets.length == 1 ? 0.25 : 0.0)
|
||||
.style('stroke-opacity', 0);
|
||||
});
|
||||
```
|
||||
|
||||
[View this example](https://upset.js.org/venn.js/examples/intersection_tooltip.html)
|
||||
|
||||
## Manual Usage
|
||||
|
||||
Besides the handy `VennDiagram` wrapper, the library can used as a pure layout function using the `layout` method.
|
||||
One can render the result manually in D3 or even in HTML Canvas.
|
||||
|
||||
The signature of the function can be found as part of the TypeScript typings at [index.ds.ts](https://github.com/upsetjs/venn.js/blob/master/src/index.d.ts)
|
||||
|
||||
### Custom D3 Rendering
|
||||
|
||||
```js
|
||||
// compute layout data
|
||||
const data = venn.layout(sets);
|
||||
// custom data binding and rendering
|
||||
const g = d3
|
||||
.select('#venn')
|
||||
.selectAll('g')
|
||||
.data(data)
|
||||
.join((enter) => {
|
||||
const g = enter.append('g');
|
||||
g.append('title');
|
||||
g.append('path');
|
||||
g.append('text');
|
||||
return g;
|
||||
});
|
||||
g.select('title').text((d) => d.data.sets.toString());
|
||||
g.select('text')
|
||||
.text((d) => d.data.sets.toString())
|
||||
.attr('x', (d) => d.text.x)
|
||||
.attr('y', (d) => d.text.y);
|
||||
g.select('path')
|
||||
.attr('d', (d) => d.path)
|
||||
.style('fill', (d, i) => (d.circles.length === 1 ? d3.schemeCategory10[i] : undefined));
|
||||
```
|
||||
|
||||
[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/xxZgGeP)
|
||||
|
||||
### Canvas Rendering
|
||||
|
||||
```js
|
||||
const data = venn.layout(sets, { width: 600, height: 350 });
|
||||
const ctx = document.querySelector('canvas').getContext('2d');
|
||||
|
||||
data.forEach((d, i) => {
|
||||
ctx.fillStyle = `hsla(${(360 * i) / data.length},80%,50%,0.6)`;
|
||||
ctx.fill(new Path2D(d.path));
|
||||
});
|
||||
|
||||
ctx.font = '16px Helvetica Neue, Helvetica, Arial, sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'central';
|
||||
ctx.fillStyle = 'white';
|
||||
|
||||
data.forEach((d, i) => {
|
||||
ctx.fillText(d.data.sets.toString(), d.text.x, d.text.y);
|
||||
});
|
||||
```
|
||||
|
||||
[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/NWxdqZW)
|
||||
|
||||
## License
|
||||
|
||||
Released under the MIT License.
|
||||
|
||||
## Development Environment
|
||||
|
||||
```sh
|
||||
npm i -g yarn
|
||||
yarn install
|
||||
yarn sdks vscode
|
||||
```
|
||||
|
||||
### Common commands
|
||||
|
||||
```sh
|
||||
yarn test
|
||||
yarn lint
|
||||
yarn format
|
||||
yarn build
|
||||
yarn release
|
||||
yarn release:pre
|
||||
```
|
||||
|
||||
[mit-image]: https://img.shields.io/badge/License-MIT-yellow.svg
|
||||
[mit-url]: https://opensource.org/licenses/MIT
|
||||
[npm-image]: https://badge.fury.io/js/%40upsetjs%2Fvenn.js.svg
|
||||
[npm-url]: https://npmjs.org/package/@upsetjs/venn.js
|
||||
[github-actions-image]: https://github.com/upsetjs/venn.js/workflows/ci/badge.svg
|
||||
[github-actions-url]: https://github.com/upsetjs/venn.js/actions
|
||||
[codepen]: https://img.shields.io/badge/CodePen-open-blue?logo=codepen
|
||||
+2214
File diff suppressed because it is too large
Load Diff
+2166
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+105
@@ -0,0 +1,105 @@
|
||||
{
|
||||
"name": "@upsetjs/venn.js",
|
||||
"description": "Area Proportional Venn and Euler Diagrams",
|
||||
"version": "2.0.0",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"author": {
|
||||
"name": "Ben Frederickson",
|
||||
"email": "ben@benfrederickson.com",
|
||||
"url": "https://www.benfrederickson.com"
|
||||
},
|
||||
"contributors": [
|
||||
{
|
||||
"name": "Samuel Gratzl",
|
||||
"email": "samu@sgratzl.com",
|
||||
"url": "https://wwww.sgratzl.com"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/upsetjs/venn.js",
|
||||
"bugs": {
|
||||
"url": "https://github.com/upsetjs/venn.js/issues"
|
||||
},
|
||||
"keywords": [
|
||||
"Venn",
|
||||
"Euler"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/upsetjs/venn.js.git"
|
||||
},
|
||||
"directories": {
|
||||
"example": "examples",
|
||||
"test": "tests"
|
||||
},
|
||||
"type": "module",
|
||||
"main": "build/venn.esm.js",
|
||||
"module": "build/venn.esm.js",
|
||||
"require": "build/venn.js",
|
||||
"unpkg": "build/venn.min.js",
|
||||
"jsdelivr": "build/venn.min.js",
|
||||
"types": "src/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./build/venn.esm.js",
|
||||
"require": "./build/index.js",
|
||||
"scripts": "./build/venn.min.js",
|
||||
"types": "./src/index.d.ts"
|
||||
}
|
||||
},
|
||||
"sideEffects": false,
|
||||
"files": [
|
||||
"build",
|
||||
"src/**/*.js",
|
||||
"src/**/*.d.ts"
|
||||
],
|
||||
"browserslist": [
|
||||
"Firefox ESR",
|
||||
"last 2 Chrome versions",
|
||||
"last 2 Firefox versions"
|
||||
],
|
||||
"optionalDependencies": {
|
||||
"d3-selection": "^3.0.0",
|
||||
"d3-transition": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.26.0",
|
||||
"@babel/plugin-transform-runtime": "^7.25.9",
|
||||
"@babel/preset-env": "^7.26.0",
|
||||
"@eslint/js": "^9.15.0",
|
||||
"@rollup/plugin-babel": "^6.0.4",
|
||||
"@rollup/plugin-commonjs": "^28.0.1",
|
||||
"@rollup/plugin-node-resolve": "^15.3.0",
|
||||
"@yarnpkg/sdks": "^3.2.0",
|
||||
"canvas": "^2.11.2",
|
||||
"d3-selection": "^3.0.0",
|
||||
"d3-transition": "^3.0.1",
|
||||
"eslint": "^9.15.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-prettier": "^5.2.1",
|
||||
"fmin": "patch:fmin@npm%3A0.0.4#~/.yarn/patches/fmin-npm-0.0.4-e439f499bd.patch",
|
||||
"globals": "^15.12.0",
|
||||
"jest-image-snapshot": "^6.4.0",
|
||||
"jsdom": "^25.0.1",
|
||||
"prettier": "^3.3.3",
|
||||
"rimraf": "^6.0.1",
|
||||
"rollup": "^4.27.2",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"vite": "^5.4.11",
|
||||
"vitest": "^2.1.5"
|
||||
},
|
||||
"scripts": {
|
||||
"clean": "rimraf --glob build *.tgz",
|
||||
"watch": "rollup -c -w",
|
||||
"lint": "eslint src",
|
||||
"test": "vitest --passWithNoTests",
|
||||
"test:watch": "vitest --watch",
|
||||
"posttest": "npm run lint",
|
||||
"prebuild": "npm run clean && npm test",
|
||||
"build": "rollup -c",
|
||||
"format": "prettier --write examples \"*.{md,json,js,yml}\" \"{.github,src,examples}/**\""
|
||||
},
|
||||
"packageManager": "yarn@4.5.1"
|
||||
}
|
||||
+266
@@ -0,0 +1,266 @@
|
||||
const SMALL = 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}
|
||||
*/
|
||||
export 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, 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}
|
||||
*/
|
||||
export function containedInCircles(point, circles) {
|
||||
return circles.every((circle) => distance(point, circle) < circle.radius + SMALL);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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}
|
||||
**/
|
||||
export 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}
|
||||
**/
|
||||
export 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}
|
||||
*/
|
||||
export 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}>}
|
||||
**/
|
||||
export 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}}
|
||||
*/
|
||||
export 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;
|
||||
}
|
||||
+125
@@ -0,0 +1,125 @@
|
||||
import { distance, intersectionArea, circleCircleIntersection, circleOverlap, circleArea } from './circleintersection';
|
||||
import { describe, test, expect } from 'vitest';
|
||||
|
||||
describe('circleArea', () => {
|
||||
test('empty circle test', () => {
|
||||
expect(circleArea(10, 0)).toBeCloseTo(0);
|
||||
});
|
||||
test('half circle test', () => {
|
||||
expect(circleArea(10, 10)).toBeCloseTo((Math.PI * 10 * 10) / 2);
|
||||
});
|
||||
test('full circle test', () => {
|
||||
expect(circleArea(10, 20)).toBeCloseTo(Math.PI * 10 * 10);
|
||||
});
|
||||
});
|
||||
|
||||
describe('circleOverlap', () => {
|
||||
test('non overlapping circles test', () => {
|
||||
expect(circleOverlap(10, 10, 200)).toBeCloseTo(0);
|
||||
});
|
||||
|
||||
test('full overlapping circles test', () => {
|
||||
expect(circleOverlap(10, 10, 0)).toBeCloseTo(Math.PI * 10 * 10);
|
||||
expect(circleOverlap(10, 5, 5)).toBeCloseTo(Math.PI * 5 * 5);
|
||||
});
|
||||
});
|
||||
|
||||
describe('circleCircleIntersection', () => {
|
||||
function testIntersection(p1, p2) {
|
||||
const points = circleCircleIntersection(p1, p2);
|
||||
// make sure that points are appropriately spaced
|
||||
for (let i = 0; i < points.length; i++) {
|
||||
const point = points[i];
|
||||
expect(distance(point, p1)).toBeCloseTo(p1.radius);
|
||||
expect(distance(point, p2)).toBeCloseTo(p2.radius);
|
||||
}
|
||||
|
||||
return points;
|
||||
}
|
||||
|
||||
test('fully contained', () => {
|
||||
expect(circleCircleIntersection({ x: 0, y: 3, radius: 10 }, { x: 3, y: 0, radius: 20 })).toHaveLength(0);
|
||||
});
|
||||
|
||||
test('fully disjoint', () => {
|
||||
expect(circleCircleIntersection({ x: 0, y: 0, radius: 10 }, { x: 21, y: 0, radius: 10 })).toHaveLength(0);
|
||||
});
|
||||
|
||||
test('midway between 2 points on y axis', () => {
|
||||
const points = testIntersection(
|
||||
{ x: 0, y: 0, radius: 10 },
|
||||
{ x: 10, y: 0, radius: 10 },
|
||||
'test midway intersection'
|
||||
);
|
||||
expect(points).toHaveLength(2);
|
||||
expect(points[0].x).toBeCloseTo(5);
|
||||
expect(points[1].x).toBeCloseTo(5);
|
||||
expect(points[0].y).toBeCloseTo(-1 * points[1].y);
|
||||
});
|
||||
test('failing case from input', () => {
|
||||
const points = testIntersection({ radius: 10, x: 15, y: 5 }, { radius: 10, x: 20, y: 0 }, 'test intersection2');
|
||||
expect(points).toHaveLength(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('intersectionArea', () => {
|
||||
test('0', () => {
|
||||
// each one of these circles overlaps all the others, but the total overlap is still 0
|
||||
const circles = [
|
||||
{ x: 0.909, y: 0.905, radius: 0.548 },
|
||||
{ x: 0.765, y: 0.382, radius: 0.703 },
|
||||
{ x: 0.63, y: 0.019, radius: 0.449 },
|
||||
{ x: 0.21, y: 0.755, radius: 0.656 },
|
||||
{ x: 0.276, y: 0.723, radius: 1.145 },
|
||||
{ x: 0.141, y: 0.585, radius: 0.419 },
|
||||
];
|
||||
|
||||
const area = intersectionArea(circles);
|
||||
expect(area).toBe(0);
|
||||
});
|
||||
test('1', () => {
|
||||
// no intersection points, but the smallest circle is completely overlapped by each of the others
|
||||
const circles = [
|
||||
{ x: 0.426, y: 0.882, radius: 0.944 },
|
||||
{ x: 0.24, y: 0.685, radius: 0.992 },
|
||||
{ x: 0.01, y: 0.909, radius: 1.161 },
|
||||
{ x: 0.54, y: 0.475, radius: 0.41 },
|
||||
];
|
||||
|
||||
expect(circles[3].radius * circles[3].radius * Math.PI).toBeCloseTo(intersectionArea(circles));
|
||||
});
|
||||
});
|
||||
|
||||
describe('randomFailures', () => {
|
||||
test('0', () => {
|
||||
const circles = [
|
||||
{ x: 0.501, y: 0.32, radius: 0.629 },
|
||||
{ x: 0.945, y: 0.022, radius: 1.015 },
|
||||
{ x: 0.021, y: 0.863, radius: 0.261 },
|
||||
{ x: 0.528, y: 0.09, radius: 0.676 },
|
||||
];
|
||||
const area = intersectionArea(circles);
|
||||
|
||||
expect(Math.abs(area - 0.0008914)).toBeLessThan(0.0001);
|
||||
});
|
||||
test('1', () => {
|
||||
const circles = [
|
||||
{ x: 9.154829758385864, y: 0, size: 226, radius: 8.481629223064205 },
|
||||
{ x: 5.806079662851866, y: 7.4438023223126795, size: 733, radius: 15.274853405932202 },
|
||||
{ x: 9.484491297623553, y: 4.064806303558571, size: 332, radius: 10.280023453913834 },
|
||||
{ x: 10.56492833796709, y: 3.0723147554880175, size: 244, radius: 8.812923024107548 },
|
||||
];
|
||||
|
||||
const area = intersectionArea(circles);
|
||||
expect(area).toBeCloseTo(10.96362);
|
||||
});
|
||||
test('2', () => {
|
||||
const circles = [
|
||||
{ x: -0.0014183481763938425, y: 0.0006071174738860746, radius: 510.3115834996166 },
|
||||
{ x: 875.0163281608848, y: 0.0007003612396158774, radius: 465.1793581792228 },
|
||||
{ x: 462.7394999567192, y: 387.9359963330729, radius: 172.62633992134658 },
|
||||
];
|
||||
const area = intersectionArea(circles);
|
||||
expect(area).not.toBeNaN();
|
||||
});
|
||||
});
|
||||
+783
@@ -0,0 +1,783 @@
|
||||
import { venn, lossFunction, logRatioLossFunction, normalizeSolution, scaleSolution } from './layout';
|
||||
import { intersectionArea, distance, getCenter } from './circleintersection';
|
||||
import { nelderMead } from 'fmin';
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
export 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
|
||||
export 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}}
|
||||
*/
|
||||
export 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;
|
||||
}
|
||||
|
||||
export 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
|
||||
export 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}
|
||||
*/
|
||||
export 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}}
|
||||
*/
|
||||
export 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}
|
||||
*/
|
||||
export function intersectionAreaPath(circles, round) {
|
||||
return arcsToPath(intersectionAreaArcs(circles), round);
|
||||
}
|
||||
|
||||
export 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),
|
||||
};
|
||||
});
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
import { computeTextCentre } from './diagram';
|
||||
import { describe, test, expect } from 'vitest';
|
||||
|
||||
describe('computeTextCentre', () => {
|
||||
test('0', () => {
|
||||
const center = computeTextCentre([{ x: 0, y: 0, radius: 1 }], []);
|
||||
expect(center.x).toBeCloseTo(0);
|
||||
expect(center.y).toBeCloseTo(0);
|
||||
});
|
||||
|
||||
test('1', () => {
|
||||
const center = computeTextCentre([{ x: 0, y: 0, radius: 1 }], [{ x: 0, y: 1, radius: 1 }]);
|
||||
expect(center.x).toBeCloseTo(0, 4);
|
||||
expect(center.y).toBeCloseTo(-0.5);
|
||||
});
|
||||
});
|
||||
+319
@@ -0,0 +1,319 @@
|
||||
import { Selection } from 'd3-selection';
|
||||
|
||||
export interface ISetOverlap {
|
||||
sets: readonly string[];
|
||||
size: number;
|
||||
weight?: number;
|
||||
}
|
||||
|
||||
export interface IPoint {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
export interface IHierarchyPoint extends IPoint {
|
||||
parentIndex: [number, number];
|
||||
}
|
||||
|
||||
export interface ICircle {
|
||||
x: number;
|
||||
y: number;
|
||||
radius: number;
|
||||
setid: string;
|
||||
}
|
||||
|
||||
export interface ISolution {
|
||||
[set: string]: ICircle;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
export function venn(areas: readonly ISetOverlap[], parameters?: any): ISolution;
|
||||
|
||||
/**
|
||||
* Returns the distance necessary for two circles of radius r1 + r2 to
|
||||
* have the overlap area 'overlap'
|
||||
*/
|
||||
export function distanceFromIntersectArea(r1: number, r2: number, overlap: number): number;
|
||||
|
||||
/**
|
||||
* takes the best working variant of either constrained MDS or greedy
|
||||
*/
|
||||
export function bestInitialLayout(areas: readonly ISetOverlap[], params?: any): ISolution;
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
export function greedyLayout(areas: readonly ISetOverlap[], params?: any): ISolution;
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
export function lossFunction(circles: ISolution, areas: readonly ISetOverlap[]): number;
|
||||
|
||||
export function logRatioLossFunction(circles: ISolution, areas: readonly ISetOverlap[]): number;
|
||||
|
||||
export function disjointCluster(circles: ICircle[]): ICircle[][];
|
||||
|
||||
export function normalizeSolution(
|
||||
solution: ISolution,
|
||||
orientation?: number,
|
||||
orientationOrder?: (a: ICircle, b: ICircle) => number
|
||||
): ISolution;
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
export function scaleSolution(
|
||||
solution: ISolution,
|
||||
width: number,
|
||||
height: number,
|
||||
padding: number,
|
||||
scaleToFit?: boolean
|
||||
): ISolution;
|
||||
|
||||
/**
|
||||
* Returns the intersection area of a bunch of circles (where each circle
|
||||
* is an object having an x,y and radius property)
|
||||
*/
|
||||
export function intersectionArea(
|
||||
circles: readonly ICircle[],
|
||||
stats?: {
|
||||
area?: number;
|
||||
areaArea?: number;
|
||||
polygonArea?: number;
|
||||
arcs?: readonly { circle: ICircle; width: number; p1: IPoint; p2: IPoint }[];
|
||||
innerPoints?: readonly IHierarchyPoint[];
|
||||
intersectionPoints?: readonly IHierarchyPoint[];
|
||||
}
|
||||
): number;
|
||||
|
||||
/**
|
||||
* Circular segment area calculation. See http://mathworld.wolfram.com/CircularSegment.html
|
||||
*/
|
||||
export function circleArea(r: number, width: number): number;
|
||||
|
||||
/**
|
||||
* euclidean distance between two points
|
||||
*/
|
||||
export function distance(p1: IPoint, p2: IPoint): number;
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
export function circleOverlap(r1: number, r2: number, d: number): number;
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
export function circleCircleIntersection(p1: ICircle, p2: ICircle): readonly IPoint[];
|
||||
|
||||
// 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
|
||||
export function wrapText(circles: ISolution, labeller: (d: any) => string): (this: SVGTextElement) => void;
|
||||
|
||||
/**
|
||||
* 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}}
|
||||
*/
|
||||
export function computeTextCentre(
|
||||
interior: readonly ICircle[],
|
||||
exterior: readonly ICircle[],
|
||||
symmetricalTextCentre?: boolean
|
||||
): IPoint;
|
||||
|
||||
export function computeTextCentres(
|
||||
circles: ISolution,
|
||||
areas: readonly ISetOverlap[],
|
||||
symmetricalTextCentre?: boolean
|
||||
): { [set: string]: IPoint };
|
||||
|
||||
// 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
|
||||
export function sortAreas(div: Selection<any, any, any, unknown>, relativeTo: { sets: readonly string[] }): void;
|
||||
|
||||
export function circlePath(x: number, y: number, r: number): string;
|
||||
|
||||
/**
|
||||
* inverse of the circlePath function, returns a circle object from an svg path
|
||||
*/
|
||||
export function circleFromPath(path: string): ICircle;
|
||||
|
||||
/**
|
||||
* returns a svg path of the intersection area of a bunch of circles
|
||||
*/
|
||||
export function intersectionAreaPath(circles: readonly ICircle[]): string;
|
||||
|
||||
export interface IVennDiagramOptions {
|
||||
colourScheme?: readonly string[];
|
||||
colorScheme?: readonly string[];
|
||||
symmetricalTextCentre?: boolean;
|
||||
textFill?: string;
|
||||
}
|
||||
|
||||
export interface IStyledSetOverlap extends ISetOverlap {
|
||||
color?: string;
|
||||
colour?: string;
|
||||
}
|
||||
|
||||
export interface IVennDiagram {
|
||||
(selection: Selection<HTMLElement, readonly IStyledSetOverlap[], any, any>): {
|
||||
circles: ISolution;
|
||||
textCentres: { [set: string]: IPoint };
|
||||
nodes: Selection<SVGGElement, IStyledSetOverlap, any, unknown>;
|
||||
enter: Selection<SVGGElement, IStyledSetOverlap, any, unknown>;
|
||||
update: Selection<SVGGElement, IStyledSetOverlap, any, unknown>;
|
||||
exit: Selection<SVGGElement, IStyledSetOverlap, any, unknown>;
|
||||
};
|
||||
|
||||
/**
|
||||
* wrap the labels
|
||||
* @default true
|
||||
*/
|
||||
wrap(): boolean;
|
||||
wrap(v: boolean): this;
|
||||
/**
|
||||
* use a view box instead of specifying with and height
|
||||
* @default false
|
||||
*/
|
||||
useViewBox(): this;
|
||||
|
||||
width(): number;
|
||||
width(v: number): this;
|
||||
height(): number;
|
||||
height(v: number): this;
|
||||
padding(): number;
|
||||
padding(v: number): this;
|
||||
colours(): (key: string) => string;
|
||||
colours(v: (key: string) => string): this;
|
||||
colors(): (key: string) => string;
|
||||
colors(v: (key: string) => string): this;
|
||||
fontSize(): string | null;
|
||||
fontSize(v: string | null): this;
|
||||
|
||||
duration(): number;
|
||||
duration(v: number): this;
|
||||
|
||||
/**
|
||||
* normalize the solution
|
||||
* @default true
|
||||
*/
|
||||
normalize(): boolean;
|
||||
normalize(v: boolean): this;
|
||||
layoutFunction(): typeof venn;
|
||||
layoutFunction(v: typeof venn): this;
|
||||
|
||||
scaleToFit(): boolean;
|
||||
scaleToFit(v: boolean): this;
|
||||
|
||||
styled(): boolean;
|
||||
styled(v: boolean): this;
|
||||
|
||||
/**
|
||||
* round generate path to the given number of digits or null to disable
|
||||
* @default null
|
||||
*/
|
||||
round(): number | null;
|
||||
round(v: number | null): this;
|
||||
|
||||
/**
|
||||
* interpret the data as distinct sets, so set A is actually set A \ B u C
|
||||
* thus A is (A \ (B u C)) u (A ^ B \ C) u (A ^ C \ B) u (A ^ B ^ C)
|
||||
* @default false
|
||||
*/
|
||||
distinct(): boolean;
|
||||
distinct(v: boolean): this;
|
||||
|
||||
orientation(): number;
|
||||
orientation(v: number): this;
|
||||
orientationOrder(): null | ((a: ICircle, b: ICircle) => number);
|
||||
orientationOrder(v: null | ((a: ICircle, b: ICircle) => number)): this;
|
||||
|
||||
lossFunction(): typeof lossFunction;
|
||||
lossFunction(v: 'logRatio'): this;
|
||||
lossFunction(v: 'default'): this;
|
||||
lossFunction(v: typeof lossFunction): this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
export function VennDiagram(options?: IVennDiagramOptions): IVennDiagram;
|
||||
|
||||
export interface IComputeVennLayoutOptions {
|
||||
width?: number;
|
||||
height?: number;
|
||||
padding?: number;
|
||||
/**
|
||||
* @default true
|
||||
*/
|
||||
normalize?: boolean;
|
||||
layoutFunction?: typeof venn;
|
||||
lossFunction?: typeof lossFunction | 'logRatio';
|
||||
scaleToFit?: boolean;
|
||||
orientation?: number;
|
||||
distinct?: boolean;
|
||||
/**
|
||||
* @default 2
|
||||
*/
|
||||
round?: number;
|
||||
orientationOrder?: (a: ICircle, b: ICircle) => number;
|
||||
}
|
||||
|
||||
export interface IVennLayout<T> {
|
||||
data: T;
|
||||
/**
|
||||
* text location
|
||||
*/
|
||||
text: IPoint;
|
||||
circles: readonly (ICircle & { set: string })[];
|
||||
arcs: readonly { circle: ICircle; width: number; p1: IPoint; p2: IPoint; large: boolean; sweep: boolean }[];
|
||||
/**
|
||||
* SVG path
|
||||
*/
|
||||
path: string;
|
||||
/**
|
||||
* distinct SVG path, render with `fill-rule: evenodd`;
|
||||
*/
|
||||
distinctPath: string;
|
||||
}
|
||||
export function layout<T extends ISetOverlap>(
|
||||
data: readonly T[],
|
||||
options?: IComputeVennLayoutOptions
|
||||
): IVennLayout<T>[];
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
export { intersectionArea, circleCircleIntersection, circleOverlap, circleArea, distance } from './circleintersection';
|
||||
export {
|
||||
venn,
|
||||
greedyLayout,
|
||||
scaleSolution,
|
||||
normalizeSolution,
|
||||
bestInitialLayout,
|
||||
lossFunction,
|
||||
logRatioLossFunction,
|
||||
disjointCluster,
|
||||
distanceFromIntersectArea,
|
||||
} from './layout';
|
||||
export {
|
||||
VennDiagram,
|
||||
wrapText,
|
||||
computeTextCentres,
|
||||
computeTextCentre,
|
||||
sortAreas,
|
||||
circlePath,
|
||||
circleFromPath,
|
||||
intersectionAreaPath,
|
||||
layout,
|
||||
} from './diagram';
|
||||
+820
@@ -0,0 +1,820 @@
|
||||
import { nelderMead, bisect, conjugateGradient, zeros, zerosM, norm2, scale } from 'fmin';
|
||||
import { intersectionArea, circleOverlap, circleCircleIntersection, distance } from './circleintersection';
|
||||
|
||||
/**
|
||||
* 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}}}
|
||||
*/
|
||||
export 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}
|
||||
*/
|
||||
export 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
|
||||
*/
|
||||
export 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
|
||||
*/
|
||||
export 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}}}
|
||||
*/
|
||||
export 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}}}
|
||||
*/
|
||||
export 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}
|
||||
*/
|
||||
export 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;
|
||||
}
|
||||
|
||||
export 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}[][]}
|
||||
*/
|
||||
export 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}}}
|
||||
*/
|
||||
export 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}}}
|
||||
*/
|
||||
export 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 }));
|
||||
}
|
||||
+119
@@ -0,0 +1,119 @@
|
||||
import { disjointCluster, normalizeSolution, greedyLayout, lossFunction, distanceFromIntersectArea } from './layout';
|
||||
import { distance, circleOverlap } from './circleintersection';
|
||||
import { describe, test, expect } from 'vitest';
|
||||
|
||||
describe('greedyLayout', () => {
|
||||
test('0', () => {
|
||||
const areas = [
|
||||
{ sets: [0], size: 0.7746543297103429 },
|
||||
{ sets: [1], size: 0.1311252856844238 },
|
||||
{ sets: [2], size: 0.2659942131443344 },
|
||||
{ sets: [3], size: 0.44600866168641723 },
|
||||
{ sets: [0, 1], size: 0.02051532092950205 },
|
||||
{ sets: [0, 2], size: 0 },
|
||||
{ sets: [0, 3], size: 0 },
|
||||
{ sets: [1, 2], size: 0 },
|
||||
{ sets: [1, 3], size: 0.07597023820511245 },
|
||||
{ sets: [2, 3], size: 0 },
|
||||
];
|
||||
const circles = greedyLayout(areas);
|
||||
const loss = lossFunction(circles, areas);
|
||||
expect(loss).toBeCloseTo(0);
|
||||
});
|
||||
|
||||
test('1', () => {
|
||||
const areas = [
|
||||
{ sets: [0], size: 0.5299368855059736 },
|
||||
{ sets: [1], size: 0.03364187025606481 },
|
||||
{ sets: [2], size: 0.3121450394871512 },
|
||||
{ sets: [3], size: 0.0514397361783036 },
|
||||
{ sets: [0, 1], size: 0.013912447645582351 },
|
||||
{ sets: [0, 2], size: 0.005903647141469598 },
|
||||
{ sets: [0, 3], size: 0.0514397361783036 },
|
||||
{ sets: [1, 2], size: 0.012138157839477597 },
|
||||
{ sets: [1, 3], size: 0.008010688232481479 },
|
||||
{ sets: [2, 3], size: 0 },
|
||||
];
|
||||
|
||||
const circles = greedyLayout(areas);
|
||||
const loss = lossFunction(circles, areas);
|
||||
expect(loss).toBeCloseTo(0);
|
||||
});
|
||||
|
||||
test('3', () => {
|
||||
// one small circle completely overlapped in the intersection
|
||||
// area of two larger circles
|
||||
const areas = [
|
||||
{ sets: [0], size: 1.7288584050841396 },
|
||||
{ sets: [1], size: 0.040875831658950056 },
|
||||
{ sets: [2], size: 2.587146019782323 },
|
||||
{ sets: [0, 1], size: 0.040875831658950056 },
|
||||
{ sets: [0, 2], size: 0.5114617575187569 },
|
||||
{ sets: [1, 2], size: 0.040875831658950056 },
|
||||
];
|
||||
|
||||
const circles = greedyLayout(areas);
|
||||
const loss = lossFunction(circles, areas);
|
||||
expect(loss).toBeCloseTo(0);
|
||||
});
|
||||
});
|
||||
|
||||
test('distanceFromIntersectArea', () => {
|
||||
function testDistanceFromIntersectArea(r1, r2, overlap) {
|
||||
const distance = distanceFromIntersectArea(r1, r2, overlap);
|
||||
expect(circleOverlap(r1, r2, distance)).toBeCloseTo(overlap);
|
||||
}
|
||||
|
||||
testDistanceFromIntersectArea(1.9544100476116797, 2.256758334191025, 11);
|
||||
|
||||
testDistanceFromIntersectArea(111.06512962798197, 113.32348546565727, 1218);
|
||||
|
||||
testDistanceFromIntersectArea(44.456564007075, 149.4335753619362, 2799);
|
||||
|
||||
testDistanceFromIntersectArea(592.89, 134.75, 56995);
|
||||
|
||||
testDistanceFromIntersectArea(139.50778247443944, 32.892784970851956, 3399);
|
||||
|
||||
testDistanceFromIntersectArea(4.886025119029199, 5.077706251929807, 75);
|
||||
});
|
||||
|
||||
test('normalizeSolution', () => {
|
||||
// test two circles that are far apart
|
||||
const solution = [
|
||||
{ x: 0, y: 0, radius: 0.5 },
|
||||
{ x: 1e10, y: 0, radius: 1.5 },
|
||||
];
|
||||
|
||||
// should be placed close together
|
||||
const normalized = normalizeSolution(solution);
|
||||
// distance should be 2, but we space things out
|
||||
expect(distance(normalized[0], normalized[1])).toBeLessThan(2.1);
|
||||
});
|
||||
|
||||
test('disjointClusters', () => {
|
||||
const input = [
|
||||
{
|
||||
x: 0.8047033110633492,
|
||||
y: 0.9396705999970436,
|
||||
radius: 0.47156485118903224,
|
||||
},
|
||||
{
|
||||
x: 0.7961132447235286,
|
||||
y: 0.014027722179889679,
|
||||
radius: 0.14554832570720466,
|
||||
},
|
||||
{
|
||||
x: 0.28841276094317436,
|
||||
y: 0.98081015329808,
|
||||
radius: 0.9851036085514352,
|
||||
},
|
||||
{
|
||||
x: 0.7689983483869582,
|
||||
y: 0.2899463507346809,
|
||||
radius: 0.7210563338827342,
|
||||
},
|
||||
];
|
||||
|
||||
const clusters = disjointCluster(input);
|
||||
expect(clusters).toHaveLength(1);
|
||||
});
|
||||
Reference in New Issue
Block a user