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

CSS

.dashed {
    display: none;
}
svg {
    border: 1px solid black;
}

JavaScript

////////////////////////////////////////////////////////////// 
	//////////////////////// Initiate //////////////////////////// 
	////////////////////////////////////////////////////////////// 

	$(document).ready(function () {
	    console.log("ready!");
	    $(".centerCircle").on("click", function () {
	        $("line").hide();
	        var clickContext = "centerCircle";
	        console.log(clickContext);
	        update(clickContext);
	    });
	    $(".partnersCircle").on("click", function () {
	        $("line").hide();
	        var clickContext = "partnersCircle";
	        console.log(clickContext);
	        update(clickContext);
	    });
	    $(".solutionsCircle").on("click", function () {
	        $("line").hide();
	        var clickContext = "solutionsCircle";
	        console.log(clickContext);
	        update(clickContext);
	    });
	});

	//Circle Data Set
	var circleData = [{
	    "class": "flyCircle greenCircle",
	        "cx": 300,
	        "cy": 0,
	        "cy_animated": 200,
	        "cx_animated": 170,
	        "radius": 15,
	        "color": "#69bd45",
	        "opacity": 0.6
	}, {
	    "class": "flyCircle-two greenCircle",
	        "cx": 300,
	        "cy": 0,
	        "cy_animated": 250,
	        "cx_animated": 230,
	        "radius": 15,
	        "color": "#69bd45",
	        "opacity": 0.6
	}, {
	    "class": "flyCircle-three greenCircle",
	        "cx": 300,
	        "cy": 0,
	        "cy_animated": 255,
	        "cx_animated": 300,
	        "radius": 15,
	        "color": "#69bd45",
	        "opacity": 0.6
	}, {
	    "class": "flyCircle-four greenCircle",
	        "cx": 300,
	        "cy": 0,
	        "cy_animated": 250,
	        "cx_animated": 370,
	        "radius": 15,
	        "color": "#69bd45",
	        "opacity": 0.6
	}, {
	    "class": "flyCircle-five greenCircle",
	        "cx": 300,
	        "cy": 0,
	        "cy_animated": 200,
	        "cx_animated": 430,
	        "radius": 15,
	        "color": "#69bd45",
	        "opacity":...