claude
/
congress-analyzer


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Compare Members — 119th Congress</title>
<link rel="stylesheet" href="app.css">
<script src="vendor/chart.umd.min.js" defer></script>
<script src="compare.js" defer></script>
</head>
<body>
<noscript>This dashboard requires JavaScript.</noscript>

<div id="polisci-root" data-base="./data/">
  <!-- Header -->
  <header class="ps-header">
    <h1>Compare Members — 119th Congress</h1>
    <nav class="ps-nav"><a href="app.html">Member</a> · <a href="compare.html" aria-current="page">Compare</a> · <a href="ranking.html">Rankings</a></nav>
    <p class="ps-subtitle">Overlay roll-call voting metrics for up to six members of the 119th Congress.</p>
  </header>

  <div class="ps-layout">
    <!-- Sidebar -->
    <aside class="sidebar" id="sidebar">
      <button type="button" class="sidebar-toggle" id="sidebar-toggle" aria-expanded="true" aria-controls="sidebar-body">Filters</button>
      <div class="sidebar-body" id="sidebar-body">
        <fieldset class="filter-group" id="filter-chamber">
          <legend>Chamber</legend>
          <label><input type="checkbox" name="chamber" value="H" checked> House</label>
          <label><input type="checkbox" name="chamber" value="S" checked> Senate</label>
        </fieldset>

        <fieldset class="filter-group" id="filter-party">
          <legend>Party</legend>
          <label><input type="checkbox" name="party" value="R" checked> Republican</label>
          <label><input type="checkbox" name="party" value="D" checked> Democrat</label>
          <label><input type="checkbox" name="party" value="I" checked> Independent</label>
        </fieldset>

        <fieldset class="filter-group" id="filter-state">
          <legend>State</legend>
          <select multiple id="filter-state-select" size="8" aria-label="State filter"></select>
        </fieldset>

        <button type="button" id="filter-reset" class="btn-reset">Reset filters</button>
        <p class="hint">Filters apply to the member search.</p>
      </div>
    </aside>

    <!-- Main -->
    <main class="ps-main">
      <div class="search-wrap">
        <label for="member-search" class="visually-hidden">Search members</label>
        <input type="search" id="member-search" placeholder="Search by name or initials (e.g., AOC)…" autocomplete="off" role="combobox" aria-controls="member-results" aria-expanded="false">
        <ul id="member-results" role="listbox" class="member-results is-hidden"></ul>
      </div>

      <section class="compare-pills-section">
        <h2 class="compare-pills-title">Selected members</h2>
        <ul id="selected-pills" class="selected-pills" aria-label="Selected members"></ul>
        <p id="compare-empty-hint" class="hint">Pick up to 6 members to compare. Click a pill to open the member's full dashboard in a new tab.</p>
      </section>

      <div class="align-switcher-wrap">
        <label for="align-class-switcher">Alignment class:</label>
        <select id="align-class-switcher">
          <option value="Helped Republicans" selected>Helped Republicans</option>
          <option value="Helped Democrats">Helped Democrats</option>
          <option value="Helped Both">Helped Both</option>
          <option value="Helped Neither">Helped Neither</option>
        </select>
      </div>

      <!-- Charts grid -->
      <section class="charts-grid">
        <figure class="chart-frame chart-wide">
          <figcaption>Alignment over time (selected class)</figcaption>
          <div class="chart-canvas-wrap"><canvas id="cmp-chart-alignment-time"></canvas></div>
        </figure>
        <figure class="chart-frame chart-wide">
          <figcaption>Voted against own party — monthly (proxy: "Helped Neither" rate; see NOTES.md item 6)</figcaption>
          <div class="chart-canvas-wrap"><canvas id="cmp-chart-against-own"></canvas></div>
        </figure>
        <figure class="chart-frame chart-wide">
          <figcaption>KPI comparison</figcaption>
          <div class="chart-canvas-wrap"><canvas id="cmp-chart-kpi"></canvas></div>
        </figure>
        <figure class="chart-frame">
          <figcaption>Defection scatter (% against GOP vs % against Dem; color = party)</figcaption>
          <div class="chart-canvas-wrap"><canvas id="cmp-chart-defection"></canvas></div>
        </figure>
        <figure class="chart-frame">
          <figcaption>Vote distribution</figcaption>
          <div class="chart-canvas-wrap"><canvas id="cmp-chart-vote-dist"></canvas></div>
        </figure>
      </section>

      <footer class="ps-footer">
        <p>Source data:
          <a href="https://clerk.house.gov/Votes" target="_blank" rel="noopener noreferrer">House Clerk roll-call XML</a> ·
          <a href="https://www.senate.gov/legislative/votes_new.htm" target="_blank" rel="noopener noreferrer">Senate roll-call XML</a> ·
          <a href="Methodology.md" target="_blank" rel="noopener">Methodology</a>
        </p>
        <p>Last regenerated: <span id="last-generated">(populated)</span></p>
      </footer>
    </main>
  </div>
</div>
</body>
</html>