CODEWITHSUNDEEP
javascriptsvgd3.jsscatter-plot
arjun010
arjun010

Reputation: 139

A scatterplot with links between points using d3?

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:

enter image description here

scatternet

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.

Upvotes: 0

Views: 1392

Answers (1)

meetamit
meetamit

Reputation: 25157

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.

Upvotes: 3

Related Questions