My current task involves reading data from a csv file and creating a map where the key is the state abbreviation and the value is the frequency of that state in the data.
The code I have successfully creates the map, reads in the data, and when I use console.log(MAP), it outputs correctly.
However, I encounter an issue when I attempt to iterate through the map using .each or .entries() as the map appears to be empty. The method map.size() returns 0.
var statesData = d3.map();
d3.csv("temp-data.csv", function(error, data) {
if (error) throw error;
data.forEach(function(row) {
if (statesData.has(row.state) == false) {
statesData.set(row.state, 1);
}
else {
statesData.set(row.state, statesData.get(row.state) + 1);
}
});
});
console.log(statesData);
console.log(statesData.size());
statesData.each(function(d) {
console.log("value: " + d);
});
Output:
{}
"$AZ": 1
"$CA": 1
"$CO": 1
"$IA": 1
"$KS": 2
"$OK": 1
"$OR": 1
"$PA": 1
"$WA": 1
<prototype>: Object { constructor: Map(), has: has(), get: get()
, … }
0
https://i.stack.imgur.com/7pWYf.png A picture is also attached for clarification.
temp-data.csv:
id,state,
3,WA
4,OR
5,KS
8,CA
9,CO
11,OK
13,AZ
15,KS
16,IA
17,PA
Although the map contains data, calling .size() results in 0, thus explaining why the .each() method does not output anything.
I am puzzled by this situation and have tried referring to the documentation at but still can't figure out why I can successfully log MAP but cannot iterate through it.
Thank you!