title: D3.js Treemap - Flat data input, and it's conversion to hierarchical data
body: <p>I'm using d3.js in a swt browser environment. Since d3.js wasn't my first choice to draw a treemap, my data is flat and looks like this:</p>
  
  <pre><code>var datatable = [
     {name:'Global',    parent: 'null',  value:      0, color: 0},
     {name:'America',   parent:'Global', value:      0, color: 0},
     {name:'Europe',    parent:'Global', value:      0, color: 0},
     {name:'Asia',      parent:'Global', value:      0, color: 0},
     {name:'Australia', parent:'Global', value:      0, color:  0},
     {name:'France',    parent:'Europe', value:      11, color:  }
  ];
  </code></pre>
  
  <p>Some will recognize that this is a modified data table used in google charts to 'fill' a chart.
  In d3 I need to pass a hierarchical structure to my treemap function which leads me to the d3.nest function:</p>
  
  <pre><code>var root =  d3.nest()
  .key(function(d) { return d.name; })
  .entries(datatable);
  </code></pre>
  
  <p>This is quite a step into the right direction and gives me something like this:</p>
  
  <pre><code>[
             {
             "key": "Global",
             "values": [
                  {
                     "color": "0",
                     "name": "America",
                     "parent": "Global",
                     "value": "0",
                   },
               {
                     "color": "0",
                     "name": "Europe",
                     "parent": "Global",
                     "value": "0",
                   },  
                ]
            },
            { 
            "key": "Europe",
            "values": [
                 {
                      "color": "0",
                      "name": "France",
                      "parent": "Europe",
                      "value": "11",
                  },
              {
                      "color": "0",
                      "name": "Germany",
                      "parent": "Europe",
                      "value": "15",
                   },      
           ]
      }
      ]
  </code></pre>
  
  <p>But what I do want is something like this, to pass it to the treemap layout:</p>
  
  <pre><code>[
             {
                "key": "Global",
                "values": [
                   {
                      "key": "Europe",
                      "values": [
                       {
                           "color": "0",
                           "name": "France",
                           "parent": "Europe",
                           "value": "11",
                       },
             ]
          }
         ]
     }
     ]
  </code></pre>
  
  <p>So any idea how solve that issue? I havn't found a way to invoke the nest().key function in such a way the the result is satisfying. I'm also looking for a way to create a hierarchical structure more dynamically for more than two layers. Any idea?</p>
  
  <p>I would highly appreciate any hints and thank you in advance.</p>