title: Creating a legend for a bubble chart using D3
body: <p>I have been trying to learn D3 (Bubble Charts specifically). I have created a very simple chart here:</p>
  
  <pre><code>//This is making the demensions for the circles and canvas
      //The format and color is for hovering over the circles for the dialog box
      var diameter = 1500,
          format = d3.format(",d"),
          color = d3.scale.category20c();
  
      //This makes the canvas that the bubble chart will be made on
      var canvas = d3.select("body").append("svg")
                                    .attr("width", diameter)
                                    .attr("height", diameter)
                                    .append("g")
                                      .attr("transform", "translate(50,50)");
  
      //This is the size of the actual bubbles in the chart
      var pack = d3.layout.pack()
              .size([900, 900])
              .padding(85);
  
      //This is adding the data into the bubbles and creating their size
      d3.json("CountryData.js", function (data) {
          var nodes = pack.nodes(data);
  
          var node = canvas.selectAll(".node")
                      .data(nodes)
                      .enter()
                      .append("g")
                          .attr("class", "node")
                          .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });
  
          //This is the actual bubbles
          node.append("circle")
              .attr("r", function (d) {return d.r;})
              .style("fill", function (d, i) { return color(i); });
  
  
          //This is the text inside the bubbles
          node.append("text")
              .text(function (d) { return d.children ? "" : d.name; })
              .style("text-anchor", "middle")
  
          //This is the dialog box
          node.append("title")
              .text(function (d) { return d.name + ": " + format(d.value) + "" + "medals"; });
  
  
      });
  </code></pre>
  
  <p>I have been trying to add a legend that will show the "Asia", "North America", "Middle East", etc. and their colors. The closest I have got was showing the boxes with the colors and displaying the color names. I was trying to use this: <a href="https://stackoverflow.com/questions/20366441/legend-in-d3-circle-pack-diagram">Legend in D3 circle pack diagram</a> as a reference. I can attach how I attempted to make the legend, but I feel like it would be too much code for a post. Here is my data:</p>
  
  <pre><code>{
  "name" : "Region Olympic Medals",
  "value" : 10000,
  "children" : [
      {
          "name" : "Asia",
          "value" : 451,
          "children" : [
              {"name" : "Summer Gold", "value" : 114},
              {"name" : "Summer Silver", "value" : 172},
              {"name" : "Summer Bronze", "value" : 158},
              {"name" : "Winter Gold", "value" : 1},
              {"name" : "Winter Silver", "value" : 1},
              {"name" : "Winter Bronze", "value" : 2}
          ]
      },
      {
          "name" : "Australia &amp; Oceaina",
          "value" : 26,
          "children" : [
              {"name" : "Summer Gold", "value" : 4},
              {"name" : "Summer Silver", "value" : 7},
              {"name" : "Summer Bronze", "value" : 15},
              {"name" : "Winter Gold", "value" : 0},
              {"name" : "Winter Silver", "value" : 0},
              {"name" : "Winter Bronze", "value" : 0}
          ]
      },
      {
          "name" : "Caribbean",
          "value" : 1136,
          "children" : [
              {"name" : "Summer Gold", "value" : 306},
              {"name" : "Summer Silver", "value" : 319},
              {"name" : "Summer Bronze", "value" : 381},
              {"name" : "Winter Gold", "value" : 42},
              {"name" : "Winter Silver", "value" : 41},
              {"name" : "Winter Bronze", "value" : 47}
          ]
      },
      {
  
              "name" : "Central America",
              "value" : 26,
              "children" : [
                  {"name" : "Summer Gold", "value" : 4},
                  {"name" : "Summer Silver", "value" : 3},
                  {"name" : "Summer Bronze", "value" : 4},
                  {"name" : "Winter Gold", "value" : 0},
                  {"name" : "Winter Silver", "value" : 0},
                  {"name" : "Winter Bronze", "value" : 0}
          ]
      },
      {
  
          "name" : "Europe",
          "value" : 7264,
          "children" : [
              {"name" : "Summer Gold", "value" : 1924},
              {"name" : "Summer Silver", "value" : 1993},
              {"name" : "Summer Bronze", "value" : 2257},
              {"name" : "Winter Gold", "value" : 362},
              {"name" : "Winter Silver", "value" : 366},
              {"name" : "Winter Bronze", "value" : 362}
          ]
      },
      {
  
          "name" : "Middle East",
          "value" : 2696,
          "children" : [
              {"name" : "Summer Gold", "value" : 280},
              {"name" : "Summer Silver", "value" : 331},
              {"name" : "Summer Bronze", "value" : 361},
              {"name" : "Winter Gold", "value" : 535},
              {"name" : "Winter Silver", "value" : 582},
              {"name" : "Winter Bronze", "value" : 607}
          ]
      },
      {
  
          "name" : "North America",
          "value" : 7,
          "children" : [
              {"name" : "Summer Gold", "value" : 4},
              {"name" : "Summer Silver", "value" : 1},
              {"name" : "Summer Bronze", "value" : 2},
              {"name" : "Winter Gold", "value" : 0},
              {"name" : "Winter Silver", "value" : 0},
              {"name" : "Winter Bronze", "value" : 0}
          ]
      },
      {
  
          "name" : "South America",
          "value" : 6273,
          "children" : [
              {"name" : "Summer Gold", "value" : 1220},
              {"name" : "Summer Silver", "value" : 1014},
              {"name" : "Summer Bronze", "value" : 335},
              {"name" : "Winter Gold", "value" : 1421},
              {"name" : "Winter Silver", "value" : 1193},
              {"name" : "Winter Bronze", "value" : 1090}
          ]
      },
      {
  
          "name" : "Sub-Saharan Africa",
          "value" : 1847,
          "children" : [
              {"name" : "Summer Gold", "value" : 485},
              {"name" : "Summer Silver", "value" : 549},
              {"name" : "Summer Bronze", "value" : 628},
              {"name" : "Winter Gold", "value" : 50},
              {"name" : "Winter Silver", "value" : 59},
              {"name" : "Winter Bronze", "value" : 76}
          ]
      }
  ]
  </code></pre>
  
  <p>}</p>