Election Results Map Block for Vue

It takes swing points off the lead of a district that A won with B second. If the lead is smaller than the swing, B takes the district and its new lead is the swing minus the old lead; otherwise A keeps it with a smaller lead. Districts won by B or C, and districts A won with C second, do not move, because the rule is a swing between A and B only. The rule lives in outcomeOf, one function the map, the list, the card and the seat bar all read.

Party colours would carry meaning that only colour could read, and they clash with the page's theme. Here each party is a letter in the pill and a weight of the foreground, so the map reads in either theme and without colour. The parties and the county are invented; nothing here models a real vote.

Edit LINES: a lattice cell, a name, the seats, the winner, the runner-up, the turnout and the three shares in tenths of a percent. Keep the lead consistent with the shares, since it is derived from them. In your app feed the same shape from your results feed and replace swingable with the swing rule you want to model.

Yes. The slider takes the arrow keys and speaks its value in points, and each district is a button in the list with its pressed state. The districts on the map are skipped by the Tab key and hidden from assistive technology because the list and the seat sentence say the same things in text. A polite message gives the new seat count once the slider settles.

All of it. Nothing is counted, reported or published. In your app connect the slider to a projection service or to your own model and keep the seat bar, which only needs seats per party.

The map comes first, then the card and the list, then the slider and the seat bar. The sentence under the bar reserves three lines so moving the slider never changes the height of the page.