I am trying to create some interactive graph visualizations. I found Graphviz and was able to output a static graph (as a .png image) in my application using Pydot (Python interface to Graphviz's Dot language), but I want to make my graphs more interactive, e.g. highlight nodes when I mouse over them, make the nodes clickable, is there an interactive web tool I can use to visualize the graphs? However, I need it to visualize (DAG, tree, parent-child).
I think you would have to use custom HTML components and make them interactive using Javascript. Or Use SVG for that kind of stuff, but I don't think it is clickable yet.
https://github.com/brpapa/recursion-tree-visualizer
Go to this repo, in this he implements a recursion visualizer using graphviz and somehow made it interactive.
In addition to what #sroush said in the comments, produce the output as SVG and make use of the href capabilities and the tooltip.
When generating the graph, each node would have a href that calls your backend; backend will regenerate the graph and respond back with an updated version of the graph.
Example
digraph G {
a[href="http://localhost/backend/a/children"];
b[href="http://localhost/backend/b/children"];
c[href="http://localhost/backend/c/children"];
}
User click on node a and gets back a new graph (or the rendered image) that contains the children of node a:
digraph G {
a1[href="http://localhost/backend/a/parent"];
a2[href="http://localhost/backend/a/parent"];
}
Related
Network visual with dynamic selection
Is anyone aware of a network association visual with dynamic selection formatting? Essentially, something like network navigator (or zoom charts drill down graph pro) but with the ability to select nodes and have associated nodes highlighted in some way. I’ve not been able to find this functionality using the zoom charts free trial or with any other visual. TIA
If you happen to have basic knowledge of Python, here's a solution based on NetworkX for creating a graph and gravis for creating an interactive graph visualization where you can highlight the neighborhood of a node by hovering with the mouse over it.
Disclosure: I'm the author of gravis. I hope this concrete example is useful for your requirements.
import gravis as gv
import networkx as nx
graph = nx.les_miserables_graph()
gv.d3(graph, edge_size_data_source='weight', use_edge_size_normalization=True, node_hover_neighborhood=True)
Result if you use this code inside a Jupyter notebook and hover over the node Myriel. You can also use a regular Python interpreter and see the visualization in a webbrowser window that pops up.
I am trying to find or build network graph for some data
I have seen disconnect.me graph visualization is great , if anyone tell me what they used to build this I would appropriate it.
an example of disconnect.me attached
enter image description here
For network graph i would prefer to use d3.js
Here is the link about it. The basic
http://christophergandrud.github.io/d3Network/
It's based on javascript, simple to implement and can be used over variety of backends.
What would it take to implement a tree diagram in bokeh? Something similar to this DS example would be nice --
http://bl.ocks.org/robschmuecker/7880033
I'm just looking to visualize a data structure, so only need the pan, zoom, and collapse functionality.
Thanks!
- AH
There is nothing in Bokeh to do this automatically. Bokeh does now support network/graph support, which it did not at the time the question was originally posted:
https://docs.bokeh.org/en/latest/docs/user_guide/graph.html
However, it would take some work to use this to reproduce the link above:
non straight-line edges would need to be computed explicitly
nodes/edges would have to be hidden manually based on TapTool events
Additionally there is no "smooth animation" option yet (as of Bokeh 0.13.0) so the transitions would be instant.
If the idea is to have this sort of capability along side other Bokeh plots, or to connect it to Python backend code, then another option is to write a custom extension for Bokeh:
https://docs.bokeh.org/en/latest/docs/user_guide/extensions.html
This would take some up-front work, but doing this, you could integrate the fancy D3 widget directly into Bokeh documents, and use it like, and connect it to, any other Bokeh component or widget.
Are there any beginner-friendly tutorials to display graphs in the way Knowledge graph has been done?
I have the data is JSON format presented from a graphdb
For eg:
The closest I have found so far is Gelphi. Which also can be integrated with unity to produce a 3d Graph like this one https://www.youtube.com/watch?v=h_arRCf73Kg.
Then there is https://cayley.io/
https://n0where.net/opengraphiti-data-visualization-engine/
There is also https://www.maana.io/knowledge-platform/platform-capabilities/#maana-knowledge-graph . However, i have not tried to use/download their platform.
https://en.wikipedia.org/wiki/Force-directed_graph_drawing
Finally, I am working myself on learning unity to build a simple GUI which a user can identify nodes and edges and entities easily and move them around. So instead of just reading from a data base, also write to it through a UI.
I'm creating a set of web pages. I'd like to use a graph (visual nodes and edges) to navigate this website.
I plan to have a graph (a topic map) created from another software and exported in a suitable format. Each web page will be a node, and I'd like it to be able to display a thumbnail (at least some piece of text) when hovering.
The graph should be force-directed, with pan/zoom capabilities, optionally hyperbolic.
The graph is not a tree, each node may have an edge with any other.
I think about something in Javascript/Php/Java/Silverlight, but this is not a final choice.
Check out Protovis javascript visualization library from Stanford[1]. It has force-directed graphs.
An alternative the the Javascript infovis toolkit[2]. Check out the demos.
[1] http://vis.stanford.edu/protovis/
[2] http://thejit.org/