Visualize a nested JSON structure

Question

Consider this JSON object :

{ department_1 : [{ id : 1, name = Joe Smith, email : [email protected]}, ...., { id : 500, name = Bun Sam, email : [email protected]}]}
{ department_2 : [{ id : 1, name = Joe Smith, email : [email protected]}, ...., { id : 500, name = Bun Sam, email : [email protected]}]}
{ department_3 : [{ id : 1, name = Joe Smith, email : [email protected]}, ...., { id : 500, name = Bun Sam, email : [email protected]}]}
{ department_4 : [{ id : 1, name = Joe Smith, email : [email protected]}, ...., { id : 500, name = Bun Sam, email : [email protected]}]}

Obviously this is a nested data structure, and there are many records, in this example in the deepest level we have about 2000 records. what is the best way to visualize this in a responsive and interactive manner. I have already used the table, and it doesn't look that interactive. I am looking for ideas and approaches, and maybe some sample implementations to visualize this taking the usability into account.

Answer 1

Try Collapsible Tree Layout using d3. (selected out of their gallery)

They have a well documented example on the page.