JSON Crack – Visualize JSON data into graphs • Hacker News Board

Re: JSON Crack – Visualize JSON data into graphs

#91

Post by dotancohen » Mon, Aug 29, 2022, 11:35 AM UTC

geokon wrote: post #90

dotancohen wrote: post #89

Earlier quoted context omitted.

Python formats it almost exactly like you did: $ python3 -m json.tool { "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": [ "Radiation resistance", "Turning tiny", "Radiation blast" ] }, { "name": "Madame Uppercut", "age": 39, "secretIdentity": "Jane Wilson",…

I don't python, but this scheme missed the point. Keys are vertically aligned, but values are not. Some brackets are vertically aligned, other are not (you have to hunt for the starting square brackets). Bracket take up a whole line each wasting vertical space.

I see, thanks. For me, the point is just "indent successive objects" so it suffices - especially when I'm in a Python mindset and mentally filtering out brackets anyway. But I could understand why you prefer the formatting as you do.

Re: JSON Crack – Visualize JSON data into graphs

#92

Post by dotancohen » Mon, Aug 29, 2022, 11:39 AM UTC

user5678 wrote: post #59

geokon wrote: post #38

Earlier quoted context omitted.

The point was that the keys and values are all aligned to the same minimal column numbers :) Both `json-mode` `json-reformat` don't seem to do that (and ideally I'd like something that'd work with Clojure/EDN code..)

gg=G in evil mode will do that.

Evil (Emacs 27.1) produced this:

  {
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
          {
          "name": "Molecule Man",
          "age": 29,
          "secretIdentity": "Dan Jukes",
          "powers": [
                 "Radiation resistance",
                 "Turning tiny",
                 "Radiation blast"
                 ]
          },
          {
          "name": "Madame Uppercut",
          "age": 39,
          "secretIdentity": "Jane Wilson",
          "powers": [
                 "Million tonne punch",
                 "Damage resistance",
                 "Superhuman reflexes"
                 ]
          },
          {
          "name": "Eternal Flame",
          "age": 1000000,
          "secretIdentity": "Unknown",
          "powers": [
                 "Immortality",
                 "Heat Immunity",
                 "Inferno",
                 "Teleportation",
                 "Interdimensional travel"
                 ]
              }
          ]
  }

Interestingly, the first-level items are not indented. Real VIM 8.1 produced the same format, but the first-level items _are_ indented.

Re: JSON Crack – Visualize JSON data into graphs

#93

Post by jhiggins777 » Mon, Aug 29, 2022, 12:36 PM UTC

That's really cool. One change would be for nested structures I wouldn't put and arrow but have it be a property with the rest of the properties that then has an arrow to the contents.

Re: JSON Crack – Visualize JSON data into graphs

#94

Post by geokon » Mon, Aug 29, 2022, 1:07 PM UTC

dotancohen wrote: post #91

geokon wrote: post #90

Earlier quoted context omitted.

I don't python, but this scheme missed the point. Keys are vertically aligned, but values are not. Some brackets are vertically aligned, other are not (you have to hunt for the starting square brackets). Bracket take up a whole line each wasting vertical space.

I see, thanks. For me, the point is just "indent successive objects" so it suffices - especially when I'm in a Python mindset and mentally filtering out brackets anyway. But I could understand why you prefer the formatting as you do.

I think having the values aligned make it much quicker to read off entries. I will generally looked at the keys for the first entry, but for subsequent entries I assume the same ordering and just look at the values on the right.

It's a bit trivial, but another subtle effect that I like is that the sub-blocks are not mutually vertically aligned due to being offset by the semi-random length of the key

So for instance

    {"squadName":  "Super hero squad",
     "homeTown":   "Metro City",
     "formed":     2016,
     "secretBase": "Super tower",
     "active":     true,
     "members":    [{"name":           "Molecule Man",
                     "age":            29,
                     "secretIdentity": "Dan Jukes",
                     "powers":         ["Radiation resistance",
                                        "Turning tiny",
                                        "Radiation blast"]},
                    {"name":           "Madame Uppercut",
                     "age":            39,
                     "secretIdentity": "Jane Wilson",
                     "powers":         ["Million tonne punch",
                                        "Damage resistance",
                                        "Superhuman reflexes"]}],
    "enemies": [{"name":           "Eternal Flame",
                 "age":            1000000,
                 "secretIdentity": "Unknown",
                 "powers":         ["Immortality",
                                    "Heat Immunity",
                                    "Inferno",
                                    "Teleportation",
                                    "Interdimensional travel"]}]}

at a glance you see that the third person is not part of the same list as the first two

If all second level blocks are at the same level then you need to visually catch that there is extra key.

Re: JSON Crack – Visualize JSON data into graphs

#95

Post by throwaway2016a » Mon, Aug 29, 2022, 2:37 PM UTC

Looks like a cool project and I love that it is open source.

But naming a graph visualization tool using the same word as the Microsoft Flowchart visualization tool would make me somewhat nervous since it can cause "brand confusion." Granted I can't find a trademark listed for Visio specifically (maybe the name is too generic) so may be all good.

Re: JSON Crack – Visualize JSON data into graphs

#96

Post by ozim » Mon, Aug 29, 2022, 4:33 PM UTC

coenhyde wrote: post #45

geokon wrote: post #36

If you indent your code manually then you can achieve something that I feel looks quite similar. So the example they give would be written as: {"squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [{"name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]}, {"nam…

If you climb to the top of a really tall mountain you'll get a similar perspective to what Google Maps provides.

I actually laughed.

Though - one does not have to do that stuff manually I can imagine some json linter could be configured to do such layout, or someone can just write tool to do that. So idea for this indentation is not bad IMHO.

Re: JSON Crack – Visualize JSON data into graphs

#97

Post by MatthewT123 » Tue, Aug 30, 2022, 6:52 AM UTC

Pedantry - I clicked on the link wondering how it would represent cycles in the JSON, then I found it is a tree. Should the strap line be changed to "Visualize JSON data into trees" :).

Re: JSON Crack – Visualize JSON data into graphs

#98

Post by dang » Tue, Aug 30, 2022, 8:57 PM UTC

helsinkiandrew wrote: post #5

I thought this was a new feature in Microsoft Visio initially. Would “JSON Visio” be a breach of their trademark? https://trademarks.justia.com/742/75/visio-74275413.html

(We've since changed the title and URL by the submitter's request.)

Re: JSON Crack – Visualize JSON data into graphs

#99

Post by raxxorraxor » Thu, Sep 01, 2022, 12:03 PM UTC

youngNed wrote: post #21

this might be a good place to ask: is there any tool out there that can help with json to normalised tables? I know that many databases can store json, but i often have api's that i would like storing in tables, and feel that 'splitting it out' should be fairly trivial. Each time i think about making a tool, i am put off by the fact that there is a voice saying 'someone will have done this, in a much better way than…

If you have an MS office suite the power query editor can expand JSON to columns. Doesn't result in a table that is normalized per se, but it is quite a powerful tool overall. Not really a Microsoft fan, but what they provide here is not bad at all.

Re: JSON Crack – Visualize JSON data into graphs

#100

Post by sn9 » Thu, Sep 01, 2022, 4:41 PM UTC

geokon wrote: post #36

If you indent your code manually then you can achieve something that I feel looks quite similar. So the example they give would be written as: {"squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [{"name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]}, {"nam…

You can even do this by console logging with JSON.stringify(): https://stackoverflow.com/questions/4810841/pretty-print-jso...