Bubble Menu using D3.js

Fixed from http://stackoverflow.com/q/39662124/2404470

by Kabeer Shah

HTML

<link rel="stylesheet" href="http://sunsp.net/demo/BubbleMenu/bubble.css">
<div id="mainBubble">
</div>

CSS

#mainBubble {
  background: #fff;
  border: solid 1px #ddd;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0);
  font: 10px sans-serif;
  height: 300px;
  position: relative;
  width: 95%;
}

#mainBubble svg {
  left: 0;
  position: absolute;
  top: 0;
}

#mainBubble circle.topBubble {
  fill: #aaa;
  stroke: #666;
  stroke-width: 1.5px;
}

JavaScript

var root = {
  "name": "bubble",
  "children": [{
    "name": "Atlas",
    "description": "Atlas of Global Agriculture",
    "children": [{
      "name": "Geography",
      "address": "http://sunsp.net/portfolio.html",
      "note": "Global crop geography, including precipitation, temperature, crop area, etc."
    }, {
      "name": "Crop Land",
      "address": "http://sunsp.net/portfolio.html"
    }, {
      "name": "Crop Yields",
      "address": "http://sunsp.net/portfolio.html",
      "note": "Maize, wheat, rice, and soybean yields in 2000"
    }]
  }, {
    "name": "AgLab",
    "description": "Virtual Lab of Global Agriculture",
    "children": [{
      "name": "Excess Nutrient",
      "address": "http://d3js.org",
      "note": "Prototype Infographics on Excess Fertilizer Nutrients"
    }, {
      "name": "Yield Gap",
      "address": "http://uis.edu/ens",
      "note": "The gap between attainable yields and actual yields, with modeled yields assuming the percentage of gap closed."
    }, {
      "name": "Fertilizer",
      "address": "http://gli.environment.umn.edu"
    }]
  }, {
    "name": "Nutshell",
    "description": "Profiles of Country",
    "children": [{
      "name": "Efficiency",
      "address": "http://d3js.org"
    }, {
      "name": "Excess Nutrient",
      "address": "http://uis.edu/ens"
    }, {
      "name": "Economy",
      "address": "http://environment.umn.edu"
    }, {
      "name": "Agriculture",
      "address": "http://uis.edu/ens"
    }]
  }, {
    "name": "Data",
    "description": "Crop Data in 5 minutes grid",
    "children": [{
      "name": "Geography",
      "address": "http://www.earthstat.org/"
    }, {
      "name": "Crop Land",
      "address": "http://www.earthstat.org/"
    }, {
      "name": "Crop Yields",
      "address": "http://www.earthstat.org/"
    }]
  }]
};

var w = window.innerWidth * 0.68 * 0.95;
var h = Math.ceil(w * 0.5);
var oR = 0;
var nTop = 0;

var svgContainer = d3.select("#mainBubble")
 ...