`a.map is not a function` error when trying to make NVD3 chart
<p>I'm trying to make a chart with AngularJS and NVD3. But I keep getting an error. </p>

<p>Here's <code>index.html</code>:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;style type="text/css"&gt;
        div.square {
            background-color: #ccc;
            height: 400px;
            width: 400px;
            margin: 10px;
        }
    &lt;/style&gt;

    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js" charset="utf-8"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.js"&gt;&lt;/script&gt;
    &lt;script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"&gt;&lt;/script&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body ng-app="myApp" ng-controller="myCtrl"&gt;
  &lt;div ng-repeat="item in items"&gt;
    &lt;br&gt;
    &lt;form id="{{'customize-chart-' + item.number}}" novalidate&gt;
        &lt;textarea rows="5" cols="50" placeholder="Paste comma-separated data here." ng-model="textModel"&gt;&lt;/textarea&gt;
        &lt;br&gt;
        &lt;button id="{{'update-chart-' + item.number}}" ng-click="updateChart(item.number)"&gt;Update chart&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;div ng-repeat="item in items"&gt;
    &lt;div class="square"&gt;
        &lt;nvd3 options="options" data="data" class="with-3d-shadow with-transitions"&gt;&lt;/nvd3&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Here's <code>app.js</code>"</p>

<pre><code>var app=    angular.module("myApp",["nvd3"]);
app.controller("myCtrl",function($scope){
    $scope.items=   [
        {
            hed: '',
            subhed: '',
            number: chNum
        }
    ];

    $scope.textModel=   '';

    $scope.updateChart= function(passedItemNumber){
        var csvData=    d3.csv.parse(this.textModel);
        var headers=    d3.keys(csvData[0]);
        var nvd3Obj=    {};

        headers.forEach(function(d){
            nvd3Obj[d]= [];
        });

        csvData.forEach(function(d){
            for(var key in d){
                nvd3Obj[key].push(d[key]);
            }
        });

        $scope.options = {
            "chart": {
                "type": "lineChart",
                "height": 400,
                "margin": {
                    "top": 20,
                    "right": 20,
                    "bottom": 40,
                    "left": 55
                },
                "x": function(d) {
                    console.log(d);
                    return d[0];
                },
                "y": function(d) {
                    return d[1];
                },
                "useInteractiveGuideline": true,
                "dispatch": {},
                "xAxis": {
                    "axisLabel": "X axis"
                },
                "yAxis": {
                    "axisLabel": "Y axis"//,
                    // "axisLabelDistance": -10
                }
            }
        };

        $scope.data=    nvd3Obj;
    };
});
</code></pre>

<p>Here's what I paste into the <code>textarea</code> tag.</p>

<pre><code>date,dow,sp500,nasdaq
1/1/16,10,15,8
1/3/16,5,3,7
1/5/16,12,18,12
</code></pre>

<p>When I paste that into the <code>textarea</code>, then click the "Update chart" <code>button</code>, this error appears in my browser's console.</p>

<pre><code>angular.js:14290 TypeError: a.map is not a function
    at nv.d3.min.js:5
    at g (nv.d3.min.js:2)
    at update (nv.d3.min.js:2)
    at SVGSVGElement.&lt;anonymous&gt; (nv.d3.min.js:4)
    at d3.min.js:3
    at Y (d3.min.js:1)
    at Array._a.each (d3.min.js:3)
    at Array.b (nv.d3.min.js:4)
    at Array._a.call (d3.min.js:3)
    at Object.updateWithData (angular-nvd3.js:229)
</code></pre>

<p>The error does not refernce my script, <code>app.js</code>. What in my code causes this error? How do I fix it?</p>