D3.js Zoomable Sunburst visualization from self-referencing CSV input. See index.html

base.js

/*from https://github.com/stephen-james/DataStructures.Tree */
/*
 Base.js, version 1.1a
 Copyright 2006-2010, Dean Edwards
 License: http://www.opensource.org/licenses/mit-license.php
 */

var Base = function() {
    // dummy
};

Base.extend = function(_instance, _static) { // subclass
    var extend = Base.prototype.extend;

    // build the prototype
    Base._prototyping = true;
    var proto = new this;
    extend.call(proto, _instance);
    proto.base = function() {
        // call this method from any other method to invoke that method's ancestor
    };
    delete Base._prototyping;

    // create the wrapper for the constructor function
    //var constructor = proto.constructor.valueOf(); //-dean
    var constructor = proto.constructor;
    var klass = proto.constructor = function() {
        if (!Base._prototyping) {
            if (this._constructing || this.constructor == klass) { // instantiation
                this._constructing = true;
                constructor.apply(this, arguments);
                delete this._constructing;
            } else if (arguments[0] != null) { // casting
                return (arguments[0].extend || extend).call(arguments[0], proto);
            }
        }
    };

    // build the class interface
    klass.ancestor = this;
    klass.extend = this.extend;
    klass.forEach = this.forEach;
    klass.implement = this.implement;
    klass.prototype = proto;
    klass.toString = this.toString;
    klass.valueOf = function(type) {
        //return (type == "object") ? klass : constructor; //-dean
        return (type == "object") ? klass : constructor.valueOf();
    };
    extend.call(klass, _static);
    // class initialisation
    if (typeof klass.init == "function") klass.init();
    return klass;
};

Base.prototype = {
    extend: function(source, value) {
        if (arguments.length > 1) { // extending with a name/value pair
            var ancestor = this[source];
            if (ancestor && (typeof value == "function") && // overriding a method?
                // the valueOf() comparison is to avoid circular references
                (!ancestor.valueOf || ancestor.valueOf() != value.valueOf()) &&
                /\bbase\b/.test(value)) {
                // get the underlying method
                var method = value.valueOf();
                // override
                value = function() {
                    var previous = this.base || Base.prototype.base;
                    this.base = ancestor;
                    var returnValue = method.apply(this, arguments);
                    this.base = previous;
                    return returnValue;
                };
                // point to the underlying method
                value.valueOf = function(type) {
                    return (type == "object") ? value : method;
                };
                value.toString = Base.toString;
            }
            this[source] = value;
        } else if (source) { // extending with an object literal
            var extend = Base.prototype.extend;
            // if this object has a customised extend method then use it
            if (!Base._prototyping && typeof this != "function") {
                extend = this.extend || extend;
            }
            var proto = {toSource: null};
            // do the "toString" and other methods manually
            var hidden = ["constructor", "toString", "valueOf"];
            // if we are prototyping then include the constructor
            var i = Base._prototyping ? 0 : 1;
            while (key = hidden[i++]) {
                if (source[key] != proto[key]) {
                    extend.call(this, key, source[key]);

                }
            }
            // copy each of the source object's properties to this object
            for (var key in source) {
                if (!proto[key]) extend.call(this, key, source[key]);
            }
        }
        return this;
    }
};

// initialise
Base = Base.extend({
    constructor: function() {
        this.extend(arguments[0]);
    }
}, {
    ancestor: Object,
    version: "1.1",

    forEach: function(object, block, context) {
        for (var key in object) {
            if (this.prototype[key] === undefined) {
                block.call(context, object[key], key, object);
            }
        }
    },

    implement: function() {
        for (var i = 0; i < arguments.length; i++) {
            if (typeof arguments[i] == "function") {
                // if it's a function, call it
                arguments[i](this.prototype);
            } else {
                // add the interface using the extend method
                this.prototype.extend(arguments[i]);
            }
        }
        return this;
    },

    toString: function() {
        return String(this.valueOf());
    }
});

DataStructures.Tree.js

/*from https://github.com/stephen-james/DataStructures.Tree */
/*
15.12.2014 : Edited version of DataStructures.Tree.js to be able to take more data into the JSON.
FOR CUSTOMIZING AND PUTTING IN ALL THE CUSTOM VALUES THAT YOU WANT TO GO INTO YOUR HIERARCHICAL JSON, JUMP TO THE LINES BELOW:
simpleChildRepresentation.push(decorateNode

AND YOU WILL SEE THE TEMPLATE BELOW. THERE IS ANOTHER TEMPLATE JUST BELOW THAT, FOR THE ROOT NODE, SO BE SURE TO EDIT THAT TOO.
*/
var DataStructures = DataStructures || {};

DataStructures.Tree = Base.extend({
    root : null,

    constructor : function(root){
        if (!root) {
            this.root = new DataStructures.TreeNode("root");
        }
        else {
            this.root = root;
        }

        // assign the tree as the parent of the root node
        this.root.parent = this;
    },

    findNode : function(value, matchFunction_node_value){
        var matchFunction = matchFunction_node_value,
            match =  null;

        if (!matchFunction){
            if (typeof(value) != "string") {
                // match objects JSON values
                matchFunction = function(nodeToMatch, valueToMatchOn) {
				return (nodeToMatch.name == value.name);
                };
            }
            else {
                // default string match is a function that matches by name;
                matchFunction = function(nodeToMatch, valueToMatchOn) {
                    return (nodeToMatch.name == valueToMatchOn);
                };
            }
        }

        this.nodes().each(function(node, cancel){
            if (matchFunction(node, value)) {
                match = node;
                cancel = true;
            }
        });

        return match;
    },

    nodes : function() {
        // nodes function provides a full suite of methods for traversing the nodes of a tree

        var current = null, // keeps a reference to the current node
            parentTree = this, // maintains a reference to the tree
            traversing = false, // a flag to indicate whether we have started traversing or not
            traversalQueue = [];

        return {
            reset : function() {
                current = null;
                traversalQueue = [];
                traversing = false;
            },
            initTraversal : function() {
                // begin traversing :
                // - set the current node
                current = parentTree.root;
                // - start off the traversal Queue
                traversalQueue.push(current);
                // - set the traversal flag to true
                traversing = true;
            },
            next : function() {

                if (!traversing) {
                    this.initTraversal();
                }

                current = traversalQueue.shift();
                if (current) {
                    // enqueue the children (bread-first-traversal)
                    current.children.each(function(childToEnqueue){
                        traversalQueue.push(childToEnqueue);
                    });
                }

                return current;
            },
            each : function(callback) {
                var cancel = false,
                    node = this.next();

                while (node && !cancel){
                    callback(node, cancel);
                    node = this.next();
                }
            }
        }
    },

    toSimpleObject : function(decorateNodeFunction) {
        var decorateNode = decorateNodeFunction || function(objectToDecorate, originalNode) {
                return objectToDecorate;
            },
            writeChildNodes = function(nodeCollection){
                var simpleChildRepresentation = [];
                if (nodeCollection) {
                    nodeCollection.each(function(node){
                        var children = writeChildNodes(node.children);

						/* ########TEMPLATE FOR YOUR JSON ################ */
						simpleChildRepresentation.push(decorateNode({
                            "name" :  node.name,
							 //CUSTOM COLUMNS
							"workcode" : node.id,
							"parentcode" : node.parentId,
							"department" : node.department,
							"totalorextract" : node.totalorextract,
							"total" : node.total,
							"pages" : node.pages,
							//CUSTOM COLUMNS DONE
                            "children" : children
                        }, node));
                    })
                }
                return simpleChildRepresentation;
            };
/* ########TEMPLATE FOR YOUR JSON, ROOT NODE ################ */
        return decorateNode({
                "name" :  this.root.name,
				/*CUSTOM FIELDS
				"workcode" : this.root.id,
				"parentcode" : this.root.parentId,
				"totalorextract" : this.root.totalorextract,
				"total" : this.root.total,
				"pages" : this.root.pages,
				"serial" : this.root.serial,
				//CUSTOM ENTRIES DONE */
                "children" : writeChildNodes(this.root.children)
            }, this.root);
    }
});
/* ######## OK TEMPLATE OVER ################ */


DataStructures.Tree.createFromFlatTable = function(flatTable){
    // factory method to create a tree given a flat table
    var tree,
        isNull = function(value){
            // a forgiving null check to cater for null values that are string representations of null
            return (value == null || value == "null" || value == "NULL")
        };

    if (flatTable) {
        if (flatTable instanceof Array) {
            tree = new DataStructures.Tree();

            for (var i=0; i < flatTable.length; i++) {
                var rowToConvertToNode = flatTable[i];

               if (isNull(rowToConvertToNode.parentId)) {
                   // this is the root node
                   var root = tree.root;

                   for (var keyToCopy in rowToConvertToNode) {
                       root[keyToCopy] = rowToConvertToNode[keyToCopy];
                   }
               }
               else {
                   // this is a child node, find the parent...
                   var matchById = function(nodeToMatch, valueToMatchOn) {

							return (nodeToMatch.id == valueToMatchOn);

                       },
                       parentNode = tree.findNode(rowToConvertToNode.parentId, matchById);

                    // if we managed to find the parentNode for this rowToConvert, add it as a child
                    if (parentNode) {
                        var convertedNode = parentNode.addChild(new DataStructures.TreeNode());

                        for (var keyToCopy in rowToConvertToNode) {
                            convertedNode[keyToCopy] = rowToConvertToNode[keyToCopy];
                        }

                    }
                    else {
                        throw {
                            name : "NodeNotFound",
                            message : "unable to find a parent node for row " + rowToConvertToNode.name
                        }
                    }
               }
            }
        }
    }
    else {
        tree = undefined;
    }
	

	return tree;
	
}

DataStructures.TreeNode = Base.extend({
    name : null,
    parent : null,
    siblings : null,
    children : null,

    previousSibling : null,
    nextSibling : null,

    constructor : function(name){
        if(name) { this.name = name };
        this.children = new DataStructures.TreeNodeCollection();
        this.siblings = new DataStructures.TreeNodeCollection();
    },

    addChild :  function(childNode) {
        childNode.parent = this;
        this.children.addNode(childNode);

        return childNode;
    }
});

DataStructures.TreeNodeCollection = Base.extend({
    internalArray : [],
    length : 0,

    constructor : function() {
        this.internalArray = [];
    },

    firstNode : function() {
        var nodeCount = this.internalArray.length;

        if (nodeCount > 0) {
            return this.internalArray[0];
        }
        else {
            return undefined;
        }
    },

    lastNode : function() {
        var nodeCount = this.internalArray.length;

        if (nodeCount > 0) {
            return this.internalArray[nodeCount - 1];
        }
        else {
            return undefined;
        }
    },

    addNode : function(nodeToAdd) {
        nodeToAdd.siblings = this;
        nodeToAdd.previousSibling = this.lastNode();
        if (nodeToAdd.previousSibling) { nodeToAdd.previousSibling.nextSibling = nodeToAdd; }
        nodeToAdd.nextSibling = undefined;
        this.internalArray.push(nodeToAdd);
        this.length++;
    },

    removeNode : function(nodeToRemove) {
        nodeToAdd.siblings = this;
        nodeToAdd.previousSibling = this.lastNode();
        if (nodeToAdd.previousSibling) { nodeToAdd.previousSibling.nextSibling = nodeToAdd; }
        nodeToAdd.nextSibling = undefined;
        this.internalArray.push(nodeToAdd);
        this.length++;
    },

    find : function(value, matchFunction_node_value) {

        var matchFunction = matchFunction_node_value,
            internalArray = this.internalArray;

        if (!matchFunction){
            if (typeof(value) != "string") {
                // match objects JSON values
                matchFunction = function(nodeToMatch, valueToMatchOn) {
                    return (nodeToMatch.name == value.name);
                };
            }
            else {
                // default string match is a function that matches by name;
                matchFunction = function(nodeToMatch, valueToMatchOn) {
                    return (nodeToMatch.name == valueToMatchOn);
                };
            }
        }

        for(var i=0; i<internalArray.length; i++){
            if (matchFunction(internalArray[i], value)){
                return internalArray[i];
            }
        }

        return null;
    },

    nodeAt : function(index) {
        return this.internalArray[index];
    },

    each : function(callback) {
        for (var i = 0; i < this.internalArray.length; i++) {
            callback(this.internalArray[i]);
        }
    }
});

electrical5.csv

index.html

<!DOCTYPE html>
<meta charset="utf-8">
    <style>
        
        path {
            stroke: #fff;
            fill-rule: evenodd;
        }
        
        text {
            font-family: Arial, sans-serif;
            font-size: 12px;
        }
        
        /*add tooltip*/
        div.tooltip {
            position: absolute;
            top: 50px;
            right: 3%;
            -moz-border-radius:5px;
            border-radius: 0px;
            border: 2px solid rgba(127, 35, 183, 1);
            background: #f3f3f3;
            opacity: .9;
            color: black;
            padding: 10px;
            width: 400px;
			height: 400px;
            font: 12px sans-serif;
            font-size: 14px;
            z-index: 10;
			box-shadow: 5px 5px 20px #888888;
        }
        
        .tooltip .title {
            font-size: 13px;
        }
        
        .tooltip .name {
            font-weight:bold;
            font-size: 15px;
        }
        
		.polygon:hover {
		fill: yellow;
		}
        </style>
    <body>
		<script type="text/javascript" src="base.js"></script>
		<script type="text/javascript" src="DataStructures.Tree.js"></script>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script>
            
            var width = 700,
            height = 700,
            radius = Math.min(width, height) / 2;
            
            var x = d3.scale.linear()
            .range([0, 2 * Math.PI]);
            
            var y = d3.scale.linear()
            .range([0, radius]);
            
            var color = d3.scale.category20c();
            
            var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");
            
            var partition = d3.layout.partition()
            .value(function(d) { return d.size; }); //so the sizes of each node will be decided by its "size" attribute.
            
            /*Tooltip definition */
            var div = d3.select("body").append("div")
			.attr("class", "tooltip")
            .style("opacity", 1)
			.html("<b>Pune's Budget : Electricity Related Expenditures</b><br>Move your mouse over the diagram to see the details. Clicking on a section will take you deeper in. Clicking in the center will move you back up one level.");
            
            
            var arc = d3.svg.arc()
            .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
            .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
            .innerRadius(function(d) { return Math.max(0, y(d.y)); })
            .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });

            //d3.json("electrical4.json", function(error, root) { //default datafile is mydata.json
			// injecting from the line below...
d3.csv("electrical5.csv", function(data){
var tree = DataStructures.Tree.createFromFlatTable(data),
            root = tree.toSimpleObject(function(objectToDecorate, originalNode) {
                objectToDecorate.size = originalNode.size;
                if (objectToDecorate.children && objectToDecorate.children.length == 0) {
                    delete objectToDecorate.children;
                }
                return objectToDecorate;
            }); // ..to this line. */
                    var g = svg.selectAll("g")
                    .data(partition.nodes(root))
                    .enter().append("g");
                    
                                       
                    var path = g.append("path")
                    .attr("d", arc)
                    .style("fill", function(d, i) { return color(i); })
                    .on("click", click)
                     /*The following two '.on' attributes for tooltip*/
                    .on("mouseover", function(d) {
                        div.html(displayonpanel(d));
						
                        /*.style("left", (d3.event.pageX) + "px")
                        .style("top", (d3.event.pageY - 28) + "px");
						//Removing this part as it's redundant : we don't WANT the info to show up anywhere near the mouse; it's supposed to be at a fixed place on the page, away from the diagram but still visible to the user. Its position will be defined in the stylesheet for div.tooltip at the top.
						*/
						//console.log(d.name + " x=" + d3.event.pageX+ ", y=" + d3.event.pageY); //debugging
                        })
                    .on("mouseout", function(d) {
						/*div.transition()
                        .duration(500)
                        .style("opacity", 1); //what if I don't want it to disappear??
						*/
                        });
                    /*
                    var text = g.append("text")
                    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; })
                    .attr('text-anchor', function (d) { return computeTextRotation(d) > 180 ? "end" : "start"; })
                    .attr("dx", "6") // margin
                    .attr("dy", ".35em") // vertical-align
                    .attr("pointer-events", "none")
                    .text(function(d) { return d.childDesc; }); // #### TEXT LABEL ##### originally d.childDesc
                    */
                    function click(d) {
                    // fade out all text elements
                    /*text.transition().attr("opacity", 0);*/
                    
                    path.transition()
                    .duration(750)
                    .attrTween("d", arcTween(d))
                    /*
					.each("end", function(e, i) {
                          // check if the animated element's data e lies within the visible angle span given in d
                          if (e.x >= d.x && e.x < (d.x + d.dx)) {
                          // get a selection of the associated text element
						  
                          var arcText = d3.select(this.parentNode).select("text");
                          // fade in the text element and recalculate positions
                          arcText.transition().duration(750)
                          .attr("opacity", 1)
                          .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; })
                          .attr('text-anchor', function (d) { return computeTextRotation(d) > 180 ? "end" : "start"; })
                          }
                          })
						  */
						  ;
                    }
                    });
            
            d3.select(self.frameElement).style("height", height + "px");
          
            // Interpolate the scales!
            function arcTween(d) {
                var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
                yd = d3.interpolate(y.domain(), [d.y, 1]),
                yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
                return function(d, i) {
                    return i
                    ? function(t) { return arc(d); }
                    : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
                };
            }
            
            function computeTextRotation(d) {
                var ang = (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180;
                //return (ang > 90) ? 180 + ang : ang;
                return 0;
            }

		/*Nikhil : writing this function to display number in more realistic terms */
		function easynumber(F) {
			if(!F) return "";
			else if(F >= 10000000 ) return "Rs." + F/10000000 + " crore";
			else if(F >= 100000 ) return "Rs." + F/100000 + " lakh";
			else if(F >= 1000 ) return "Rs." + F/1000 + " thousand";
			else return F;
			}

function displayonpanel(d) {
var TITLE = "<b>Work: " + d.name + "</b><br>Department: " + d.department + "<br>Work code: " + d.workcode + ", Parent code: " + d.parentcode + "<br>";
var NUMBERS = "";
if(d.size) NUMBERS += "Budget Amount: " + easynumber(d.size) + " (" + d.size + ")<br>";
if(d.totalorextract == "E") NUMBERS += "This is an Extract from a larger budget head.<br>Estimated total: " + easynumber(d.total) + " (" + d.total + ")<br>";
else if(d.totalorextract == "T") NUMBERS += "Budgeted total: " + easynumber(d.total) + " (" + d.total + ")<br>";
var REFERENCE = "";
if(d.pages) REFERENCE = "<br>Reference: page no. " + d.pages + " (right side of / is PDF page number)";
return TITLE + "<br>" + NUMBERS + REFERENCE + "<br><br><br>Move your mouse over the diagram to see the details. Clicking on a section will take you deeper in. Clicking in the center will move you up one level."
}
</script>
<p>Electrical budget of Pune, 2014-15</p></body>