Order graph nodes d3js - javascript

I have a database where I maintain an entity Ids in one table while maintaining a source and target entity on other table.
I have generated a json of nodes and links. and used the following example as a reference (thought it would be enough to only generate the json file):
Force directed graph for D3.js v4 with labelled edges and arrows
Same code with my generated data
The issue is that the graph is messy and I can't infer anything by looking at it. so what I'm trying to do is, since I am familiar with the relations between the entities I would like the nodes to be ordered top down by labels by some certain order. e.g siteref -> ro -> ba -> gr -> ca
Is that achievable at all? I have looked around for some other examples but did not find anything that could suit my needs.

You can add forceY, and optionally pass it a strength. In the forceY function you can set to return 0 for siteref, 100 for ro, and so on. Then you can tune in at your needs by playing a little bit with the strength in the links and in the different forces. Here is an updated fiddle so you can take a look at the idea. Update fiddle

Related

Clustering Force Layout

I'm currently working on a variation of a clustered force layout uses D3’s circle-packing layout to initialize node positions.
You can find the original code at : ClusterForce Layout IV
However I can't find a way to choose the number of nodes per cluster.
For example: For a number of nodes equal to 20 (n=20), I'd like to have my 10 clusters (m=10) shared like 2 nodes each.
I tried a lot of changes using the "d3.nest()" part, but nothing worked like I wanted to.
If someone could help , thakns a lot !

Summarise many nodes in Cytoscape.js

I am building a web app where the user can create a sort of bipartite graph like this one:
Sometimes the user would like to build a huge graph, for example a graph in which the topmost layer has 784 nodes, as in the next picture. My application can handle the computation, but the result is ugly and meaningless:
Do you have any idea for rendering a huge layer without just drawing all the nodes but, instead, summarising them with another, prettier representation?
Until now I have thought about putting all the nodes of a "huge" layer in an empty compound node, but of course then it is not possible to draw some edges (so the huge layer would seem as it were disconnected from the graph). Another solution would be to have all layers with more than 100 nodes have exactly 100 nodes, and put them inside a compound node with z-index greater than each node's z-index; but I haven't tried this yet.
If you have some other ideas, or if Cytoscape.js provides a way to summarise large graphs, please let me know.
Thank you.
you could group nodes when the amount in a layer exceeds a certain number (e.g. if you have 100 nodes, you combine them into groups of 25)
I'd do this by iterating over the nodes in the layer, making a new node N for each subgroup (inserting all relevant information needed), and then replacing any mention of the replaced nodes by N in all relevant edges (finding connected edges).
As I personally generate layouts/nodes in python before sending them to cytoscape for visualization, I'll refrain from posting a potentially ineffecient/incorrect javascript/cytoscape example :)

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:
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.

Phasor Diagrams (vector plots) in Javascript

I have phasor information (polar vector data pairs, each with magnitude and angle, representing voltage and current measurements) that I would like to display using Javascript. They should look something like the image linked below (my rep isn't high enough to directly post it) which I stole from Jesse's question about MatPlotLib. I would also like to easily change which phasors are displayed by a simple mechanic like clicking on the legend entry.
See a phasor diagram example here.
While I have inspected several code sets, I have yet to find a chart package that is built to handle polar vectors like this. Is my Google-fu lacking or do I need to create everything from scratch?
I feel like this is a cheap workaround, but here's what I ended up doing:
I used the polar chart from jqWidgets and with the series type set to "column" and the flip property switched to "true." I put the data in an array with 0 entries for each possible angle except for where I wanted the phasor displayed. Each phasor gets a dedicated series so the legend lists them all. It's not perfect and the array is much larger than it really should need to be, but it's passable.
While it's not surprising that no power system display package is publicly available for Javascript, I'm sure one has to be out there for educational sites if nothing else.

NVD3 Line Chart with View Finder

Anyone know if there is a way to hide the view finder, while still having the chart display a subset of the data? If I filter the data before sending it to the chart, the chart lines are skewed instead of contiguous.
I'm trying to filter on a date range subset of the data, while keeping the lines contiguous with the entire set of data.
I noticed in the source, on line 362, they filter on !d.disabled. I'm wondering if I can hook into that somehow. Does anyone know the proper usage pattern for this?
The view finder is actually Square's Crossfilter found here [0] if you wanted to browse the source and view more documentation.
However, I would just set the display attribute to none in CSS of the svg containing the crossfilter and be done with it.
[0] http://square.github.io/crossfilter/

Categories

Resources