I am trying to make a visualization using d3 which is basically a scatter plot with links between the points. (I have attached a .gif of the existing java based visualization)
The points can be added by double clicking other points. On hovering over a point, I wish to have links drawn between the point and all its partners on screen.
I have the part where on double clicking a node, its partners are added. What I need help with is drawing the links (primarily I am not able to understand how can I get the x1,y1,x2,y2 values required to draw the links).
This is what my DOM looks like:
I have seen a lot of examples online but somehow not able to figure the solution - if anyone could link me to a similar visualization or share a fiddle/ give some pointers on how this can be achieved I would be really grateful.
First the simple stuff: here are 2 mechanisms for drawing the lines.
Next, in terms of the data representation of the lines, check out how links are typically drawn when working with the force directed layout.
Important: Do not get distracted by the existence of the force layout in this example and by the fact that the force layout works with these links (which are passed into it by calling force.links(links)). That aspect of the example probably doesn't have an equivalent in what you're trying to achieve.
However, do notice how the links array is constructed —— with each element of the array being an object with pointers to source and target datums. In your case, you'll want to work with a similar links array, where source is the node under the mouse and target is a node that's connected to it. So you'll end up with an array of links who all have the same source datum but unique target datums.
You can then bind the links array (via the usual .data() method) to a d3 selection of line or path elements. Once you bind, you can use the usual enter, update, exit pattern to append, update and remove (on mouse out) the drawn lines.
Given a source and target datums, you can calculate the x and y of the endpoints in the same way you currently calculate the translation of each <g> element, presumably using a d3 scale.
Related
I have created a layout algorithm for graph visualization so that y position of each node corresponds to time and the graph starts from the top (t=0) and grows dawnwards. I also draw edges with bazier forms I made. Also the color of the edges vary throughout the edge. I need the layout/look to remain the same. Currently, I am using pycairo for drawing the graph that generates a CSV file (potentially, I can create other formats such as PDF,PNG too). My goal is to make the visualization interactive, for example to be able to click on specific nodes and get the data related to that node back. I couldn't figure out how to do this in python. Now, I want to do this in JavaScript and D3.js.
My question is how can I make the CSV output interactive? For example, when clicking on a node, it should return its y position (which represents time), and some other attributes. I also want to be able to jump to a certain y position in a graph given user's input.
It would also be helpful to give me some clues on how to think about this problem.
This is a screenshot of what the final result looks like. The horizontal lines are really not important
I am doing visualization with the JavaScript InfoVis Toolkit, in particular the hypertree. I am loading data dynamically and sometimes the labels around the nodes overlap and clutter. I would like to avoid this clutter by altering the label positions.
Here is an example of cluttering (the top and bottom nodes):
I imagine that I would loop through each x,y coordinate, give it some bounding box and do basic collision detection, and update positions accordingly.
For this library, I see the demo shows a onPlaceLabel() function, but (if I understand correctly) at that moment I wouldn't know the position of every other node's label. So, I am looking at onComplete(), where I see I can access each node as follows:
onComplete: function(){
ht.graph.eachNode(function(n) {
console.log(n);
}
}
But the node information does not include its label positions, only their positions relative to the center node. Is there a way to access the labels in this way and be able to update their positions?
I'm using the tree layout and code similar to http://mbostock.github.io/d3/talk/20111018/tree.html
I modified it for a top down orientation.
As each node is opened/expanded, the other open nodes compress to fit everything within the SVG element. Is it possible to prevent that? I would think modifying the x component of each node would be the approach but have not been able to accomplish that. The nodes move over, but are still compressed together.
Also wondering how to change the linking lines from a bezier to right angles/straight lines. Perhaps a separate question is needed.
The compression is automatic in the tree layout (and part of its point). There's no way to turn that off. However, you can simply make your SVG large enough to contain the entire expanded tree without compression. Note that this means that unless your screen is large enough scroll bars will be displayed even when everything that is visible fits onto the screen.
The links connecting the nodes are generated using the diagonal line generator in the example. In principle, you can replace this with any other line generator (e.g. d3.svg.line), but in practice some changes will be necessary because the diagonal line generator accesses source and target nodes in a special way. For a normal line generator, you would need to convert this structure to a two-element array and for each element specify how to access x/y coordinates. Then you can use any of the interpolations to get the curve you want.
I'm using the jquery maphilight plugin and have a large number (hundreds) of overlapping elements on my image map. I've noticed that when hovering over the image map, maphilight will highlight the first element it finds for those coordinates, so overlapping can become an issue.
I'm looking to be able to click the image map somewhere and have maphilight (or an external function) return me an array of all the elements not just the first one.
Open to any ideas on how to go about this.
EDIT: To simplify, when I click a point I'm looking for maphilight to get the area (as it already does), but then add that to an array and continue looking for other areas from the same coordinates. Not just return me the first area it finds and stop.
You may need to look into vectors. Using normal elements/divs/images is to complicated. Here a great example of this, Using jQuery, they created a word map http://jvectormap.com/ they make a fully interactive map. Another great example is svg but this can be quite complex http://keith-wood.name/svg.html
Hope this help's you go in the right direction.
Is it possible to create an arbitrary shape on a web page so we can detect mouse overs/outs on it? It's much like an area map for an image but corresponds to a page (or a div etc) rather than an image.
This might be a non starter altogether as I haven't found any information in this area. Thought I'll just ask here to see if there is any way to achieve this.
My original requirement is to provide an area map for a set of images such that one area corresponds to a list of prearranged images so any points in area can be mapped onto a specific image in that list using that image's position.
Any information will be helpful.
There is the <map> HTML element that allows the definition of geometrical primitives and even polygons.
The <area> elements defining the areas inside the map support standard mouseover and mouseout events.
There are javascript-/jQuery-based extensions to even highlight map areas. See this question for more info.