D3 Examples - Bubble Chart with D3

xxxxxxxxxx
 
<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);
​
    var bubble = d3.layout.pack()
                .size([diameter, diameter])
                .value(function(d) {return d.size;})
         // .sort(function(a, b) {
                //  return -(a.value - b.value)
                // }) 
                .padding(3);
  
  // generate data with calculated layout values
  var nodes = bubble.nodes(processData(metroline))
                        .filter(function(d) { return !d.children; }); // filter out the outer bubble
 
  var vis = svg.selectAll('circle')
                    .data(nodes);
  
  vis.enter().append('circle')
            .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; })
            .attr('r', function(d) { return d.r; })
            .attr('class', function(d) { return d.category; });
  
  vis.enter().append('text')
    .attr("dx", function(d){return -20})  
    .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; })
    .text(function(d) { return d.name; });
  
  function processData(data) {
    var obj = data.metroline;
​
    return {children: obj };
  }
    </script>
  </body>
</html>
    