How do I add my own data to a responsive US states map?

The original script and example can be found here

I am attempting to replicate the example I linked to above, but with my own data for each US state.

The Javascript I am using is as follows:

<script>

    function tooltipHtml(n, d){ /* function to create html content string in tooltip div. */
        return "<h4>"+n+"</h4><table>"+
            "<tr><td>Total payments</td><td>"+(d.total)+"</td></tr>"+
            "</table>";
    }

var payments_data ={}; [
    {"id": "MT","total": 12.00},
    {"id": "VT","total": 15.18},
    {"id": "AK","total": 62.55},
    {"id": "SD","total": 109.23},
    {"id": "ME","total": 145.21},
    {"id": "ND","total": 262.20},
    {"id": "NE","total": 413.00},
    {"id": "NH","total": 599.47},
    {"id": "LA","total": 717.04},
    {"id": "ID","total": 750.06},
    {"id": "NV","total": 764.34},
    {"id": "AL","total": 774.47},
    {"id": "WI","total": 789.23},
    {"id": "HI","total": 1075.21},
    {"id": "AR","total": 1227.37},
    {"id": "NM","total": 1701.42},
    {"id": "DC","total": 1809.02},
    {"id": "WY","total": 2250.30},
    {"id": "DE","total": 2494.48},
    {"id": "OR","total": 2542.89},
    {"id": "UT","total": 2780.83},
    {"id": "KS","total": 2946.89},
    {"id": "MD","total": 2954.24},
    {"id": "PR","total": 3138.22},
    {"id": "RI","total": 3187.63},
    {"id": "WV","total": 3837.98},
    {"id": "MS","total": 4858.46},
    {"id": "WA","total": 5171.90},
    {"id": "CO","total": 5333.45},
    {"id": "MN","total": 5678.03},
    {"id": "IA","total": 6839.82},
    {"id": "SC","total": 8565.94},
    {"id": "GA","total": 9190.85},
    {"id": "TN","total": 10585.28},
    {"id": "AZ","total": 11074.81},
    {"id": "MO","total": 12973.35},
    {"id": "KY","total": 13112.70},
    {"id": "OH","total": 14279.88},
    {"id": "CT","total": 14557.44},
    {"id": "IL","total": 15743.68},
    {"id": "VA","total": 21276.39},
    {"id": "OK","total": 21420.82},
    {"id": "IN","total": 24432.94},
    {"id": "MI","total": 28186.57},
    {"id": "NJ","total": 32415.05},
    {"id": "CA","total": 36112.53},
    {"id": "FL","total": 39197.80},
    {"id": "NC","total": 45638.26},
    {"id": "TX","total": 47788.73},
    {"id": "PA","total": 52278.45},
    {"id": "NY","total": 95690.33},
    {"id": "MA","total": 5062020.89} 
    ]

    .forEach(function(d){
        payments_data[d]={color:d3.interpolate("#ffffcc", "#147907")(d.total/100)};
        });

    /* draw states on id #statesvg */   
    uStates.draw("#statesvg", payments_data, tooltipHtml);
</script>

With that script the following two things occur:

1) My console log reports the following: "TypeError: undefined is not an object (evaluating 'data[d.id].color')"

2) The map's state polygons does not get colored

3) the 'toolTip' does not work

My best guess for the occurrence of #1 and #2 is that the .forEach loop isn't adding the color element to the data.

As for #3, I cannot explain why the toolTip is failing to materialize.