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.

Answer 2

Try Chart.js. You can find a lot of examples and tutorials online.

Here is the documentation link http://www.chartjs.org/docs/

Answer 3

Here's a nice visualization of nested tables. It isn't interactive, but you could make it so by converting the text areas to <textarea>:

http://bl.ocks.org/nautat/4085017

Answer 4

This gives you a tree view that looks similar to Regedit

http://jsonviewer.stack.hu/

Answer 5

I created a json viewer and editor library. you can try it here: https://guifier.com/json
if you like the library please dont forget to star it on github: https://github.com/maliknajjar/guifier
and this is the library on npm: https://www.npmjs.com/package/guifier