claude
/
congress-analyzer


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

<div id="polisci-root" data-base="./data/">
  <!-- Header -->
  <header class="ps-header">
    <h1>119th Congress — Member Voting Dashboard</h1>
    <nav class="ps-nav"><a href="app.html" aria-current="page">Member</a> · <a href="compare.html">Compare</a> · <a href="ranking.html">Rankings</a></nav>
    <p class="ps-subtitle">Roll-call voting record, alignment, and blocking activity for any member of the 119th Congress.</p>
    <div id="member-note" class="member-note is-hidden" role="status"></div>
  </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 dropdown.</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 id="member-summary" class="member-summary"></section>

      <section id="kpi-cards" class="kpi-cards">
        <div class="kpi-card"><div class="kpi-label"></div><div class="kpi-value"></div></div>
        <div class="kpi-card"><div class="kpi-label"></div><div class="kpi-value"></div></div>
        <div class="kpi-card"><div class="kpi-label"></div><div class="kpi-value"></div></div>
        <div class="kpi-card"><div class="kpi-label"></div><div class="kpi-value"></div></div>
        <div class="kpi-card"><div class="kpi-label"></div><div class="kpi-value"></div></div>
        <div class="kpi-card"><div class="kpi-label"></div><div class="kpi-value"></div></div>
        <div class="kpi-card"><div class="kpi-label"></div><div class="kpi-value"></div></div>
        <div class="kpi-card"><div class="kpi-label"></div><div class="kpi-value"></div></div>
      </section>

      <!-- Charts grid -->
      <section class="charts-grid">
        <figure class="chart-frame">
          <figcaption>Vote distribution</figcaption>
          <div class="chart-canvas-wrap"><canvas id="chart-vote-dist"></canvas></div>
        </figure>
        <figure class="chart-frame">
          <figcaption>Party alignment</figcaption>
          <div class="chart-canvas-wrap"><canvas id="chart-alignment"></canvas></div>
        </figure>
        <figure class="chart-frame">
          <figcaption>Blocked measures</figcaption>
          <div class="chart-canvas-wrap"><canvas id="chart-blocked"></canvas></div>
        </figure>
        <figure class="chart-frame chart-wide">
          <figcaption>Alignment over time</figcaption>
          <div class="chart-canvas-wrap"><canvas id="chart-alignment-time"></canvas></div>
        </figure>
        <figure class="chart-frame chart-wide">
          <figcaption>With / Against own party</figcaption>
          <div class="chart-canvas-wrap"><canvas id="chart-with-against"></canvas></div>
        </figure>
      </section>

      <!-- Vote table -->
      <section id="vote-table-section" class="vote-table-section">
        <h2>Roll-call votes</h2>
        <div class="table-scroll">
          <table id="vote-table">
            <thead>
              <tr>
                <th>Year</th>
                <th>Roll</th>
                <th>Date</th>
                <th>Bill</th>
                <th>Question</th>
                <th>Description</th>
                <th>Result</th>
                <th>Member Vote</th>
                <th>R Yea/Nay</th>
                <th>D Yea/Nay</th>
                <th>Alignment</th>
                <th>Blocked</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </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>