Visualize a nested JSON structure

Consider this JSON object :

{ department_1 : [{ id : 1, name = Joe Smith, email : jsmith@usf.edu}, ...., { id : 500, name = Bun Sam, email : bsam@usf.edu}]}
{ department_2 : [{ id : 1, name = Joe Smith, email : jsmith@usf.edu}, ...., { id : 500, name = Bun Sam, email : bsam@usf.edu}]}
{ department_3 : [{ id : 1, name = Joe Smith, email : jsmith@usf.edu}, ...., { id : 500, name = Bun Sam, email : bsam@usf.edu}]}
{ department_4 : [{ id : 1, name = Joe Smith, email : jsmith@usf.edu}, ...., { id : 500, name = Bun Sam, email : bsam@usf.edu}]}

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

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

They have a well documented example on the page.

Advertisement

Answer