I am working on developing a jQuery slider that goes edge to edge on any screen width and is circular (so you can just keep going in either direction). Is there anything prebuilt for this? You can see my attempt at http://siegedesign.com/io-dev/payoff/. It has a number of issues so I'm looking for alternatives.
Related
I am trying to solve the problem of detecting partially or fully overlapping components in an image. The components can be text, barcodes, QR codes, rectangle boundaries etc.
See the images below for better understanding of the problem.
Below label/image doesn't have any overlappings:
Below label/image has many overlappings:
My first thoughts are finding the four corner coordinates of each individual component. Then the problem reduces to finding if any two components(rectangles) out of all the components(rectangles) overlap or not.
But I'm clueless how to find the coordinates of each individual component from the image. Also the above approach fails if we have fully overlapping component printed inside another component. Is there any better way to solve the problem?
I am new on D3.js, and I already have create a graph force and it is working.
My doubt is about the coloring the link between two nodes.
I need represent the traffic using colors on link between nodes.
But the problem is that the two nodes are sending trafic on link, and to represent this, I need two color for on the same link.
On case 50% of the link with one color and other 50% with other color.
Is it possible ?
You'll actually want to represent each source->target link as a separate link so traffic from X to Y is a different link than traffic from Y to X. In that case, the typical method is to use curved edges, as seen in this example:
http://bl.ocks.org/mbostock/1153292
You can also offset the link start and end points if you want to use straight edges that appear to be side-by-side but this is more involved because you have to have a way of telling the code which link is on the "left-hand" side and which is on the "right-hand" side. One way to do that is to use JavaScript's built-in Math.atan2 function to find the slope of the link and offset outbound links based on that slope. I'll try to write up an example when I get a chance.
The number of nodes in my d3 graph is too large. So I built a zoom mechanism in that graph. Now the problem is, I just cannot display text for each nodes since they will overlap each other. However when I zoom in to the nodes, the space is enough to display texts.
So how do I show texts when the space is enough to show all of them without overlapping?
I have had this same problem in the past. Unfortunately optimal label placement is not an easy problem. To mitigate overlap effects one option is to use a restricted force layout for label placement. You can also try using callouts to allow the labels to move farther away from the nodes.
In the past I have implemented a sort of greedy collision detection based algorithm that goes something like:
sort the labels in decreasing priority
for each label in the list // so most important first
if the label does not overlap any placed labels
place the label and add it to my collision data structure (e.g. quad tree)
else
hide the label
Obviously this will have some non-optimal cases and it can be slow if you have a lot of animations going on. But when you have the option to zoom in to see more label and if your absolute number of labels is not too high then it works quite well. There are also a number of obvious ways to speed it up like restricting testing to only labels within the view (but then you need to update on pan).
You may find some helpful suggestions here including an implementation of collision detection.
I have a "complex" problem where I have a bunch of tooltips (orange) on top of elements (black) that can be randomly placed on screen. The tooltips are a big square with a triangle in the middle of one of it's 4 sides pointing though the element direction. By default, the triangle will be in the middle of the element, but can be moved as long as it stay close to it, so we can't easily understand it refer to this element and not another one.
The problem is, the tooltip must NOT overlap each other, and can't be out of screen.
Image of my tooltip problem
I thought about first placing every tooltips to their default position (triangle pointing down), and then check if they are out of screen or overlap another one, and if so, try another position. But using this technique (which is probably the simplest one), I do not guarantee the best placement since once a tooltip has been placed, I will not replace him if another one can't fit anywhere otherwise it become too complex.
Does someone have any tips/idea how to deal with this type of problem?
Thanks!!
This looks like an instance of the map labelling problem. Wikipedia has an article about it.
You could place all the tooltips using some sort of physical simulation of repulsive electrical charges, similar to what is done in some algorithms for drawing graphs. You could model each tooltip as an object attached with a soft spring to its black box, while simulating a strong repulsive force between all the tooltips and between a tooltip and the edge of the image. You calculate all the forces and move the tooltips iteratively, until all positions converge. You could play with making the force scale as inverse square, inverse cube, etc to find nice results.
This might be a bit of work to implement, but should probably give decent results for simple cases. It is probably impossible to guarantee that a good solution always exists, since if you add too many tooltips, your image will be full.
I created a network in D3.js that updates links (both remove and add) as you move the slider back and forth.
However the edges overlap the nodes (as in edges are drawn ontop of the nodes...)
I think https://github.com/agfk/knowledge-maps/issues/1 looks at the issue but I'm not quite sure what it means.
I might have something to do with the order that the lines are drawn as opposed to the nodes but I don't know how to fix that. Svgs also don't come with z-indexes so I can manipulate it through css.
Any help would be appreciated! Thanks!
This link discusses how to determine the order in which elements are drawn. In your case, perhaps you want to draw the edges first and then the nodes:
https://groups.google.com/forum/?fromgroups=#!topic/d3-js/JCXKef_GRCQ