I am trying to render a visualisation of a computer network in Vis JS, and want to show traffic passing through a 'router' node. I am trying to figure out how to render the nodes sufficiently spaced by default, without having physics enabled as I find the bouncing and moving quite annoying. If I render the graph without physics enabled currently, it just places all nodes directly on top of each other and you have to move them each manually (this is how I got image 1 below).
I would ideally like to be able to also pre-position the nodes depending on their value, so e.g. the internal devices would be shown on the left of the router device, and external/public devices shown on the right.
Can anyone point me in the right direction to being able to achieve this? Also happy to consider other network visualisation libraries if this isn't possible in Vis JS.
Here's what I'd like the network to look like when it loads (devices labelled with a MAC address are internal, devices labelled with IP are external):
And here's what it currently looks like:
Thanks!
Related
I've been trying to draw a network of streets. I used paths and images to perform this as you guys can see in the image :
I am also displaying labels on top of the images with some information about them. The problem is that the data source sometimes has overlapping traffic lights in the same coordinate. And as a result of that the labels get overlapped. I was wondering what's the best way to handle those overlaps in d3 v5? I've found some similar questions but none of them seem to work in d3 version 5.
This is one question that I looked at : D3js: Automatic labels placement to avoid overlaps? (force repulsion)
I guess I am looking for something similar, but something that would work with version 5?
Frustrated that there is no extension to do something I want I am writing my own. One of the key features I need is to be able to display graphs within vs code itself (graph refers to both a curve and nodes-edges).
In order to accomplish this I learnt about webviews, but that seems overkill. All I need is some very basic draw functionalities (straight line, bezier curve, circle, text).
The minimum I need to be able to do is:
I have code that generates a list of values over time. All the extension needs to do is read the generated txt file and plot the evolution of the values over time. Ideally this happens in the sidebar.
Any tips?
Webviews are the way to go. You can do things like this with them:
See also my antlr4-vscode extension repo
I'm designing a GUI and want to find a library on the JVM or for javascript that I can use with Clojure or Clojurescript.
The problem:
I need to display 'zoomable' directed acyclic graphs (DAGs). A picture is worth 1000 words, so here is what the interface ought to look like, and how the screen changes under 'zooming':
Specifically, every node can have its own internal graph, with the restriction that each inner graph has the same number of inputs and outputs as the node itself.
My experience with graphics is limited in Javascript and nonexistent in Java, but...
My ideas:
Naively draw the whole graph with all 'inner graphs' already inside the nodes, and fade the inner graphs out for text when the zoom level is sufficiently far away. Use click events to change the zoom to and from this level. I don't think this will behave well when there are several nested inner graphs.
Draw the unzoomed graph and zoom into a node when clicked so that its background fills the screen, then overlay the inner graph. For nested inner graphs do the same trick, maintaining a 'background node' and 'inner graph'.
Is option 2 sensible? If so is there a library (ie graphviz) I can modify to achieve this behaviour? If there isn't a library, what framework (ie JavaFX) should I use?
If you don't care about struggling with Java interop syntax, I can highly recommend FXDiagram:
Selected features:
Modern graphics [based on JavaFX]
Suggestive metaphors
Optimized for usability
Multi-touch gestures
Smooth transitions/animations
Animated auto-layout (based on KIELER and Graphviz)
Animated undo/redo
JSON persistence
SVG export
Xtext/Eclipse integration
Graphical context menu
…and much more
It's open source (and active), written in Xtend and easily integrates models expressed in Xtext-based DSLs.
I've created an interactive hierarchical D3 partition based visualization for displaying portions of a network. The visualization works by allowing users to traverse levels in the binary tree and down to a leaf level of /24 subnets.
A functioning example visualization can be interacted with on bl.ocks.org, with source and data available to create the visualization provided in this Gist (not inlined due to size).
In general everything renders correctly, however after a transition the new position of some rect elements becomes corrupted. An example of which is seen in the following screen shot:
Thus far the corruption appears unpredictable, is apparently unrelated to the underlying data, and is fixed during the next transition. Sometimes clicking around triggers it, sometimes it doesn't.
What might be causing these visualization errors? At first I thought it to be a concurrency issue caused by an async call to multiple interactions at once, but debouncing doesn't seem to fix things. My next fear is that it is just too much data for D3 to handle, but that seems unlikely.
The issue occurs in both Chrome and Internet Explorer.
It is not possible to automate the clicks on the map elements which are svg nodes (they do not have specific x-paths which selenium relies on).We tried clicking on features which also fails as it is also set as a svg element. Is there a solution for this?
I have finally found a solution for this (at least for point feature types). It is done using issuing a request to the DB to get the feature coordinates and then using the following method to get the pixel values for the x,y coordinates for the points.
OpenLayers.getPixelFromLonLat()
After that the Open Layers click controller is used to issue a request to the given pixel. It works on all window sizes as well.