D3 bubble chart - 'cannot read property 'map' of undefined'

Question

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:

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();

The data i am passing in essentially look like this:

testData = [{'name':'name1','count':1},{'name':'name2','count':2},{'name':'name3','count':3}]

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.

Thanks so much!

Answer 1

In your render function, which is supposed to load the data and draw things, the parameter is function render(error, data){}.

But when this function gets called, the parameter is passed as render(testData). That means the data parameter is empty, which leads to TypeError: Cannot read property 'map' of undefined because in data = data.map(function(d){ d.value = +d.count; return d; });, the data parameter is not actual data but undefined.