basic_venn(data, {
height: 350,
margin: 50,
stroke_opacity: 0.55,
stroke_width: 3,
text_size: 18,
text_fill: "#FFFFFF",
text_opacity: 1
})
basic_venn = function(data, style) {
const dimension = {
width: 800,
height: style.height,
margin: style.margin
}
const svg_venn = d3.create("svg")
.attr("viewBox", [0, 0, dimension.width, dimension.height])
svg_venn
.datum(data)
.call(venn.VennDiagram());
// Optional: Edit Stroke
svg_venn
.selectAll(".venn-circle path")
.style("stroke", d => d.fill)
.style("stroke-opacity", style.stroke_opacity)
.style("stroke-width", style.stroke_width);
// Optional: Edit Text
svg_venn
.selectAll(".venn-circle text, .venn-intersection text")
.style("font-size", style.text_size)
.style("fill", style.text_fill)
.style("opacity", style.text_opacity);
return svg_venn.node();
}
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.
