JSFiddle - React, Tailwind, and code Playground

by greenhulk01

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>Venn</h2>
            <div id="cont" class="container-fluid">
                <div class="row text-center">
                    <div class="col-sm-12 column text-center">
                        <div class="chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Title</h4>

            </div>
            <div class="modal-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum sit amet sapien ut venenatis. Curabitur pharetra justo sapien, a suscipit magna mollis commodo. Nullam pretium pellentesque odio mollis mollis. Donec vestibulum quam leo, non viverra ipsum iaculis a. Aliquam mattis in nunc a auctor. Aenean ac nunc a nisi dapibus accumsan nec sit amet nibh. Integer pulvinar et mauris in semper. Nullam ac fermentum augue.</p>
                <p>Integer lobortis a nunc quis tristique. Curabitur risus elit, dignissim non elit aliquet, laoreet ultrices elit. Sed commodo, dui ac imperdiet iaculis, mi leo vestibulum enim, viverra ultrices tortor ante vitae enim. Nullam vehicula tortor eget lorem porta luctus. Ut sed orci lacus. Integer aliquam venenatis turpis, eu scelerisque eros hendrerit at. Sed tincidunt euismod maximus. Vestibulum nisl magna, malesuada eu volutpat...

CSS

@-webkit-keyframes pulse_animation {
     0% {
         -webkit-transform: scale(1);
     }
     30% {
         -webkit-transform: scale(1);
     }
     40% {
         -webkit-transform: scale(1.08);
     }
     50% {
         -webkit-transform: scale(1);
     }
     60% {
         -webkit-transform: scale(1);
     }
     70% {
         -webkit-transform: scale(1.05);
     }
     80% {
         -webkit-transform: scale(1);
     }
     100% {
         -webkit-transform: scale(1);
     }
 }
 .pulse {
     -webkit-animation-name:'pulse_animation';
     -webkit-animation-duration: 5000ms;
     -webkit-transform-origin:70% 70%;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-timing-function: linear;
 }

.green-dashed, .yellow-dashed, .orange-dashed {
     display: none;
     opacity: 0.5;
 }
 svg {
     //border: 1px solid black;
 }
 .solutionsCircle:hover, .partnersCircle:hover, .centerCircle:hover, .veenText:hover {
     cursor: pointer;
 }
 .svg-container {
     display: inline-block;
     position: relative;
     width: 100%;
     padding-bottom: 100%;
     /* aspect ratio */
     vertical-align: top;
     overflow: hidden;
 }
 .yellowCircle:hover, .orangeCircle:hover, .greenCircle:hover {
     stroke: grey;
     cursor: pointer
 }
 .subText:hover {
     //stroke: grey;
     cursor: pointer
 }
 .subText {
     display: none;
 }

JavaScript

function update(clickedContext) {

    d3.selectAll("circle")
        .classed("pulse", false);

    var clickContext = clickedContext;
    var filterContext;
    var svgLines;
    var dataLines;


    if (clickContext === "centerCircle") {
        console.log(clickContext);
        circle = d3.selectAll(".greenCircle")
            .data(circleData);

        filterContext = filter;
        svgLines = svg;
        dataLines = circleData;
    }

    if (clickContext === "partnersCircle") {
        console.log(clickContext);
        circle = d3.selectAll(".orangeCircle")
            .data(circleDatatwo);

        filterContext = filterTwo;
        svgLines = svgTwo;
        dataLines = circleDatatwo;
    }

    if (clickContext === "solutionsCircle") {
        console.log(clickContext);
        circle = d3.selectAll(".yellowCircle")
            .data(circleDatathree);

        filterContext = filterThree;
        svgLines = svgThree;
        dataLines = circleDatathree;
    }

    function animateFinish(clickContext) {

        filterContext.select('feGaussianBlur')
            .transition().duration(1500)
            .attr('stdDeviation', '90');

        var lineAnime;
        var lines = svgLines.attr("class", function (d) {
            if (svgLines === svg) {
                lineAnime = $(".green-dashed");
            } else if (svgLines === svgTwo) {
                lineAnime = $(".orange-dashed");
            } else {
                lineAnime = $(".yellow-dashed");
            }
        });
        lineAnime.fadeIn(1000);

        if (clickContext === "centerCircle") {
            $(".centerCircle").closest(".green-main").find(".subText").hide().delay(1500).fadeIn(2000);
        }

        if (clickContext === "solutionsCircle") {
            $(".solutionsCircle").closest(".yellow-main").find(".subText").hide().delay(1500).fadeIn(2000);
        }

        if (clickContext === "partnersCircle") {
           ...