35degrees · July 1, 2017 19:58
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/gates_money.csv b/gates_money.csv
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Bubble Chart Experiment</title>
 </head>
 <style>
 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>
 <body>
  <div class="container">
    <h1>Gates Foundation Educational Spending</h1>
    <div id="toolbar">
      <a href="#" id="all" class="button active">All Grants</a>
      <a href="#" id="year" class="button">Grants By Year</a>
    </div>
    <div id="vis"></div>
 </body>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script>
 function bubbleChart() {
  // Constants for sizing
  var width = 940;
  var height = 600;

  // tooltip for mouseover functionality
  var tooltip = floatingTooltip('gates_tooltip', 240);

  // Locations to move bubbles towards, depending
  // on which view mode is selected.
  var center = { x: width / 2, y: height / 2 };

  var yearCenters = {
    2008: { x: width / 3, y: height / 2 },
    2009: { x: width / 2, y: height / 2 },
    2010: { x: 2 * width / 3, y: height / 2 }
  };

  // X locations of the year titles.
  var yearsTitleX = {
    2008: 160,
    2009: width / 2,
    2010: width - 160
  };

  // @v4 strength to apply to the position forces
  var forceStrength = 0.03;

  // These will be set in create_nodes and create_vis
  var svg = null;
  var bubbles = null;
  var nodes = [];

  // Charge function that is called for each node.
  // As part of the ManyBody force.
  // This is what creates the repulsion between nodes.
  //
  // Charge is proportional to the diameter of the
  // circle (which is stored in the radius attribute
  // of the circle's associated data.
  //
  // This is done to allow for accurate collision
  // detection with nodes of different sizes.
  //
  // Charge is negative because we want nodes to repel.
  // @v4 Before the charge was a stand-alone attribute
  //  of the force layout. Now we can use it as a separate force!
  function charge(d) {
    return -Math.pow(d.radius, 2.0) * forceStrength;
  }

  // Here we create a force layout and
  // @v4 We create a force simulation now and
  //  add forces to it.
  var simulation = d3.forceSimulation()
    .velocityDecay(0.2)
    .force('x', d3.forceX().strength(forceStrength).x(center.x))
    .force('y', d3.forceY().strength(forceStrength).y(center.y))
    .force('charge', d3.forceManyBody().strength(charge))
    .on('tick', ticked);

  // @v4 Force starts up automatically,
  //  which we don't want as there aren't any nodes yet.
  simulation.stop();

  // Nice looking colors - no reason to buck the trend
  // @v4 scales now have a flattened naming scheme
  var fillColor = d3.scaleOrdinal()
    .domain(['low', 'medium', 'high'])
    .range(['#d84b2a', '#beccae', '#7aa25c']);


  /*
   * This data manipulation function takes the raw data from
   * the CSV file and converts it into an array of node objects.
   * Each node will store data and visualization values to visualize
   * a bubble.
   *
   * rawData is expected to be an array of data objects, read in from
   * one of d3's loading functions like d3.csv.
   *
   * This function returns the new node array, with a node in that
   * array for each element in the rawData input.
   */
  function createNodes(rawData) {
    // Use the max total_amount in the data as the max in the scale's domain
    // note we have to ensure the total_amount is a number.
    var maxAmount = d3.max(rawData, function (d) { return +d.total_amount; });

    // Sizes bubbles based on area.
    // @v4: new flattened scale names.
    var radiusScale = d3.scalePow()
      .exponent(0.5)
      .range([2, 85])
      .domain([0, maxAmount]);

    // Use map() to convert raw data into node data.
    // Checkout http://learnjsdata.com/ for more on
    // working with data.
    var myNodes = rawData.map(function (d) {
      return {
        id: d.id,
        radius: radiusScale(+d.total_amount),
        value: +d.total_amount,
        name: d.grant_title,
        org: d.organization,
        group: d.group,
        year: d.start_year,
        x: Math.random() * 900,
        y: Math.random() * 800
      };
    });

    // sort them to prevent occlusion of smaller nodes.
    myNodes.sort(function (a, b) { return b.value - a.value; });

    return myNodes;
  }

  /*
   * Main entry point to the bubble chart. This function is returned
   * by the parent closure. It prepares the rawData for visualization
   * and adds an svg element to the provided selector and starts the
   * visualization creation process.
   *
   * selector is expected to be a DOM element or CSS selector that
   * points to the parent element of the bubble chart. Inside this
   * element, the code will add the SVG continer for the visualization.
   *
   * rawData is expected to be an array of data objects as provided by
   * a d3 loading function like d3.csv.
   */
  var chart = function chart(selector, rawData) {
    // convert raw data into nodes data
    nodes = createNodes(rawData);

    // Create a SVG element inside the provided selector
    // with desired size.
    svg = d3.select(selector)
      .append('svg')
      .attr('width', width)
      .attr('height', height);

    // Bind nodes data to what will become DOM elements to represent them.
    bubbles = svg.selectAll('.bubble')
      .data(nodes, function (d) { return d.id; });

    // Create new circle elements each with class `bubble`.
    // There will be one circle.bubble for each object in the nodes array.
    // Initially, their radius (r attribute) will be 0.
    // @v4 Selections are immutable, so lets capture the
    //  enter selection to apply our transtition to below.
    var bubblesE = bubbles.enter().append('circle')
      .classed('bubble', true)
      .attr('r', 0)
      .attr('fill', function (d) { return fillColor(d.group); })
      .attr('stroke', function (d) { return d3.rgb(fillColor(d.group)).darker(); })
      .attr('stroke-width', 2)
      .on('mouseover', showDetail)
      .on('mouseout', hideDetail);

    // @v4 Merge the original empty selection and the enter selection
    bubbles = bubbles.merge(bubblesE);

    // Fancy transition to make bubbles appear, ending with the
    // correct radius
    bubbles.transition()
      .duration(2000)
      .attr('r', function (d) { return d.radius; });

    // Set the simulation's nodes to our newly created nodes array.
    // @v4 Once we set the nodes, the simulation will start running automatically!
    simulation.nodes(nodes);

    // Set initial layout to single group.
    groupBubbles();
  };

  /*
   * Callback function that is called after every tick of the
   * force simulation.
   * Here we do the acutal repositioning of the SVG circles
   * based on the current x and y values of their bound node data.
   * These x and y values are modified by the force simulation.
   */
  function ticked() {
    bubbles
      .attr('cx', function (d) { return d.x; })
      .attr('cy', function (d) { return d.y; });
  }

  /*
   * Provides a x value for each node to be used with the split by year
   * x force.
   */
  function nodeYearPos(d) {
    return yearCenters[d.year].x;
  }


  /*
   * Sets visualization in "single group mode".
   * The year labels are hidden and the force layout
   * tick function is set to move all nodes to the
   * center of the visualization.
   */
  function groupBubbles() {
    hideYearTitles();

    // @v4 Reset the 'x' force to draw the bubbles to the center.
    simulation.force('x', d3.forceX().strength(forceStrength).x(center.x));

    // @v4 We can reset the alpha value and restart the simulation
    simulation.alpha(1).restart();
  }


  /*
   * Sets visualization in "split by year mode".
   * The year labels are shown and the force layout
   * tick function is set to move nodes to the
   * yearCenter of their data's year.
   */
  function splitBubbles() {
    showYearTitles();

    // @v4 Reset the 'x' force to draw the bubbles to their year centers
    simulation.force('x', d3.forceX().strength(forceStrength).x(nodeYearPos));

    // @v4 We can reset the alpha value and restart the simulation
    simulation.alpha(1).restart();
  }

  /*
   * Hides Year title displays.
   */
  function hideYearTitles() {
    svg.selectAll('.year').remove();
  }

  /*
   * Shows Year title displays.
   */
  function showYearTitles() {
    // Another way to do this would be to create
    // the year texts once and then just hide them.
    var yearsData = d3.keys(yearsTitleX);
    var years = svg.selectAll('.year')
      .data(yearsData);

    years.enter().append('text')
      .attr('class', 'year')
      .attr('x', function (d) { return yearsTitleX[d]; })
      .attr('y', 40)
      .attr('text-anchor', 'middle')
      .text(function (d) { return d; });
  }


  /*
   * Function called on mouseover to display the
   * details of a bubble in the tooltip.
   */
  function showDetail(d) {
    // change outline to indicate hover state.
    d3.select(this).attr('stroke', 'black');

    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);
  }

  /*
   * Hides tooltip
   */
  function hideDetail(d) {
    // reset outline
    d3.select(this)
      .attr('stroke', d3.rgb(fillColor(d.group)).darker());

    tooltip.hideTooltip();
  }

  /*
   * Externally accessible function (this is attached to the
   * returned chart function). Allows the visualization to toggle
   * between "single group" and "split by year" modes.
   *
   * displayName is expected to be a string and either 'year' or 'all'.
   */
  chart.toggleDisplay = function (displayName) {
    if (displayName === 'year') {
      splitBubbles();
    } else {
      groupBubbles();
    }
  };


  // return the chart function from closure.
  return chart;
 }

 /*
 * Below is the initialization code as well as some helper functions
 * to create a new bubble chart instance, load the data, and display it.
 */

 var myBubbleChart = bubbleChart();

 /*
 * Function called once data is loaded from CSV.
 * Calls bubble chart function to display inside #vis div.
 */
 function display(error, data) {
  if (error) {
    console.log(error);
  }

  myBubbleChart('#vis', data);
 }

 /*
 * Sets up the layout buttons to allow for toggling between view modes.
 */
 function setupButtons() {
  d3.select('#toolbar')
    .selectAll('.button')
    .on('click', function () {
      // Remove active class from all buttons
      d3.selectAll('.button').classed('active', false);
      // Find the button just clicked
      var button = d3.select(this);

      // Set it as the active button
      button.classed('active', true);

      // Get the id of the button
      var buttonId = button.attr('id');

      // Toggle the bubble chart based on
      // the currently clicked button.
      myBubbleChart.toggleDisplay(buttonId);
    });
 }

 /*
 * Helper function to convert a number into a string
 * and add commas to it to improve presentation.
 */
 function addCommas(nStr) {
  nStr += '';
  var x = nStr.split('.');
  var x1 = x[0];
  var x2 = x.length > 1 ? '.' + x[1] : '';
  var rgx = /(\d+)(\d{3})/;
  while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
  }

  return x1 + x2;
 }

 // Load the data.
 d3.csv('gates_money.csv', display);

 // setup the buttons.
 setupButtons();
 function floatingTooltip(tooltipId, width) {
  // Local variable to hold tooltip div for
  // manipulation in other functions.
  var tt = d3.select('body')
    .append('div')
    .attr('class', 'tooltip')
    .attr('id', tooltipId)
    .style('pointer-events', 'none');

  // Set a width if it is provided.
  if (width) {
    tt.style('width', width);
  }

  // Initially it is hidden.
  hideTooltip();

  /*
   * Display tooltip with provided content.
   *
   * content is expected to be HTML string.
   *
   * event is d3.event for positioning.
   */
  function showTooltip(content, event) {
    tt.style('opacity', 1.0)
      .html(content);

    updatePosition(event);
  }

  /*
   * Hide the tooltip div.
   */
  function hideTooltip() {
    tt.style('opacity', 0.0);
  }

  /*
   * Figure out where to place the tooltip
   * based on d3 mouse event.
   */
  function updatePosition(event) {
    var xOffset = 20;
    var yOffset = 10;

    var ttw = tt.style('width');
    var tth = tt.style('height');

    var wscrY = window.scrollY;
    var wscrX = window.scrollX;

    var curX = (document.all) ? event.clientX + wscrX : event.pageX;
    var curY = (document.all) ? event.clientY + wscrY : event.pageY;
    var ttleft = ((curX - wscrX + xOffset * 2 + ttw) > window.innerWidth) ?
                 curX - ttw - xOffset * 2 : curX + xOffset;

    if (ttleft < wscrX + xOffset) {
      ttleft = wscrX + xOffset;
    }

    var tttop = ((curY - wscrY + yOffset * 2 + tth) > window.innerHeight) ?
                curY - tth - yOffset * 2 : curY + yOffset;

    if (tttop < wscrY + yOffset) {
      tttop = curY + yOffset;
    }

    tt
      .style('top', tttop + 'px')
      .style('left', ttleft + 'px');
  }

  return {
    showTooltip: showTooltip,
    hideTooltip: hideTooltip,
    updatePosition: updatePosition
  };
 }
 </script>

 </html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Bubble Chart Experiment</title>
	</head>
	<style>
	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>
	<body>
	<div class="container">
	<h1>Gates Foundation Educational Spending</h1>
	<div id="toolbar">
	<a href="#" id="all" class="button active">All Grants</a>
	<a href="#" id="year" class="button">Grants By Year</a>
	</div>
	<div id="vis"></div>
	</body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>
	function bubbleChart() {
	// Constants for sizing
	var width = 940;
	var height = 600;

	// tooltip for mouseover functionality
	var tooltip = floatingTooltip('gates_tooltip', 240);

	// Locations to move bubbles towards, depending
	// on which view mode is selected.
	var center = { x: width / 2, y: height / 2 };

	var yearCenters = {
	2008: { x: width / 3, y: height / 2 },
	2009: { x: width / 2, y: height / 2 },
	2010: { x: 2 * width / 3, y: height / 2 }
	};

	// X locations of the year titles.
	var yearsTitleX = {
	2008: 160,
	2009: width / 2,
	2010: width - 160
	};

	// @v4 strength to apply to the position forces
	var forceStrength = 0.03;

	// These will be set in create_nodes and create_vis
	var svg = null;
	var bubbles = null;
	var nodes = [];

	// Charge function that is called for each node.
	// As part of the ManyBody force.
	// This is what creates the repulsion between nodes.
	//
	// Charge is proportional to the diameter of the
	// circle (which is stored in the radius attribute
	// of the circle's associated data.
	//
	// This is done to allow for accurate collision
	// detection with nodes of different sizes.
	//
	// Charge is negative because we want nodes to repel.
	// @v4 Before the charge was a stand-alone attribute
	// of the force layout. Now we can use it as a separate force!
	function charge(d) {
	return -Math.pow(d.radius, 2.0) * forceStrength;
	}

	// Here we create a force layout and
	// @v4 We create a force simulation now and
	// add forces to it.
	var simulation = d3.forceSimulation()
	.velocityDecay(0.2)
	.force('x', d3.forceX().strength(forceStrength).x(center.x))
	.force('y', d3.forceY().strength(forceStrength).y(center.y))
	.force('charge', d3.forceManyBody().strength(charge))
	.on('tick', ticked);

	// @v4 Force starts up automatically,
	// which we don't want as there aren't any nodes yet.
	simulation.stop();

	// Nice looking colors - no reason to buck the trend
	// @v4 scales now have a flattened naming scheme
	var fillColor = d3.scaleOrdinal()
	.domain(['low', 'medium', 'high'])
	.range(['#d84b2a', '#beccae', '#7aa25c']);


	/*
	* This data manipulation function takes the raw data from
	* the CSV file and converts it into an array of node objects.
	* Each node will store data and visualization values to visualize
	* a bubble.
	*
	* rawData is expected to be an array of data objects, read in from
	* one of d3's loading functions like d3.csv.
	*
	* This function returns the new node array, with a node in that
	* array for each element in the rawData input.
	*/
	function createNodes(rawData) {
	// Use the max total_amount in the data as the max in the scale's domain
	// note we have to ensure the total_amount is a number.
	var maxAmount = d3.max(rawData, function (d) { return +d.total_amount; });

	// Sizes bubbles based on area.
	// @v4: new flattened scale names.
	var radiusScale = d3.scalePow()
	.exponent(0.5)
	.range([2, 85])
	.domain([0, maxAmount]);

	// Use map() to convert raw data into node data.
	// Checkout http://learnjsdata.com/ for more on
	// working with data.
	var myNodes = rawData.map(function (d) {
	return {
	id: d.id,
	radius: radiusScale(+d.total_amount),
	value: +d.total_amount,
	name: d.grant_title,
	org: d.organization,
	group: d.group,
	year: d.start_year,
	x: Math.random() * 900,
	y: Math.random() * 800
	};
	});

	// sort them to prevent occlusion of smaller nodes.
	myNodes.sort(function (a, b) { return b.value - a.value; });

	return myNodes;
	}

	/*
	* Main entry point to the bubble chart. This function is returned
	* by the parent closure. It prepares the rawData for visualization
	* and adds an svg element to the provided selector and starts the
	* visualization creation process.
	*
	* selector is expected to be a DOM element or CSS selector that
	* points to the parent element of the bubble chart. Inside this
	* element, the code will add the SVG continer for the visualization.
	*
	* rawData is expected to be an array of data objects as provided by
	* a d3 loading function like d3.csv.
	*/
	var chart = function chart(selector, rawData) {
	// convert raw data into nodes data
	nodes = createNodes(rawData);

	// Create a SVG element inside the provided selector
	// with desired size.
	svg = d3.select(selector)
	.append('svg')
	.attr('width', width)
	.attr('height', height);

	// Bind nodes data to what will become DOM elements to represent them.
	bubbles = svg.selectAll('.bubble')
	.data(nodes, function (d) { return d.id; });

	// Create new circle elements each with class `bubble`.
	// There will be one circle.bubble for each object in the nodes array.
	// Initially, their radius (r attribute) will be 0.
	// @v4 Selections are immutable, so lets capture the
	// enter selection to apply our transtition to below.
	var bubblesE = bubbles.enter().append('circle')
	.classed('bubble', true)
	.attr('r', 0)
	.attr('fill', function (d) { return fillColor(d.group); })
	.attr('stroke', function (d) { return d3.rgb(fillColor(d.group)).darker(); })
	.attr('stroke-width', 2)
	.on('mouseover', showDetail)
	.on('mouseout', hideDetail);

	// @v4 Merge the original empty selection and the enter selection
	bubbles = bubbles.merge(bubblesE);

	// Fancy transition to make bubbles appear, ending with the
	// correct radius
	bubbles.transition()
	.duration(2000)
	.attr('r', function (d) { return d.radius; });

	// Set the simulation's nodes to our newly created nodes array.
	// @v4 Once we set the nodes, the simulation will start running automatically!
	simulation.nodes(nodes);

	// Set initial layout to single group.
	groupBubbles();
	};

	/*
	* Callback function that is called after every tick of the
	* force simulation.
	* Here we do the acutal repositioning of the SVG circles
	* based on the current x and y values of their bound node data.
	* These x and y values are modified by the force simulation.
	*/
	function ticked() {
	bubbles
	.attr('cx', function (d) { return d.x; })
	.attr('cy', function (d) { return d.y; });
	}

	/*
	* Provides a x value for each node to be used with the split by year
	* x force.
	*/
	function nodeYearPos(d) {
	return yearCenters[d.year].x;
	}


	/*
	* Sets visualization in "single group mode".
	* The year labels are hidden and the force layout
	* tick function is set to move all nodes to the
	* center of the visualization.
	*/
	function groupBubbles() {
	hideYearTitles();

	// @v4 Reset the 'x' force to draw the bubbles to the center.
	simulation.force('x', d3.forceX().strength(forceStrength).x(center.x));

	// @v4 We can reset the alpha value and restart the simulation
	simulation.alpha(1).restart();
	}


	/*
	* Sets visualization in "split by year mode".
	* The year labels are shown and the force layout
	* tick function is set to move nodes to the
	* yearCenter of their data's year.
	*/
	function splitBubbles() {
	showYearTitles();

	// @v4 Reset the 'x' force to draw the bubbles to their year centers
	simulation.force('x', d3.forceX().strength(forceStrength).x(nodeYearPos));

	// @v4 We can reset the alpha value and restart the simulation
	simulation.alpha(1).restart();
	}

	/*
	* Hides Year title displays.
	*/
	function hideYearTitles() {
	svg.selectAll('.year').remove();
	}

	/*
	* Shows Year title displays.
	*/
	function showYearTitles() {
	// Another way to do this would be to create
	// the year texts once and then just hide them.
	var yearsData = d3.keys(yearsTitleX);
	var years = svg.selectAll('.year')
	.data(yearsData);

	years.enter().append('text')
	.attr('class', 'year')
	.attr('x', function (d) { return yearsTitleX[d]; })
	.attr('y', 40)
	.attr('text-anchor', 'middle')
	.text(function (d) { return d; });
	}


	/*
	* Function called on mouseover to display the
	* details of a bubble in the tooltip.
	*/
	function showDetail(d) {
	// change outline to indicate hover state.
	d3.select(this).attr('stroke', 'black');

	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);
	}

	/*
	* Hides tooltip
	*/
	function hideDetail(d) {
	// reset outline
	d3.select(this)
	.attr('stroke', d3.rgb(fillColor(d.group)).darker());

	tooltip.hideTooltip();
	}

	/*
	* Externally accessible function (this is attached to the
	* returned chart function). Allows the visualization to toggle
	* between "single group" and "split by year" modes.
	*
	* displayName is expected to be a string and either 'year' or 'all'.
	*/
	chart.toggleDisplay = function (displayName) {
	if (displayName === 'year') {
	splitBubbles();
	} else {
	groupBubbles();
	}
	};


	// return the chart function from closure.
	return chart;
	}

	/*
	* Below is the initialization code as well as some helper functions
	* to create a new bubble chart instance, load the data, and display it.
	*/

	var myBubbleChart = bubbleChart();

	/*
	* Function called once data is loaded from CSV.
	* Calls bubble chart function to display inside #vis div.
	*/
	function display(error, data) {
	if (error) {
	console.log(error);
	}

	myBubbleChart('#vis', data);
	}

	/*
	* Sets up the layout buttons to allow for toggling between view modes.
	*/
	function setupButtons() {
	d3.select('#toolbar')
	.selectAll('.button')
	.on('click', function () {
	// Remove active class from all buttons
	d3.selectAll('.button').classed('active', false);
	// Find the button just clicked
	var button = d3.select(this);

	// Set it as the active button
	button.classed('active', true);

	// Get the id of the button
	var buttonId = button.attr('id');

	// Toggle the bubble chart based on
	// the currently clicked button.
	myBubbleChart.toggleDisplay(buttonId);
	});
	}

	/*
	* Helper function to convert a number into a string
	* and add commas to it to improve presentation.
	*/
	function addCommas(nStr) {
	nStr += '';
	var x = nStr.split('.');
	var x1 = x[0];
	var x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
	x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}

	return x1 + x2;
	}

	// Load the data.
	d3.csv('gates_money.csv', display);

	// setup the buttons.
	setupButtons();
	function floatingTooltip(tooltipId, width) {
	// Local variable to hold tooltip div for
	// manipulation in other functions.
	var tt = d3.select('body')
	.append('div')
	.attr('class', 'tooltip')
	.attr('id', tooltipId)
	.style('pointer-events', 'none');

	// Set a width if it is provided.
	if (width) {
	tt.style('width', width);
	}

	// Initially it is hidden.
	hideTooltip();

	/*
	* Display tooltip with provided content.
	*
	* content is expected to be HTML string.
	*
	* event is d3.event for positioning.
	*/
	function showTooltip(content, event) {
	tt.style('opacity', 1.0)
	.html(content);

	updatePosition(event);
	}

	/*
	* Hide the tooltip div.
	*/
	function hideTooltip() {
	tt.style('opacity', 0.0);
	}

	/*
	* Figure out where to place the tooltip
	* based on d3 mouse event.
	*/
	function updatePosition(event) {
	var xOffset = 20;
	var yOffset = 10;

	var ttw = tt.style('width');
	var tth = tt.style('height');

	var wscrY = window.scrollY;
	var wscrX = window.scrollX;

	var curX = (document.all) ? event.clientX + wscrX : event.pageX;
	var curY = (document.all) ? event.clientY + wscrY : event.pageY;
	var ttleft = ((curX - wscrX + xOffset * 2 + ttw) > window.innerWidth) ?
	curX - ttw - xOffset * 2 : curX + xOffset;

	if (ttleft < wscrX + xOffset) {
	ttleft = wscrX + xOffset;
	}

	var tttop = ((curY - wscrY + yOffset * 2 + tth) > window.innerHeight) ?
	curY - tth - yOffset * 2 : curY + yOffset;

	if (tttop < wscrY + yOffset) {
	tttop = curY + yOffset;
	}

	tt
	.style('top', tttop + 'px')
	.style('left', ttleft + 'px');
	}

	return {
	showTooltip: showTooltip,
	hideTooltip: hideTooltip,
	updatePosition: updatePosition
	};
	}
	</script>

	</html>