d3.js Zoomable Sunburst visualization from self-referencing CSV input

Question

I'm a newbie at d3.js and need help to adapt Zoomable Sunburst to make it work with self-referencing CSV data. Sample lines from the input CSV:

id,parentId,name,size
ROOT,NULL,Root,
RE,ROOT,General > Revenue Expenditure,
RE11,RE,Main supervision recovery etc.,
RE11A109K,RE11,Shivjayanti celebrations and lighting,170000
RE11H108,RE11,Electicity for import tax naka,2550000
RE11J,RE11,Maintaince for main building,
RE11J101A,RE11J,Electricity expenditure,11475000
RE11J101 C,RE11J,Power lift,2125000

As you can see, there are variable levels of depth. At some places the data is coming at 3rd level, at others we might have parent-child relationships going 9 levels deep, and so on. That's government budgets for you! While there are columns in addition to these 4 that aren't critical to the visualization (so omitted here), I would be displaying their contents in a side pane on mouseover. So while non-critical, any additional columns do need to carry through and not get dropped.

I looked into many d3.nest() examples but those doesn't seem to work for parent-child self-referencing columns and data with variable levels of depth.

I'm presently using a workaround to convert this into hierarchical JSON in the flare.json format, using this DataStructures.Tree project . But looking for a more direct solution. Almost there, but not able to mix up code from different sources. Would be grateful to be shown a full top-to-bottom solution. Thanks in advance!

Answer 1

Got it. We include these scripts from the DataStructures.Tree project linked in the question : base.js, DataStructures.Tree.js. (you'll find them in /js/lib/ and /js/vendor/)

<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>

Then, we replace this line,

d3.json("flare.json", functon(error, root) {

..with these lines:

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;
            });
//console.log(JSON.stringify(root));

leave everything else just as it is.

---

Uncomment the console.log line for debugging; it will put the json code in the browser console when you load the page. You can also make a textarea in the webpage and output the json code in that.

document.getElementById("SHOWME").value = JSON.stringify(root);

[at bottom of page]

<textarea id="SHOWME"></textarea>

it will be unformatted json code, so copy-paste it to http://codebeautify.org/jsonviewer and that ought to give you a well-formatted json.

---

To get more columns in apart from the regular [id,parentId,name,size] , we have to edit DataStructures.Tree.js

Locate these lines:

simpleChildRepresentation.push(decorateNode({
    "name" :  node.name,
    "children" : children
}, node));

And insert the extra columns in the same format as the node.name line.

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));

You can now directly visualize self-referencing csv data on any d3.js visualization that uses flare.json . Animations get a bit clunkier, though.