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

// 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,
    "message": "Ask away",
    "senderName": "Charlie",
    "receiverName": "Bob",
    "assignedTrait": "Helpful"
  },
  {
    "id": 13,
    "message": "Happy birthday!",
    "senderName": "Bob",
    "receiverName": "David",
   ...