JSFiddle - React, Tailwind, and code Playground

by writetobhuwan

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Mind Map</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>

  </head>

  <body>
    <h1>Mind Map</h1>
    <select id="startNode">
      <!-- Options will be populated by JavaScript -->
    </select>
    <div id="canvas"></div>
    <div id="customToaster"></div>


  </body>

</html>

CSS

body {
   text-align: center;
 }

 #canvas {
   width: 100%;
   height: 70vh;
   margin: auto;
   position: relative;
 }

 #customToaster {
   position: fixed;
   bottom: 20px;
   right: 20px;
   background-color: #333;
   color: white;
   padding: 10px;
   display: none;
 }

JavaScript

// Function to generate a random color
const getRandomColor = () => {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

// Initialize D3.js SVG
const svg = d3.select("#canvas")
  .append("svg")
  .attr("width", window.innerWidth)
  .attr("height", window.innerHeight * 0.7);

// Your data here
const data = [{
    "id": 1,
    "message": "Hello 1",
    "senderName": "Alice",
    "receiverName": "Bob",
    "assignedTrait": "Friendly"
  },
  {
    "id": 2,
    "message": "Hi there",
    "senderName": "Bob",
    "receiverName": "Alice",
    "assignedTrait": "Reserved"
  },
  {
    "id": 3,
    "message": "Hey!",
    "senderName": "Alice",
    "receiverName": "Charlie",
    "assignedTrait": "Energetic"
  },
  {
    "id": 4,
    "message": "Good morning",
    "senderName": "Charlie",
    "receiverName": "Alice",
    "assignedTrait": "Polite"
  },
  {
    "id": 5,
    "message": "How are you?",
    "senderName": "Alice",
    "receiverName": "David",
    "assignedTrait": "Curious"
  },
  {
    "id": 6,
    "message": "I'm fine, thanks",
    "senderName": "David",
    "receiverName": "Alice",
    "assignedTrait": "Friendly"
  },
  {
    "id": 7,
    "message": "Let's meet up",
    "senderName": "Alice",
    "receiverName": "Eve",
    "assignedTrait": "Social"
  },
  {
    "id": 8,
    "message": "Sure, when?",
    "senderName": "Eve",
    "receiverName": "Alice",
    "assignedTrait": "Friendly"
  },
  {
    "id": 9,
    "message": "Can you help me?",
    "senderName": "Alice",
    "receiverName": "Frank",
    "assignedTrait": "Helpful"
  },
  {
    "id": 10,
    "message": "Of course, what do you need?",
    "senderName": "Frank",
    "receiverName": "Alice",
    "assignedTrait": "Friendly"
  },
  {
    "id": 11,
    "message": "I have a question",
    "senderName": "Bob",
    "receiverName": "Charlie",
    "assignedTrait": "Curious"
  },
  {
    "id": 12,
 ...