update chart

Author: kefortney

index.html

@@ -147,8 +147,17 @@ <h2>Five Data Layers</h2>
   <!-- STATEWIDE LINEAR SUMMARY -->
   <section class="statewide-summary-section" id="statewide-summary">
     <div class="rpc-explorer-inner">
-      <h2>Linear Feature Length by System Type — Vermont Statewide</h2>
-      <p>Total length of mapped linear infrastructure across all of Vermont. This data provides a overview of the state's wastewater and stormwater infrastructure but does not include all private infrastructure nor some towns may be missing data.</p>
+      <h2>Wastewater &amp; Combined Sewer Coverage by Town — Vermont Statewide</h2>
+      <p>Number of Vermont's 256 towns with at least some mapped wastewater or combined sewer linear features in this dataset.</p>
+      <div id="town-coverage-chart-wrap">
+        <div class="rpc-loading-row" id="town-coverage-loading">
+          <span class="spinner"></span> Loading statewide data…
+        </div>
+        <div id="town-coverage-chart"></div>
+      </div>
+
+      <h3 class="statewide-subheading">Linear Feature Length by System Type — Vermont Statewide</h3>
+      <p>Total length of mapped linear infrastructure across all of Vermont. This data provides an overview of the state's wastewater and stormwater infrastructure but does not include all private infrastructure and some towns may be missing data.</p>
       <div id="statewide-chart-wrap">
         <div class="rpc-loading-row" id="statewide-loading">
           <span class="spinner"></span> Loading statewide data…
@@ -583,6 +592,65 @@ <h4>GitHub Repository</h4>
 
       document.getElementById('linear-loading').style.display = 'none';
 
+      // ── Town coverage chart ───────────────────────────────────────────
+      const townsWithData = new Set();
+      datasets.forEach(data => {
+        data.features.forEach(feat => {
+          const st = feat.properties.SystemType;
+          if (st === 'Wastewater' || st === 'Combined') {
+            const geoid = feat.properties.GEOIDTXT;
+            if (geoid) townsWithData.add(geoid);
+          }
+        });
+      });
+      const totalTowns = rawData.towns ? rawData.towns.features.length : 256;
+      const townsHas   = townsWithData.size;
+      const townsNone  = totalTowns - townsHas;
+      const slices = [
+        { label: 'Has mapped wastewater or combined sewer', count: townsHas,  color: '#1a7a9a' },
+        { label: 'No mapped wastewater or combined sewer',  count: townsNone, color: '#bdc3c7' }
+      ];
+      // Build SVG donut chart
+      const cx = 110, cy = 110, r = 90, hole = 52;
+      function arc(cx, cy, r, startDeg, endDeg) {
+        const s = (startDeg - 90) * Math.PI / 180;
+        const e = (endDeg   - 90) * Math.PI / 180;
+        const large = endDeg - startDeg > 180 ? 1 : 0;
+        const si = (startDeg - 90) * Math.PI / 180;
+        const ei = (endDeg   - 90) * Math.PI / 180;
+        return [
+          `M ${cx + r * Math.cos(s)} ${cy + r * Math.sin(s)}`,
+          `A ${r} ${r} 0 ${large} 1 ${cx + r * Math.cos(e)} ${cy + r * Math.sin(e)}`,
+          `L ${cx + hole * Math.cos(ei)} ${cy + hole * Math.sin(ei)}`,
+          `A ${hole} ${hole} 0 ${large} 0 ${cx + hole * Math.cos(si)} ${cy + hole * Math.sin(si)}`,
+          'Z'
+        ].join(' ');
+      }
+      let deg = 0;
+      const paths = slices.map(({ count, color }) => {
+        const sweep = count / totalTowns * 360;
+        const path = `<path d="${arc(cx, cy, r, deg, deg + sweep)}" fill="${color}" stroke="#fff" stroke-width="2"/>`;
+        deg += sweep;
+        return path;
+      }).join('');
+      const legendItems = slices.map(({ label, count, color }) =>
+        `<div class="pie-legend-item">
+          <span class="pie-legend-swatch" style="background:${color};"></span>
+          <span>${label} — <strong>${count}</strong> towns (${(count/totalTowns*100).toFixed(1)}%)</span>
+        </div>`
+      ).join('');
+      document.getElementById('town-coverage-chart').innerHTML = `
+        <div class="pie-chart-wrap">
+          <svg viewBox="0 0 220 220" width="220" height="220">
+            ${paths}
+            <text x="${cx}" y="${cy - 10}" text-anchor="middle" font-size="22" font-weight="700" fill="#1a3a4a">${(townsHas/totalTowns*100).toFixed(0)}%</text>
+            <text x="${cx}" y="${cy + 10}" text-anchor="middle" font-size="11" fill="#666">of towns</text>
+            <text x="${cx}" y="${cy + 26}" text-anchor="middle" font-size="11" fill="#666">have data</text>
+          </svg>
+          <div class="pie-legend">${legendItems}</div>
+        </div>`;
+      document.getElementById('town-coverage-loading').style.display = 'none';
+
       // ── Statewide length chart ────────────────────────────────────────
       const statewideLen = { Wastewater: 0, Stormwater: 0, Water: 0, Combined: 0 };
       datasets.forEach(data => {
@@ -618,6 +686,7 @@ <h4>GitHub Repository</h4>
       `;
     }).catch(() => {
       document.getElementById('linear-loading').style.display = 'none';
+      document.getElementById('town-coverage-loading').style.display = 'none';
       document.getElementById('statewide-loading').style.display = 'none';
     });
 

styles.css

@@ -561,6 +561,35 @@ pre code {
   margin: 2.5rem 0 0.75rem;
 }
 
+.pie-chart-wrap {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  margin-top: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.pie-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.pie-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-size: 0.9rem;
+  color: var(--text);
+}
+
+.pie-legend-swatch {
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+
 .wwtf-summary-text {
   margin-top: 1.5rem;
   color: var(--text);