basic_venn = function(data) {
const svg_venn = d3
.create("svg")
.attr("viewBox", [0, 0, "600", "600"]);
svg_venn.datum(data).call(venn.VennDiagram().width(600)
.height(600));
const tooltip = d3.select("body").append("svg_venn")
.attr("class", "venntooltip");
const colours = ["darkblue", "orange", "green", "red", "purple"]
svg_venn
.selectAll(".venn-circle path")
.style("stroke", "#fff")
.style("stroke-opacity",0)
.style("stroke-width", 3)
.style("fill", function(d,i) { return colours[i]; })
.style("stroke", function(d,i) { return colours[i]; });
svg_venn.selectAll(".venn-circle text")
.style("fill", function(d,i) { return colours[i]})
.style("font-size", "25px")
.style("font-weight", "90");
svg_venn.selectAll("g")
.on("mouseover", function(d, i) {
venn.sortAreas(svg_venn, d);
tooltip.transition().duration(400).style("opacity", .9);
tooltip.text(d.size + " seguidores");
const selection = d3.select(this).transition("tooltip").duration(400);
selection.select("path")
.style("fill-opacity", d.sets.length == 1 ? .6 : .4)
.style("stroke-opacity", 1);
})
.on("mousemove", function() {
tooltip.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d, i) {
tooltip.transition().duration(400).style("opacity", 0);
const selection = d3.select(this).transition("tooltip").duration(400);
selection.select("path")
.style("fill-opacity", d.sets.length == 1 ? .25 : .0)
.style("stroke-opacity", 0);
});
return svg_venn.node();
}