armenia-election-atlas/index.html at main · thepriben/armenia-election-atlas · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="hy">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Armenia Election Atlas</title>
  <meta name="description" content="A fun, sharable geographic atlas of Armenia's parliamentary elections — winner, margins, party maps and electoral forensics from official CEC data. Covering the 2021 and 2026 elections." />
  <meta property="og:title" content="Armenia Election Atlas" />
  <meta property="og:description" content="The geography of Armenia's parliamentary elections — explore maps, parties and polling stations. Covering the 2021 and 2026 elections." />
  <meta property="og:type" content="website" />
  <meta name="twitter:card" content="summary_large_image" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=Inter:wght@400;500;600;700;800&family=Noto+Sans+Armenian:wght@400;600;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body data-theme="dark">
  <header class="topbar">
    <div class="topbar-main">
      <a class="brand" href="#top" aria-label="Armenia Election Atlas">
        <span class="brand-sub" data-i18n="hero_kicker">A portal to Armenia's parliamentary elections</span>
        <span class="brand-title" id="brandTitle">Armenia Election Atlas</span>
      </a>
      <div class="topctrl">
        <div class="election-switch" id="electionSwitch" role="group" aria-label="Election"></div>
        <div class="langswitch" id="langswitch" role="group" aria-label="Language"></div>
        <button class="iconbtn" id="themebtn" title="Theme" aria-label="Toggle theme">◐</button>
      </div>
    </div>
    <nav class="mainnav" id="mainnav">
      <a href="#overview" data-i18n="nav_overview">Overview</a>
      <a href="#map" data-i18n="nav_map">Map</a>
      <a href="#explore" data-i18n="nav_explore">Zoom</a>
      <a href="#parties" data-i18n="nav_parties">Parties</a>
      <a href="#data" data-i18n="nav_data">Data</a>
      <a href="#about" data-i18n="nav_about">About</a>
    </nav>
  </header>

  <main id="top">
    <!-- HERO -->
    <section class="hero" id="hero">
      <div class="hero-bg" id="heroMap" aria-hidden="true"></div>
      <div class="hero-inner">
        <h1 class="hero-title" id="heroTitle">Armenia Election Atlas</h1>
        <p class="hero-lede" id="heroLede"></p>
        <p class="hero-note" id="heroNote" hidden></p>
        <div class="statgrid" id="statgrid"></div>
      </div>
    </section>

    <!-- OVERVIEW -->
    <section class="section wide" id="overview">
      <div class="section-head">
        <h2 data-i18n="overview_title">National result</h2>
        <p class="muted" data-i18n="overview_sub"></p>
      </div>
      <div class="grid-2">
        <div class="card">
          <div id="voteBars" class="chart"></div>
        </div>
        <div class="card">
          <h3 data-i18n="seats_title">The 105-seat National Assembly</h3>
          <p class="muted small" data-i18n="seats_sub"></p>
          <div id="hemicycle" class="chart"></div>
        </div>
      </div>
      <div class="card">
        <div class="table-wrap"><table class="datatable" id="nationalTable"></table></div>
      </div>
    </section>

    <!-- MAP -->
    <section class="section" id="map">
      <div class="section-head">
        <h2 data-i18n="map_title">The geography of the vote</h2>
        <p class="muted" data-i18n="map_sub"></p>
        <a class="osm-link" id="verifyLink" href="verify.html" data-i18n="map_osm_link">Verify on an OpenStreetMap basemap →</a>
      </div>
      <div class="map-controls">
        <div class="segmented" id="mapModes" role="tablist"></div>
        <select id="partySelect" class="select" hidden></select>
      </div>
      <p class="callout" id="mapNote" hidden></p>
      <div class="map-layout">
        <div class="map-stage">
          <div id="choropleth" class="choropleth"></div>
          <div id="mapLegend" class="legend"></div>
        </div>
        <aside class="map-panel card" id="marzPanel">
          <p class="muted" data-i18n="panel_pick">Select a province on the map</p>
        </aside>
      </div>
    </section>

    <!-- EXPLORE / ZOOM -->
    <section class="section" id="explore">
      <div class="section-head">
        <h2 data-i18n="explore_title">Zoom in to the communities</h2>
        <p class="muted" data-i18n="explore_sub"></p>
      </div>
      <div class="map-stage">
        <div id="communityDrill" class="map-drill" hidden>
          <button type="button" id="communityDrillBack" data-i18n="explore_back">← All communities</button>
          <span id="communityDrillLabel"></span>
        </div>
        <div class="zoom-ctrl">
          <button id="zoomIn" class="iconbtn">+</button>
          <button id="zoomOut" class="iconbtn">−</button>
          <button id="zoomReset" class="iconbtn" title="Reset">⟲</button>
        </div>
        <div id="communityMap" class="choropleth"></div>
        <p class="muted small" id="communityHint"></p>
      </div>
    </section>

    <!-- PARTIES -->
    <section class="section" id="parties">
      <div class="section-head">
        <h2 data-i18n="parties_title">The forces, explained</h2>
        <p class="muted" data-i18n="parties_sub"></p>
      </div>
      <div class="party-chips" id="partyChips"></div>
      <div class="party-detail card" id="partyDetail"></div>
    </section>

    <!-- DATA -->
    <section class="section" id="data">
      <div class="section-head">
        <h2 data-i18n="data_title">Explore &amp; download the data</h2>
        <p class="muted" data-i18n="data_sub"></p>
      </div>
      <div class="data-toolbar">
        <div class="segmented" id="dataLevels"></div>
        <input type="search" id="dataSearch" class="select" placeholder="Filter…" />
        <div class="dl-links" id="downloadLinks"></div>
      </div>
      <div class="card"><div class="table-wrap"><table class="datatable" id="explorerTable"></table></div></div>
    </section>

    <!-- OVERSEAS -->
    <section class="section narrow" id="overseas">
      <div class="card overseas">
        <div class="globe">🌐</div>
        <div>
          <h3 data-i18n="overseas_title">Voting from abroad</h3>
          <p class="muted" id="overseasBody"></p>
        </div>
      </div>
    </section>

    <!-- ABOUT -->
    <section class="section narrow" id="about">
      <div class="section-head">
        <h2 data-i18n="about_title">Methodology &amp; sources</h2>
      </div>
      <div class="about-grid" id="aboutGrid"></div>
    </section>
  </main>

  <footer class="footer">
    <p id="footerLicense" class="muted small"></p>
    <p class="muted small badges"><a class="repo-badge" id="repoBadge" href="https://github.com/thepriben/armenia-election-atlas" target="_blank" rel="noopener" aria-label="GitHub repository">
        <span class="rb-mark"><svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true" focusable="false"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></span><span class="rb-stars" id="repoStars"><svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" focusable="false"><path fill="currentColor" d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"/></svg><span class="rb-count">—</span></span>
      </a><a class="repo-badge bmc-badge" href="https://buymeacoffee.com/thepriben" target="_blank" rel="noopener" aria-label="Buy me a coffee">
        <span class="rb-mark"><svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true" focusable="false"><path fill="currentColor" d="M4 3h13a1 1 0 0 1 1 1v2h1.5a3.5 3.5 0 0 1 0 7H18v1a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V3Zm14 8h1.5a1.5 1.5 0 0 0 0-3H18v3ZM3 20h16a1 1 0 1 1 0 2H3a1 1 0 1 1 0-2Z"/></svg></span><span class="rb-stars"><span data-i18n="support_coffee">Buy me a coffee</span></span>
      </a></p>
  </footer>

  <div class="toast" id="toast" hidden></div>

  <script type="module" src="js/app.js"></script>
</body>
</html>