JSON Crack – Visualize JSON data into graphs

[geokon]

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"]},
                    {"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"]}]}

I've been doing with Clojure/EDN data and I feel it makes it much easier to visually parse.

PS: Does anyone knows if there was an emacs mode that'd do this for me automagically?

[coenhyde]

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

[dotancohen]

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",
            "powers": [
                "Million tonne punch",
                "Damage resistance",
                "Superhuman reflexes"
            ]
        },
        {
            "name": "Eternal Flame",
            "age": 1000000,
            "secretIdentity": "Unknown",
            "powers": [
                "Immortality",
                "Heat Immunity",
                "Inferno",
                "Teleportation",
                "Interdimensional travel"
            ]
        }
    ]
  }

[nerdponx]

This is how Lisp code (and S-expressions in general) is conventionally indented.

[sn9]

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

[bboozzoo]

Have you tried json-mode? Seems to work pretty well.

[KevinEldon]

Cool. PlantUML also does JSON visualization [1] if you need a local option or are hesitant to load your data onto a website.

[1] https://plantuml.com/json

[wartijn_]

JSON Viso can be run locally as well

https://github.com/AykutSarac/jsonvisio.com

[blooalien]

Nice! Thank you for that. Did not know that.

[lloydatkinson]

You can download the tool

[867-5309]

are you an evil hypnotist?

[Manfred]

Looks good. Unfortunately most JSON (I personally handle) contains private information and I would never paste it into a web page.

[wartijn_]

You can run this on your local machine

https://github.com/AykutSarac/jsonvisio.com

[spinaker]

The arrays are not presented correctly. Each element in the array points to the parent, rather than being grouped together. Ditto for Objects (key/value pairs).

Since JSON is just a simple tree structure without cycles, the JSON "visualization" doesn't buy you much that indented text formatting can't already give you.

[yieldcrv]

Note: when browsing on mobile it isn't obvious that there are examples, the tweet from github isnt obvious that it is an example and the interactive graph doesnt look like one because it zooms into blank space

although I have a desktop and do development there, my interest in a new tool is frequently is sparked by my casual browsing on mobile, there might be (many) others like me

[clementmas]

I scrolled down on mobile and closed the website because I couldn't see any example

[wruza]

Yep, my first thought was “but where are examples” and I couldn’t find any.

[hiccuphippo]

Once I was working with an api that used mongodb in the back. Mongo uses very large integers as ids and I was looking at the json generated through a json viewer extension in the browser. I was having problems because I couldn't find the document I was looking at in the database. Turns out, the viewer used the browser's JSON.parse and that was converting the id to a number and losing precision since it was so large. Ever since, I prefer to look at json raw first and then use formatters just to look at the shape, not the data.

[medv]

For working with JSON from terminal recommend: https://fx.wtf

[techthumb]

There's also https://jless.io

[bilekas]

Personally I've never had a problem reading through json, I mean its designed that way to be flat and simple, but this could be brilliant for documentation, even auto updating with some schema changes etc.

Super useful for me in that way so thanks!

[cerved]

if it contains very large, nested objects, it can be harder to get an overview or navigate

[elbajo]

Ideally this is something that could run locally but it looks great thank you!

I wish these kind of projects would show up when searching "Online JSON visualization". Current SEO logic means that website like this have pretty much no chance of making it. Would love to be proven wrong though!

[loxias]

This looks like a neat tool, but without the ability to collapse and expand most sections, it's only useful for trivially small JSON files :/

[Frajedo]

Definitely the nº1 missing feature. Hope it arrives soon :)

[mutant]

You guys will love this also

https://jsonhero.io

[makach]

I am curious, who needs to visualise these datas? What I am interested in is validation. it's the same as with XML, or any transitional data formats, if I need to fix something I work on a specific set of the data and make sure that it is valid. If it is not I fix it. If I want to visualize data I use it at the endpoints, ie. in Excel or in PowerBI.

[youngNed]

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 you!' :-)

EDIT:

Ignore that, i did that think where i didn't look at the link - this pretty much does what i would need

[simonw]

My sqlite-utils tool can load JSON into a SQLite database table: https://sqlite-utils.datasette.io/en/stable/cli.html#inserti...

It can also be used to run SQL queries against an in-memory database created from one or more JSON or CSV imports: https://simonwillison.net/2021/Jun/19/sqlite-utils-memory/

[raxxorraxor]

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.

[awild]

Have you looked at Millercsv or jq?

[afandian]

There’s a message saying “incompatible device”. I’m using an iPhone.

[kurishutofu]

The button leads to the editor page which you can acces from the main navigation, it’s weird that the button is disabled on mobile while the editor works fine.

[exabyte]

Same but with Android, makes sense this would be more of a desktop experience though

[ssalka]

Opening on iOS I see an "Incompatible Device" notice on the page. Does the demo only work on desktop?

[andrew_]

Same on Android with Brave. Seems a safe assumption that mobile is an afterthought for the product.

[defrost]

Looks good.

Slight quibble, JSON with large value fields (eg: 4K text as a single line) blow out the containing box dimensions in the web visualiser.

Maybe there's a flag to clip | wrap such values, if so I missed ny option to toggle it.

( I used MediaInfoCLI --output=JSON on some multitrack files from handbrake, the encode argument flags are a single large value )

[defrost]

ADDENDUM:

There's a -><- Collapse nodes | Expand Nodes toggle on the RHS vertical toolbar of the web visual editor.

Still appears to be a slight issue with very large nodes (because of very long lines as values) scaling out of the view and being tricky to navigate into view again.

Still a handy tool for certain JSON structures for that first overview.

[flurly]

This is pretty awesome. I wonder how this scales. Like if I wanted to visualize a graph with millions of nodes, would it make sense to copy a whole JSON blob into it?

One of my side projects is called GraphJSON (https://graphjson.com), where we took the opposite approach. Log events (kind of like nodes in your graph) in a segment/mixpanel/amplitude way and then use SQL to stitch these events together. Currently it just does basic visualizations like lines and tables, but it'd be awesome to do the flow charts you've created. Perhaps there's opportunity for partnership?

[auggierose]

Having an extra box for nested fields is somewhat annoying and space wasting, I think. Can that be switched on/off? From a drawing perspective it is easier, but it seems it should be possible to do away with the extra box.

[loxias]

That was my first thought as well.

[anonu]

I've been looking for something visual like this that can generate JSON Schemas. You would be able to visit any "node", right-click, and specify the constraints you're looking to add to the schema...

[throwaway2016a]

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.