JSFiddle - React, Tailwind, and code Playground

by greenhulk01

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<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>
<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>

JavaScript

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

var margin = {
    top: 30,
    right: 30,
    bottom: 30,
    left: 30
};
width = Math.min(600, $(".chart").width() - margin.left - margin.right);

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    height = (w.innerHeight || e.clientHeight || g.clientHeight) - margin.top - margin.bottom - 20;

//Create scale
var xScale = d3.scale.linear()
    .domain([0, 1])
    .range([0, width]);

//Create SVG
var svg = d3.select(".chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .style("filter", "url(#gooey)") //Set the filter on the container svg
.attr("transform", "translate(" + (margin.left) + "," + (height / 2 + margin.top) + ")");

//SVG filter for the gooey effect
var defs = svg.append('defs');
var filter = defs.append('filter').attr('id', 'gooey');
filter.append('feGaussianBlur')
    .attr('in', 'SourceGraphic')
    .attr('stdDeviation', '10')
    .attr('result', 'blur');
filter.append('feColorMatrix')
    .attr('in', 'blur')
    .attr('mode', 'matrix')
    .attr('values', '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7')
    .attr('result', 'gooey');
filter.append('feBlend')
    .attr('in', 'SourceGraphic')
    .attr('in2', 'gooey');

//Append circle at center
svg.append("circle")
    .attr("class", "centerCircle")
    .attr("cx", 300)
    .attr("cy", 0)
    .attr("r", 100)
    .style("fill", "#81BC00");

//Create a circle that will move out of the center circle
svg.append("circle")
    .attr("class", "flyCircle")
    .attr("cx", 300)
    .attr("cy", 0)
    .attr("r", 15)
    .style("fill", "#81BC00")
    .each(update);

svg.append("circle")
    .attr("class", "flyCircle-two")
    .attr("cx", 300)
    .attr("cy", 0)
   ...