search

markmarkoh / datamaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js
http://datamaps.github.io
MIT License
3.78k stars 1.01k forks source link

Unable to update choropleth with string value #118

Closed gunthercox closed 10 years ago

gunthercox commented 10 years ago

There seems to be an issue updating choropleths using string values. I've included an example document which I will convert into a jsFiddle later (currently unavailable).

Basically the issue that i'm running into is that I can update the map with something like map.updateChoropleth({"NY": "green"}), however if I assign "NY" to a variable first, the map wont be updated. So the failure to update happens with something like:

var ny = "NY";
map.updateChoropleth({ny: "green"});
<html>
    <head>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="http://d3js.org/topojson.v1.min.js"></script>
        <script src="http://datamaps.github.io/scripts/datamaps.usa.min.js?v=1"></script>
    </head>
    <body>
    <div id="container1" style="position: relative; height: 100%; width: 100%;">

     <script>
     var map = new Datamap({
        scope: 'usa',
        element: document.getElementById('container1'),
        projection: 'mercator',

        fills: {
          defaultFill: 'white'
        },

        data: {
          "AZ": { "fillKey": "" },
          "CO": { "fillKey": "" },
          "DE": { "fillKey": "" },
          "FL": { "fillKey": "" },
          "GA": { "fillKey": "" },
          "HI": { "fillKey": "" },
          "ID": { "fillKey": "" },
          "IL": { "fillKey": "" },
          "IN": { "fillKey": "" },
          "IA": { "fillKey": "" },
          "KS": { "fillKey": "" },
          "KY": { "fillKey": "" },
          "LA": { "fillKey": "" },
          "MD": { "fillKey": "" },
          "ME": { "fillKey": "" },
          "MA": { "fillKey": "" },
          "MN": { "fillKey": "" },
          "MI": { "fillKey": "" },
          "MS": { "fillKey": "" },
          "MO": { "fillKey": "" },
          "MT": { "fillKey": "" },
          "NC": { "fillKey": "" },
          "NE": { "fillKey": "" },
          "NV": { "fillKey": "" },
          "NH": { "fillKey": "" },
          "NJ": { "fillKey": "" },
          "NY": { "fillKey": "" },
          "ND": { "fillKey": "" },
          "NM": { "fillKey": "" },
          "OH": { "fillKey": "" },
          "OK": { "fillKey": "" },
          "OR": { "fillKey": "" },
          "PA": { "fillKey": "" },
          "RI": { "fillKey": "" },
          "SC": { "fillKey": "" },
          "SD": { "fillKey": "" },
          "TN": { "fillKey": "" },
          "TX": { "fillKey": "" },
          "UT": { "fillKey": "" },
          "WI": { "fillKey": "" },
          "VA": { "fillKey": "" },
          "VT": { "fillKey": "" },
          "WA": { "fillKey": "" },
          "WV": { "fillKey": "" },
          "WY": { "fillKey": "" },
          "CA": { "fillKey": "" },
          "CT": { "fillKey": "" },
          "AK": { "fillKey": "" },
          "AR": { "fillKey": "" },
          "AL": { "fillKey": "" }
        }
    });

    // This works
    map.updateChoropleth({"AL": "green"});

    // This does not work
    for (key in map.options.data) {
        map.updateChoropleth({key: "green"});
    }
    </script>
    </body>
</html>

I'm wondering if this issue has something to do with the checks that are being made in https://github.com/markmarkoh/datamaps/blob/master/src/js/datamaps.js#L573 to determine what type of value was passed in.

gunthercox commented 10 years ago

I just realized my mistake. I wasn't setting the key correctly so it was setting the actual value key which of course doesn't exist on the map. Bellow is the code that I should have been using. Basically the right way to do this is to pass the variable into the dictionary as a key with a value being set.

for (key in map.options.data) {
    var data = {};
    data[key] = "green";
    map.updateChoropleth(data);
}