D3 Examples - Treemap using Category

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="NewFile.css" />
<script type="text/javascript" src="https://d3js.org/d3.v2.js"></script>
<script src="https://code.jquery.com/jquery-1.7.1.js"></script> 
</head>
<body>
<p id="chart">
<script src="NewFile.js"></script>
<script>
​
function reSortRoot(root,value_key) {
    //console.log("Calling");
    for (var key in root) {
        if (key == "key") {
            root.name = root.key;
            delete root.key;
        }
        if (key == "values") {
            root.children = [];
            for (item in root.values) {
                root.children.push(reSortRoot(root.values[item],value_key));
            }
            delete root.values;
        }
        if (key == value_key) {
                root.value = parseFloat(root[value_key]);
                delete root[value_key];
        }
    }
    return root;
}
​
//$( document ).ready(function() {
​
    d3.csv("food_court_filtered.csv", function(data){
        
        // getData(data);
        
        var max =  d3.max(data, function(d) {
            return +d.Net_Sales;
        });
            
        var min =  d3.min(data, function(d) {
            return +d.Net_Sales;
        });
        
        var division   = max / 5;
​
        // Add, remove or change the key values to change the hierarchy. 
            var nested_data = d3.nest()
                    .key(function(d)  { return d.Store_Name; })
            //      .key(function(d)  { return d.Category; })
                    .key(function(d)  { return d.Menu_Item; })
                .entries(data);
        
        console.log(nested_data);
        // Creat the root node for the treemap
        var root = {};
        
        // Add the data to the tree
        root.key = "Food Court Data";
        root.values = nested_data;
            
        // Change the key names and children values from .next and add values for a chosen column to define the size of the blocks
        root = reSortRoot(root,"Net_Sales");
                
        var colorScale = d3.scale.ordinal() // d3.scale.category20c()  //   
        //.domain(data, function(d, i){return d.name })
        .domain([nested_data[0].name, nested_data[1].name, nested_data[2].name, 
                 nested_data[3].name, nested_data[4].name, nested_data[5].name,
                 nested_data[6].name, nested_data[7].name, nested_data[8].name])
        .range(["#98abc5", "#8a89a6", "#8080ff", "#8A6A69", "#CDFBFF", "#D2B93D", "#ff8c00","#C9FF00","#FFDA00"]);
​
        colorcode(colorScale);
            
        loadData(root);
    }); 
//});
​
</script>
</body>
</html>
    