Blog / 2016 / June / 22

Venn Diagram in SVG

June 22, 2016

I wanted to put a three way Venn diagram onto a web page. I didn't want to control the size of the circles, but I did want to put numbers into the intersections.

I managed to do it with the following SVG. The double curly bracket notation is Django template markup - these are replaced with numbers at runtime:

<svg width="720" height="350">
  <g>
    <circle cx="80" cy="100" r="80" fill="steelblue" fill-opacity="0.4"></circle>
    <text x="80" y="100" text-anchor="middle">{{VennConductorOnlyCount}}</text>
  </g>
  <g>
    <circle cx="190" cy="100" r="80" fill="red" fill-opacity="0.4"></circle>
    <text x="190" y="100" text-anchor="middle">{{VennAdjudicatorOnlyCount}}</text>
  </g>
  <g>
    <circle cx="135" cy="200" r="80" fill="green" fill-opacity="0.4"></circle>
    <text x="135" y="200" text-anchor="middle">{{VennComposerArrangerOnlyCount}}</text>
  </g>
  <text x="133" y="100" text-anchor="middle">{{VennConductorAdjudicatorCount}}</text>
  <text x="133" y="137" text-anchor="middle">{{VennAllCount}}</text>
  <text x="100" y="155" text-anchor="middle">{{VennConductorComposerCount}}</text>
  <text x="164" y="155" text-anchor="middle">{{VennComposerAdjudicatorCount}}</text>
</svg>

Tags: svg venn html