title: Click on D3 map circle to create pie chart in popup
body: <p>i m new to D3 and am working on a map recently. I have these codes to generate circle markers on the map and it works fine, here are my questions:</p>
  
  <ol>
  <li><p>Is it possible when user click on the marker, the popover can show some information about that point with D3 pie charts, like the workforce combination etc?</p></li>
  <li><p>what should i do to display the nested workforce combination data in a table form within the popover</p></li>
  </ol>
  
  <p>this is what i have to create circles and popover:</p>
  
  <pre><code>d3.json("data/data1.json", function(collection) {
      // Add a LatLng object to each item in the dataset
      collection.objects.forEach(function(d) {
          d.LatLng = new L.LatLng(d.circle.coordinates[0],
                                  d.circle.coordinates[1])
      })
  
      var feature = g.selectAll("circle")
          .data(collection.objects)
          .enter().append("circle")
          .style("stroke", "#e8e8e8")  
          .style("opacity", .25) 
          .style("fill", "#614855")
          .attr("r", function(d){return Math.sqrt(d.workforce)*20;})
          .on("click", (function(d,i){
          console.log(this,$(this))
          $(this).popover({
           'title': 'Title',
          'content': popupContent(d),
          'trigger' : 'click',
          'placement': 'top'
          }).popover("show")
          })
          );
  
          function popupContent(d){
          var html = "&lt;b&gt;Workforce: &lt;/b&gt;" + d.workforce + "&lt;br/&gt;&lt;b&gt;LatLng: &lt;/b&gt;" + d.circle.coordinates[0] + "," + d.circle.coordinates[1] + "&lt;br/&gt;&lt;!--How can i loop the combination of workforce here? or to show the pie chart here?--&gt;&lt;/div&gt;";
          return html;
      }
  </code></pre>
  
  <p>And a sample json like this:</p>
  
  <pre><code>{"objects":[
  {"circle":{"coordinates":[-35.03833,117.619724]},"workforce": 71587, "combination":[{"work":"bluecollar","size":28645},{"work:":"whitecollar","size":30442},{"work":"others","size":12500}]}]
  </code></pre>