Published
Edited
Apr 30, 2021
2 forks
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Tooltip = html`<style>
.venntooltip {
position: absolute;
text-align: center;
width: 200px;
height: 24px;
background: #333;
color: #ddd;
padding: 2px;
border: 0px;
border-radius: 8px;
opacity: 0;
}
</style>
</style>

`
Insert cell
md`### Function`
Insert cell
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"]

// Optional: Edit Stroke
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) {
// sort all the areas relative to the current item
venn.sortAreas(svg_venn, d);

// Display a tooltip with the current size
tooltip.transition().duration(400).style("opacity", .9);
tooltip.text(d.size + " seguidores");

// highlight the current path
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();
}
Insert cell
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more