D3 Bubble Chart (Colors)

by Steve Thompson

HTML

<script src="//rawgithub.com/Caged/d3-tip/v0.6.2/index.js"></script>
<div class="container">
  <div class="cont-box-shadow">
    <div class="info">
      <div class="var-icon">
        <div class="var-structure var-blue">
          (
        </div>
        <div class="var-type var-blue">
          A
        </div>
        <div class="var-structure var-blue">
          )
        </div>
      </div>
      <div class="var-name">Square Feet</div>
      <a href="#">
        <div class="info-icon"></div>
      </a>
      <a href="#">
        <div class="alert-icon"></div>
      </a>
    </div>
    <div class="chart-container">
      <div id="chart1">
        <svg xmlns="http://www.w3.org/2000/svg" id="chart2" width="100%" height="100%"></svg>
      </div>
    </div>
    <div class="menu-tools">
      <a href="#">
        <div class="nD-edit sm-icons" title="Edit"></div>
      </a>
      <a href="#">
        <div class="nD-trash sm-icons" title="Delete"></div>
      </a>
    </div>
  </div>
</div>

CSS

.container {
  width: 196px;
  height: 196px;
  background-color: #eceded;
  position: relative;
  padding: 2px;
  overflow: hidden;
}

.cont-box-shadow {
  width: 100%;
  height: 100%;
  background-color: white;
  -webkit-box-shadow: 0px 1px 1px 1px rgba(171, 172, 172, 1);
  -moz-box-shadow: 0px 1px 1px 1px rgba(171, 172, 172, 1);
  box-shadow: 0px 1px 1px 1px rgba(171, 172, 172, 1);
}

.info {
  width: 100%;
  height: 25px;
  background-color: #555555;
  margin: 0 auto;
}

.var-icon {
  position: relative;
  float: left;
  margin: 5px;
  width: 19px;
  height: 14px;
  font-size: 12px;
}

.var-blue {
  color: #42a5f5;
}

.var-structure {
  position: relative;
  float: left;
}

.var-type {
  position: relative;
  float: left;
}

.var-name {
  font-size: 12px;
  color: white;
  position: relative;
  float: left;
  margin-top: 5px;
}

.alert-icon {
  display: none;
  background: url(http://i.imgur.com/TcAIU77.png) no-repeat;
  position: relative;
  float: right;
  margin: 5px 3px;
  width: 16px;
  height: 14px;
}

.info-icon {
  background: url(http://i.imgur.com/NhumKdn.png) no-repeat;
  position: relative;
  float: right;
  margin: 5px 5px 5px 0;
  width: 14px;
  height: 14px;
}

.info-icon:hover {
  background: url(http://i.imgur.com/Y4NJcU5.png) no-repeat;
}

.chart-container {
  width: 100%;
  height: 77%;
}

#chart1 {
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.jqx-tag-cloud ul {
  margin: 0 !important;
}

.jqx-tag-cloud-item {
  padding: 2px !important;
}

.menu-tools {
  display: none;
  position: relative;
  float: right;
  margin-right: 5px;
}

.container:hover .menu-tools {
  display: block;
}

.sm-icons {
  width: 15px;
  height: 15px;
  position: relative;
  float: left;
  margin-right: 5px;
}

.nD-edit {
  background: url(http://i.imgur.com/2JA9xGB.png) no-repeat;
}

.nD-edit:hover {
  background: url(http://i.imgur.com/wl0o0oZ.png) no-repeat;
}

.nD-trash {
  background:...

JavaScript

var container = d3.select('.cont-box-shadow')
	.on('mouseover', svgMouseOver)
  .on("mouseout", svgMouseOut); 

var svg = d3.select('#chart1').select('svg');
  
function svgMouseOver(d) {
	var circle = d3.selectAll("circle")
  .style("fill", function(d) {return d.name;})
};

function svgMouseOut(d) {
  var circle = d3.selectAll("circle")
  .style("fill", function(d, i) {return grayScale(d.name);})
};  

var bbox = d3.select('svg').node().getBoundingClientRect();

var bubble = d3.layout.pack()
	.sort(null)
  .size([bbox.width, bbox.height])
  .padding(5) // padding between adjacent circles
  .value(function(d) {return d.size;}); // new data will be loaded to bubble layout
  
var data = {"colors_msg_vol": {
  "#FF0000":50, "#00FF00": 25, "#0000FF": 15, "#000000": 10
}};  

function processData(data) {
  var obj = data.colors_msg_vol;

  var newDataSet = [];

  for(var prop in obj) {
    newDataSet.push({name: prop, className: prop, size: obj[prop]});
  }
  return {children: newDataSet};
}

var nodes = bubble.nodes(processData(data))
  .filter(function(d) { return !d.children; }); // filter out the outer bubble
  
var vis = svg.selectAll('circle')
  .data(nodes, function(d) { return d.name; });
  
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
  var syntax = d.name + '<br/><span style="font-weight: bold; font-size: 11px;">' + d.size + ' (' + getPer(d.size) + '%)</span>'
    return syntax;});

svg.call(tip);
 
vis.enter().append('circle')
  .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; })
  .attr('r', function(d) { return d.r; })
  .style("fill", function(d, i) {
    return grayScale(d.name);
  })
  .style("stroke", "#C0C0C0")
  .style("stroke-width", "0.5")
	.on('mouseover', tip.show)
  .on("mouseout", tip.hide); 
  
var summed = 0;  
function getPer(d) {
	var dataObj = data.colors_msg_vol;
  console.log(dataObj);
  for (var key in dataObj) {
      summed += dataObj[key];
  }
  var per = ((d /...