graph node

by y_duf

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    /* Floating Graph Container */
    #graph-container {
      position: fixed;
      top: 10px;
      right: 10px;
      width: 400px;
      height: 400px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid #ccc;
      border-radius: 10px;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      padding: 10px;
      z-index: 1000;
    }

    /* Topic Sections */
    .topic-section {
      padding: 50px;
      margin: 50px 0;
      border: 1px solid #ddd;
      background: #f9f9f9;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <!-- Floating Graph Container -->
  <div id="graph-container">
    <svg width="400" height="400">
      <g id="zoomLayer"></g> <!-- Zoomable and draggable container -->
    </svg>
  </div>

  <!-- Topic Sections (Clickable) -->
  <div id="Machine_Learning" class="topic-section">
    <h2>Machine Learning</h2>
    <p>Content about Machine Learning...</p>
  </div>

  <div id="Artificial_Intelligence" class="topic-section">
    <h2>Artificial Intelligence</h2>
    <p>Content about AI...</p>
  </div>

  <div id="Deep_Learning" class="topic-section">
    <h2>Deep Learning</h2>
    <p>Content about Deep Learning...</p>
  </div>

  <div id="Neural_Networks" class="topic-section">
    <h2>Neural Networks</h2>
    <p>Content about Neural Networks...</p>
  </div>

  <script>
    const width = 400, height = 400;

    const data = {
      "nodes": [
        { "id": "Machine Learning", "size": 40 },
        { "id": "Artificial Intelligence", "size": 50 },
        { "id": "Deep Learning", "size": 30 },
        { "id": "Neural Networks", "size": 25 }
      ],
      "links": [
        { "source": "Machine Learning", "target": "Artificial Intelligence" },
        { "source": "Deep Learning", "target": "Machine Learning"...