almende / vis

⚠️ This project is not maintained anymore! Please go to https://github.com/visjs
7.85k stars 1.48k forks source link

Example of a Vis.js Network Project #4243

Open aitoff opened 5 years ago

aitoff commented 5 years ago

I have developed a project that uses vis.js Network to allow a user to explore the relationships between Victorian Engineers and their achievements. I'm not sure if it would be suitable as a showcase project (I have a lot of clunky code and please don't mistake me for somebody who knows what their doing) , but I'd be interested in any feedback: You can find the project here: http://www.victorianengineeringconnections.net/

Note that the page only displays part of the network at any one time, dragging data from database (APEX, PHP, MySQL) as required.

Thanks

Andrew

softwareCobbler commented 5 years ago

The history of sewer systems has always fascinated me, someone had to design and build out those networks (pardon the pun).
It is a nice project. Do you think you could make it so that when a user clicks a node, the graph does not auto-repopulate; I was interested in reading the all the miscellaneous nodes on the canvas, but when I clicked on one and was reading the sidebar, the nodes all changed. Perhaps a button like "repopulate with selected node as root" or something like that.
This is like a visual version of a "wikihole", neat.

aitoff commented 5 years ago

@softwareCobbler Thank you for the feedback. I've tried a number of different ways of dealing with node selection. I want to make it touch-compatible, which is a shame because mouse-hover would be good for doing what you have asked for. I'll give it some thought - and thanks for the suggestion. Andrew

jgorene commented 5 years ago

I also think it's a nice project. In any case, it still demonstrates a nice way to use all that is offered by this awesome library, if need be.

Otherwise just for a search feature in addition, I would see a simple input with autocompletion that unfolds by a click on search icon (e.g).

But it's really good already, well done :clap: !

mojoaxel commented 5 years ago

@aitoff Nice! If you want, you can add this to the showcases by createing a pull-request for the gh-pages branch: https://github.com/almende/vis/tree/gh-pages/showcase

aitoff commented 5 years ago

@jgorene Thank you for the encouragement - and the suggestion. There is a search function already - kinda (click on the looking glass icon) but I must admit it's rather frustrating to use - but was relatively easy to implement because it is in effect part of the diagram. I can see an autocompletion search would be much better. I'll work on it :-)

Andrew

aitoff commented 5 years ago

@softwareCobbler

It is a nice project. Do you think you could make it so that when a user clicks a node, the graph does not auto-repopulate; I was interested in reading the all the miscellaneous nodes on the canvas, but when I clicked on one and was reading the sidebar, the nodes all changed. Perhaps a button like "repopulate with selected node as root" or something like that.

Following on from your suggestion (above) the information pane now updates when you hover over a node. Of course, this only works on a mouse-based interface :-(

Andrew