Choropleth Map Returning Undefined

I'm attempting a choropleth map of US Counties, and am essentially using Mike Bostock's example from here https://bl.ocks.org/mbostock/4060606 I am using education instead of unemp

Solution 1:

There are two problems in your code.

The first problem in your code lies here:

Bachelor.set(d.id, d.rate, d.county);

In both javascript maps and D3 maps (which are slightly different), you cannot set two values for the same key. Therefore, the syntax has to be:

map.set(key, value)

Let's show it.

This works, setting the value "bar" to "foo":

var myMap = d3.map();
myMap.set("foo", "bar");
console.log(myMap.get("foo"))

<scriptsrc="https://d3js.org/d3.v4.min.js"></script>

However, this will not work:

var myMap = d3.map();
myMap.set("foo", "bar", "baz");
console.log(myMap.get("foo"))

<scriptsrc="https://d3js.org/d3.v4.min.js"></script>

As you can see, the value "baz" was not set.

That was assuming that country is a property in your Bachelor2.tsv file. And that brings us to the second problem:

In your paths, this is the data:

topojson.feature(us, us.objects.counties).features

If you look at your code, you set a property named rate (using your map) to that data...

.attr("fill", function(d) { return color(d.rate = Bachelor.get(d.id)); })
//you set'rate' to the datum here --------^

...but you never set a property named country. Therefore, there is no such property for you to use in the callbacks.

As explained above, you cannot set it using the same map you used to set the rate. A solution is using an object instead. Alternatively, you could use two maps, which seems to be the fastest option.