gatesbubbletest

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    a, a:visited, a:active {
  color: #444;
}

.container {
  max-width: 900px;
  margin: auto;
}

.button {
  min-width: 130px;
  padding: 4px 5px;
  cursor: pointer;
  text-align: center;
  font-size: 13px;
  border: 1px solid #e0e0e0;
  text-decoration: none;
}

.button.active {
  background: #000;
  color: #fff;
}

#vis {
  width: 940px;
  height: 600px;
  clear: both;
  margin-bottom: 10px;
}
#toolbar {
  margin-top: 10px;
}
.year {
  font-size: 21px;
  fill: #aaa;
  cursor: default;
}
.tooltip {
	position: absolute;
	top: 100px;
	left: 100px;
  -moz-border-radius:5px;
	border-radius: 5px;
  border: 2px solid #000;
  background: #fff;
	opacity: .9;
  color: black;
	padding: 10px;
	width: 300px;
	font-size: 12px;
	z-index: 10;
}
.tooltip .title {
	font-size: 13px;
}
.tooltip .name {
  font-weight:bold;
}
.footer {
  text-align: center;
}
  </style>
</head>

<body>
  <script>
function bubbleChart() {
  var width = 960;
  var height = 600;

var tooltip = floatingTooltip('gates_tooltip', 240);

return myNodes;
  }

var chart = function chart(selector, rawData) {
  
nodes = createNodes(rawData);
svg = d3.select(selector)
      .append('svg')
      .attr('width', width)
      .attr('height', height);

bubbles = svg.selectAll('.bubble')
      .data(nodes, function (d) { return d.id; });

simulation.nodes(nodes);
  
groupBubbles();
  };
  
function ticked() {
    bubbles
      .attr('cx', function (d) { return d.x; })
      .attr('cy', function (d) { return d.y; });
  }
  
  function nodeYearPos(d) {
    return yearCenters[d.year].x;
  }

function groupBubbles() {
    hideYearTitles();
    
    simulation.force('x', d3.forceX().strength(forceStrength).x(center.x));
    
simulation.alpha(1).restart();
  }
  
function splitBubbles() {
    showYearTitles();
  
simulation.force('x', d3.forceX().strength(forceStrength).x(nodeYearPos));

simulation.alpha(1).restart();
  }
  
function hideYearTitles() {
    svg.selectAll('.year').remove();
  }

var content = '<span class="name">Title: </span><span class="value">' +
                  d.name +
                  '</span><br/>' +
                  '<span class="name">Amount: </span><span class="value">$' +
                  addCommas(d.value) +
                  '</span><br/>' +
                  '<span class="name">Year: </span><span class="value">' +
                  d.year +
                  '</span>';

tooltip.showTooltip(content, d3.event);
  }

function hideDetail(d) {
    d3.select(this)
      .attr('stroke', d3.rgb(fillColor(d.group)).darker());

tooltip.hideTooltip();
  }

chart.toggleDisplay = function (displayName) {
    if (displayName === 'year') {
      splitBubbles();
    } else {
      groupBubbles();
    }
  };
  
  return chart;
}
    
var myBubbleChart = bubbleChart();
    
function display(error, data) {
  if (error) {
    console.log(error);
  }

myBubbleChart('#vis', data);
}

return x1 + x2;
}
    
d3.csv('data/gates_money.csv', display);
    
setupButtons();
 
  </script>
</body>

https://d3js.org/d3.v4.min.js