here is code of venn diagram i am trying adding wordcloud inside venn but dont know how to do this…
const svg = d3.select("svg");
var myWords = [
"Hello",
"Everybody",
"How",
"Are",
"You",
"Today",
"It",
"Is",
"A",
"Lovely",
"Day",
"I",
"Love",
"Coding",
"In",
"My",
"Van",
"Mate"
];
const margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
};
const width = +svg.attr("width") - margin.left - margin.right;
const height = +svg.attr("height") - margin.top - margin.bottom;
const circleRad = 100;
const xCenter = 150;
const yCenter = 150;
const offsetFactor = 1.2;
const offset = offsetFactor * circleRad;
const xCenter2 = xCenter + offset;
const xCenter3 = xCenter + offset / 2;
const yCenter3 = yCenter + (Math.sqrt(3) * offset) / 2;
// piece of paper
const g = svg
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
g.append("circle")
.attr("r", circleRad)
.attr("transform", "translate(" + xCenter + "," + yCenter + ")")
.attr("fill", "none")
.attr("stroke", "black");
g.append("circle")
.attr("r", circleRad)
.attr("transform", "translate(" + xCenter2 + "," + yCenter + ")")
.attr("fill", "none")
.attr("stroke", "black");
g.append("circle")
.attr("r", circleRad)
.attr("transform", "translate(" + xCenter3 + "," + yCenter3 + ")")
.attr("fill", "none")
.attr("stroke", "black");
//compute first points of intersection
const triHeight = Math.sqrt(circleRad ** 2 - (offset / 2) ** 2);
//outer intersection of Circles 1 and 2
const xIsect1 = xCenter3;
const yIsect1 = yCenter - triHeight;
//inner intersection of Circles 1 and 2
const xIsect4 = xCenter3;
const yIsect4 = yCenter + triHeight;
//treat "triHeight" as the hypoteneuse of a 30.60.90 triangle.
//this tells us the shift from the midpoint of a leg of the triangle
//to the point of intersection
const xDelta = (triHeight * Math.sqrt(3)) / 2;
const yDelta = triHeight / 2;
const xMidpointC1C3 = (xCenter + xCenter3) / 2;
const xMidpointC2C3 = (xCenter2 + xCenter3) / 2;
const yMidpointBoth = (yCenter + yCenter3) / 2;
//find the rest of the points of intersection
const xIsect2 = xMidpointC1C3 - xDelta;
const yIsect2 = yMidpointBoth + yDelta;
const xIsect3 = xMidpointC2C3 + xDelta;
const yIsect3 = yMidpointBoth + yDelta;
const xIsect5 = xMidpointC1C3 + xDelta;
const yIsect5 = yMidpointBoth - yDelta;
const xIsect6 = xMidpointC2C3 - xDelta;
const yIsect6 = yMidpointBoth - yDelta;
const makeIronShapes = ([x1, x2, x3, y1, y2, y3]) => {
const path = `M ${x1} ${y1}
A ${circleRad} ${circleRad} 0 0 1 ${x2} ${y2}
A ${circleRad} ${circleRad} 0 0 0 ${x3} ${y3}
A ${circleRad} ${circleRad} 0 0 1 ${x1} ${y1}`;
console.log("path", path);
return path;
};
const makeSunShapes = ([x1, x2, x3, y1, y2, y3]) => {
const path = `M ${x1} ${y1}
A ${circleRad} ${circleRad} 0 0 0 ${x2} ${y2}
A ${circleRad} ${circleRad} 0 0 0 ${x3} ${y3}
A ${circleRad} ${circleRad} 0 1 1 ${x1} ${y1}`;
return path;
};
const makeRoundedTri = ([x1, x2, x3, y1, y2, y3]) => {
const path = `M ${x1} ${y1}
A ${circleRad} ${circleRad} 0 0 1 ${x2} ${y2}
A ${circleRad} ${circleRad} 0 0 1 ${x3} ${y3}
A ${circleRad} ${circleRad} 0 0 1 ${x1} ${y1}`;
return path;
};
const xPoints = [xIsect1, xIsect2, xIsect3, xIsect4, xIsect5, xIsect6];
const yPoints = [yIsect1, yIsect2, yIsect3, yIsect4, yIsect5, yIsect6];
const ironPoints = [
[1, 5, 6],
[3, 4, 5],
[2, 6, 4]
];
const sunPoints = [
[3, 5, 1],
[2, 4, 3],
[1, 6, 2]
];
const roundedTriPoints = [[5, 4, 6]];
for (const points of ironPoints) {
const ptCycle = points
.map((i) => xPoints[i - 1])
.concat(points.map((i) => yPoints[i - 1]));
console.log("ptc", ptCycle);
const shape = makeIronShapes(ptCycle);
g.append("path")
.attr("id", "wavy0")
.attr("d", shape)
.attr("class", "segment")
.attr("fill", "yellow")
.attr("opacity", 0.4);
}
for (const points of sunPoints) {
const ptCycle = points
.map((i) => xPoints[i - 1])
.concat(points.map((i) => yPoints[i - 1]));
console.log("ptc", ptCycle);
const shape = makeSunShapes(ptCycle);
g.append("path")
.attr("id", "wavy")
.attr("d", shape)
.attr("class", "segment")
.attr("fill", "green")
.attr("opacity", 0.4);
}
for (const points of roundedTriPoints) {
const ptCycle = points
.map((i) => xPoints[i - 1])
.concat(points.map((i) => yPoints[i - 1]));
console.log("ptc", ptCycle);
const shape = makeRoundedTri(ptCycle);
g.append("path")
.attr("id", "wavy1")
.attr("d", shape)
.attr("class", "segment")
.attr("fill", "#cc6666")
.attr("opacity", 0.4);
}