JSFiddle - React, Tailwind, and code Playground

HTML

<div id="stage" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/3.0.0/sigma.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/graphology/0.25.4/graphology.umd.min.js"></script>

CSS

#stage {
  width: 100vw;
  height: 100vh;
}

JavaScript

const container = document.getElementById("stage");

const graph = new graphology.Graph();

graph.addNode("a", {
  x: 0,
  y: 0,
  size: 20,
  label: "Jim",
  image: "https://upload.wikimedia.org/wikipedia/commons/7/7f/Jim_Morrison_1969.JPG",
});
graph.addNode("b", {
  x: 1,
  y: -1,
  size: 40,
  label: "Johnny",
  image: "https://upload.wikimedia.org/wikipedia/commons/a/a8/Johnny_Hallyday_%E2%80%94_Milan%2C_1973.jpg",
});
graph.addNode("c", {
  x: 3,
  y: -2,
  size: 20,
  label: "Jimi",
  image: "https://upload.wikimedia.org/wikipedia/commons/6/6c/Jimi-Hendrix-1967-Helsinki-d.jpg",
});
graph.addNode("d", {
  x: 1,
  y: -3,
  size: 20,
  label: "Bob",
  image:
    "https://upload.wikimedia.org/wikipedia/commons/c/c5/Bob-Dylan-arrived-at-Arlanda-surrounded-by-twenty-bodyguards-and-assistants-391770740297_%28cropped%29.jpg",
});
graph.addNode("e", {
  x: 3,
  y: -4,
  size: 40,
  label: "Eric",
  image: "https://upload.wikimedia.org/wikipedia/commons/b/b1/Eric_Clapton_1.jpg",
});
graph.addNode("f", {
  x: 4,
  y: -5,
  size: 20,
  label: "Mick",
  image: "https://upload.wikimedia.org/wikipedia/commons/6/66/Mick-Jagger-1965b.jpg",
});

graph.addEdge("a", "b", { size: 10 });
graph.addEdge("b", "c", { size: 10 });
graph.addEdge("b", "d", { size: 10 });
graph.addEdge("c", "b", { size: 10 });
graph.addEdge("c", "e", { size: 10 });
graph.addEdge("d", "c", { size: 10 });
graph.addEdge("d", "e", { size: 10 });
graph.addEdge("e", "d", { size: 10 });
graph.addEdge("f", "e", { size: 10 });

const renderer = new Sigma(graph, container, {
  defaultNodeType: "image",
  nodeProgramClasses: {
    image: Sigma.rendering.createNodeImageProgram(),
  },
});