<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fruits Dataset Summary</title>
  <script src="https://unpkg.com/d3@7.3.0/dist/d3.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      margin: 20px;
      text-align: center;
    }
    h1 {
      color: #333;
    }
    #summary {
      background: white;
      padding: 15px;
      width: 300px;
      margin: 20px auto;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    svg {
      margin-top: 20px;
    }
  </style>
</head>
<body>

  <h1>🍎 Fruits Dataset Summary</h1>
  
  <div id="summary">Loading data...</div>

  <!-- SVG Picture Example -->
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="orange" stroke="black" stroke-width="2"></circle>
  </svg>

  <script>
    const csvUrl = "https://gist.githubusercontent.com/Harshithmullapudi2025/d157899949d353f456955a7408c95840/raw/73fc9504c20989f22e7a4a44548a307098b551e4/fruits_dataset.csv";

    // Fetch and summarize data
    fetch(csvUrl)
      .then(response => response.text())
      .then(text => {
        const data = d3.csvParse(text);
        const fileSizeKB = Math.round(new Blob([text]).size / 1024);
        const numRows = data.length;
        const numCols = data.columns.length;

        document.getElementById("summary").innerHTML = `
          <p><strong>File Size:</strong> ${fileSizeKB} KB</p>
          <p><strong>Rows:</strong> ${numRows}</p>
          <p><strong>Columns:</strong> ${numCols}</p>
        `;
      })
      .catch(error => {
        document.getElementById("summary").innerText = "Error loading data.";
        console.error(error);
      });
  </script>

</body>
</html>
