[HN Gopher] JSON Visio - Visualize JSON data into graphs
___________________________________________________________________
JSON Visio - Visualize JSON data into graphs
Author : iCutMoon
Score : 471 points
Date : 2022-08-28 09:03 UTC (13 hours ago)
(HTM) web link (jsonvisio.com)
(TXT) w3m dump (jsonvisio.com)
| brailsafe wrote:
| This looks like it might he useful for migrating pre-typescript
| code to Typescript. Identifying permutations of otherwise similar
| objects can be a pain, and sometimes similar APIs will return
| fields that have the same property name but only contain a small
| subset of data.
| auggierose wrote:
| 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 wrote:
| That was my first thought as well.
| mahesh_rm wrote:
| Where has this been for all this time.
| [deleted]
| helsinkiandrew wrote:
| 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
| lelandfe wrote:
| Only matters if Microsoft sues. GitHub-owner era Microsoft
| tends to want to stay in the open source community's good
| graces. (Plus I'm sure the owner would just change the name if
| MS asked, anyway)
|
| That being said, this is _also_ a diagramming tool... I
| probably would recommend changing it
| sbuttgereit wrote:
| They'd probably (or I hope they would) ask nicely first,
| cease-and-desist second, and sue as a last resort.
|
| Whether or not Microsoft allows the use may not be fully at
| their discretion; or rather their earlier choices could tie
| their hands in regards to later choices if things go south.
|
| This is a short read on the kinds of issues that start to
| crop up when you don't agressively enforce your trademarks:
|
| https://www.forbes.com/sites/oliverherzfeld/2013/02/28/failu.
| ..
| yomkippur wrote:
| gonna be tough to prove damages
| flurly wrote:
| 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?
| KevinEldon wrote:
| 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
| lloydatkinson wrote:
| You can download the tool
| wartijn_ wrote:
| JSON Viso can be run locally as well
|
| https://github.com/AykutSarac/jsonvisio.com
| coldtea wrote:
| That's what I came to find out! Thanks!
| 867-5309 wrote:
| are you an evil hypnotist?
| blooalien wrote:
| Nice! Thank you for that. Did not know that.
| Manfred wrote:
| Looks good. Unfortunately most JSON (I personally handle)
| contains private information and I would never paste it into a
| web page.
| wartijn_ wrote:
| You can run this on your local machine
|
| https://github.com/AykutSarac/jsonvisio.com
| ta988 wrote:
| I see that this contains code that sends and fetch data to a
| lot of services for ads, tracking...
| mkl95 wrote:
| It looks like the natural evolution of tools like
| jsonviewer.stack.hu
| Canada wrote:
| Cool, but when I loaded something that would help to visualize (a
| trace of a single block of ethereum) it just died. The JSON is
| 374KB.
| haidev wrote:
| I tried to use it once to visualize a 114K lines JSON it simply
| just died. I even tried to run it locally but no luck.
| Peter5 wrote:
| exodust wrote:
| Probably just me, but the "members" and "powers" arrays in the
| example should be in the same box as their siblings. When
| presented in another box joined with arrow, to me it seems to
| introduce hierarchy that isn't there. Probably I'm unaware of
| some convention used here.
| Ftuuky wrote:
| Something that I am currently struggling at my job is how can I
| automatically convert everything in a JSON into a table. I'm
| writing my own "macros" to deal with it but it's far from ideal
| yet.
| [deleted]
| proboy wrote:
| Cool tool, thanks for sharing. Would be great to have a version
| as a VS Code extension, imagine using it directly inside VS Code
| <3
| beardyw wrote:
| +1 that
| Infiltrator wrote:
| Likewise. This will save me hours of whiteboard drawing.
| metecan wrote:
| Excellent tool for developers, I use it all the time
| makach wrote:
| 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.
| yieldcrv wrote:
| 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
| wruza wrote:
| Yep, my first thought was "but where are examples" and I
| couldn't find any.
| clementmas wrote:
| I scrolled down on mobile and closed the website because I
| couldn't see any example
| blain_the_train wrote:
| i think similarly, this db will tx arbitrary json and let you
| query it.
|
| https://github.com/quoll/asami
| afandian wrote:
| There's a message saying "incompatible device". I'm using an
| iPhone.
| exabyte wrote:
| Same but with Android, makes sense this would be more of a
| desktop experience though
| pvorb wrote:
| A hint on which kind of device is considered compatible
| would've been nice. I didn't expect this to be desktop-only.
| kurishutofu wrote:
| 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.
| defrost wrote:
| 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 wrote:
| 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.
| sordina wrote:
| Uses https://reaflow.dev
| mutant wrote:
| You guys will love this also
|
| https://jsonhero.io
| m00dy wrote:
| This will be the first project that I will be sponsoring...
| bilekas wrote:
| 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 wrote:
| if it contains very large, nested objects, it can be harder to
| get an overview or navigate
| geokon wrote:
| 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?
| nerdponx wrote:
| This is how Lisp code (and S-expressions in general) is
| conventionally indented.
| bboozzoo wrote:
| Have you tried json-mode? Seems to work pretty well.
| geokon wrote:
| 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..)
| user5678 wrote:
| coenhyde wrote:
| If you climb to the top of a really tall mountain you'll get a
| similar perspective to what Google Maps provides.
| solardev wrote:
| Ads?
| btown wrote:
| We prefer to call them contextually preferred mountaintop
| suggestions. To suggest otherwise would be to suggest that
| our entire industry is built on nothing more than peak
| comedy.
| samstave wrote:
| Peak comedy is a slippery slope. Just be careful to not
| trigger an avalanche of puns, because that can snowball
| into something unstoppable, then everything goes downhill
| fast!
| helmholtz wrote:
| High-brow humour is not HN's strong suit it would appear
| :)
| abrax3141 wrote:
| That's not really fair. At the moment we communicate and read
| json in text, so formatting the text to be human-readable and
| reasonably arranged often (although not always) matters.
| jzer0cool wrote:
| Could someone point what it uses to draw the tree chart?
| lalopalota wrote:
| https://github.com/AykutSarac/jsonvisio.com/blob/main/packag...
| loxias wrote:
| 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 wrote:
| Definitely the no1 missing feature. Hope it arrives soon :)
| [deleted]
| youngNed wrote:
| 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 wrote:
| 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/
| awild wrote:
| Have you looked at Millercsv or jq?
| elbajo wrote:
| 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!
| einpoklum wrote:
| I was expecting a JSON-to-DOT transformer and a new graphviz
| backend (if that's at all necessary).
| spinaker wrote:
| 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.
| medv wrote:
| For working with JSON from terminal recommend: https://fx.wtf
| techthumb wrote:
| There's also https://jless.io
| lf-non wrote:
| I use jq and jless and find that to be more practical than
| tools like these (not just because of being available in
| terminal).
|
| When I have large blob of json, I am usually interested in
| first getting a high level idea of how it is structured
| (first few levels) then I either need to drill down or filter
| to find what I need. The combination of jless for interactive
| exploration and jq to make it easily scriptable/repeatable is
| quite nice.
|
| I find it natural to reduce the json I start with to a
| subtree I can make sense of, and thus don't find myself
| lacking a tool which can provide a visual representation of
| the complete dataset.
| gajus wrote:
| What is the use case for this?
| ijidak wrote:
| Is anyone aware of a good desktop application for visually
| exploring a JSON data set and running queries?
|
| I've found good online tools, but not a good desktop app.
| bufferoverflow wrote:
| I get "Incompatible device" error on Huawei P30 Pro, a very good
| smartphone.
| jimmar wrote:
| Very cool! This is close to being a perfect mind-map creation
| tool. Text wrapping would be nice. It can be done manually by
| adding \n, but that has to be done manually.
| ystad wrote:
| Very nice
| Simon_O_Rourke wrote:
| Neat-o, I'll give this a whirl next week, will definitely help
| parsing the garbage used in Airflow config files I'm always
| debugging.
| ssalka wrote:
| Opening on iOS I see an "Incompatible Device" notice on the page.
| Does the demo only work on desktop?
| andrew_ wrote:
| Same on Android with Brave. Seems a safe assumption that mobile
| is an afterthought for the product.
| Kalanos wrote:
| why is it its own app? is it available a vscode/jupyter plugin?
| droobles wrote:
| This is really cool! Looks great.
| leetrout wrote:
| You may also find Graphize interesting
| https://apvarun.github.io/graphize/
| anonu wrote:
| 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...
| mostlystatic wrote:
| There's also this tool we built a while ago to break down JSON
| size by key. https://www.debugbear.com/json-size-analyzer
| talkingtab wrote:
| very nice. thank you!
| hiccuphippo wrote:
| 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.
| ejb999 wrote:
| As someone that works with complex json objects on an almost
| daily basis, this looks like it will become part of my daily
| toolkit - nice job.
___________________________________________________________________
(page generated 2022-08-28 23:00 UTC)