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/
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 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"];
}
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 am working on a web project for network visualization. I am writing my code in R using Shiny. And I want to display my graph using Cytoscape.js
I've searched the web for some kind of source code doing this. But I couldn't find anything. The webpage of Cytoscape.js is not enough for me cause I am not expert in js and can't use the examples.
Briefly, I have Adjacency matrix of my graph and want to use it with cytoscpae.js. Do you know any source code or a tutorial of the steps I should go through?
Cytoscape.js supports JSON for input, so as long as your R/Shiny code can produce that, you should be able to use Cytoscape.js. Here's the format described: http://cytoscape.github.io/cytoscape.js/#notation/elements-json
It looks like Shiny has a predefined set of widgets it supports, so there are a few options here:
(1) Shiny adds support for Cytoscape.js (e.g. https://github.com/cytoscape/r-cytoscape.js),
(2) A Cytoscape.js plugin is written for Shiny.
(3) You use JS for at least part of your app.
(1) and (2) will take more time than (3), so depending on your requirements, you may have to bite the bullet and use normal JS. When using a framework like R/Shiny without your own JS, you'll always be locked into whatever's supported and miss whatever's not -- so you lose on flexibility.
For very flexible and general interaction between R and Cytoscape.js, see the RCyjs project (docs)
I'm building an application that parses text files that contain information about specific nodes with incoming ports and outgoing ports that are interconnected. Doing some research there are some libraries but none of them support the exact characteristics needed.
this is what I'm trying to build and any language will do: Python, Perl, .net, etc.
One of the libraries I have found is GoDiagaram Node Classes
http://www.nwoods.com/components/dotnet/features-nodes.htm
The idea is to have boxes like so, interconnected and I should be able to click on one of them and link it to a new sub-diagram with more boxes contained in the one clicked.
Is there a counter part of these kind of charts that is opensource? and do these diagrams have a specific kind of name?
I don't know any specific details, since I never looked into this too closely, but here are some potential directions:
The data structure used for representing something like this is usually a graph (probably a directed graph). You could also try searching for graphical (or visual) programming languages. I seem to remember Pure Data as one that was relevant, but I never looked at it in detail.
Blender and VirtualDub both have a mode that's similar to this (the node editor and audio filters, respectively) and I believe both are open source, although I think neither has the option of having the nodes contain other nodes internally.
You could just use LabVIEW, which gives you the ability to create and edit LV code programmatically (search for "VI scripting"), but the code for that might not be very pretty and it's certainly not open source.