8 ms·
JSON Crack – Visualize JSON data into graphs
- proboy 4y agoCool 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 4y ago+1 that
- Infiltrator 4y agoLikewise. This will save me hours of whiteboard drawing.
- bilekas 4y agoPersonally 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 4y agoif it contains very large, nested objects, it can be harder to get an overview or navigate
- brailsafe 4y agoThis 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.
- medv 4y agoFor working with JSON from terminal recommend: https://fx.wtf https://fx.wtf
- techthumb 4y agoThere's also https://jless.io https://jless.io
- lf-non 4y agoI 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.
- ystad 4y agoVery nice
- makach 4y agoI 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.
- bufferoverflow 4y agoI get "Incompatible device" error on Huawei P30 Pro, a very good smartphone.
- ijidak 4y agoIs 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.
- droobles 4y agoThis is really cool! Looks great.
- Canada 4y agoCool, 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 4y agoI 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.
- elbajo 4y agoIdeally 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!
- spinaker 4y agoThe 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.
- ssalka 4y agoOpening on iOS I see an "Incompatible Device" notice on the page. Does the demo only work on desktop?
- andrew_ 4y agoSame on Android with Brave. Seems a safe assumption that mobile is an afterthought for the product.
- jimmar 4y agoVery 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.
- einpoklum 4y agoI was expecting a JSON-to-DOT transformer and a new graphviz backend (if that's at all necessary).
- leetrout 4y agoYou may also find Graphize interesting https://apvarun.github.io/graphize/ https://apvarun.github.io/graphize/
- sordina 4y agoUses https://reaflow.dev https://reaflow.dev
- jhiggins777 4y agoThat'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.
- throwaway2016a 4y agoLooks 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.
- MatthewT123 4y agoPedantry - 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" :).
- auggierose 4y agoHaving 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 4y agoThat was my first thought as well.
- ejb999 4y agoAs 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.
- Manfred 4y agoLooks good. Unfortunately most JSON (I personally handle) contains private information and I would never paste it into a web page.
- m00dy 4y agoThis will be the first project that I will be sponsoring...
- mahesh_rm 4y agoWhere has this been for all this time.
- helsinkiandrew 4y agoI 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 https://trademarks.justia.com/742/75/visio-74275413.html
- dang 4y ago(We've since changed the title and URL by the submitter's request.)
- lelandfe 4y agoOnly 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 4y agoThey'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/failure-to-enforce-trademarks-if-you-snooze-do-you-lose/?sh=4e25dec66c22 https://www.forbes.com/sites/oliverherzfeld/2013/02/28/failu...
- yomkippur 4y agogonna be tough to prove damages
- KevinEldon 4y agoCool. 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 https://plantuml.com/json
- lloydatkinson 4y agoYou can download the tool
- wartijn_ 4y agoJSON Viso can be run locally as well https://github.com/AykutSarac/jsonvisio.com https://github.com/AykutSarac/jsonvisio.com
- coldtea 4y agoThat's what I came to find out! Thanks!
- blooalien 4y agoNice! Thank you for that. Did not know that.
- 867-5309 4y agoare you an evil hypnotist?
- yieldcrv 4y agoNote: 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 4y agoYep, my first thought was “but where are examples” and I couldn’t find any.
- clementmas 4y agoI scrolled down on mobile and closed the website because I couldn't see any example
- blain_the_train 4y agoi think similarly, this db will tx arbitrary json and let you query it. https://github.com/quoll/asami https://github.com/quoll/asami
- defrost 4y agoLooks 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 4y agoADDENDUM: 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.
- loxias 4y agoThis looks like a neat tool, but without the ability to collapse and expand most sections, it's only useful for trivially small JSON files :/
- deleted 4y ago[deleted]
- Frajedo 4y agoDefinitely the nº1 missing feature. Hope it arrives soon :)
- youngNed 4y agothis 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
- raxxorraxor 4y agoIf 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.
- simonw 4y agoMy sqlite-utils tool can load JSON into a SQLite database table: https://sqlite-utils.datasette.io/en/stable/cli.html#inserting-json-data 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/ https://simonwillison.net/2021/Jun/19/sqlite-utils-memory/
- awild 4y agoHave you looked at Millercsv or jq?
- deleted 4y ago[deleted]
- mkl95 4y agoIt looks like the natural evolution of tools like jsonviewer.stack.hu
- metecan 4y agoExcellent tool for developers, I use it all the time
- afandian 4y agoThere’s a message saying “incompatible device”. I’m using an iPhone.
- exabyte 4y agoSame but with Android, makes sense this would be more of a desktop experience though
- pvorb 4y agoA hint on which kind of device is considered compatible would've been nice. I didn't expect this to be desktop-only.
- kurishutofu 4y agoThe 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.
- anonu 4y agoI'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 4y agoThere's also this tool we built a while ago to break down JSON size by key. https://www.debugbear.com/json-size-analyzer https://www.debugbear.com/json-size-analyzer
- geokon 4y agoIf 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 4y agoThis is how Lisp code (and S-expressions in general) is conventionally indented.
- dotancohen 4y agoPython 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" ] } ] }
- Kalanos 4y agowhy is it its own app? is it available a vscode/jupyter plugin?
- talkingtab 4y agovery nice. thank you!
- hiccuphippo 4y agoOnce 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.
- jzer0cool 4y agoCould someone point what it uses to draw the tree chart?
- lalopalota 4y agohttps://github.com/AykutSarac/jsonvisio.com/blob/main/package.json#L33 https://github.com/AykutSarac/jsonvisio.com/blob/main/packag...
- Peter5 4y agoThis is a very good one for understanding API results, so you can debug what the properties are. For bigger ones, we are working on Dadroit Viewer.
- Ftuuky 4y agoSomething 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 4y ago[deleted]
- mutant 4y agoYou guys will love this also https://jsonhero.io https://jsonhero.io
- Simon_O_Rourke 4y agoNeat-o, I'll give this a whirl next week, will definitely help parsing the garbage used in Airflow config files I'm always debugging.
- flurly 4y agoThis 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 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?
- exodust 4y agoProbably 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.
- gajus 4y agoWhat is the use case for this?