Grafify - a JSON graph viewer based on D3.js and NetworkX

This week, I've finished building a mini-app for viewing a graph/network data using D3.js's force-directed graph. The app also provides the networkx's generated graph available for view.

I built it using Flask for the backend, TailwindCSS for the UI, Laravel-Mix for the simple CSS and JS bundle, and hosted it on Heroku.

The app is in early development but available for everyone to try it on https://grafify.herokuapp.com

There will be some improvement in the future for graph customization, input validation, make the logo and more networkx generated-graph to add.

Comments

[Ben Sinclair]

Nice.

I spot a bug: if the JSON is invalid you get an immediate internal server error response.

If you're using Tailwind (which I'm gonna say right now I'm biased against) there might be a problem because you have an element that uses the hidden utility class but it's clearly not hidden :) That's the link on the top-right.

I also have a couple of accessibility suggestions for things you could do to improve your users' experience:

You have some example JSON as a placeholder. If you gave a couple of samples to copy-paste in, that would probably go a long way to helping people understand what the app does without needing to add much more context.

It would be nice if you used colours with higher contrast. It's extremely faint at the moment.

The links do not have anything to distinguish them visually, such as an underline. That makes it impossible to differentiate them visually from regular text - I know you don't have much in the way of regular text but that is likely to change :)

Your input fields need labels rather than placeholder attributes. I know you only have two fields like this, but if you put something in the title field, for example, then come back to it later you don't know what that field was for unless you delete the text you entered to find out. That'll be a problem if (when) you get more input fields.

The stack of options on the right has labels, but they're quite a long way from their values. They're not semantically-linked to their input fields (they have an empty for attribute and do not wrap the input elements) so you can't select one to focus the input element.

When you use the "back to form" control, it might be helpful if the form remained populated with the previous values, and you included another button control to "reset" it instead of blanking everything. That means that people could play around and tweak values, like the size of nodes, without having to re-fill the entire form each time.

And finally a feature request:

rather than navigating between input and output pages, this could preview on-the-fly or let you switch between either or both views, in the same way that (say) Codepen does with its HTML/CSS/Result tabs.

[Dendi Handian]

Thanks for the feedback, I was hoping for this. I will keep in mind for this improvement.

I know the app still buggy and because this is my personal project I can't wait to make it live as soon as possible 😆