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.

Orleans

Also what type of data you want to make interactive.. like numbers can look interactive in graphs but strings dont so... – Reconvert

I would go for an interface similar to the one offered by LINQPad (a tool for running C#). It has a nice way of visualizing potentially large object graphs, in which sub-objects can be collapsed/expanded. See screenshot here: code.google.com/p/linqpadvisualizer – Diann

@VirajNalawade I am looking for something that is interactive, and self presented. I would like to represent data in a way that is using the least amount of textual data. Take the example I have given, as the user enters the page he is faced with 4 shapes that represent each department, clicking on each shape will eliminate 3/4 of the other data, and then presents the user shape each representing the element of an array within that department. – Orleans

@w0lf this will be eventually a web app so front-end technologies is needed. – Orleans

@EasyQuestions I know. I just proposed a conceptual way of doing it in case you don't find an existing solution. If I had an implementation that does what you want, I would have posted it as an answer. – Diann

@EasyQuestions: Were you able to find a solution for the above problem statement? I am also looking for such visualization functionality.. – Thiosinamine

Answer 1

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

They have a well documented example on the page.

Tiflis

this is very close to what I am looking for it nicely shows the nested data structure, and it is interactive, but I have that implemented already and would like a more modern approach using interactive databins. please read my comment above. – Orleans

@EasyQuestions interested in if you were able to find a better solution! – Debauchery

Answer 2

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

Progenitor

Answer 3

This gives you a tree view that looks similar to Regedit

http://jsonviewer.stack.hu/

Grishilde

Answer 4

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

Dispersant

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Osvaldooswal

Answer 5

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

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

Sixfold

chart.js doesn't have any charts to represent the nested data strcuture in the way that I need. Please read my comments under the question. – Orleans