Skip to content Skip to sidebar Skip to footer

Fine Tuning Hash To Dynamically Create Zingcharts Treemap Array

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 d

Solution 1:

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) {
  returnfunction(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
      });
    } elseif (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;}

Post a Comment for "Fine Tuning Hash To Dynamically Create Zingcharts Treemap Array"