block by mbostock 1067636

Venn Diagram with Clipping

Full Screen

index.html

<!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>