# Using JSONs implicit hierarchy

**URL:** <https://talk.observablehq.com/t/using-jsons-implicit-hierarchy/6111>\
**Category:** Help\
**Created:** [January 21, 2022, 12:29pm UTC](https://talk.observablehq.com/t/using-jsons-implicit-hierarchy/6111 "2022-01-21T12:29:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![wkrt](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/wkrt/32/6042_2.png) [@wkrt](https://talk.observablehq.com/u/wkrt)\
**Post date:** [January 21, 2022, 12:29pm UTC](https://talk.observablehq.com/t/using-jsons-implicit-hierarchy/6111/1 "2022-01-21T12:29:09Z")

</div>

Hey guys,  
actually I didn’t start learning D3.js yet, but it seems very promising.  
For a start I wanted to visualize nested JSON objects as a tree.  
All examples I found on observable use JSON objects with explicit hierarchy information in their attributes, for example the _children_ attribute:

```auto
{
   "name":"Alex",
   "children":[
      {
         "name":"Josh",
         "children":[
            {
               "name":"Joelle"
            }
         ]
      },
      {
         "name":"David",
         "children":[
            {
               "name":"Lina"
            },
            {
               "name":"Martha"
            }
         ]
      },
      {
         "name":"Lara",
         "children":[
            
         ]
      }
   ]
}

```

But actually, hierarchy is implicitly included in the JSON notation, so why is this needed?  
Is it possible, and are there any examples to visualize JSON data as following as a tree?

```auto
{
   "fruit":"Apple",
   "vitamins":[
      {
         "name":"Vitamin C",
         "consistsOf":[
            {
               "id":"H",
               "name":"Hydrogen",
               "colors":[
                  {
                     "name":"colorless"
                  }
               ]
            },
            {
               "id":"O",
               "name":"Oxygen",
               "colors":[
                  {
                     "name":"colorless"
                  },
                  {
                     "name":"blue"
                  }
               ]
            }
         ]
      },
      {
         "name":"Vitamin D",
         "consistsOf":[
            {
               "id":"H",
               "name":"Hydrogen",
               "colors":[
                  {
                     "name":"colorless"
                  }
               ]
            },
            {
               "id":"O",
               "name":"Oxygen",
               "colors":[
                  {
                     "name":"colorless"
                  },
                  {
                     "name":"blue"
                  }
               ]
            },
            {
               "id":"C",
               "name":"Carbon",
               "colors":[
                  {
                     "name":"black"
                  },
                  {
                     "name":"grey"
                  }
               ]
            }
         ]
      }
   ]
}

```

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\
**Post date:** [January 23, 2022, 4:26am UTC](https://talk.observablehq.com/t/using-jsons-implicit-hierarchy/6111/2 "2022-01-23T04:26:40Z")

</div>

The JSON documents don’t always contain the hierarchy needed for other parts of D3. Data sources are often tabular formatted as the are imported from CSV and so need to be wrangled into a hieratical structure. [d3.group, d3.rollup, d3.index / D3 / Observable](https://observablehq.com/@d3/d3-group)