title: Meteor.js with D3
body: <p>I'm a newbie for Meteor.js but however I need to make some chart like <a href="http://nvd3.org/examples/pie.html" rel="nofollow">http://nvd3.org/examples/pie.html</a>. Bu I have no idea to render data on my html page.</p>
  
  <pre><code>  Pie = new Meteor.Collection("pie");
  
    if (Meteor.isClient) {
      Template.chart.created = function(){ //not sure for template style.
          _.defer(function () {
  
              Deps.autorun(function () {
                  pp = Pie.find({}, {fields: {_id: 0}});
                  exampleData = _.toArray(pp);
                  console.log(exampleData);
                  //Regular pie chart example
                  nv.addGraph(function() {
                    var chart = nv.models.pieChart()
                        .x(function(d) { return d.label })
                        .y(function(d) { return d.value })
                        .showLabels(true);
  
                      d3.select("#chart svg")
                          .datum(exampleData)
                          .transition().duration(350)
                          .call(chart);
  
                    return chart;
                  });
  
                  //Donut chart example
                  nv.addGraph(function() {
                    var chart = nv.models.pieChart()
                        .x(function(d) { return d.label })
                        .y(function(d) { return d.value })
                        .showLabels(true)     //Display pie labels
                        .labelThreshold(.05)  //Configure the minimum     slice size for labels to show up
                        .labelType("percent") //Configure what type of   data to show in the label. Can be "key", "value" or "percent"
                        .donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
                        .donutRatio(0.35)     //Configure how big you want the donut hole size to be.
                        ;
  
                      d3.select("#chart2 svg")
                          .datum(exampleData)
                          .transition().duration(350)
                          .call(chart);
  
                    return chart;
                  });
              });
          });
      }
  
  }
  
    if (Meteor.isServer) {
    Meteor.startup(function () {
  
      if(Pie.find().count() === 0) {
          var data = [
                { 
                  "label": "One",
                  "value" : 29.765957771107
                } , 
                { 
                  "label": "Two",
                  "value" : 0
                } , 
                { 
                  "label": "Three",
                  "value" : 32.807804682612
                } , 
                { 
                  "label": "Four",
                  "value" : 196.45946739256
                } , 
                { 
                  "label": "Five",
                  "value" : 0.19434030906893
                } , 
                { 
                  "label": "Six",
                  "value" : 98.079782601442
                } , 
                { 
                  "label": "Seven",
                  "value" : 13.925743130903
                } , 
                { 
                  "label": "Eight",
                  "value" : 5.1387322875705
                }
              ];
  
          for(var i=0; i &lt; data.length; i++){
              Pie.insert({
                  label: data[i].label,
                  value: data[i].value
              });
          }
      }
  
    });
    }
  </code></pre>
  
  <p>d3.html</p>
  
  <pre><code>    &lt;head&gt;
   &lt;meta charset="utf-8"&gt;
    &lt;title&gt;d3&lt;/title&gt;
  
   &lt;/head&gt;
  
   &lt;body&gt;
    {{&gt; chart}}
   &lt;/body&gt;
  
   &lt;template name="chart"&gt;
   &lt;div width="500" height="500"&gt;
   &lt;svg id="chart"&gt;&lt;/svg&gt;
   &lt;svg id="chart2"&gt;&lt;/svg&gt;
   &lt;/div&gt;
   &lt;/template&gt;
  </code></pre>