JSFiddle - React, Tailwind, and code Playground

by chrisJamesC

HTML

<script src="http://d3js.org/d3.v3.js"></script>
<div id="canvas"></div>

CSS

.bubble {
  display: block;
  position: absolute;
}

.bubbleFill {
  position: absolute;
  display: block;
  border: solid 1px white;
  -webkit-border-radius: 70px;
  -moz-border-radius: 70px;
  border-radius: 70px;
}

.tooltip {
  position: absolute;
  display: block;
}

.tooltipFill {
  position: absolute;
  display: block;
}

.tooltipFill p {
  position: absolute;
  display: block;
  text-align: center;
  background-color: #fff;
  padding: 3px 10px 3px 10px;
}

JavaScript

var colors = d3.scale.category10();
SimpleBubble = function(d, id, c) {
  this.data = d;
  this.id = id;
  this.canvas = c;
  this.el = null;
  this.x = 0;
  this.y = 0;
  this.radius = 0;
  this.boxSize = 0;
  this.isDragging = false;
  this.isSelected = false;
  this.tooltip = null;

  this.init();
};

SimpleBubble.prototype.init = function() {
  /* Elements that make up the bubbles display*/
  this.el = $("<div class='bubble' id='bubble-" + this.id + "'></div>");
  this.elFill = $("<div class='bubbleFill'>"+"myText"+"</div>");
  this.el.append(this.elFill);

  /* Attach mouse interaction to root element */
  /* Note use of $.proxy to maintain context */
  this.el.on('mouseover', $.proxy(this.showToolTip, this));
  this.el.on('mouseout', $.proxy(this.hideToolTip, this));

  /* Set CSS of Elements  */
  this.radius = this.data;
  this.boxSize = this.data * 2;

  this.elFill.css({
    width: this.boxSize,
    height: this.boxSize,
    left: -this.boxSize / 2,
    top: -this.boxSize / 2,
    "background-color": colors(this.data),
  });
};

SimpleBubble.prototype.showToolTip = function() {
  var toolWidth = 40;
  var toolHeight = 25;
  this.tooltip =  $("<div class='tooltip'></div>");
  this.tooltip.html("<div class='tooltipFill'><p>" + this.data + "</p></div>");
  this.tooltip.css({
    left: this.x + this.radius /2,
    top: this.y + this.radius / 2
    });
  this.canvas.append(this.tooltip);
};

SimpleBubble.prototype.hideToolTip = function() {
  $(".tooltip").remove();
};

SimpleBubble.prototype.move = function() {
  this.el.css({top: this.y, left:this.x});
};

SimpleVis = function(container,d) {
  this.width = 800;
  this.height = 400;
  this.canvas = $(container);
  this.data = d;
  this.force = null;
  this.bubbles = [];
  this.centers = [
  {x: 200, y:200},
  {x: 400, y:200},
  {x: 600, y:200}
  ];

  this.bin = d3.scale.ordinal().range([0,1,2]);

  this.bubbleCharge = function(d) {
    return -Math.pow(d.radius,1) * 8;
  };

 ...