HN Explorer

50 comments

[ 3.2 ms ] story [ 108 ms ] thread
chrisseaton
Is it possible to express a JSON graph (as opposed to a simple tree)? I didn't think it was.
nixpulvis
What is a JSON graph?
chrisseaton
A general graph is a tree without the restriction that a node can have at most one parent.
nixpulvis
Correct.

So how is JSON a graph? Or maybe the answer is just, No. Not generally. I'm confused by your question.

chrisseaton
You're just repeating what I originally asked?
nixpulvis
Fine, let me be clear then.

No. JSON is not a graph.

Any visualization of a graph from JSON would be a specific encoding of a graph (probably using IDs) which is not generally interpreted as a graph.

Gare
Tree is a type of graph, though.
8note
Each object is a node.

{ Left:{}, Right:{} }

Has a tree with 3 nodes

If you don't parse the JSON, you tend to traverse it as a graph

[deleted]
(comment deleted)
[deleted]
(comment deleted)
worg
I think the author means Diagram instead of graph as data structure
chrisseaton
Ah, right. I thought they had some adjacency list format or something.
aliqot
That is a graph. It has vertices and edges. Any tree or hierarchical structure can be expressed this way.
worg
Of course the display representation on the tool is indeed a graph, but some people might wonder how one can represent a multi-parent node in a JSON tree or have some cyclic structure, which of course is not possible and cause confusion
aliqot
All JSON would be an acyclic graph, as JSON does not support cyclically linked elements (that I'm aware of). You'd represent encapsulated JSON objects with a structure like a 'polyforest tree'.

If cyclicallity is needed specifically, cyclic graphs do exist, but it was my impression that JSON doesn't have these, or I'm unable to imagine how that would work. While two fields may have the same 'value' in a JSON object, I don't know how I could express cyclicallity using normal JSON syntax to say that two identical values would be linked cyclically.

8n4vidtmkvmk
you are correct, you can't have cycles in json. you can invent conventions for representing cycles, but can't express them natively. i did write a toJS stringifier that handles cycles, but it outputs JS not JSON
[deleted]
(comment deleted)
zwkrt
trees are graphs, so there is no problem!
tunesmith
Does JSON Crack support a node having multiple parents?
[deleted]
(comment deleted)
emadda
I have built a similar tree visualisation tool to merge categories from different e-commerce stores (turning a tree into a graph).

https://tree-merge.com/merging-categories-4-independant-diy-...

The conclusion I came to here is that nested/indented lists are actually quite nice to visualise trees. JSON text is already a good visual UI.

nopenopenopeno
What is a use case for this? Is indentation not more or less ideal for visualizing hierarchical data?
kmoser
It's great for showing to management, who tends to like things presented in org chart format.
boxed
Not if you use 2 spaces for indent ;)
nielsbot
Maybe if one is representing something like a schema where JSON properties can be references to other entities in your JSON file?
MilStdJunkie
PlantUML had/has(?) a JSON graph mode too, which works well.

Now, this is light years from PlantUML, but Vega abd Vega-Lite can do just about anything with JSON data. It's the most powerful textual graph description vocabulary I've ever seen, by far, but it's too verbose for my average user.

theogravity
I don't have to download anything to use this tool. You have to download PlantUML
MilStdJunkie
I'm never in a position where I can use cloud-hosted stuff, sad to say. So everything is hosted in-house. Between that, ITAR, and the general red tape nightmare it's sort of a minor miracle anyone makes anything.

Having said that I really like this new JSONCRACK a lot, now that I've played with it a little.

nivertech
https://plantuml.com/json

Not sure how to get rid of the enclosing PlantUML pragmas:

  @startjson
  {
     "fruit":"Apple",
     "size":"Large",
     "color": ["Red", "Green"]
  }
  @endjson
MilStdJunkie
Hmm! I dunno. I usually use PlantUML in Asciidoc and put an include in there to pull the JSON data into the graph block.

  //Asciidoc follows
  [plantuml]
  ----
  @startjson
  include::../path/to/fruit.json[]
  @endjson
  ----
  ```
Goosey
Looks like a great tool for explaining a JSON object to a less technical audience? I dunno I'm going to give it a shot.

Also, a little meta, but I like that the github page was linked to rather than directly linking to the product's page. It lets me know upfront that this is open source something I'm dealing with. +1 to the submitter

thadk
In case you have to do something like this in your code base, d3-hierarchy is gold.

Particularly this digraph() example: https://observablehq.com/@d3/visiting-a-d3-hierarchy. With a bit of modification away from the GraphViz format, the result fits straight into one of the many graph component visualization libraries like react-flow.

xwdv
A bit of an aside but I thought the practice of using drugs in an application or tool names had fallen out of favor? Remember Amphetamine?
conqueso
I also initially thought of crack cocaine, but it turns out the name means literally to crack the data - as in break it apart into visual nodes
socialismisok
Yeah, the name sure threw me at first too. Even with the the definition that's like "cracking oil" it's just an odd choice.
kmoser
Google "json to graph" and you will find many tools to do this.
hadlock
Would be great to get a tool that could diff(erence) two JSON files, with the output being a grid of gray boxes, each gray box represents where a top level element is the same between both, and yellow box represents some sub-level item inside the top level item is not the same between both, blue boxes represent where a new top level element is only present in the left side (added), and red represents only present in the right side (deleted)

You could visually diff a whole lot of reports, pretty much instantly. Our PM had a paid tool that could do this, but wasn't sure what it was.

smdyc1
Sadly I have to use BeyondCompare for this, but I'd love to know what your PM uses.
[deleted]
(comment deleted)
theteapot
Stable formatting the JSON (sorted keys, same indent) then using a graphical diff tool seems to work pretty well for me.
lionkor
The JSON spec, of course, has a diff specified, and common json implementation can in fact diff json. You could then put that result back into a graph (since its also just json, in flattened form i believe), and youre done ;)
afiori
Far from perfect but I use a VSCode extension[0] to sort json object keys, then (if properly indented) normal diffing tools work slightly better

Once I wrote a simple script to convert json files to `path : value\n` form; that is getting this

."a" : 1 ."b" : {} ."b"."a" : "" ."b"."c" : [] ."b"."c"[0] : true

from the json { "a": 1, "b": { "a": "", "c": [true] } }

It made better diffs but it was also harder to read.

[0] https://marketplace.visualstudio.com/items?itemName=richie5u...

petesergeant
This looks incredible. Just wish it came as a self-contained Electron app too