JSFiddle - React, Tailwind, and code Playground

by Serhii Matrunchyk

JavaScript

const nodeData = [{
  id: 1,
  name: 'Alice',
  partners: [2],
  children: [4]
}, {
  id: 2,
  name: 'Bob',
  partners: [1, 3],
  children: [4, 10]
}, {
  id: 3,
  name: 'Carol',
  partners: [2],
  children: [10]
}, {
  id: 4,
  name: 'David',
  partners: [7],
  children: [8]
}, {
  id: 5,
  name: 'Emily',
  partners: [6],
  children: [7, 9]
}, {
  id: 6,
  name: 'Fred',
  partners: [5],
  children: [7, 9]
}, {
  id: 7,
  name: 'Grace',
  partners: [4],
  children: [8]
}, {
  id: 8,
  name: 'Harry',
  partners: null,
  children: null
}, {
  id: 9,
  name: 'Imogen',
  partners: null,
  children: null
}, {
  id: 10,
  name: 'James',
  partners: null,
  children: null
}];

const linkData = [];

nodeData.forEach((node, index) => {
  if (node.partners) {
    node.partners.forEach(partnerID => {
      linkData.push({
        source: node,
        target: nodeData.find(partnerNode => partnerNode.id === partnerID),
        relationship: 'Partner'
      });
    })
  }
  if (node.children) {
    node.children.forEach(childID => {
      const childNode = nodeData.find(childNode => childNode.id === childID);

      linkData.push({
        source: node,
        target: childNode,
        relationship: 'Child'
      });
    })
  }
});

console.log(linkData)

linkData.map(d => Object.create(d));

assignGeneration(nodeData, nodeData, 0);

const w = window.innerWidth;
const h = window.innerHeight;
const NODE_SIZE = 50;

const svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

const color = d3.scaleOrdinal(d3.schemeCategory10);

const rowScale = d3.scalePoint()
  .domain(dataRange(nodeData, 'generation'))
  .range([0, h - 50])
  .padding(0.5);

const simulation = d3.forceSimulation(nodeData)
  .force('link', d3.forceLink()
    .links(linkData)
    .distance(150)
    .strength(1)
  )
  .force("y", d3.forceY(d => rowScale(d.generation)))
  .force("charge", d3.forceManyBody()
    .strength(-1000)
    .distanceMin(500)
    .distanceMax(2000)
  )
 ...