JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://www.benfrederickson.com/images/venn.js"></script>
<div id="venn"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

JavaScript

var venn = venn || {};

(function(venn) {
    "use strict";
    venn.VennDiagram = function() {
        var width = 600,
            height = 350,
            padding = 15,
            duration = 1000,
            fontSize = null,
            colours = d3.scale.category10(),
            layoutFunction = venn.venn;

        function chart(selection) {
            selection.each(function(data) {
                // calculate circle position, scale to fit
                var circles = venn.scaleSolution(layoutFunction(data), width, height, padding);
                var textCentres = computeTextCentres(circles, data);

                // draw out a svg
                var svg = d3.select(this).selectAll("svg").data([circles]);
                svg.enter().append("svg");

                svg.attr("width", width)
                   .attr("height", height);

                // to properly transition intersection areas, we need the
                // previous circles locations. load from elements
                var previous = {}, hasPrevious = false;
                svg.selectAll("g").each(function (d) {
                    var path = d3.select(this).select("path").attr("d");
                    if ((d.sets.length == 1) && path) {
                        hasPrevious = true;
                        previous[d.sets[0]] = venn.circleFromPath(path);
                    }
                });

                // interpolate intersection area paths between previous and
                // current paths
                var pathTween = function(d) {
                    return function(t) {
                        var c = d.sets.map(function (set) {
                            var start = previous[set], end = circles[set];
                            if (!start) {
                                start = {x : width/2, y : height/2, radius : 1};
                            }
                            if (!end) {
                                end = {x : width/2, y : height/2,...