Bubble Chart with D3

<html>
  <head>
    <title>Metroline Project</title>
    <style>
      body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Roboto Light", "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", Helvetica, Arial, sans-serif; 
  margin: 1em;
  background: #000;
  color: #ecf0f0;
}
section {
  margin: 0 auto;
}
h1 {
  font-weight: normal;
  font-size: 2.4em;
  margin-bottom: 0;
}
a {
  color: gold;
}

.Interests {fill: #E27A3F; background: #E27A3F;}
.Day2Day { fill: #EFC94C; background: #EFC94C;}
.Motivation { fill: #9B59B6; background:  #9B59B6;}
    </style>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    
  </head>
  <body>
    
	<h1>Metroline Project</h1>
	<div>
	  <p class="Interests">Interests</p>
	  <p class="Day2Day">Day-to-Day</p>
	  <p class="Motivation">Motivation</p>
	</div>

<section id="graph"></section>
  
	  <script>
  var metroline ={
  "metroline": [
    {
      name: "Blue Jays",
      category: "Interests",
      size: 900
    },
    {
      name: "Technology",
      category: "Interests",
      size: 300
    },
    {
      name: "Baseball",
      category: "Interests",
      size: 500
    },
    {
      name: "Software",
      category: "Interests",
      size: 250
    },
    {
      name: "Games",
      category: "Interests",
      size: 80
    },
    {
      name: "Automation",
      category: "Interests",
      size: 300
    },
    {
      name: "Simplicity",
      category: "Motivation",
      size: 500
    },
    {
      name: "Enjoyment",
      category: "Motivation",
      size: 200
    },
    {
      name: "Happiness",
      category: "Motivation",
      size: 600
    },
    {
      name: "Success",
      category: "Motivation",
      size: 400
    },
    {
      name: "Efficiency",
      category: "Motivation",
      size: 800
    },
    {
      name: "Dad",
      category: "Day2Day",
      size: 1000
    },
    {
      name: "Husband",
      category: "Day2Day",
      size: 1000
    },
    {
      name: "Dance",
      category: "Day2Day",
      size: 500
    },
    {
      name: "Gymnastics",
      category: "Day2Day",
      size: 300
    },
    {
      name: "School",
      category: "Day2Day",
      size: 200
    },
    {
      name: "Walking",
      category: "Day2Day",
      size: 100
    },
    {
      name: "Food",
      category: "Day2Day",
      size: 400
    },
    {
      name: "Family",
      category: "Day2Day",
      size: 600
    },
    {
      name: "Friends",
      category: "Day2Day",
      size: 300
    },
    {
      name: "Coffee",
      category: "Day2Day",
      size: 250
    }
  ]
};
  
	// D3 Bubble Chart

var diameter = 800;

var svg = d3.select('#graph').append('svg')
					.attr('width', diameter)
					.attr('height', diameter);

return {children: obj };
  }
    </script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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