<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ICE-5 Data Visualization</title>
  <script src="https://unpkg.com/d3@7.3.0/dist/d3.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f0f8ff;
      text-align: center;
      margin: 20px;
    }
    h1 {
      color: #333;
    }
    table {
      margin: 20px auto;
      border-collapse: collapse;
      width: 70%;
      background: white;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    th, td {
      border: 1px solid #ccc;
      padding: 8px 12px;
    }
    th {
      background: #4CAF50;
      color: white;
    }
    tr:nth-child(even) { background: #f2f2f2; }
    svg {
      margin-top: 30px;
    }
  </style>
</head>
<body>
  <h1>ICE-5 Data Visualization</h1>
  <div id="summary"></div>
  <div id="table"></div>
  <svg id="chart" width="700" height="350"></svg>

  <script>
    // ✅ Your Gist CSV link
    const dataUrl = "https://gist.githubusercontent.com/20-550sowjanya/632ba3832f7911caf6839b44233a5f89/raw/dd5b87c16e68a975510878952773aa78f9228de2/finaldataset.csv";

    d3.csv(dataUrl).then(data => {
      console.log("Data loaded:", data);

      // Show summary info
      d3.select("#summary")
        .html(`<p><strong>Total rows in dataset:</strong> ${data.length}</p>`);

      // Build preview table (first 5 rows)
      const table = d3.select("#table").append("table");
      const columns = Object.keys(data[0]);

      table.append("thead").append("tr")
        .selectAll("th")
        .data(columns).enter()
        .append("th")
        .text(d => d);

      const rows = table.append("tbody")
        .selectAll("tr")
        .data(data.slice(0, 5))
        .enter().append("tr");

      rows.selectAll("td")
        .data(row => columns.map(c => row[c]))
        .enter().append("td")
        .text(d => d);

      // --- Simple SVG Bar Chart ---
      const svg = d3.select("#chart");
      const width = +svg.attr("width");
      const height = +svg.attr("height");

      // Use first column as category, second column as numeric
      const categoryCol = columns[0];
      const valueCol = columns[1];

      const x = d3.scaleBand()
        .domain(data.map(d => d[categoryCol]))
        .range([60, width - 30])
        .padding(0.2);

      const y = d3.scaleLinear()
        .domain([0, d3.max(data, d => +d[valueCol])])
        .nice()
        .range([height - 50, 20]);

      // Bars
      svg.selectAll("rect")
        .data(data)
        .enter().append("rect")
        .attr("x", d => x(d[categoryCol]))
        .attr("y", d => y(+d[valueCol]))
        .attr("width", x.bandwidth())
        .attr("height", d => height - 50 - y(+d[valueCol]))
        .attr("fill", "steelblue");

      // X Axis
      svg.append("g")
        .attr("transform", `translate(0,${height - 50})`)
        .call(d3.axisBottom(x))
        .selectAll("text")
        .attr("transform", "rotate(-30)")
        .style("text-anchor", "end");

      // Y Axis
      svg.append("g")
        .attr("transform", `translate(60,0)`)
        .call(d3.axisLeft(y));

      // Chart title
      svg.append("text")
        .attr("x", width / 2)
        .attr("y", 15)
        .attr("text-anchor", "middle")
        .style("font-size", "16px")
        .style("font-weight", "bold")
        .text(`Bar Chart of ${valueCol}`);
    });
  </script>
</body>
</html>
