Using JSONs implicit hierarchy

Community Help
1

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:

{
   "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?

{
   "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"
                  }
               ]
            }
         ]
      }
   ]
}
2

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

1 Like