Hye
I want to migrate from flash to javascript to visualize my data. My data is a concept map with semantic relationships. In flash I was using "Kalileo's Visualizer" to do something like this
http://lab.kapit.fr/skin/frontend/default/kaplab/images/kap-lab-kalileo-3.png.
Kalieleo allows me to
Add/remove nodes/links (dynamically and statically)
Add nodes without parents
Group nodes
Re-layout of the visualization in case of dynamic
addition/subtraction of nodes/links
Drag/drop nodes
I've looked into many existing js frameworks including InfoVis JIT, Dracula, D3.js, Sigma.js, etc. The closest I got is the "Force-Directed Graph" but I want a visualization in a hiearchical layout.
Could someone show me another javascript/(html5) library that can do what I want?
Regards
Related
I want to display an ontology as a tree in an HTML page and then make a drag and drop.
I want to let the user be able to drag a a vertex from this tree. Something like the tree in https://www.geeksforgeeks.org/hierarchical-treeview-in-python-gui-application/
I cannot find a plugin other than jOWL.
Is there a good plugin to do it?
You can try these:
D3.js: This is a JavaScript library for creating interactive data visualizations. You can use it to create a tree diagram of an ontology and enable drag-and-drop functionality through the use of event listeners.
GoJS: This is a JavaScript library for creating interactive diagrams and graphs. It includes support for creating tree diagrams and enabling drag-and-drop functionality.
cytoscape.js: is a JavaScript library for creating graph theory (network) models on the web, it's also support tree diagrams and draggable nodes
Vis.js: is a JavaScript library for creating interactive data visualizations. It includes support for creating tree diagrams and enabling drag-and-drop functionality.
With d3js it is possible to visualize node graphs, like this example
Now I would like to let the user interact with the graph. It must be possible to:
create/delete nodes and edges
attach data to a node/edge, by clicking on it.
push the data to the server, so that it can be made persistent
Is it possible to do that with d3js? Is there any other tool which offers this kind of functionality?
Sure, all of these things are relatively easy to do with d3. You can see lots of different examples of force directed graphs at http://bl.ocks.org/mbostock. Here are a couple that you might find useful:
Adding nodes and edges to a graph:
http://bl.ocks.org/mbostock/929623
http://bl.ocks.org/rkirsling/5001347
Loading data from an XML file to create a layout
http://bl.ocks.org/mbostock/1080941
Listening for mouse over
http://bl.ocks.org/mbostock/2706022
From personal experience I would say that d3 would be the best tool for doing this sort of thing. I'd suggest playing around with it a bit and then asking more specific questions when you have them.
I need to create an hierarchical tree (something like this), but i need some features:
Ability to design the nodes as i like (size, background image, fonts etc.)
Automatic layout
Ability to connect nodes by drag N' drop
I've looked at GoJs and its great, but it's canvas based, and i couldn't find a way to make the nodes look exactly as I want (actually not even remotely close).
I've also looked at d3.js which is also great but again, since it's SVG it's haard to design the nodes.
The main hustle here is the layout, and connecting the nodes, i can handle the Drag N' Drop my self, Is there a library out there that can handle the layout for me , so i can create the required div's, design them as i see fit and let the library do just the layout stuff?
Here are some sample libraries.
If you want to avoid canvas, try implementing drag n drop for the following
CSS3 Family Tree
SlickMap
or else see some canvas based libraries
JavaScript InfoVis Toolkit's HyperTree / SpaceTree
jsPlumb
Whilst a late answer, hopefully it can help others in the future.
Here is a drag and drop tree utilising the excellent D3.js library.
http://bl.ocks.org/robschmuecker/7880033
https://gist.github.com/robschmuecker/7880033
The tree in the example handles automatic layout/sizing, zooming, panning, drag and drop and is collapsible. All or none of the aspects can be removed if needed.
Is there a html5 version or similar to Asterisq Roamer?
I looked at this list of charts from Daniel Davis list, but can't find any that has:
Loading data from xml(better json)
Minimum level of connections 2
Animated custom boxes
This is Asterisq:
There are several graph visualizers that I know of:
arbor.js
JavaScript InfoVis Toolkit
d3.js
I think their APIs are straightforward enough that adding graphs and edges programatically based on your loaded model is easier than adapting your data to some kind of fixed schema.
I need to create a topology (network) diagram, which will be integrated with my extJS application. Is anyone familiar with some Javascript packages with APIs for creating such a diagram, taking care of: positioning the nodes in the diagram, zooming, and dragging the nodes?
In addition I want to use some custom icons for the nodes in the diagram.
You might look into yEd/yFiles (https://www.yworks.com/products/yed) It's Java, not JavaScript, but it will definitely run as an applet since it does so from their site as a demo. Might work if this is for an intranet to just embed it in the middle of an ExtJS panel. Otherwise I recommend you read and re-read the drag and drop API for ExtJS and review the source code for them as well if you intend to code it yourself. Also from a google search:
https://github.com/jgraph (commercial)
https://www.jointjs.com/ (MIT Licenses)