Interactive Bubble Chart

README.md

forked from danielatkin's block: Interactive Bubble Chart

bubbleChart2014.csv

bubbleChart2015.csv

bubbles.js

var width = 960,
height = 630;
 
 
d3.select("#bubbleChart").append("svg")
    .attr("width", width)
    .attr("height", height)
	.attr("id", "primarySVG");
 
 
changeYear('2015');
 
$("label.cycleBtn").click(function() {
	changeYear(this.id);
	
	});
 
	
function changeYear(year){
	var CSV2015 = 'bubbleChart2015.csv';
	var CSV2014 = 'bubbleChart2014.csv';
	if (year === '2015'){
		var dataSource = CSV2015;
	} else {
		var dataSource = CSV2014;
	}
 
 
d3.csv(dataSource, function(error, data) {
 
data.sort(function(a,b) {return b.ratingClassValue - a.ratingClassValue;});
 
 
var svg = d3.select("#primarySVG");
	
 
 
//set bubble padding
var padding = 4;
 
  for (var j = 0; j < data.length; j++) {
    data[j].radius = 10;
    data[j].x = Math.random() * width;
    data[j].y = Math.random() * height;
  }
 
  var maxRadius = d3.max(_.pluck(data, 'radius'));
 
 
  var getCenters = function(vname, size) {
    var centers, map;
    centers = _.uniq(_.pluck(data,vname)).map(function(d) {
      return {
        name: d,
        value: 1
      };
    });
 
	map = d3.layout.pack().size(size);
          map.nodes({children: centers});
 
    return centers;
  };
 
	var nodes = svg.selectAll("g")
		.data(data);
	
	var g = nodes.enter().append("g")
   
  g.append("circle")
    //.attr("class", "node")
     .attr("class", function(d) {
      return d.ratingCategory;
    })   
    .attr("r", 2)
	  .attr("id", function(d){return d.objectName;})
    .on("mouseover", function(d) {
      showPopover.call(this, d);
    })
    .on("mouseout", function(d) {
      removePopovers();
    });
 
	g.append("text")
		.attr("dx",12)
		.attr("dy",".35em")
		.text(function(d){
			return d.objectName;
		});
 
		
	
  nodes.transition()
	.duration(500)
    .attr("r", function(d) {
	return d.radius;})
	;
 
  var force = d3.layout.force();
  
 
  draw('reset');
 
 $("label.ratingBtn").click(function() {
   	draw(this.id);
	});
  
  
 
 function draw(varname) {
 	d3.selectAll("circle").attr("r",10);
	var centers = getCenters(varname, [width, height]);
    force.on("tick", tick(centers, varname));
    labels(centers);
	nodes.attr("class", function(d) {
      return d[varname];
    });
    force.start();
	makeClickable();
  }
 
	
	function tick (centers, varname) {
	  var foci = {};
	  for (var i = 0; i < centers.length; i++) {
		foci[centers[i].name] = centers[i];
	  }
	  return function (e) {
		for (var i = 0; i < data.length; i++) {
		  var o = data[i];
		  var f = foci[o[varname]];
		  o.y += (f.y - o.y) * e.alpha;
		  o.x += (f.x - o.x) * e.alpha;
		 }
		 nodes.each(collide(.2))
		   .attr("transform", function(d){
       	return "translate(" + d.x + "," + d.y + ")";
     	});
      
	  }
	}
	
		
  function labels(centers) {
    svg.selectAll(".label").remove();
 
    svg.selectAll(".label")
      .data(centers).enter().append("text")
      .attr("class", "label")
      .text(function(d) {
        return d.name;
      })
	.attr("transform", function (d) {
            return "translate(" + (d.x - ((d.name.length)*3)) + ", " + (d.y + 15 - d.r) + ")";
          });     
 
 
  }
 
  function removePopovers() {
    $('.popover').each(function() {
      $(this).remove();
    });
  }
 
  function showPopover(d) {
    $(this).popover({
      placement: 'auto top',
      container: 'body',
      trigger: 'manual',
      html: true,
      content: function() {
        return "Assessment ID: " + d.objectName + "</br>Risk Category 1: " + d.riskCategory1 + "</br>Risk Category 2: " + d.riskCategory2;
      }
    });
    $(this).popover('show');
  }
  
  function collide(alpha) {
    var quadtree = d3.geom.quadtree(data);
    return function(d) {
       var r = d.radius + maxRadius + padding,
        nx1 = d.x - r,
        nx2 = d.x + r,
        ny1 = d.y - r,
        ny2 = d.y + r;
      quadtree.visit(function(quad, x1, y1, x2, y2) {
        if (quad.point && (quad.point !== d)) {
          var x = d.x - quad.point.x,
            y = d.y - quad.point.y,
            l = Math.sqrt(x * x + y * y),
            r = d.radius + quad.point.radius + padding;
          if (l < r) {
            l = (l - r) / l * alpha;
            d.x -= x *= l;
            d.y -= y *= l;
            quad.point.x += x;
            quad.point.y += y;
          }
        }
        return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
      });
    };
  }
  
   var lowModGrad = svg.append("svg:defs")
    .append("svg:linearGradient")
    .attr("id", "lowModGrad")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");
 
  // Define the gradient colors
  lowModGrad.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "#88DB54")
    .attr("stop-opacity", 1);
 
  lowModGrad.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "#FE9A2E")
    .attr("stop-opacity", 1);
 
  var modHighGrad = svg.append("svg:defs")
    .append("svg:linearGradient")
    .attr("id", "modHighGrad")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");
 
  // Define the gradient colors
  modHighGrad.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "#FE9A2E")
    .attr("stop-opacity", 1);
 
  modHighGrad.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "#FE2E2E")
    .attr("stop-opacity", 1);
    
  var lowHighGrad = svg.append("svg:defs")
    .append("svg:linearGradient")
    .attr("id", "lowHighGrad")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");
 
  // Define the gradient colors
  lowHighGrad.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "#88DB54")
    .attr("stop-opacity", 1);
 
  lowHighGrad.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "#FE2E2E")
    .attr("stop-opacity", 1);
 
	
 
	function makeClickable () {
		
				
	$("circle").click(function() {
   	console.log(this.id);
	});
	
	var nest = d3.nest()
		.key(function(d){return d.objectName;})
		.entries(data);
		
	
	}
	nodes.exit().remove();
		
	
});
}

index.html

<!DOCTYPE html>
<html>
 
  <head>
		<meta charset="utf-8">
		<title>Interactive Bubble Chart</title>
			
		
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
		<link rel="stylesheet" href="style.css">
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	 
	</head>
 
	<body>
		<div id="container">
			<div id="header">
			<h1>Interactive bubble chart</h1>
			</div>
			
			<div id="headerBand">
			</br>
			</div>
			<div id="charts">
			
				<div id="bubbleContainer">
				<h2>Risk Assessment Ratings (Dummy Data)</h2>
				<div id="overallRatings" class="btn-group btn-info top-btn" data-toggle="buttons">
				  <label class="btn active ratingBtn" id="reset">
					<input type="radio" name="options">Reset</label>
				   <label class="btn ratingBtn" id="riskCategory1">
					<input type="radio" name="options">Risk Category 1</label>
				  <label class="btn ratingBtn" id="riskCategory2">
					<input type="radio" name="options">Risk Category 2</label>
				  <label class="btn ratingBtn" id="ratingCategory">
					<input type="radio" name="options">Both Categories</label>
				</div>
				<div id="RiskCycle" class="btn-group btn-default top-btn" data-toggle="buttons">
				  <label class="btn cycleBtn" id="2014">
					<input type="radio" name="options">2014</label>
				   <label class="btn active cycleBtn" id="2015">
					<input type="radio" name="options">2015</label>
				</div>
				<div id="bubbleChart">
				</div>
				</div>
		</div>
		<script src="bubbles.js"></script>
  </body>
 
</html>

style.css

body {
        background-color: white;
		margin:0 auto;
      }
 
h1{
	font-family:helvetica,arial,sans-serif;
	font-size:22;
	font-style:bold;
	color:#34495e;
}
 
h2{
	font-family:helvetica,arial,sans-serif;
	font-size:16;
	font-style:bold;
	color:#00A6AA;
}
 
h3{
	font-family:arial;
	font-size:13;
	font-style:bold;
	color:#004855;
}
 
h4{
	font-family:arial;
	font-size:11;
	font-style:bold;
	color:#00A6AA;
}
 
p{
	font-family:arial;
	font-size:22;
	font-style:none;
	color:#000000;
}
 
	  
 
	  
#container{
	text-align:center;
	width: 100%;
}
 
#header{
	text-align:center;
	width: 1366px;
	min-height:100px;
	height:auto;
	padding-top:20px;
	margin:0 auto;
}
 
#headerBand{
	background-color:#1abc9c;
	min-height:60px;
	height:auto;
}
 
 
#bubbleContainer{
	width: 960x;
	height: 850px;
	border: 1px solid #BFD1D4;
	border-radius: 10px;
	margin: 2px;
	text-align: center;
}
 
#bubbleChart{
 
}
 
 
#providerSection{
	text-align:center;
	width: 960px;
}
 
	  
circle {
        fill:#3498DB;
		stroke: black;
		stroke-width:2px;
        opacity: .8;
      }
 
circle:hover {
	stroke:#22A7F0;
	  }
	  
      
.label {
        fill: black;
        font-size: 16px;
      }
      
.ratingCategory1{
   fill:#88DB54;
}
 
.ratingCategory2{
   fill: url(#lowModGrad);
}
 
.ratingCategory3{
   fill:#FE9A2E;
}
 
.ratingCategory4{
   fill: url(#lowHighGrad);
}
 
.ratingCategory5{
   fill: url(#modHighGrad);
}
.ratingCategory6{
   fill:#FF0000;
}
 
.Low{
	fill:#88DB54;
}
 
.Moderate{
	fill:#FE9A2E;
}
 
.High{
	fill:#FF0000;
}
 
.Suspended{
	fill:#A4A4A4;
}
.All-Objects{
	fill:#3498db;
}
 
 
.selected {
	fill:#3498DB;
	stroke: black;
    stroke-width: 2px;
}
 
 
.yAxis path,
.yAxis line {
	fill: none;
	stroke: none;
}
 
.xAxis path,
.xAxis line {
	fill: none;
	stroke: #7f8c8d;
}
 
 
.yAxis text {
	font-family: sans-serif;
	font-size: 15px;
	color: #ecf0f1;
	
}
 
.xAxis text {
	font-family: arial;
	font-size: 11px;
	color: #ecf0f1;
	
}
 
.notes {
	text-align:left;
	padding-top: 10px;
}
 
.imageContainer {
	text-align: center;
	padding-top: 10px;
}