Fetching csv vs. .force('link', forceLink(links)

Help
#1

Hi,
I am trying to create a force-directed graph based on some csv-data. I tried to follow the scatterplot example (https://www.youtube.com/watch?v=xkBheRZTkaw&t=37528s), but this seems not to work properly.

My code: Force-Directed Graph V4 (vizhub.com)

the error message

Uncaught TypeError: r.map is not a function
    at h (d3.min.js:2:222110)
    at l.initialize (d3.min.js:2:222706)
    at p (d3.min.js:2:225815)
    at Object.force (d3.min.js:2:226461)
    at index.js:31:4
    at index.js:63:3

This must be related to the .force(‘link’, forceLink(links). As far as I understand, the links-array is not in a form suitable for forceLink.

Could someone share a solution and explain the reasons behind?

Any help is very much appreciated.

Chris

#2

I did some testing.

If I put the data into the index.js, console.log gives me this result.

Code

const nodes = [
  { id: 'nav', group: 1 },
  { id: 'ines', group: 1 },
  { id: 'labor7', group: 1 },
];
console.log(nodes);

Result

Array(3) [ {…}, {…}, {…} ]
​0: Object { id: "nav", group: 1, index: 0, … }
​​  group: 1
​​  id: "nav"
​​  index: 0
​​  vx: 0.00002724888703499698
​​  vy: 0.000005425849965436818
​​  x: 497.8406841057123
​​  y: 257.5226478984907
​​ <prototype>: Object { … }
​1: Object { id: "ines", group: 1, index: 1, … }
​2: Object { id: "labor7", group: 1, index: 2, … }
​length: 3

This inputs works fine, the svg is created and the image is shown in the browser.

But I would like to put the data into a csv, as this will be the type of source I will get.
If I try this, I get the above mentioned error:

Code

const parseRowNode = (d) => {
  d.group = +d.group;
  return d;
};

const nodes = csv('applications.csv', parseRowNode).then((d) => {
  console.log(d);
});

Result

Array(3) [ {…}, {…}, {…} ]​
0: Object { id: "nav", group: 1 }
  ​​group: 1
​​  id: "nav"
​​<prototype>: Object { … }
​1: Object { id: "ines", group: 1 }
​2: Object { id: "labor7", group: 1 }
​columns: Array [ "id", "group" ]
​length: 3
#3

So, I was watching one of @curran’s tutorials and realized that my fetching of data was okay, but that the data is only available within that function. As I have two csv-files as sources, I had to put it this way:

const parseRowNode = (d) => {
  d.group = +d.group;
  return d;
};

const parseRowLinks = (d) => {
  d.value = +d.value;
  return d;
};




const mainNodes = async () => {
  const nodes = await csv('applications.csv', parseRowNode);

  const mainLinks = async () => {
    const links = await csv('interf.csv', parseRowLinks);


    [All your code goes here]


  };

  mainLinks();

};

mainNodes();

All my objects have now the right meta data - but they are not yet showing on screen. But That is an issue for another post. :wink:

#4

I had a small miss spelling of a variable - now, proof of concept is final :slight_smile:

force directed graph, with fetching data from 2 csv’s

#5

Awesome!

Another way to do it would be to load the two data files in parallel and wait for both of them:

const [nodes, links] = await Promise.all([
  csv('applications.csv', parseRowNode),
  csv('interf.csv', parseRowLinks)
]);