We Keep Coding

zoom/pan/scroll force directed network in amcharts4 library

I want to use amcharts4 to display a network with a huge number of parent nodes and even more child nodes. I took one of the examples found on the amcharts website and increased the number of child nodes on multiple parent nodes. The nodes expand to a point where they bounce off the browser screen and become unreachable. I am a looking for a way to navigate the network by zooming and panning in order to reach the nodes that are outside of the browser page.
I found similar questions on stackoverflow but they were mainly related with XYCharts and maps where ZoomControl was used on the chart/map object and the zoom property was enabled. I couldn't use this method on the force directed diagram element that I have in my code.
Kindly help me out if you know of a way to navigate the force directed diagram either by mouse wheel scrolling and clicking to pan or using the keyboard. Any help is appreciated.

networkSeries.maxLevels = 1; is the only thing I could think of as I did not come across anything that lets you navigate or pan force-directed graphs.maxLevels will reduce the space occupied but it still doesn't answer the question

How can I scroll a Sheild UI chart horizontally at a time based speed

I was wondering if anyone can offer any advise/examples of using Shield UI charts to show a horizontally scrolling graph over a time period.
I am open to suggestions about how to achieve this but would like to see real-time (per second or less accuracy) scrolling, either by frequent updating of a single graph or perhaps better, simply moving a vertical line marker from left to right across the y-axis to demonstrate the movement of time, relative to a static background chart.

May you specify some more details about what you want to achieve as it is not quite clear? Can you give some image/example how it should look like?

I think you should look at that demo, probably it is something near to what you have asked.
http://demos.shieldui.com/web/line-chart/forex-data
There as you can see you can dynamically rebind chart and simulate live data. Scrolling starts after it is filled with data. Probably that is something similar to what you want to achieve.

Zoomable background for cytoscape js

We're making a graph for a project right now. This graph should show all crossways of a city. And most ways between them. We started of using cytoscape.js for drawing the graph. Now we want a background behind the graph. This background will be the map of that city, so it has to be scrollable and at the right position.
Our first idea was to make a rectangle node and give it a background. Than we added the map and put in the right coördinates. Now the map is scrollable and is always at the right position. This gave us two problems. First the graph can't be panned anymore, cause when you try to pan you will try to select the underlying node. We fixed this by using the cytograh-panzoom plug-in.
The seccond problem is, that the edges aren't clickable anymore, because the background-node is now covering them and it seems impossible to get the edges on top.
The questions:
Is there a better library to draw such a graph?
If not, is it possible to draw edges on top of the nodes with cytoscape?
Is there another way with cytoscape to do this?
Kind regards

You could listen to viewport events and update the background-position and background-size properties of a background image set in the CSS for your cy div.
Or in lieu of a background image, you could have a separate div with an image that uses CSS transforms instead of background-* properties.

Mapbox not drawing all tiles, when inside a Telerik splitter

We have a legacy website from which the powers-that-be have decided we need to remove all of our Google maps, replacing them with maps provided by MapBox. So I'm in the middle of a crash project to swap out the old for the new.
And here's my problem: the old site is written in ASP.NET, making heavy use of Telerik's controls. In this page we have a RadSplitter, and a Google map being drawn in a RadPane.
Swapping out the Google map with the MapBox map was simple enough, except that the MapBox map isn't rendering correctly. Only the tiles along the left edge of the pane are drawing. But - when I resize the browser window, the rest of the tiles draw.
The div is defined with position: absolute, and top, bottom, right, and left set to 0. Which Google maps worked with.
My guess is that Telerik is doing something that is confusing the MapBox rendering code about the actual size of the div. And that when the window resizes, MapBox re-evaluates things, and gets it right.
I've been playing around with this for a couple of hours now, and getting nowhere:
I've tried triggering a resize event in code, and the tiles didn't draw.
I've tried placing the map in a fixed-size div, inside the pane, and the map drew to the edges, and then the div sat inside the pane with scrollbars, which confirms, to me, that I'm dealing with a sizing issue, but I can't have the scrollbars, so
I've tried setting the width and height of the div to the size of the pane, in code, and that didn't trigger the map to draw the missing panes.
I'm running out of ideas.
Is there some event or function on the MapBox renderer that will cause it to redraw the way it does when the browser resizes?

Turns out the answer was pretty simple:
map.invalidateSize();
Edited - a few days layer
Turns out that only works in IE. In Chrome, invalidateSize() doesn't cause the map to properly resize itself.

so the map is being drawn in a pseudo-frame, which is probably throwing off the calculations for what's "visible"...
do you have a way of sharing the actual output HTML? like jsfiddle?
are there any console errors? maybe it's something as simple as you've met your quota for the map tile server...
try a different tile server?

Hide HTML outside of canvas element in the JavaScript tool InfoVis

I'm currently creating a visualization of some objects on my project and I'm using the InfoVis toolkit to handle the graph visualization part. So far I have the nodes plotted correctly and relating to each other correctly, but there is a graphical error that is bothering me. When a node is partly off of the canvas, the background of the node is hidden (as it should be) because it is a canvas element itself. However, the contents (which are HTML) are shown completely and they hang off of the canvas element.
You can see the visualization here: Link
Drag around the graph until one of the nodes is partly off the screen and you'll see it. It is more obvious on the right/bottom sides.
Here is a picture of the problem: The black border is the canvas border.
How can I stop this from happening?

Try setting overflow: hidden on the div with the ID infovis-canvaswidget. It looks like the Canvas element is injected into it.