1

I've found a nice JS package that produces Venn diagrams. I'm trying to replicate the example code with a few new values, but so far I'm having no success.

Blog post: https://www.benfrederickson.com/venn-diagrams-with-d3.js/

Github: https://github.com/benfred/venn.js

Example: http://benfred.github.io/venn.js/examples/intersection_tooltip.html

I've stripped my code down to the bare minimum below:

    <!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
        .venntooltip {
            position: absolute;
            text-align: center;
            width: 128px;
            height: 16px;
            background: #333;
            color: #ddd;
            padding: 2px;
            border: 0px;
            border-radius: 8px;
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id="venn"></div>

    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="http://benfred.github.io/venn.js/venn.js"></script>
    <script>
        // define sets and set set intersections
        var sets = [{ "sets": [0], "size": 3683, "label": "0 X" }, { "sets": [1], "size": 3650, "label": "1 X" }, { "sets": [2], "size": 4800, "label": "2 X" }, { "sets": [0, 2], "size": 866 }, { "sets": [1, 2], "size": 833 }, { "sets": [0, 1, 2], "size": 2817 }];

        var chart = venn.VennDiagram().width(1024).height(1024);

        var div = d3.select("#venn")
        div.datum(sets).call(chart);
    </script>
</body>

</html>

What I should get from this is a simple SVG with three overlapping circles.

I assume that I have something messed up in my var sets however I've tried tweaking this for a couple of hours, and I've had no success.

Can someone point out to me what I'm doing wrong?

TolMera
  • 452
  • 10
  • 25

2 Answers2

1

I tried your code above and it worked fine on an http-server, but did not work in a jsFiddle. It might be your development environment or browser. Even double-clicking the .html file pulled it up in chrome, correctly displaying the SVG:

<svg width="1024" height="1024"><g class="venn-area venn-circle" data-venn-sets="0"><path d="
M 807.1589756762538 512 
m -201.8410243237462 0 
a 201.8410243237462 201.8410243237462 0 1 0 403.6820486474924 0 
a 201.8410243237462 201.8410243237462 0 1 0 -403.6820486474924 0" style="fill-opacity: 0.25; fill: rgb(31, 119, 180);"></path><text class="label" text-anchor="middle" dy=".35em" x="876" y="511" style="fill: rgb(31, 119, 180);"><tspan x="876" y="511" dy="0.35em">0 X</tspan></text></g><g class="venn-area venn-circle" data-venn-sets="1"><path d="
M 215.93473308618636 512 
m -200.93473308618638 0 
a 200.93473308618638 200.93473308618638 0 1 0 401.86946617237277 0 
a 200.93473308618638 200.93473308618638 0 1 0 -401.86946617237277 0" style="fill-opacity: 0.25; fill: rgb(255, 127, 14);"></path><text class="label" text-anchor="middle" dy=".35em" x="148" y="511" style="fill: rgb(255, 127, 14);"><tspan x="148" y="511" dy="0.35em">1 X</tspan></text></g><g class="venn-area venn-circle" data-venn-sets="2"><path d="
M 512.8582181751124 512 
m -230.42479022003167 0 
a 230.42479022003167 230.42479022003167 0 1 0 460.84958044006333 0 
a 230.42479022003167 230.42479022003167 0 1 0 -460.84958044006333 0" style="fill-opacity: 0.25; fill: rgb(44, 160, 44);"></path><text class="label" text-anchor="middle" dy=".35em" x="511" y="397" style="fill: rgb(44, 160, 44);"><tspan x="511" y="397" dy="0.35em">2 X</tspan></text></g><g class="venn-area venn-intersection" data-venn-sets="0_2"><path d="
M 681.000362208242 669.5557150594287 
A 201.8410243237462 201.8410243237462 0 0 1 681.000362208242 354.44428494057126 
A 230.42479022003167 230.42479022003167 0 0 1 681.000362208242 669.5557150594287" style="fill-opacity: 0;"></path><text class="label" text-anchor="middle" dy=".35em" x="674" y="512" style="fill: rgb(68, 68, 68);"><tspan x="674" y="512" dy="0.35em"></tspan></text></g><g class="venn-area venn-intersection" data-venn-sets="1_2"><path d="
M 342.9754402017427 667.6773127208855 
A 230.42479022003167 230.42479022003167 0 0 1 342.9754402017427 356.32268727911446 
A 200.93473308618638 200.93473308618638 0 0 1 342.9754402017427 667.6773127208855" style="fill-opacity: 0;"></path><text class="label" text-anchor="middle" dy=".35em" x="349" y="512" style="fill: rgb(68, 68, 68);"><tspan x="349" y="512" dy="0.35em"></tspan></text></g><g class="venn-area venn-intersection" data-venn-sets="0_1_2"><path d="M 0 0" style="fill-opacity: 0;"></path><text class="label" text-anchor="middle" dy=".35em" x="0" y="-1000" style="fill: rgb(68, 68, 68);"><tspan x="0" y="-1000" dy="0.35em"></tspan></text></g></svg>

I used this exact library in production a few years back - it was tricky. The key is to look carefully at the size: numbers. We ran into data with enough relationships that (in some cases) it was impossible to render a venn. It will quietly error and not render all relationships. So we put in a polyfill that would re-render (multiple-sets) until all relationships were shown.

Are you just seeing a white screen? One thing I would do is to download the two .js files and reference them locally. That might do the trick. Check your console log for errors. Chrome DevTools may help. Also, the server I use is http-server from npm. Just type in http-server in any directory and then the path to your .html and it will be there on http://localhost:8080/path/to/your/venn.html.

Hope that helps.

Nash Worth
  • 2,524
  • 1
  • 21
  • 28
  • 1
    Great thanks, I’ll test that out! You’re right I should have commented, Chrome and running from a static file on my local. :) – TolMera Feb 20 '19 at 09:53
  • I pulled your SVG into a blank HTML page, and I get three circles, side by side, with two overlaps - Is this what you are seeing as well? My issues is that I am expecting to see 'three' overlaps. – TolMera Feb 20 '19 at 21:48
0

All though I don't fully understand why, the following was the solution for me. I needed to add an additional set, that explicitly defined the fact that circle 0 and circle 1 overlap. I tweaked the 'size' value as well just to make it easier to mentally follow.

 <!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
        .venntooltip {
            position: absolute;
            text-align: center;
            width: 128px;
            height: 16px;
            background: #333;
            color: #ddd;
            padding: 2px;
            border: 0px;
            border-radius: 8px;
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id="venn"></div>

    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="http://benfred.github.io/venn.js/venn.js"></script>
    <script>
        // define sets and set set intersections
        var sets = [
            { "sets": [0], "size": 100, "label": "0 X" },
            { "sets": [1], "size": 100, "label": "1 X" },
            { "sets": [2], "size": 100, "label": "2 X" },
            { "sets": [0, 1], "size": 50 },
            { "sets": [0, 2], "size": 50 },
            { "sets": [1, 2], "size": 50 },
            { "sets": [0, 1, 2], "size": 25 }];

        var chart = venn.VennDiagram().width(1024).height(1024);

        var div = d3.select("#venn")
        div.datum(sets).call(chart);
    </script>
</body>

</html>
TolMera
  • 452
  • 10
  • 25
  • If anyone is able to explain the above solution it would be great, or perhaps someone understand how to imply the overlap between these circles in code, that would also be very helpful. Although this is 'the answer' to getting this to work, it is not a very 'good' answer because I still don't understand 'why' – TolMera Feb 21 '19 at 03:04