Create tree hierarchy from csv in d3.js

Question

I've read a number of questions on similar subjects, but none of the answers seem to work for my use case (or I'm just really confused). I have a csv file dump from a database and I want to show the data's hierarchy using the Dendrogram example found here http://mbostock.github.com/d3/ex/cluster.html My csv file looks like this: ``` groupGenre,basicGenre,value Maps,Atlases (Geographic),10 Catalogs,Auction catalogs,28 No larger group,Academic dissertations,451 No larger group,Account books,1 No larger group,Acrostics,56 No larger group,Addresses,62 No larger group,Advertisements,790 No larger group,Allegories,35 No larger group,Almanacs,3401 No larger group,Alphabets,100 No larger group,Anagrams,4 No larger group,Anthologies,133 No larger group,Anti-slavery literature,1 ``` where value is the number of books published in that genre. Here is the code I've adapted and now revised based on suggestions below It can also be found at http://dev.stg.brown.edu/projects/Egan/Vis/tree/tree.html…

Accepted Answer

The first issue looks to be that you are passing a function to `entries` instead of an array which it is expecting as per the docs. Try passing the parameter `csv` to the `entries` method instead.

```
function makeTree(csv) {
   var data = d3.nest()
        .key(function(d) {return d.genre; })
        .key(function(d) {return d.groupGenre; })
        .entries(csv);

return data;
}
```

The second issue is that your `makeTree` function is not returning a tree structure like `tree.nodes` is expecting, see docs here. You want to create an object like the following with your `makeTree` method.

```
 var root = 
 {
 "basicGenre": "Maps",
 "value" : 5,
 "children": [
  {
   "basicGenre": "Atlases (Geographic)",
   "value" : 10
   "children": [
    {
     "basicGenre": "Atlases 1",
     "children": []
    },
    {
     "basicGenre": "Atlases 2",
     "children": []
    }
   ]
  }
 ]
}
```

Basically you need to create a tree like heiarchary based on the `groupGenre` and `basicGenre` all underneath some all encompassing root node.

You may also want to look at the this SO question as it deals with creating a proper object to pass to `tree.nodes`.

Here is a working JSFiddle using your updated code.

Create tree hierarchy from csv in d3.js

Solution

Problem

Related problems