JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hubandspoke">
    <div id="hub" class="hub draggable" style="left: 260px; top: 260px;">
        <p>My Company</p>
    </div>
    <div id="circle1" class="spoke draggable">
        <p>John Smith Inc</p>
    </div>

    <div id="circle2" class="spoke draggable">
        <p>Joe Plumber</p>
    </div>

    <div id="circle3" class="spoke draggable">
        <p>Acme Co</p>
    </div>
    <div id="circle4" class="spoke draggable">
        <p>Abc Construction<br>Abc Electricians</p>
    </div>
    <div id="circle5" class="spoke draggable">
        <p>Moss and Associates<br>Attorneys at Law</p>
    </div>
    <div id="circle6" class="spoke draggable">
        <p>Boston Baked Pizza Rolls<br></p>
    </div>
    <div id="circle7" class="spoke draggable">
        <p>Realty Pros<br></p>
    </div>
</div>

CSS

.hubandspoke-container{
    top: 0; left: 0;
    position: absolute;
    width: 700px;
    height: 700px;
    background: transparent;
}

.circle{
    background: #aaa;
    border: 2px solid #fdfdfd;
    border-radius: 100%;
    display: table;
    position: absolute;
    padding: 1em;
}
#circle1{background: url(http://lorempixel.com/400/200/sports);}
#circle2{background: url(http://lorempixel.com/400/200/animals); }
#circle3{background: url(http://lorempixel.com/400/200/people); }
#circle4{background: url(http://lorempixel.com/400/200/abstract);}
#circle5 {background: url(http://lorempixel.com/400/200/city);}
#circle6 {background: url(http://lorempixel.com/400/200/city);}
#circle7 {background: url(http://lorempixel.com/400/200/city);}
.circle p{
    position: relative;
    color: white;
    text-shadow: 1px 1px 1px #111;
    margin: 0;
    text-align: center;
    top: 50%;
    padding: 0;
}

JavaScript

if (typeof Object.create !== 'function' ){
    Object.create = function( obj ){
        function F() {};
        F.prototype = obj;
        return new F();
    };
}
//todo
//optimize
//ie and FF?
(function($, document, undefined){
    var HubAndSpoke = {
        init: function(config, elem){
        var self       = this;
        self.config = $.extend( {}, $.fn.hubAndSpoke.config, config );
        var $container = $(elem);
        self.hub        = $('.hub', $container).first(),
        self.spokes     = self.limitSpokes($('.spoke', elem)),
        self.circles    = self.spokes.add(hub),
        self.canvas     = $("<canvas width='700' height='700'></canvas>")
                         .appendTo($container);
        self.config.radiusMin = (self.config.radius * .91);
        self.config.radiusMax = (self.config.radius * 1.1);
        $(this).data('hub', hub);
        console.log($(this));
        $container.css('position', 'relative');//should do this in css
        self.circles.addClass('circle');
        $container.addClass('hubandspoke-container');
        self.positionSpokes(self.spokes, self.hub);
        self.circleizeSpokes(self.circles, self.hub);
        self.drawLines(self.hub, self.spokes, self.canvas);
        return self;
        },
         /**
         *
         * limitSpokes()
         * Selects the first *n* spokes, based on config option
         * If not set, simple passes through.
         * Otherwise, hides remaining spokes and returns the ones selected
         *
         */
        limitSpokes : function(spokes){
            if (this.config.limit != null){
                var include = spokes,
                    numSpokes  = spokes.length,
                    self    = this,
                    include = include.slice(0, self.config.limit),
                    exclude = spokes.slice(self.config.limit, numSpokes);
                exclude.hide();
            } else var include = spokes;
            return include;
        },
        /**
  ...