Skip to content

Instantly share code, notes, and snippets.

@mbostock mbostock/.block

Last active Jun 26, 2016
Embed
What would you like to do?
Venn Diagram with Clipping
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: #333;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var defs = svg.append("defs");
defs.append("clipPath")
.attr("id", "circle1")
.append("circle")
.attr("cx", 350)
.attr("cy", 200)
.attr("r", 180);
defs.append("clipPath")
.attr("id", "circle2")
.append("circle")
.attr("cx", 550)
.attr("cy", 200)
.attr("r", 180);
defs.append("clipPath")
.attr("id", "circle3")
.append("circle")
.attr("cx", 450)
.attr("cy", 300)
.attr("r", 180);
svg.append("rect")
.attr("clip-path", "url(#circle1)")
.attr("width", width)
.attr("height", height)
.style("fill", "#ff0000");
svg.append("rect")
.attr("clip-path", "url(#circle2)")
.attr("width", width)
.attr("height", height)
.style("fill", "#00ff00");
svg.append("rect")
.attr("clip-path", "url(#circle3)")
.attr("width", width)
.attr("height", height)
.style("fill", "#0000ff");
svg.append("g")
.attr("clip-path", "url(#circle1)")
.append("rect")
.attr("clip-path", "url(#circle2)")
.attr("width", width)
.attr("height", height)
.style("fill", "#ffff00");
svg.append("g")
.attr("clip-path", "url(#circle2)")
.append("rect")
.attr("clip-path", "url(#circle3)")
.attr("width", width)
.attr("height", height)
.style("fill", "#00ffff");
svg.append("g")
.attr("clip-path", "url(#circle3)")
.append("rect")
.attr("clip-path", "url(#circle1)")
.attr("width", width)
.attr("height", height)
.style("fill", "#ff00ff");
svg.append("g")
.attr("clip-path", "url(#circle3)")
.append("g")
.attr("clip-path", "url(#circle2)")
.append("rect")
.attr("clip-path", "url(#circle1)")
.attr("width", width)
.attr("height", height)
.style("fill", "#ffffff");
</script>
@jtb

This comment has been minimized.

Copy link

jtb commented May 4, 2012

Hi mbostock,

I am just starting to play around with SVG and have found D3.js very useful and enjoy learning from the examples you provide. I would like to add the ability to highlight the different sections of a venn diagram with an outline around the section's perimeter when the mouse hovers over it. To do this, I would think I need to create the 7 disjoint areas of a venn diagram. For example, A and B and not C would be the intersection of circle A and Circle B and the complement of Circle C. How would I create such a shape? I have been trying to use a mask for the complement of C but haven't found many examples of using mask within D3.js. Thanks for any help and for the great library.

Justin

Edit: Looks like Elliptical Arcs are the way to go to get the behavior I am looking for.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.