<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Texas Coffee Shops — Reduced Dataset Summary</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- D3 -->
  <script src="https://unpkg.com/d3@7.3.0/dist/d3.min.js"></script>

  <style>
    :root{
      --bg:#0f172a;       /* slate-900 */
      --fg:#e2e8f0;       /* slate-200 */
      --muted:#94a3b8;    /* slate-400 */
      --accent:#60a5fa;   /* blue-400 */
      --card:#111827;     /* gray-900 */
      --chip:#1f2937;     /* gray-800 */
    }
    html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;}
    .wrap{max-width:1000px;margin:40px auto;padding:0 20px;}
    header h1{margin:0 0 6px;font-size:28px;}
    header p{margin:0;color:var(--muted)}
    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:22px 0 30px;}
    .card{background:var(--card);border:1px solid #1f2937;border-radius:16px;padding:16px}
    .kpi{display:flex;align-items:baseline;gap:8px}
    .kpi .num{font-size:28px;font-weight:700}
    .kpi .lbl{color:var(--muted)}
    .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
    .chip{background:var(--chip);border:1px solid #374151;border-radius:999px;padding:6px 10px;font-size:14px}
    svg{width:100%;height:380px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));border-radius:12px}
    .axis text{fill:var(--fg);font-size:12px}
    .axis path,.axis line{stroke:#334155}
    .bar{shape-rendering:crispEdges}
    footer{margin:28px 0;color:var(--muted);font-size:14px}
    a{color:var(--accent);text-decoration:none}
    .tiny-svg{display:flex;gap:10px;margin-top:10px}
  </style>
</head>
<body>
  <div class="wrap">
    <header>
      <h1>Texas Coffee Shops — Reduced Dataset Summary</h1>
      <p>Loaded from CSV (via D3). Summaries + CSS + SVG chart.</p>
    </header>

    <div class="grid">
      <section class="card">
        <h3>Dataset</h3>
        <div id="datasetLink" class="chips"></div>
        <div class="kpi"><span class="num" id="rowCount">—</span><span class="lbl">rows</span></div>
        <div class="kpi"><span class="num" id="cityCount">—</span><span class="lbl">unique cities</span></div>
        <div class="kpi"><span class="num" id="openYearRange">—</span><span class="lbl">open year range</span></div>
      </section>

      <section class="card">
        <h3>Traffic & Staffing</h3>
        <div class="kpi"><span class="num" id="avgCustomers">—</span><span class="lbl">avg daily customers</span></div>
        <div class="kpi"><span class="num" id="avgEmployees">—</span><span class="lbl">avg employees</span></div>
        <div class="kpi"><span class="num" id="avgRevenue">—</span><span class="lbl">avg monthly revenue (USD)</span></div>
      </section>

      <section class="card">
        <h3>Features</h3>
        <div class="chips" id="features"></div>
        <div class="tiny-svg" id="tinySvg"></div>
      </section>
    </div>

    <section class="card">
      <h3>Total Monthly Revenue by City</h3>
      <svg id="chart" role="img" aria-label="Bar chart: monthly revenue by city"></svg>
    </section>

    <footer>
      <p>Tip: host your CSV as a <em>Raw</em> URL from a public GitHub Gist. Then paste it into <code>CSV_URL</code> below and run on VizHub.</p>
    </footer>
  </div>

  <script>
    
    const CSV_URL = "https://gist.githubusercontent.com/dineshtechi-deloitte/2a3f136e4065b4b3adfb8c7b83ddf28b/raw/dd3b33b75097a723a9389df5ef7aa22a0fac155f/Coffee_shops_dataset";

    // add a clickable chip with the CSV URL
    const linkWrap = d3.select("#datasetLink");
    linkWrap.append("a").attr("href", CSV_URL).attr("target", "_blank")
      .attr("class", "chip").text("CSV source");

    // === 2) Load & parse CSV using d3.csv ===
    d3.csv(CSV_URL, d3.autoType).then(data => {
      // Ensure numeric columns are parsed as numbers
      const numeric = ["OpenYear","Employees","AvgDailyCustomers","MonthlyRevenueUSD"];
      data.forEach(d => numeric.forEach(k => { if (d[k] != null) d[k] = +d[k]; }));

      // === 3) Summaries ===
      d3.select("#rowCount").text(data.length);

      const uniqueCities = Array.from(new Set(data.map(d => d.City)));
      d3.select("#cityCount").text(uniqueCities.length);

      const openYears = data.map(d => d.OpenYear).filter(Number.isFinite);
      const yearMin = d3.min(openYears), yearMax = d3.max(openYears);
      d3.select("#openYearRange").text(`${yearMin}–${yearMax}`);

      const mean = v => d3.mean(v.filter(Number.isFinite));
      const fmtD = d3.format(",.0f");
      const fmtM = d3.format("$,.0f");

      d3.select("#avgCustomers").text(fmtD(mean(data.map(d => d.AvgDailyCustomers))));
      d3.select("#avgEmployees").text(fmtD(mean(data.map(d => d.Employees))));
      d3.select("#avgRevenue").text(fmtM(mean(data.map(d => d.MonthlyRevenueUSD))));

      // Features: Wi-Fi count + seating distribution
      const wifiYes = data.filter(d => d.HasWifi === true).length;
      const seatingCounts = d3.rollup(data, v => v.length, d => d.Seating);
      const features = [
        `Wi-Fi: ${wifiYes}/${data.length} shops`,
        ...Array.from(seatingCounts, ([k,v]) => `Seating ${k}: ${v}`)
      ];
      d3.select("#features").selectAll("span")
        .data(features)
        .join("span")
        .attr("class","chip")
        .text(d => d);

      // Decorative inline SVGs (satisfy "add SVG pictures")
      const mug = `
        <svg width="48" height="48" viewBox="0 0 48 48" aria-hidden="true">
          <rect x="8" y="12" width="22" height="24" rx="6" fill="#7c3aed" opacity="0.6"></rect>
          <rect x="30" y="16" width="8" height="12" rx="4" fill="#60a5fa" opacity="0.7"></rect>
          <rect x="14" y="8" width="2" height="6" fill="#e2e8f0"></rect>
          <rect x="18" y="7" width="2" height="7" fill="#e2e8f0"></rect>
          <rect x="22" y="8" width="2" height="6" fill="#e2e8f0"></rect>
        </svg>`;
      d3.select("#tinySvg").html(mug + mug);

      // === 4) D3 bar chart: aggregate MonthlyRevenueUSD by City ===
      const byCity = Array.from(
        d3.rollup(data, v => d3.sum(v, d => d.MonthlyRevenueUSD), d => d.City),
        ([City, TotalRevenue]) => ({City, TotalRevenue})
      ).sort((a,b) => d3.descending(a.TotalRevenue, b.TotalRevenue));

      const svg = d3.select("#chart");
      const { width, height } = svg.node().getBoundingClientRect();
      const margin = {top: 24, right: 24, bottom: 60, left: 80};
      const w = width - margin.left - margin.right;
      const h = height - margin.top - margin.bottom;

      const x = d3.scaleBand()
        .domain(byCity.map(d => d.City))
        .range([0, w]).padding(0.2);

      const y = d3.scaleLinear()
        .domain([0, d3.max(byCity, d => d.TotalRevenue)]).nice()
        .range([h, 0]);

      const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);

      // axes
      g.append("g")
        .attr("class","axis")
        .attr("transform", `translate(0,${h})`)
        .call(d3.axisBottom(x))
        .selectAll("text")
        .attr("transform","rotate(-30)")
        .style("text-anchor","end");

      g.append("g")
        .attr("class","axis")
        .call(d3.axisLeft(y).tickFormat(d3.format("$,.0s")));

      // bars
      g.selectAll(".bar")
        .data(byCity)
        .join("rect")
        .attr("class","bar")
        .attr("x", d => x(d.City))
        .attr("y", d => y(d.TotalRevenue))
        .attr("width", x.bandwidth())
        .attr("height", d => h - y(d.TotalRevenue))
        .attr("fill", "#60a5fa");

      // labels
      g.append("text")
        .attr("x", w/2).attr("y", -8)
        .attr("text-anchor", "middle")
        .attr("fill", "#e2e8f0")
        .style("font-weight","700")
        .text("Total Monthly Revenue by City");

      g.append("text")
        .attr("x", -40).attr("y", -10)
        .attr("fill", "#94a3b8")
        .style("font-size","12px")
        .text("USD");
    })
    .catch(err => {
      console.error(err);
      alert("Failed to load CSV. Make sure CSV_URL points to a RAW CSV URL.");
    });
  </script>
</body>
</html>
