Published
Edited
Nov 17, 2020
5 forks
1 star
Insert cell
Insert cell
Insert cell
viewof vennDiagramWithLegend = html`
<div style="display: flex; justify-content: space-between;align-items: center;">
${draw_venn()}
${drawLegend()}
</div>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function draw_venn() {
var vennObj, sets, overlaps;
sets = data.sets;
overlaps = data.overlaps;

// get positions for each set
vennObj = venn.venn(sets, overlaps);

const node = DOM.svg(hRect, wRect);
var isMoveInChildElement = false;
var diagram,
init = true,
elem = d3
.select(node)
.attr('style', 'border: 1px solid salmon; background-color: #dadad991')
.attr("id", "venn-id"),
tooltip = d3
.select(node)
.append("div")
.attr("class", "venntooltip")
.attr('style', 'z-index: 100');

elem
.on("mousemove", function() {
if (!isMoveInChildElement) {
d3.select(this)
.style("border", '1px solid white')
.style("background-color", '#dcdcdc');
}
})
.on("mouseleave", function(d, i) {
var selection = d3
.select(this)
.attr('style', 'border: 1px solid salmon; background-color: #dadad991');
});

d3.select(node)
.append("text")
.attr("x", hRect - 50 - fontSize)
.attr("y", wRect - 20 - fontSize)
.style("fill", "#003263")
.style("stroke", "#003263")
.attr("font-size", fontSize)
.attr("text-anchor", "middle")
.text(function() {
return data.sets.reduce((a, b) => {
const newCharacter = a === 'Not ' ? 'Not ' : a + "⋃";
return newCharacter + b.label;
}, 'Not ');
});

load();
function load() {
if (init) {
// draw the diagram in the 'venn' div
diagram = venn.drawD3Diagram(elem, vennObj, wRect, hRect);
init = false;
} else {
venn.updateD3Diagram(elem, vennObj);
}
let dIntersectAll = venn.getIntersectionAll(vennObj);
// hover on all the circles
diagram.circles
.style("stroke-opacity", 0)
.style("stroke", "white")
.style("stroke-width", "2")
.on("mousemove", function() {
var x = d3.event.pageX;
var y = d3.event.pageY;
tooltip.style("left", x + "px").style("top", y + "px");
})
.on("mouseover", function(d, i) {
var selection = d3.select(this);
d3.select(this)
.moveParentToFront()
.transition()
.style("fill-opacity", .5)
.style("stroke-opacity", 1);

tooltip.transition().style("opacity", .9);
tooltip.text(d.number);
isMoveInChildElement = true;
d3.select(node).attr(
'style',
'border: 1px solid salmon; background-color: #dadad991'
);
})
.on("mouseout", function(d, i) {
d3.select(this)
.transition()
.style("fill-opacity", .3)
.style("stroke-opacity", 0);
tooltip.transition().style("opacity", 0);
isMoveInChildElement = false;
});

overlaps = overlaps.map(value => {
const dxO1O2 = Math.abs(
data.sets[value.sets[0]].x - data.sets[value.sets[1]].x
);
let deltaX =
Math.abs(
data.sets[value.sets[0]].radius +
data.sets[value.sets[1]].radius -
dxO1O2
) / 2;
const dyO1O2 = Math.abs(
data.sets[value.sets[0]].y - data.sets[value.sets[1]].y
);
let deltaY =
Math.abs(
data.sets[value.sets[0]].radius +
data.sets[value.sets[1]].radius -
dyO1O2
) / 2;
let angle = Math.atan(dyO1O2 / dxO1O2);
return {
...value,
x:
data.sets[value.sets[0]].x +
data.sets[value.sets[0]].radius -
deltaX -
10,
y:
data.sets[value.sets[0]].y +
data.sets[value.sets[0]].radius -
deltaY -
10,
angle: angle
};
});

// draw a path around each intersection area, add hover there as well
var intersections = diagram.svg
.select("g")
.append("g")
.selectAll("path")
.data(overlaps);
var intersects = intersections.enter().append("g");

intersects
.append("text")
.attr("id", function(d) {
return `intersection-text-${data.sets[d.sets[0]].label}-${data.sets[d.sets[1]].label}`;
})
.attr("x", function(d, i) {
return d.x;
})
.attr("y", function(d, i) {
return d.y;
})
// .style("transform", function(d, i) {
// return `rotate(${d.angle}rad)` })
.style("fill", "#9D4057")
.style("opacity", "0")
.style("stroke", "#9D4057")
.attr("font-size", fontSize * 0.8)
.attr("text-anchor", "middle")
.text(function(d) {
if (d.size > 0)
return `${data.sets[d.sets[0]].label} ∩ ${data.sets[d.sets[1]].label}`;
return '';
});

intersects
.append("path")
.attr("d", function(d) {
return venn.intersectionAreaSplitPath(
d.sets.map(function(j) {
return vennObj[j];
}),
true,
true
);
})
.attr("id", function(d) {
return `intersection-${data.sets[d.sets[0]].label}-${data.sets[d.sets[1]].label}`;
})
.style("fill-opacity", "0")
.style("fill", "black")
.style("stroke-opacity", 0)
.style("stroke", "white")
.style("stroke-width", "2");

intersects
.append("path")
.attr("d", function(d) {
return venn.intersectionAreaSplitPath(
d.sets.map(function(j) {
return vennObj[j];
}),
true,
false
);
})
.attr("id", function(d) {
return `intersection-right-${data.sets[d.sets[0]].label}-${data.sets[d.sets[1]].label}`;
})
.style("fill-opacity", "0")
.style("fill", "black")
.style("stroke-opacity", 0)
.style("stroke", "white")
.style("stroke-width", "2");

intersects
.append("path")
.attr("d", function(d) {
return venn.intersectionAreaSplitPath(
d.sets.map(function(j) {
return vennObj[j];
}),
false,
true
);
})
.attr("id", function(d) {
return `intersection-left-${data.sets[d.sets[0]].label}-${data.sets[d.sets[1]].label}`;
})
.style("fill-opacity", "0")
.style("fill", "black")
.style("stroke-opacity", 0)
.style("stroke", "white")
.style("stroke-width", "2");

intersections
.on("mouseover", function(d, i) {
d3.select(this).moveParentToFront();
var pathAAndB = document.getElementById(
`intersection-${data.sets[d.sets[0]].label}-${data.sets[d.sets[1]].label}`
);
pathAAndB.style.setProperty("stroke", 'white');
pathAAndB.style.setProperty("stroke-opacity", 1);
isMoveInChildElement = true;
})
.on("mouseout", function(d, i) {
d3.select(this).transition();
var pathAAndB = document.getElementById(
`intersection-${data.sets[d.sets[0]].label}-${data.sets[d.sets[1]].label}`
);
pathAAndB.style.setProperty("stroke", 'white');
pathAAndB.style.setProperty("stroke-opacity", 0);
isMoveInChildElement = false;
d3.select(node).attr(
'style',
'border: 1px solid salmon; background-color: #dadad991'
);
});

if (vennObj.filter(obj => obj.size > 0).length > 2) {
diagram.svg
.select('g')
.select("g")
.append("g")
.append('path')
.attr('d', dIntersectAll)
.attr("id", 'intersection-all')
.style("fill-opacity", "0")
.style("fill", "rgb(250, 0, 0)")
.style("stroke-opacity", 0)
.style("stroke", "white")
.style("stroke-width", "2");
}

intersections.exit().remove();
}

d3.selection.prototype.moveParentToFront = function() {
return this.each(function() {
this.parentNode.parentNode.appendChild(this.parentNode);
});
};

return elem.node();
}
Insert cell
rA = Math.sqrt(sA / Math.PI)
Insert cell
sB = N_B / N_ALL * S_MAX
Insert cell
rB = Math.sqrt(sB / Math.PI)
Insert cell
sA_And_B = nAAndB / N_ALL * S_MAX
Insert cell
delta = (rA + rB) / 10
Insert cell
hRect = 800// ( rA + rB ) * 2 + 2 * delta
Insert cell
wRect = 600//2 * d3.max([rA, rB]) + 2 * delta
Insert cell
fontSize = hRect / 30
Insert cell
Insert cell
numberOfA = {
const input = html`<input type="number" max=100 style="width:50px;height:20px" />`
input.onchange = () => {
mutable N_A = input.valueAsNumber;
}
return html`${input}`;
}
Insert cell
numberOfB = {
const input = html`<input type="number" max=100 style="width:50px;height:20px"/>`
input.onchange = (event) => {
mutable N_B = input.valueAsNumber;
}
return html`${input}`;
}
Insert cell
numberOfNotOrAB = {
const input = html`<input type="number" max=100 style="width:50px;height:20px"/>`
input.onchange = () => {
mutable nNotOrAB = input.valueAsNumber;
}
return html`${input}`;
}
Insert cell
numberOfC = {
const input = html`<input type="number" max=100 style="width:50px;height:20px"/>`;
input.onchange = () => {
mutable N_C = input.valueAsNumber;
};
return html`n(C): <br/> ${input}`;
}
Insert cell
sliderA = {
const input = html`<input type="range" min="0" max=${N_A} step="1" value=${nAAndB} />`
input.oninput = () => {
if(input.valueAsNumber <= maxNAAndB){
mutable nAAndB = input.valueAsNumber;
}
else{
mutable nAAndB = maxNAAndB;
}
};
return html`0 ${input} nA`;
}
Insert cell
nAAndNotB = N_A - nAAndB;
Insert cell
mutable N_B = 5
Insert cell
nBAndNotA = N_B - nAAndB
Insert cell
maxNAAndB = Math.min(N_A, N_B)
Insert cell
mutable N_C = 0
Insert cell
maxNAAndC = Math.min(N_A, N_C)
Insert cell
maxNBAndC = Math.min(N_B, N_C)
Insert cell
sC = N_C / N_ALL * S_MAX
Insert cell
mutable nAAndC = 0;
Insert cell
mutable nBAndC = 0;
Insert cell
sA_And_C = nAAndC / N_ALL * S_MAX
Insert cell
sB_And_C = nBAndC / N_ALL * S_MAX
Insert cell
sliderB = {
const input = html`<input type="range" min="0" max=${N_B} step="1" value=${nAAndB} />`
input.oninput = () => {
if(input.valueAsNumber <= maxNAAndB){
mutable nAAndB = input.valueAsNumber;
}
else{
mutable nAAndB = maxNAAndB;
}
};
return html`0 ${input} nB`;
}
Insert cell
mutable nNotOrAB =0
Insert cell
sliderAAndC = {
const input = html`<input type="range" min="0" max=${N_C} step="1" value=${nAAndC} />`
input.oninput = () => {
if(input.valueAsNumber <= maxNAAndC){
mutable nAAndC = input.valueAsNumber;
}
else{
mutable nAAndC = maxNAAndC;
}
};
return html`n(A ∩ C) = ${nAAndC} <br/>0 ${input} nC`;
}
Insert cell
sliderBAndC = {
const input = html`<input type="range" min="0" max=${N_C} step="1" value=${nBAndC} />`;
input.oninput = () => {
if (input.valueAsNumber <= maxNBAndC) {
mutable nBAndC = input.valueAsNumber;
} else {
mutable nBAndC = maxNAAndC;
}
};
return html`n(B ∩ C) = ${nBAndC} <br/>0 ${input} nC`;
}
Insert cell
sliderNotAAndNotB = {
const input = html`<input type="range" min="0" max=${N_A +
N_B +
nNotOrAB} step="1" value=${nAAndB} />`;
input.oninput = () => {
if (input.valueAsNumber <= maxNAAndB) {
mutable nAAndB = input.valueAsNumber;
} else {
mutable nAAndB = maxNAAndB;
}
};
return html`0 ${input} nA + nB + n(not A ∩ not B)`;
}
Insert cell
data = {
return{
"sets": [
{"label": "A", "size": sA, "number": N_A},
{"label": "B", "size": sB,"number": N_B},
{"label": "C", "size": sC,"number": N_C},
],
"overlaps": [
{ "sets": [0, 1], "size": sA_And_B, "number": nAAndB},
{"sets": [0, 2], "size": sA_And_C, "number": nAAndC},
{"sets": [1, 2], "size": sB_And_C, "number": nBAndC},
]
}
}
Insert cell
venn = {
let venn = {};
/** 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 */
venn.venn = function(sets, overlaps, parameters) {
parameters = parameters || {};
parameters.maxIterations = parameters.maxIterations || 500;
var lossFunction = parameters.lossFunction || venn.lossFunction;
var initialLayout = parameters.layoutFunction || venn.greedyLayout;

// initial layout is done greedily
sets = initialLayout(sets, overlaps);

// transform x/y coordinates to a vector to optimize
var initial = new Array(2*sets.length);
for (var i = 0; i < sets.length; ++i) {
initial[2 * i] = sets[i].x;
initial[2 * i + 1] = sets[i].y;
}

// optimize initial layout from our loss function
var totalFunctionCalls = 0;
var solution = venn.fmin(
function(values) {
totalFunctionCalls += 1;
var current = new Array(sets.length);
for (var i = 0; i < sets.length; ++i) {
current[i] = {x: values[2 * i],
y: values[2 * i + 1],
radius : sets[i].radius,
size : sets[i].size};
}
return lossFunction(current, overlaps);
},
initial,
parameters);

// transform solution vector back to x/y points
var positions = solution.solution;
for (i = 0; i < sets.length; ++i) {
sets[i].x = positions[2 * i];
sets[i].y = positions[2 * i + 1];
}

return sets;
};

/** Returns the distance necessary for two circles of radius r1 + r2 to
have the overlap area 'overlap' */
venn.distanceFromIntersectArea = function(r1, r2, overlap) {
// handle complete overlapped circles
if (Math.min(r1, r2) * Math.min(r1,r2) * Math.PI <= overlap) {
return Math.abs(r1 - r2);
}

return venn.bisect(function(distance) {
return circleIntersection.circleOverlap(r1, r2, distance) - overlap;
}, 0, r1 + r2);
};

/// gets a matrix of euclidean distances between all sets in venn diagram
venn.getDistanceMatrix = function(sets, overlaps) {
// initialize an empty distance matrix between all the points
var distances = [];
for (var i = 0; i < sets.length; ++i) {
distances.push([]);
for (var j = 0; j < sets.length; ++j) {
distances[i].push(0);
}
}

// compute distances between all the points
for (i = 0; i < overlaps.length; ++i) {
var current = overlaps[i];
if (current.sets.length !== 2) {
continue;
}

var left = current.sets[0],
right = current.sets[1],
r1 = Math.sqrt(sets[left].size / Math.PI),
r2 = Math.sqrt(sets[right].size / Math.PI),
distance = venn.distanceFromIntersectArea(r1, r2, current.size);
distances[left][right] = distances[right][left] = distance;
}
return distances;
};

/** 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 */
venn.greedyLayout = function(sets, overlaps) {
// give each set a default position + radius
var setOverlaps = {};
for (var i = 0; i < sets.length; ++i) {
setOverlaps[i] = [];
sets[i].radius = Math.sqrt(sets[i].size / Math.PI);
sets[i].x = sets[i].y = 0;
}

// map each set to a list of all the other sets that overlap it
for (i = 0; i < overlaps.length; ++i) {
var current = overlaps[i];
if (current.sets.length !== 2) {
continue;
}

var left = current.sets[0], right = current.sets[1];
setOverlaps[left].push ({set:right, size:current.size});
setOverlaps[right].push({set:left, size:current.size});
}

// get list of most overlapped sets
var mostOverlapped = [];
for (var set in setOverlaps) {
if (setOverlaps.hasOwnProperty(set)) {
var size = 0;
for (i = 0; i < setOverlaps[set].length; ++i) {
size += setOverlaps[set][i].size;
}

mostOverlapped.push({set: set, size: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
var positioned = {};
function isPositioned(element) {
return element.set in positioned;
}

// adds a point to the output
function positionSet(point, index) {
sets[index].x = point.x;
sets[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
var distances = venn.getDistanceMatrix(sets, overlaps);

for (i = 1; i < mostOverlapped.length; ++i) {
var setIndex = mostOverlapped[i].set,
overlap = setOverlaps[setIndex].filter(isPositioned);
set = sets[setIndex];
overlap.sort(sortOrder);

if (overlap.length === 0) {
throw "Need overlap information for set " + JSON.stringify( set );
}

var points = [];
for (var j = 0; j < overlap.length; ++j) {
// get appropriate distance from most overlapped already added set
var p1 = sets[overlap[j].set],
d1 = distances[setIndex][overlap[j].set];

// 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 (var k = j + 1; k < overlap.length; ++k) {
var p2 = sets[overlap[k].set],
d2 = distances[setIndex][overlap[k].set];

var extraPoints = circleIntersection.circleCircleIntersection(
{ x: p1.x, y: p1.y, radius: d1},
{ x: p2.x, y: p2.y, radius: d2});

for (var l = 0; l < extraPoints.length; ++l) {
points.push(extraPoints[l]);
}
}
}

// we have some candidate positions for the set, examine loss
// at each position to figure out where to put it at
var bestLoss = 1e50, bestPoint = points[0];
for (j = 0; j < points.length; ++j) {
sets[setIndex].x = points[j].x;
sets[setIndex].y = points[j].y;
var loss = venn.lossFunction(sets, overlaps);
if (loss < bestLoss) {
bestLoss = loss;
bestPoint = points[j];
}
}

positionSet(bestPoint, setIndex);
}

return sets;
};

/// Uses multidimensional scaling to approximate a first layout here
venn.classicMDSLayout = function(sets, overlaps) {
// get the distance matrix
var distances = venn.getDistanceMatrix(sets, overlaps);

// get positions for each set
var positions = mds.classic(distances);

// translate back to (x,y,radius) coordinates
for (var i = 0; i < sets.length; ++i) {
sets[i].x = positions[i][0];
sets[i].y = positions[i][1];
sets[i].radius = Math.sqrt(sets[i].size / Math.PI);
}
return sets;
};

/** 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 */
venn.lossFunction = function(sets, overlaps) {
var output = 0;

function getCircles(indices) {
return indices.map(function(i) { return sets[i]; });
}

for (var i = 0; i < overlaps.length; ++i) {
var area = overlaps[i], overlap;
if (area.sets.length == 2) {
var left = sets[area.sets[0]],
right = sets[area.sets[1]];
overlap = circleIntersection.circleOverlap(left.radius, right.radius,
circleIntersection.distance(left, right));
} else {
overlap = circleIntersection.intersectionArea(getCircles(area.sets));
}

output += (overlap - area.size) * (overlap - area.size);
}

return output;
};

/** Scales a solution from venn.venn or venn.greedyLayout such that it fits in
a rectangle of width/height - with padding around the borders. */
venn.scaleSolution = function(solution, width, height, padding) {
var minMax = function(d) {
var hi = Math.max.apply(null, solution.map(
function(c) { return c[d] + c.radius; } )),
lo = Math.min.apply(null, solution.map(
function(c) { return c[d] - c.radius;} ));
return {max:hi, min:lo};
};

width -= 2*padding;
height -= 2*padding;
var xRange = minMax('x'),
yRange = minMax('y'),
xScaling = width / (xRange.max - xRange.min),
yScaling = height / (yRange.max - yRange.min),
scaling = Math.min(yScaling, xScaling);
var tempSolution = [];
for (var i = 0; i < solution.length; ++i) {
var set = solution[i];
tempSolution[i] = {};
tempSolution[i]['radius'] = scaling * set.radius;
tempSolution[i]['x'] = padding + (set.x - xRange.min) * scaling;
tempSolution[i]['y'] = padding + (set.y - yRange.min) * scaling;
tempSolution[i]['size'] = set.size
}
var xMinPos = 10000;
var xMaxPos = 0;
var yMinPos = 100000;
var yMaxPos = 0;
tempSolution.forEach((item) => {
if(item.size >0){
var deltaMinX = item.x - item.radius;
var deltaMaxX = item.x + item.radius;
var deltaMinY = item.y - item.radius;
var deltaMaxY = item.y + item.radius;
if(deltaMinX < xMinPos) { xMinPos = deltaMinX }
if(deltaMaxX > xMaxPos) { xMaxPos = deltaMaxX}
if(deltaMinY < yMinPos) { yMinPos = deltaMinY}
if(deltaMaxY > yMaxPos) { yMaxPos = deltaMaxY}
}
})
let vennWidth = xMaxPos - xMinPos + padding * 4 * solution.length + padding * 2
let vennHeight = yMaxPos - yMinPos + padding * 4 * solution.length + padding * 2
if(height < vennHeight){
scaling = height / vennHeight * scaling;
}
for (var i = 0; i < solution.length; ++i) {
var set = solution[i];
set.radius = scaling * set.radius;
set.x = padding + (set.x - xRange.min) * scaling;
set.y = padding + (set.y - yRange.min) * scaling;
}
solution.scaling = scaling;
return solution;
};

function weightedSum(a, b) {
var ret = new Array(a[1].length || 0);
for (var j = 0; j < ret.length; ++j) {
ret[j] = a[0] * a[1][j] + b[0] * b[1][j];
}
return ret;
}

function centerVennDiagram( diagram, width, height, padding ) {
var diagramBoundaries;
var allowedWidth = width - ( 2 * ( padding || 20 ) );
var allowedHeight = height - ( 2 * ( padding || 20 ) );
var scale;
var transformX, transformY;
var transform = "";

if ( diagram ) {
diagramBoundaries = diagram[ 0 ][ 0 ].getBBox();
if ( diagramBoundaries && width && height ) {

// See if we need to scale to fit the width/height
if ( diagramBoundaries.width > allowedWidth ) {
scale = allowedWidth / diagramBoundaries.width;
}
if ( diagramBoundaries.height > allowedHeight ) {
if ( !scale || ( allowedHeight / diagramBoundaries.height ) < scale ) {
scale = allowedHeight / diagramBoundaries.height;
}
}

if ( scale ) {
transform = "scale(" + scale + ")";
}
else {
scale = 1;
}

var xMinPos = 10000;
var xMaxPos = 0;
var yMinPos = 100000;
var yMaxPos = 0;
data.sets.forEach((item) => {
var deltaMinX = item.x - item.radius;
var deltaMaxX = item.x + item.radius;
var deltaMinY = item.y - item.radius;
var deltaMaxY = item.y + item.radius;
if(deltaMinX < xMinPos) { xMinPos = deltaMinX }
if(deltaMaxX > xMaxPos) { xMaxPos = deltaMaxX}
if(deltaMinY < yMinPos) { yMinPos = deltaMinY}
if(deltaMaxY > yMaxPos) { yMaxPos = deltaMaxY}
})
let vennWidth = xMaxPos - xMinPos + padding * 2
let vennHeight = yMaxPos - yMinPos + padding * 2
transformX = hRect / 2 - vennWidth / 2 ;
transformY = wRect / 2 - vennHeight / 2 - 10;
diagram.attr( "transform", "translate(" + transformX + "," + transformY + ") " + transform );
}
}
}

/** finds the zeros of a function, given two starting points (which must
* have opposite signs */
venn.bisect = function(f, a, b, parameters) {
parameters = parameters || {};
var maxIterations = parameters.maxIterations || 100,
tolerance = parameters.tolerance || 1e-10,
fA = f(a),
fB = f(b),
delta = b - a;

if (fA * fB > 0) {
throw "Initial bisect points must have opposite signs";
}

if (fA === 0) return a;
if (fB === 0) return b;

for (var i = 0; i < maxIterations; ++i) {
delta /= 2;
var mid = a + delta,
fMid = f(mid);

if (fMid * fA >= 0) {
a = mid;
}

if ((Math.abs(delta) < tolerance) || (fMid === 0)) {
return mid;
}
}
return a + delta;
};

/** minimizes a function using the downhill simplex method */
venn.fmin = function(f, x0, parameters) {
parameters = parameters || {};

var maxIterations = parameters.maxIterations || x0.length * 200,
nonZeroDelta = parameters.nonZeroDelta || 1.1,
zeroDelta = parameters.zeroDelta || 0.001,
minErrorDelta = parameters.minErrorDelta || 1e-5,
rho = parameters.rho || 1,
chi = parameters.chi || 2,
psi = parameters.psi || -0.5,
sigma = parameters.sigma || 0.5,
callback = parameters.callback;

// initialize simplex.
var N = x0.length,
simplex = new Array(N + 1);
simplex[0] = x0;
simplex[0].fx = f(x0);
for (var i = 0; i < N; ++i) {
var point = x0.slice();
point[i] = point[i] ? point[i] * nonZeroDelta : zeroDelta;
simplex[i+1] = point;
simplex[i+1].fx = f(point);
}

var sortOrder = function(a, b) { return a.fx - b.fx; };

for (var iteration = 0; iteration < maxIterations; ++iteration) {
simplex.sort(sortOrder);
if (callback) {
callback(simplex);
}

if (Math.abs(simplex[0].fx - simplex[N].fx) < minErrorDelta) {
break;
}

// compute the centroid of all but the worst point in the simplex
var centroid = new Array(N);
for (i = 0; i < N; ++i) {
centroid[i] = 0;
for (var j = 0; j < N; ++j) {
centroid[i] += simplex[j][i];
}
centroid[i] /= N;
}

// reflect the worst point past the centroid and compute loss at reflected
// point
var worst = simplex[N];
var reflected = weightedSum([1+rho, centroid], [-rho, worst]);
reflected.fx = f(reflected);

var replacement = reflected;

// if the reflected point is the best seen, then possibly expand
if (reflected.fx <= simplex[0].fx) {
var expanded = weightedSum([1+chi, centroid], [-chi, worst]);
expanded.fx = f(expanded);
if (expanded.fx < reflected.fx) {
replacement = expanded;
}
}

// if the reflected point is worse than the second worst, we need to
// contract
else if (reflected.fx >= simplex[N-1].fx) {
var shouldReduce = false;
var contracted;

if (reflected.fx <= worst.fx) {
// do an inside contraction
contracted = weightedSum([1+psi, centroid], [-psi, worst]);
contracted.fx = f(contracted);
if (contracted.fx < worst.fx) {
replacement = contracted;
} else {
shouldReduce = true;
}
} else {
// do an outside contraction
contracted = weightedSum([1-psi * rho, centroid], [psi*rho, worst]);
contracted.fx = f(contracted);
if (contracted.fx <= reflected.fx) {
replacement = contracted;
} else {
shouldReduce = true;
}
}

if (shouldReduce) {
// do reduction. doesn't actually happen that often
for (i = 1; i < simplex.length; ++i) {
simplex[i] = weightedSum([1 - sigma, simplex[0]],
[sigma - 1, simplex[i]]);
simplex[i].fx = f(simplex[i]);
}
}
}

simplex[N] = replacement;
}

simplex.sort(sortOrder);
return {f : simplex[0].fx,
solution : simplex[0]};
};

/** returns a svg path of the intersection area of a bunch of circles */
venn.intersectionAreaPath = function(circles) {
var stats = {};
circleIntersection.intersectionArea(circles, stats);
var arcs = stats.arcs;

if (arcs.length == 0) {
return "M 0 0";
}

var ret = ["\nM", arcs[0].p2.x, arcs[0].p2.y];
for (var i = 0; i < arcs.length; ++i) {
var arc = arcs[i], r = arc.circle.radius, wide = arc.width > r;
ret.push("\nA", r, r, 0, wide ? 1 : 0, 1, arc.p1.x, arc.p1.y);
}

return ret.join(" ");
}
venn.getIntersectionAll = function(circles) {
const filteredCircles = circles.filter(circle => circle.size > 0);
var stats = {};
circleIntersection.intersectionArea(filteredCircles, stats);
const intersectionAll = stats.arcs;
if (intersectionAll.length > 0) {
var ret = [
"\nM",
intersectionAll[intersectionAll.length - 1].p1.x,
intersectionAll[intersectionAll.length - 1].p1.y
];
for (var i = 0; i < intersectionAll.length; ++i) {
var arc = intersectionAll[i],
r = arc.circle.radius,
wide = arc.width > r;
ret.push("\nA", r, r, 0, wide ? 1 : 0, 1, arc.p1.x, arc.p1.y);
}
return ret.join(" ");
} else {
return "M 0 0";
}
};
venn.intersectionAreaSplitPath = function(circles, isRightPath, isLeftPath) {
var stats = {};
circleIntersection.intersectionArea(circles, stats);
var arcs = stats.arcs;

if (arcs.length == 0) {
return "M 0 0";
}

var ret = ["\nM", arcs[0].p2.x, arcs[0].p2.y];
for (var i = 0; i < arcs.length; ++i) {
var arc = arcs[i], r = arc.circle.radius, wide = arc.width > r;
if( (i==1 && isRightPath) || (i==0 && isLeftPath)){
ret.push("\nA", r, r, 0, wide ? 1 : 0, 1, arc.p1.x, arc.p1.y);
}
else{
ret.push("\nA", 0, 0, 0, wide ? 1 : 0, 1, arc.p1.x, arc.p1.y);
}
}

return ret.join(" ");
}
venn.drawD3Diagram = function(element, dataset, width, height, parameters) {
parameters = parameters || {};

var colours = d3.scale.category10(),
circleFillColours = parameters.circleFillColours || colours,
circleStrokeColours = parameters.circleStrokeColours || circleFillColours,
circleStrokeWidth = parameters.circleStrokeWidth || function(i) { return 0; },
textFillColours = parameters.textFillColours || colours,
textStrokeColours = parameters.textStrokeColours || textFillColours,
nodeOpacity = parameters.opacity || 0.3,
padding = parameters.padding || 20;

dataset = venn.scaleSolution(dataset, width, height, padding);
dataset = dataset.filter(item => {
return item.size > 0;
})
var svg = element.append("svg").attr('id', 'svg-wrapper');
var diagram = svg.append( "g" ).attr('id', 'union-all');
var nodes = diagram.append("g").selectAll("g")
.data(dataset, function(d) {
return d.label;
});
var nodeEnter = nodes.enter()
.append("g").attr("style", "transition: opacity 2s")
.attr('class', 'node');

nodeEnter.append("circle").attr("id", function(d) { return `circle-${d.label}` })
.attr("r", function(d) { return d.radius })
.style("fill-opacity", nodeOpacity)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.style("stroke", function(d, i) { return circleStrokeColours(i); })
.style("stroke-width", function(d, i) { return circleStrokeWidth(i); })
.style("fill", function(d, i) { return circleFillColours(i); });

nodeEnter.append("text")
.attr("x", function(d, i) { return d.x + (d.radius + 20) * Math.sin(-Math.PI / 3 + i * 2 * Math.PI / 3); })
.attr("y", function(d, i) { return d.y - (d.radius + 20) * Math.cos(-Math.PI / 3 + i * 2 * Math.PI / 3); })
.attr("text-anchor", "middle")
.attr("dy", "0.35em")
.attr("font-size", fontSize)
.style("stroke", function(d, i) { return textStrokeColours(i); })
.style("fill", function(d, i) { return textFillColours(i); })
.text(function(d) { return d.label; });

var circles = nodes.selectAll("circle");

var text = nodes.selectAll("text");
centerVennDiagram( diagram, width, height, padding );
return {'svg' : svg,
'nodes' : nodes,
'circles' : circles,
'text' : text };
};

venn.updateD3Diagram = function(element, dataset, parameters) {
parameters = parameters || {};

var colours = d3.scale.category10(),
circleFillColours = parameters.circleFillColours || colours,
circleStrokeColours = parameters.circleStrokeColours || circleFillColours,
circleStrokeWidth = parameters.circleStrokeWidth || function(i) { return 0; },
textFillColours = parameters.textFillColours || colours,
textStrokeColours = parameters.textStrokeColours || textFillColours,
nodeOpacity = parameters.opacity || 0.3,
padding = parameters.padding || 20;

var svg = element.select("svg"),
width = parseInt(svg.attr('width'), 10),
height = parseInt(svg.attr('height'), 10),
circles, texts;

dataset = venn.scaleSolution(dataset, width, height, 0);
var nodes = svg.select('g').select('g').selectAll("g.node")
.data(dataset, function(d) { return d.label; });

nodes.exit().remove();

var nodeEnter = nodes.enter()
.append("g")
.attr('class', 'node');

nodeEnter.append("circle")
.style("fill-opacity", nodeOpacity)
.style("stroke", function(d, i) { return circleStrokeColours(i); })
.style("stroke-width", function(d, i) { return circleStrokeWidth(i); })
.style("fill", function(d, i) { return circleFillColours(i); });

nodeEnter.append("text")
.attr("text-anchor", "middle")
.attr("dy", "0.35em")
.attr("font-size", fontSize)
.style("stroke", function(d, i) { return textStrokeColours(i); })
.style("fill", function(d, i) { return textFillColours(i); })

nodes.select("circle")
.transition()
.duration(400)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.radius; });

nodes.select("text")
.transition()
.duration(400)
.text(function(d) { return d.label; })
.attr("font-size", fontSize)
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
};
return venn;

}
Insert cell
circleIntersection = {
let circleIntersection = {}
var 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) */
circleIntersection.intersectionArea = function(circles, stats) {
// get all the intersection points of the circles
var intersectionPoints = getIntersectionPoints(circles);

// filter out points that aren't included in all the circles
var innerPoints = intersectionPoints.filter(function (p) {
return circleIntersection.containedInCircles(p, circles);
});

var arcArea = 0, polygonArea = 0, arcs = [], i;

// 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
var center = circleIntersection.getCenter(innerPoints);
for (i = 0; i < innerPoints.length; ++i ) {
var p = innerPoints[i];
p.angle = Math.atan2(p.x - center.x, p.y - center.y);
}
innerPoints.sort(function(a,b) { return b.angle - a.angle;});

// iterate over all points, get arc between the points
// and update the areas
var p2 = innerPoints[innerPoints.length - 1];
for (i = 0; i < innerPoints.length; ++i) {
var 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
var midPoint = {x : (p1.x + p2.x) / 2,
y : (p1.y + p2.y) / 2},
arc = null;

for (var j = 0; j < p1.parentIndex.length; ++j) {
if (p2.parentIndex.indexOf(p1.parentIndex[j]) > -1) {
// figure out the angle halfway between the two points
// on the current circle
var circle = circles[p1.parentIndex[j]],
a1 = Math.atan2(p1.x - circle.x, p1.y - circle.y),
a2 = Math.atan2(p2.x - circle.x, p2.y - circle.y);

var angleDiff = (a2 - a1);
if (angleDiff < 0) {
angleDiff += 2*Math.PI;
}

// and use that angle to figure out the width of the
// arc
var a = a2 - angleDiff/2,
width = circleIntersection.distance(midPoint, {
x : circle.x + circle.radius * Math.sin(a),
y : circle.y + circle.radius * Math.cos(a)
});

// pick the circle whose arc has the smallest width
if ((arc === null) || (arc.width > width)) {
arc = { circle : circle,
width : width,
p1 : p1,
p2 : p2};
}
}
}
arcs.push(arc);
arcArea += circleIntersection.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
var smallest = circles[0];
for (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
var disjoint = false;
for (i = 0; i < circles.length; ++i) {
if (circleIntersection.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 });
}
}

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 */
circleIntersection.containedInCircles = function(point, circles) {
for (var i = 0; i < circles.length; ++i) {
if (circleIntersection.distance(point, circles[i]) > circles[i].radius + SMALL) {
return false;
}
}
return true;
};

/** Gets all intersection points between a bunch of circles */
function getIntersectionPoints(circles) {
var ret = [];
for (var i = 0; i < circles.length; ++i) {
for (var j = i + 1; j < circles.length; ++j) {
var intersect = circleIntersection.circleCircleIntersection(circles[i],
circles[j]);
for (var k = 0; k < intersect.length; ++k) {
var p = intersect[k];
p.parentIndex = [i,j];
ret.push(p);
}
}
}
return ret;
}

circleIntersection.circleIntegral = function(r, x) {
var y = Math.sqrt(r * r - x * x);
return x * y + r * r * Math.atan2(x, y);
};

/** Returns the area of a circle of radius r - up to width */
circleIntersection.circleArea = function(r, width) {
return circleIntersection.circleIntegral(r, width - r) - circleIntersection.circleIntegral(r, -r);
};


/** euclidean distance between two points */
circleIntersection.distance = function(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 */
circleIntersection.circleOverlap = function(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);
}

var w1 = r1 - (d * d - r2 * r2 + r1 * r1) / (2 * d),
w2 = r2 - (d * d - r1 * r1 + r2 * r2) / (2 * d);
return circleIntersection.circleArea(r1, w1) + circleIntersection.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*/
circleIntersection.circleCircleIntersection = function(p1, p2) {
var d = circleIntersection.distance(p1, p2),
r1 = p1.radius,
r2 = p2.radius;

// if to far away, or self contained - can't be done
if ((d >= (r1 + r2)) || (d <= Math.abs(r1 - r2))) {
return [];
}

var a = (r1 * r1 - r2 * r2 + d * d) / (2 * d),
h = Math.sqrt(r1 * r1 - a * a),
x0 = p1.x + a * (p2.x - p1.x) / d,
y0 = p1.y + a * (p2.y - p1.y) / d,
rx = -(p2.y - p1.y) * (h / d),
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 */
circleIntersection.getCenter = function(points) {
var center = { x: 0, y: 0};
for (var i =0; i < points.length; ++i ) {
center.x += points[i].x;
center.y += points[i].y;
}
center.x /= points.length;
center.y /= points.length;
return center;
};
return circleIntersection;
}
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more