Hemicycle

The chamber, one dot per seat. For the Senate at 109 and the House at 360.

A chamber, part declared

Party A · 58
Party B · 31
Others · 6
Not declared · 14

Seat counts are from declarations reported by trusted outlets, not from a results feed.

HTML

<div class="p234-hemicycle">
  <svg class="p234-hemicycle__svg" viewBox="0 0 420 190" role="img" aria-label="Senate seats: 58 declared to one party, 31 to another, 6 to others, 14 still pending.">
    <g class="p234-hemicycle__seat">
      <g fill="var(--p234-color-chart-series-1)">
        <circle cx="40" cy="160" r="7"></circle><circle cx="62" cy="160" r="7"></circle><circle cx="84" cy="160" r="7"></circle>
        <circle cx="106" cy="160" r="7"></circle><circle cx="128" cy="160" r="7"></circle><circle cx="150" cy="160" r="7"></circle>
        <circle cx="48" cy="134" r="7"></circle><circle cx="70" cy="134" r="7"></circle><circle cx="92" cy="134" r="7"></circle>
        <circle cx="114" cy="134" r="7"></circle><circle cx="136" cy="134" r="7"></circle>
        <circle cx="62" cy="108" r="7"></circle><circle cx="84" cy="108" r="7"></circle><circle cx="106" cy="108" r="7"></circle>
      </g>
      <g fill="var(--p234-color-chart-series-2)">
        <circle cx="172" cy="160" r="7"></circle><circle cx="194" cy="160" r="7"></circle><circle cx="216" cy="160" r="7"></circle>
        <circle cx="158" cy="134" r="7"></circle><circle cx="180" cy="134" r="7"></circle><circle cx="202" cy="134" r="7"></circle>
        <circle cx="128" cy="108" r="7"></circle><circle cx="150" cy="108" r="7"></circle>
      </g>
      <g fill="var(--p234-color-chart-series-3)">
        <circle cx="238" cy="160" r="7"></circle><circle cx="224" cy="134" r="7"></circle><circle cx="172" cy="108" r="7"></circle>
      </g>
      <g class="p234-hemicycle__seat--vacant">
        <circle cx="260" cy="160" r="7"></circle><circle cx="282" cy="160" r="7"></circle><circle cx="304" cy="160" r="7"></circle>
        <circle cx="246" cy="134" r="7"></circle><circle cx="268" cy="134" r="7"></circle>
        <circle cx="194" cy="108" r="7"></circle><circle cx="216" cy="108" r="7"></circle>
      </g>
    </g>
  </svg>
  <ul class="p234-chart__legend">
    <li class="p234-chart__key"><span class="p234-chart__swatch" style="background:var(--p234-color-chart-series-1)"></span>Party A &middot; 58</li>
    <li class="p234-chart__key"><span class="p234-chart__swatch" style="background:var(--p234-color-chart-series-2)"></span>Party B &middot; 31</li>
    <li class="p234-chart__key"><span class="p234-chart__swatch" style="background:var(--p234-color-chart-series-3)"></span>Others &middot; 6</li>
    <li class="p234-chart__key"><span class="p234-chart__swatch" style="background:var(--p234-color-paper-sunk)"></span>Not declared &middot; 14</li>
  </ul>
  <p class="p234-chart__source">Seat counts are from declarations reported by trusted outlets, not from a results feed.</p>
</div>

Undeclared is not zero

A chamber part-way through a count has three states, not two: held, won, and not yet declared. Pending seats take the recessed grey and appear in the key with their count. Filling them in by projection would turn a reported fact into a forecast.

Party colour

Parties use the series palette in a fixed order by seat count, not their own brand colours. Two reasons: several Nigerian party colours sit close together and fail separation, and the build can only guarantee the palette it owns. The party name and its count always appear in the key, so identity never rests on the colour.

Rules

One dot per seat, at the real chamber size. 109 for the Senate, 360 for the House.
Put the counts in the key, and the majority line in the text beside it.
Say in the source line where the declarations came from.
Give the SVG a label stating the counts, since the shape itself is unreadable to a screen reader.

Do not project the undeclared seats.
Do not shrink the dots below about 6px on a phone. Below that it is a texture, not a count.
Do not make this the only way to read the result. Pair it with the results list.

Tokens this component reads

--p234-color-chart-series-1--p234-color-chart-series-2--p234-color-chart-series-3--p234-color-paper--p234-color-paper-sunk--p234-type-ui-sm-*--p234-type-caption-*--p234-measure-wide