dashboard.html

<!DOCTYPE html>
<html lang="en-IN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ===== Security headers set at document level (STQA Experiment 05) =====
     GitHub Pages does not allow custom HTTP response headers, so the two
     policies that a meta element can carry are declared here. -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://www.googletagmanager.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://www.googletagmanager.com https://www.google-analytics.com; connect-src 'self' https://www.google-analytics.com https://analytics.google.com; font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests">
<meta name="referrer" content="strict-origin-when-cross-origin">


<title>Heatwave Watch Dashboard | Region-wise Heat Severity Monitoring</title>
<meta name="description" content="Live heatwave watch dashboard showing region-wise maximum temperature, departure from normal, severity grading and hotspot clusters across seven IMD regions.">
<meta name="keywords" content="heatwave dashboard, heat wave severity, temperature monitoring dashboard, heatwave hotspot map, IMD regions, heat alert India">
<meta name="robots" content="index, follow">
<meta name="author" content="Jivitesh Kumar, Department of Information Technology, KJSSE">
<link rel="canonical" href="https://jiviteshkumar.github.io/climate_/dashboard.html">

<meta property="og:type" content="website">
<meta property="og:site_name" content="Heatwave Intelligence Platform">
<meta property="og:title" content="Heatwave Watch Dashboard | Region-wise Heat Severity Monitoring">
<meta property="og:description" content="Region-wise heatwave severity, hotspot clusters and exposed-population estimates for India.">
<meta property="og:url" content="https://jiviteshkumar.github.io/climate_/dashboard.html">
<meta property="og:image" content="https://jiviteshkumar.github.io/climate_/assets/img/og-cover.svg">
<meta name="twitter:card" content="summary_large_image">

<link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml">
<link rel="sitemap" type="application/xml" href="sitemap.xml">
<link rel="stylesheet" href="assets/css/style.css">

<!-- Google tag (gtag.js) - Google Analytics 4, property "Heatwave Intelligence Platform" -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LTDNH2WP4D"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-LTDNH2WP4D');
</script>
</head>
<body>
<a class="skip" href="#main">Skip to main content</a>

<div class="topbar"><div class="wrap">
  <span class="tag">Use Case KJS-CES-01 &middot; Climate, Energy &amp; Sustainability</span>
  <span>Data partner: <a href="https://imdpune.gov.in/lrfindex.php" title="IMD Pune long range forecasting data repository" rel="noopener" target="_blank">India Meteorological Department, Pune</a></span>
</div></div>

<header class="masthead"><div class="wrap">
  <a class="brand" href="index.html" title="Heatwave Intelligence Platform home page">
    <svg class="mark" viewBox="0 0 48 48" role="img" aria-label="Heatwave Intelligence Platform logo">
      <circle cx="24" cy="24" r="23" fill="#b0202e"></circle>
      <circle cx="24" cy="24" r="8.5" fill="#ffd166"></circle>
      <g stroke="#ffd166" stroke-width="2.6" stroke-linecap="round">
        <path d="M24 6.5v4.5M24 37v4.5M6.5 24h4.5M37 24h4.5M11.6 11.6l3.2 3.2M33.2 33.2l3.2 3.2M36.4 11.6l-3.2 3.2M14.8 33.2l-3.2 3.2"></path>
      </g>
    </svg>
    <span>
      <span class="name">Heatwave Intelligence Platform</span><br>
      <span class="sub">Somaiya Vidyavihar University</span>
    </span>
  </a>
  <nav class="nav" aria-label="Primary navigation">
    <a href="index.html" title="Project overview and current heat outlook">Home</a>
    <a href="dashboard.html" title="Live region-wise heatwave watch dashboard">Heatwave Watch</a>
    <a href="forecast.html" title="AI-driven maximum temperature forecasting models">AI Forecasting</a>
    <a href="monitoring.html" title="IoT automated weather station network status">IoT Network</a>
    <a href="advisories.html" title="Stakeholder-specific heatwave advisories and early warnings">Advisories</a>
    <a href="about.html" title="About the use case, methodology and team">About</a>
  </nav>
</div></header>

<main id="main">

<div class="hero"><div class="wrap" style="padding-block:40px 34px">
  <span class="eyebrow">Phase V &middot; Decision support</span>
  <h1 style="font-size:clamp(27px,3.4vw,38px)">Heatwave Watch Dashboard</h1>
  <p class="lede" style="margin-bottom:0">Region-wise severity grading against the local long-period
  normal, spatial hotspot clusters, and the population currently exposed to heat-wave-grade
  conditions or worse.</p>
</div></div>

<section>
  <div class="wrap">

    <div class="alert severe" role="alert">
      <svg class="a-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
        <path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18.2A2 2 0 0 0 3.5 21h17a2 2 0 0 0 1.7-2.8L13.7 3.9a2 2 0 0 0-3.4 0z"></path>
      </svg>
      <div>
        <h3>Severe heat wave in force over Interior Peninsula</h3>
        <p>Forecast maximum of 46.4 °C, a departure of +7.0 °C from the long-period normal, with five
        active hotspot clusters over Vidarbha and Marathwada. Advisories have been dispatched to
        district authorities, health agencies, farmers and citizens.</p>
      </div>
    </div>

    <div class="stats" style="margin-bottom:28px">
      <div class="stat">
        <div class="lbl">Highest forecast Tmax</div>
        <div class="val" style="color:var(--severe)">46.4<span class="unit">°C</span></div>
        <div class="foot">Interior Peninsula</div>
      </div>
      <div class="stat">
        <div class="lbl">Largest departure</div>
        <div class="val" style="color:var(--heat)">+7.0<span class="unit">°C</span></div>
        <div class="foot">Above long-period normal</div>
      </div>
      <div class="stat">
        <div class="lbl">Regions on alert</div>
        <div class="val">4<span class="unit">/ 7</span></div>
        <div class="foot">Heat wave grade or above</div>
      </div>
      <div class="stat">
        <div class="lbl">Population exposed</div>
        <div class="val">9.9<span class="unit">cr</span></div>
        <div class="foot">Within alerted regions</div>
      </div>
    </div>

    <div class="grid" style="grid-template-columns:1fr 1.4fr;gap:20px;margin-bottom:28px">
      <div class="chart-card">
        <div class="chart-head">
          <div>
            <h2 style="font-size:18px;margin:0">Hotspot map</h2>
            <p class="hint">Schematic view; marker value is the hotspot cluster count</p>
          </div>
        </div>
        <div id="hotspot-map"></div>
        <div class="legend">
          <span class="key"><span class="sw" style="background:#12805c"></span>Normal</span>
          <span class="key"><span class="sw" style="background:#c98a04"></span>Caution</span>
          <span class="key"><span class="sw" style="background:#e2620d"></span>Heat Wave</span>
          <span class="key"><span class="sw" style="background:#c0341c"></span>Severe</span>
        </div>
      </div>
      <div class="chart-card">
        <div class="chart-head">
          <div>
            <h2 style="font-size:18px;margin:0">Forecast maximum temperature by region</h2>
            <p class="hint">Bars are coloured by the severity class assigned to each region</p>
          </div>
        </div>
        <div id="watch-bars"></div>
      </div>
    </div>

    <div class="table-scroll" style="margin-bottom:28px">
      <table>
        <caption>Region-wise heatwave watch
          <span class="cap-sub">Severity graded per IMD criteria against the region long-period normal</span>
        </caption>
        <thead>
          <tr>
            <th scope="col">IMD region</th>
            <th scope="col">Forecast Tmax</th>
            <th scope="col">Departure</th>
            <th scope="col">Severity</th>
            <th scope="col">Hotspots</th>
            <th scope="col">Exposed</th>
          </tr>
        </thead>
        <tbody id="watch-body"></tbody>
      </table>
    </div>

    <div class="grid g-2">
      <div class="table-scroll">
        <table style="min-width:0">
          <caption>Severity classification scale
            <span class="cap-sub">Thresholds applied by the classification model</span>
          </caption>
          <thead><tr><th scope="col">Class</th><th scope="col">Criterion</th></tr></thead>
          <tbody id="severity-scale"></tbody>
        </table>
      </div>
      <div class="card pad-lg">
        <h3>How severity is assigned</h3>
        <p style="color:var(--ink-2);font-size:14.5px">Each grid cell is compared against its own
        long-period normal for the same calendar window. A region is escalated when a contiguous
        cluster of cells crosses the threshold, not when a single station spikes, which suppresses
        false alarms from instrument error.</p>
        <p style="color:var(--ink-2);font-size:14.5px">Hotspot clusters are detected with a
        Getis-Ord Gi* statistic over the residual field, then grouped with DBSCAN so that adjacent
        significant cells are reported as one actionable area rather than as scattered points.</p>
        <p style="margin:0"><a href="forecast.html" title="See the forecasting models behind these numbers">See the models behind these numbers</a></p>
      </div>
    </div>

  </div>
</section>

</main>

<footer class="site"><div class="wrap">
  <div class="f-grid">
    <div class="f-about">
      <h3 class="f-head">Heatwave Intelligence Platform</h3>
      <p>An AI and IoT decision-support system for heatwave monitoring, prediction and early
      warning, developed under use case KJS-CES-01.</p>
    </div>
    <div>
      <h3 class="f-head">Platform</h3>
      <ul>
        <li><a href="dashboard.html" title="Region-wise heatwave watch dashboard">Heatwave Watch</a></li>
        <li><a href="forecast.html" title="AI forecasting models and evaluation">AI Forecasting</a></li>
        <li><a href="monitoring.html" title="IoT automated weather station network">IoT Network</a></li>
        <li><a href="advisories.html" title="Stakeholder advisories and early warnings">Advisories</a></li>
      </ul>
    </div>
    <div>
      <h3 class="f-head">Project</h3>
      <ul>
        <li><a href="about.html" title="About the use case and methodology">About the use case</a></li>
        <li><a href="sitemap.xml" title="XML sitemap of this website">XML sitemap</a></li>
        <li><a href="robots.txt" title="Robots exclusion file for this website">robots.txt</a></li>
        <li><a href="https://github.com/JiviteshKumar/climate_" title="Project source code on GitHub" rel="noopener" target="_blank">Source on GitHub</a></li>
      </ul>
    </div>
    <div>
      <h3 class="f-head">Data &amp; partners</h3>
      <ul>
        <li><a href="https://imdpune.gov.in/lrfindex.php" title="IMD Pune gridded data repository" rel="noopener" target="_blank">IMD Pune data archive</a></li>
        <li><a href="https://mausam.imd.gov.in/" title="India Meteorological Department official portal" rel="noopener" target="_blank">IMD national portal</a></li>
        <li><a href="https://ndma.gov.in/Natural-Disasters/Heat-Wave" title="NDMA heat wave guidelines" rel="noopener" target="_blank">NDMA heat wave guidance</a></li>
      </ul>
    </div>
  </div>
  <div class="f-bot">
    <span>&copy; <span data-year>2026</span> K J Somaiya School of Engineering, Somaiya Vidyavihar University.</span>
    <span>Demonstration platform for academic use. Operational warnings are issued only by IMD.</span>
  </div>
</div></footer>

<script src="assets/js/data.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>