title: D3 bubble chart - 'cannot read property 'map' of undefined'
body: <p>I am trying to build a fairly simple bubble chart with D3, but am getting an error that makes me believe the data are not being read in properly.  Hoping to get some help!
  Here is my code for the chart:</p>
  
  <pre><code>scope.loadChart = function(){
  
        chart.append("div").attr("class", "chart")
        .selectAll('div')
        .data(scope.data).enter().append("div")
        .attr("class", "bar")
        .transition().ease("elastic")
        .style("width", function(d) { return d.cost + "%"; })
        .text(function(d) { return d.playerName +" $"+ d.cost; });
        //a little of magic: setting it's width based
        //on the data value (d)
        //and text all with a smooth transition
  
        // *******************************************************
  
        var diameter = 500, //max size of the bubbles
        color    = d3.scale.category20b(); //color category
  
        var bubble = d3.layout.pack()
        .sort(null)
        .size([diameter, diameter])
        .padding(1.5);
  
        var svg = d3.select("body")
        .append("svg")
        .attr("width", diameter)
        .attr("height", diameter)
        .attr("class", "bubble");
  
        function render(error, data){
  
          //convert numerical values from strings to numbers
          data = data.map(function(d){ d.value = +d.count; return d; });
  
          //bubbles needs very specific format, convert data to this.
          var nodes = bubble.nodes({children:data}).filter(function(d) { return !d.children; });
  
          //setup the chart
          var bubbles = svg.append("g")
          .attr("transform", "translate(0,0)")
          .selectAll(".bubble")
          .data(nodes)
          .enter();
  
          //create the bubbles
          bubbles.append("circle")
          .attr("r", function(d){ return d.r; })
          .attr("cx", function(d){ return d.x; })
          .attr("cy", function(d){ return d.y; })
          .style("fill", function(d) { return color(d.value); });
  
          //format the text for each bubble
          bubbles.append("text")
          .attr("x", function(d){ return d.x; })
          .attr("y", function(d){ return d.y + 5; })
          .attr("text-anchor", "middle")
          .text(function(d){ return d.name; })
          .style({
            "fill":"white",
            "font-family":"Helvetica Neue, Helvetica, Arial, san-serif",
            "font-size": "12px"
          });
        };
        render(testData)
      };
  
      scope.loadChart();
  </code></pre>
  
  <p>The data i am passing in essentially look like this:</p>
  
  <pre><code>testData = [{'name':'name1','count':1},{'name':'name2','count':2},{'name':'name3','count':3}]
  </code></pre>
  
  <p>When i try to run this, I am getting an error "TypeError: Cannot read property 'map' of undefined" which is occurring in the first line of the render function.  I'm kind of assuming it is due to the format of the data? But I'm honestly not sure, and would love any help possible. Let me know if I can provide additional information.</p>
  
  <p>Thanks so much!</p>