Minimize use of global variables

[ghing]

I noticed that there are a lot of global variables used in the State grid map template.

Use of global variables can make it difficult to reason about control flow in programs and make testing code difficult.

They also make it tempting to use global variables in customizations to the template, even though it's not terribly difficult to pass shared values as function arguments.

At the very least, globals should be limited to the items that come from the upstream spreadsheets such as DATA and LABELS, though this is probably unnecessary as well. Or all global state could be consolidated into a single shared global object.

[ghing]

Here's another example from the bar chart template:

/*
 * Format data for D3.
 */
var formatData = function() {
    DATA.forEach(function(d) {
        d['amt'] = +d['amt'];
    });
}

[katiepark]

This is only slightly relevant, but I think it would be useful to refactor formatData not to operate directly on any global variables but instead accept the input as function parameter and return the output data. This will make it easier to modify templates to draw multiple charts in the same graphic. Here's an example: https://github.com/nprapps/graphics-archive/blob/13446bc55cce13ab29b04ca3496764f5c683a45a/2016/09/north-korea-coal-20160914/js/graphic.js#L34

[ghing]

@katiepark haha:

/*
 * Format data for D3.
 *
 * I updated the version from the default version to return a transformed
 * data array instead of modifying `DATA` in place.
 */
var formatData = function(data) {
  return data.map(function(d) {
    return _.extend({}, d, {
        // Convert numers as strings to real numbers.  This method is kind of
        // neat because it works for either integers or floats and doesn't
        // complain if the value is already numeric.
        'amt': +d['amt']
    });
  });
};

I was literally writing that as your comment came in.