Using JS and d3.js to eliminate or combine duplicate connections in a d3.js node diagram

Question

Using JS and d3.js to eliminate or combine duplicate connections in a d3.js node diagram

Hey there!

Hello, I am new to working with js/d3.js and tackling a small project. Here are some of my previous inquiries:

D3.js: Dynamically create source and target based on identical JSON values
JS / d3.js: Steps for highlighting adjacent links

My current project involves dynamically generating source and target pairs based on user inputs. However, I have encountered an issue where there are duplicate links among nodes. Upon investigation, I noticed that the duplication may be stemming from repeated Source/Target elements in the array being created. Below is a snippet showing what happened within the 'links' array:

//Source and target serve as unique identifiers for each datastruct
source: S001A, target: S002A
source: S001A, target: S003A
source: S001A, target: S004A       
source: S002A, target: S001A //Duplicate
source: S002A, target: S005A
source: S003A, target: S001A //Duplicate
source: S003A, target: S006A
source: S004A, target: S001A //Duplicate
                  ...

The cause of this issue lies in my raw data having a nested array for "Friends". Here's an example entry in the dataset:

{
   "NRIC": "S001A",
   "name": "Benjamin",
   "blk": 123,
   "estate": "Woodlands",
   "street": "Woodlands Street 12",
   "unitNo": "01-23",
   "postal": 123123,
   "school": "Nanyang Technological University",
   "Friends": //Nested array..
   [
      "S002A",
      "S003A",
      "S004A",
   ]
}

Below is the for-loop I've been utilizing to generate the source-target arrays for the nested data:

graphData.forEach(function(gdata,index)
{
    for (i = 0; i < gdata.Friends.length; i++)
    {
        links.push({
            source: gdata.NRIC,
            target: gdata.Friends[i]
        });     
    }
});

This loop inevitably leads to duplicates since friends are mutually included in each other's lists. (For instance, S001A is friends with S002A, S003A, and S004A - and vice versa).

I initially considered only using source/target pairs where source === this.id, but I fear this might result in omitting essential pairs and compromising data integrity.

Is there a way I can iterate through and eliminate these redundant pairings from the array? Whether by adjusting the existing for-loop or implementing post-processing on the data.

Thank you immensely for your guidance!

javascript arrays json d3.js

Answer 1

Answer №1

Shout out to @Gerardo Furtado for the assistance!

I made some adjustments to the solution in order to sort alphanumeric values. Here is the modified version that I used:

graphData.forEach(function(gdata,index)
{
    for (i = 0; i < gdata.Friends.length; i++)
    {
        links.push({
            source: gdata.NRIC,
            target: gdata.Friends[i]
        });     
    }
});

links.forEach(function(d) {
    var sourceTemp = d.source, targetTemp = d.target;
    if (d.source > d.target)
    {
        d.source = targetTemp;
        d.target = sourceTemp;
    }
});

//links.sort(); doesn't work as item to be sorted may be alphanmueric :(
var linkslength = links.length;

links.forEach(function(d,i)
{
    var curSrc = d.source, curTgt = d.target;
    for(var j = i+1; j < linkslength; j++)
    {
        if (links[j].source === curSrc && links[j].target === curTgt)
        {
            links.splice(j,1);
            linkslength -= 1;
        }
    }
});

I understand that this code can be optimized further. Any suggestions on reducing the number of loops? Also, I am concerned about the updates to links.length after each splice operation. I manually adjusted it in the code.

Huge thanks to Gerardo Furtado and the Stack Overflow community! Cheers :)

Answer 2

Shout out to @Gerardo Furtado for the assistance!

I made some adjustments to the solution in order to sort alphanumeric values. Here is the modified version that I used:

graphData.forEach(function(gdata,index)
{
    for (i = 0; i < gdata.Friends.length; i++)
    {
        links.push({
            source: gdata.NRIC,
            target: gdata.Friends[i]
        });     
    }
});

links.forEach(function(d) {
    var sourceTemp = d.source, targetTemp = d.target;
    if (d.source > d.target)
    {
        d.source = targetTemp;
        d.target = sourceTemp;
    }
});

//links.sort(); doesn't work as item to be sorted may be alphanmueric :(
var linkslength = links.length;

links.forEach(function(d,i)
{
    var curSrc = d.source, curTgt = d.target;
    for(var j = i+1; j < linkslength; j++)
    {
        if (links[j].source === curSrc && links[j].target === curTgt)
        {
            links.splice(j,1);
            linkslength -= 1;
        }
    }
});

I understand that this code can be optimized further. Any suggestions on reducing the number of loops? Also, I am concerned about the updates to links.length after each splice operation. I manually adjusted it in the code.

Huge thanks to Gerardo Furtado and the Stack Overflow community! Cheers :)

Using JS and d3.js to eliminate or combine duplicate connections in a d3.js node diagram

Answer №1

Similar questions

A dynamic JQuery carousel displaying a variety of albums

Methods for displaying data on the client side using express, MongoDB, and jade

I encountered an issue while constructing a React application. An error message popped up indicating: "Warning: Can't execute a React state update on a component that is not mounted"

Error: Unable to locate module: Unable to resolve 'next/web-vitals'

How to stop empty numbers in angular.js

Error: The 'length' property cannot be searched for using the 'in' operator

I am in need of a datepicker for my project that will display the END date as the current date and set the START date as 7 days before the END date

Press on the div to reveal its content at the clicked position

Is it possible for me to customize the default angular filter in order to prioritize displaying strings that begin with the search term?

Debugging the Force-Directed D3 Graph

I am having trouble retrieving the content-length from the response headers within the app.use() middleware function

Encountering a React clash while integrating Material UI

Automatically navigate to a different page using JavaScript after 5 seconds without interrupting the execution of other code

Code snippet for adding a div element with an embedded image using JavaScript

Javascript Encapsulation example

Koa.js route() isn't a defined function

Transforming a sequence of numerical values into an array in Java, with each number occupying a distinct position

Algorithm for encryption and decryption using symmetric keys

What is the reason behind this Uncaught TypeError that is happening?

Having trouble converting NSData object to NSDictionary