First: Thanks for reading, but there is a lot in this, it may be easier to see it in the CodePen examples that are linked at the bottom.
I recently asked a question about how to dynamically create an array for a treemap, and was pointed in the right direction. I have been able to do some simple manipulation to the hash table, but can't figure out how to do the final step.
Currently the treemap has 2 "levels", that was done like this:
var data=[{color:"blue",party:"Democratic",text:"California",value:55},{color:"blue",party:"Democratic",text:"Oregon",value:7},{color:"red",party:"Republican",text:"Texas",value:38},{color:"red",party:"Republican",text:"Georgia",value:16},{color:"grey",party:"Democratic",text:"Arizona",value:11}];
var result = data.reduce(function(hash) {
return function(prev, curr) {
if (hash[curr.color]) {
hash[curr.color].children.push({
text: curr.text,
value: curr.value,
style: {
backgroundColor: curr.color
}
});
} else {
hash[curr.color] = {};
hash[curr.color].children = hash[curr.color].children || [];
prev.push({
text: curr.party,
style: {
backgroundColor: curr.color
},
children: hash[curr.color].children
});
hash[curr.color].children.push({
text: curr.text,
value: curr.value,
style: {
backgroundColor: curr.color
}
});
}
return prev;
};
}(Object.create(null)), []);
Now, what I'm trying to do is bring an additional criteria and add another level. For example, under "Republican" and "Democratic" you'd have subcategories for "Likely", "Leaning", and "Tipping" but for "Toss Up" you wouldn't have any of those.
Here is the end result that I'm trying to make:
series: [{
text: "Democratic",
style: { "backgroundColor": "blue" },
children: [{
text: "Likely",
style: { "backgroundColor": "darkblue" },
children: [{
text: "Alabama",
value: 8,
style: { "backgroundColor": "darkblue" },
}, {
text: "New Mexico",
value: 14,
style: { "backgroundColor": "darkblue" },
}]
}, {
text: "Leaning",
style: { "backgroundColor": "blue" },
children: [{
text: "Florida",
value: 9,
style: { "backgroundColor": "blue" },
}, {
text: "North Carolina",
value: 6,
style: { "backgroundColor": "blue" },
}]
}, {
text: "Tipping",
style: { "backgroundColor": "lightblue" },
children: [{
text: "Utah",
value: 4,
style: { "backgroundColor": "lightblue" },
}, {
text: "Idaho",
value: 5,
style: { "backgroundColor": "lightblue" },
}]
}]
},
{ text: "Republican",
style: { "backgroundColor": "red" },
children: [{
text: "Likely",
style: { "backgroundColor": "darkred" },
children: [{
text: "alabama",
value: 13,
style: { "backgroundColor": "darkred" },
}, {
text: "New Mexico",
value: 14,
style: { "backgroundColor": "darkred" },
}]
}, {
text: "Leaning",
style: { "backgroundColor": "red" },
children: [{
text: "Florida",
value: 9,
style: { "backgroundColor": "red" },
}, {
text: "North Carolina",
value: 6,
style: { "backgroundColor": "red" },
}]
}, {
text: "Tipping",
style: { "backgroundColor": "lightred" },
children: [{
text: "Utah",
value: 27,
style: { "backgroundColor": "lightred" },
}, {
text: "Idaho",
value: 12,
style: { "backgroundColor": "lightred" },
}]
}]
}, {
text: "Toss Up",
style: { "backgroundColor": "grey" },
children: [{
text: "alabama",
value: 10,
style: { "backgroundColor": "grey" },
}, {
text: "New Mexico",
value: 14,
style: { "backgroundColor": "grey" },
}]
},
]
};
I have been trying to figure out how to modify the example I was given to do that, but have been failing for hours. I'm not sure what I should be looking up. I think in the Else statement inside the "prev.push" (line 2040 here) is where the adjustment should be happening, but I don't know how to implement it, I also suspect I need to change the whole approach.
var result = data.reduce(function(hash) {
return function(prev, curr) {
if (hash[curr.party]) {
console.log("if: " + curr.party + " " + curr.category);
hash[curr.party].children.push({
text: curr.text,
value: curr.value,
style: {
backgroundColor: curr.color
}
});
}
else {
console.log("else: " + curr.party + " " + curr.category);
hash[curr.party] = {};
hash[curr.party].children = hash[curr.party].children || [];
hash[curr.party].children.push({
text: curr.text,
value: curr.value,
style: {
backgroundColor: curr.color
}
});
prev.push({
text: curr.party,
style: {
backgroundColor: curr.color
},
children: hash[curr.party].children // children: [{ text: curr.category, children: [{ }] }]
});
hash[curr.category] = {};
hash[curr.category].children = hash[curr.category].children || [];
console.log("category");
prev.push({
text: curr.category,
style: {
backgroundColor: curr.color
},
children: hash[curr.category].children
});
}
return prev;
};
}(Object.create(null)), []);
To wrap up:
Earlier the classification was being done based on color, seeing your data I guess we can do it based on party now. As there is another level added to the tree, we can classify that based on category.
So there are many changes - see demo below:
var data = [{"text":"California","value":55,"color":"#000066","party":"Democratic","compare":1,"category":"Likely"},{"text":"Connecticut","value":7,"color":"#000066","party":"Democratic","compare":1,"category":"Likely"},{"text":"Colorado","value":9,"color":"#3333CC","party":"Democratic","compare":2,"category":"Leaning"},{"text":"Florida","value":29,"color":"#9999FF","party":"Democratic","compare":3,"category":"Tipping"},{"text":"Iowa","value":6,"color":"red","party":"Republican","compare":4,"category":"Likely"},{"text":"Alabama","value":9,"color":"#CC3333","party":"Republican","compare":5,"category":"Leaning"},{"text":"Alaska","value":3,"color":"#FF9999","party":"Republican","compare":6,"category":"Tipping"},{"text":"Arizona","value":11,"color":"#666666","party":"Toss-Up","compare":7,"category":"Toss Up"},{"text":"Texas","value":11,"color":"#666666","party":"Toss-Up","compare":7,"category":"Toss Up"}];
var result = data.reduce(function(hash) {
return function(prev, curr) {
if (!hash[curr.party]) {
hash[curr.party] = {};
hash[curr.party].children = hash[curr.party].children || [];
prev.push({
text: curr.party,
style: {
backgroundColor: curr.color
},
children: hash[curr.party].children
});
} else if (hash[curr.party] && hash[curr.party][curr.category]) {
hash[curr.party][curr.category].children.push({
text: curr.text,
value: curr.value,
style: {
backgroundColor: curr.color
}
});
}
if (hash[curr.party] && !hash[curr.party][curr.category]) {
if (curr.category == "Toss Up") {
hash[curr.party].children.push({
text: curr.text,
value: curr.value,
style: {
backgroundColor: curr.color
}
});
} else {
hash[curr.party][curr.category] = {};
hash[curr.party][curr.category].children = hash[curr.party][curr.category].children || [];
hash[curr.party].children.push({
text: curr.category,
style: {
backgroundColor: curr.color
},
children: hash[curr.party][curr.category].children
});
hash[curr.party][curr.category].children.push({
text: curr.text,
value: curr.value,
style: {
backgroundColor: curr.color
}
});
}
}
return prev;
};
}(Object.create(null)), []);
console.log(result);.as-console-wrapper {top: 0;max-height: 100%!important;}