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.
Related
I'm working on replacing a dynamic chart implemented in highcharts. The current implementation is a line-area chart that expands over time with incoming streaming data, so the replacement needs to be dynamically alterable, and preferrably animated.
Currently I'm looking at D3 for the replacement. There are a few examples I've found which show that there may be something similar which is possible, such as the charts for streaming data found here, but in this example the line is redrawn at every iteration. It's not terribly inefficient as the visualization is limited to a fixed window of data, but in my case a high volume of data needs to be displayed from start to finish as the data streams in. Redrawing the chart at every addition will likely result in rapid performance loss.
In D3, is there a method of adding a single segment to an existing plot that does not require a redraw?
I ended up abandoning D3 as it required too much development to make it as presentable as an interactive chart that was ready out-of-the-box, but I did figure out how to do what I was thinking.
Instead of re-adding a new line with additional points at every iteration, I ended up using a path component which allows additional points to be added progressively. The path does have to be re-rendered and generates a short svg path string, so I'm not exactly sure which method is more efficient, but a short path string reduces complexity of the resulting html in the case that one were to add multiple lines to the plot, one for each segment.
If an addition to the path involves only the generation of a new string using concatenation of the original then I imagine this could be much more efficient than iterating through an array of series data that grows at every update.
The result was fast enough to keep up with streaming data without any visible slowing of the UI, but it was just unfortunate that I needed something a little more developed.
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!
This is not a new question and I have already referred to solutions stating that nodes must have their d.x d.y parameters set to suitable values before restarting the layout.
I have also created a simple block demonstrating this. However now that I have developed a more complex example here I am not satisfied with the result.
The reason being that as you click on the nodes, new nodes come into existence off screen and the force layout is erratic (not good), however once all the nodes appear at least once the nodes appear to behave as desired and appear close to the centre and hence produce minimal disturbance to the layout.
My feeling is that either this is the best I can expect from d3 or that there is some inconsistency in the data model model of my code.
The code itself is designed to display a smaller subset of a larger graph loaded from the JSON. It allows you to navigate a larger graph one subset at a time. The subsets being centred on the node that was clicked.
I am currently migrating a special dynamic layer type I created for OpenLayers from OL2 to OL3. The layer displays markers (a lot of them, usually around 1000) that are moving on predefined trajectories. Trajectories are loaded in a special JSON format from a server.
My current approach for OL2 is very performant, heavily optimized and uses the Raphael library (http://raphaeljs.com/). The general application layout looks like this:
OpenLayers2 is loaded, the map is created
A special layer "DynLayer" is created which is modelled after OL2's own VectorLayer. This layer handles communication with OL2 (zooming, panning, dragging etc) and provides a very sophisticated asynchronous mechanism to redraw to map (that is, move the markers) based on the current interaction (for example, the refresh rate goes down if the user is currently panning to map to prevent a stuttering effect). During construction, the DynLayer creates a Raphael SVG-layer and attaches it into the DOM. If the map is panned or zoomed, the Raphael layer is synchronized by the DynLayer.
Markers are then created on the SVG-layer and their position is periodically updated
This approach works extremely well and because Raphael supports older IE versions, it also runs in IE8 and IE7. It also enables me to provide animations based on Raphaels built-in animate method.
I am now trying to migrate this application to OL3 and I am not 100% sure what the best approach would be. Is it possible in OL3 to add custom-built layers after OL3 is loaded? If so, is there any documentation? I tried implementing my own version of a VectorLayer, but OL3 threw a ton of errors related to the goog object provided by the Closure API.
More generally speaking: would it be better to recreate my old approach and draw a Raphael layer on top of OL3? This method would allow me to reuse most of my previous code. Or should I use methods provided by OL3 to draw directly on a HTML5 canvas? If so, how can I obtain control of the refresh rate of the canvas?
I had I a look at the example at http://ol3js.org/en/vector-api/examples/dynamic-data.html?q=dynamic but it does not really fullfil my needs. The markers are animated in an endless loop, and I need specific control over the refresh rate. More generally, how do I prevent my markers from being deleted on one of OL3's own canvas refreshes (for example, if new tiles are loaded).
My general impression of OL3 is that it is more difficult to add own extensions than with OL2, which appeared more 'open' to me than OL3.
Thanks for any help!
Note that OL3 is not meant to work well with IE7 or other 'old' browsers.
As far as I understand OL3 was build for performance and has fast vector rendering.
It also integrates with d3, so it can probably integrate with other technologies.
The main question is pretty simple... I'm making a rather large Organization Chart (or genealogy) and I'm wondering whether I should be using SVG or Canvas.
Some of the requirements might sway the choice:
Must be able to display between 1 to 50,000 nodes/people
Needs to pan and zoom much like a Google/Bing map.
Need to be able to click on a node and pop open a dialog with extra details on the person.
I was initially leaning towards SVG, but I heard somewhere that it would have performance problems when drawing a large number of items. Also, it seems Canvas has better support in older browsers.
Thanks everyone for your input. The following is what I have come up with after exploring some of the advice given.
SVG: This route was very tempting due to its vectorized nature and its integration into the DOM. Sadly the performance of rendering +100k nodes killed this route.
Canvas: Performance wise this seemed to be a winner. However, at this point I will need to explore how to add onClick/onHover functionality to each of the rendered nodes.
Leaflet: This too is a winner. It takes care of a lot of concerns like the map-like navigation, performance and mobile ready. Though it isn't a solution as to 'how' to draw the org chart. However, what is nice about it is that you can feed it image tiles or canvas. Which gives us some choice.
So in the end it is likely that I'll be using image titles to begin with and then migrating to canvas... while keeping my eye on performance advancements in SVG.