JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <body>
    <svg></svg>
  </body>

</html>

CSS

body {
  width: 100%;
  height: 100%;
}

svg {
  width: 100%;
  height: 500px;
}

JavaScript

var svg = d3.select('svg');
var graph_transform = gen_data();
var graph_position = gen_data();

var force_left = d3.forceCenter(
  parseInt(svg.style('width')) / 3,
  parseInt(svg.style('height')) / 2
)
var force_right = d3.forceCenter(
  2 * parseInt(svg.style('width')) / 3,
  parseInt(svg.style('height')) / 2
)

var sim_transform = d3.forceSimulation()
  .force('left', force_left)
  .force('collide', d3.forceCollide(65))
  .force('link', d3.forceLink().id(id));
var sim_position = d3.forceSimulation()
  .force('right', force_right)
  .force('collide', d3.forceCollide(65))
  .force('link', d3.forceLink().id(id));

var g_transform = svg.append('g');
var g_position = svg.append('g');

var circles_transform = g_transform.selectAll('circle')
  .data(graph_transform.nodes)
  .enter()
  .append('circle')
  .attr('r', 40);

var circles_position = g_position.selectAll('circle')
  .data(graph_position.nodes)
  .enter()
  .append('circle')
  .attr('r', 40);

sim_transform
	.nodes(graph_transform.nodes)
  .force('link')
  .links(graph_transform.links);
  
sim_position
	.nodes(graph_position.nodes)
  .force('link')
  .links(graph_position.links);
  
sim_transform.on('tick', function () {
	circles_transform.attr('transform', function (d) {
  	return 'translate(' + d.x + ',' + d.y + ')';
  });
});

sim_position.on('tick', function () {
	circles_position
    .attr('cx', function (d) {
      return d.x;
    })
    .attr('cy', function (d) {
    	return d.y;
    })
});

function id(d) {
  return d.id;
}

function gen_data() {
  var nodes = [{
      id: 'a'
    },
    {
      id: 'b'
    },
    {
      id: 'c'
    },
    {
      id: 'd'
    }
  ]

  var links = [{
      source: 'a',
      target: 'b'
    },
    {
      source: 'b',
      target: 'c'
    },
    {
      source: 'c',
      target: 'd'
    },
    {
      source: 'd',
      target: 'a'
    }
  ];
  return {
    nodes: nodes,
    links: links
  }
}