shadcn.io is not affiliated with official shadcn/ui
Election Results Map Block for Radix UI
Eight districts of an invented county, each won by party A, B or C shown as a letter and a fill weight, with a swing slider from 0 to 8 points that flips the districts with a smaller lead and redraws a 20-seat bar with a majority marker.
Installation
Overview
See what a swing would change, with this election results map for React with Radix UI. Pollwright, a results desk, draws eight districts of the invented county of Orlow, each won by one of three parties. The winner is a letter and a fill weight, A darkest, B middle and C lightest, never a party colour. A Slider applies a uniform swing from A to B, 0 to 8 points: it takes that many points off A's lead in every district A won with B in second place, so every district with a smaller lead changes hands, drawn as a dashed pill. The 20-seat bar redraws with a marker at the middle for the 11 that make a majority, and a sentence says what moved, for example "B takes 3 seats from A at a swing of 3.5 points". A card at the side shows the chosen district's shares as bars, its turnout and its lead after the swing, and a list of the districts is the way in for the keyboard. It's built from Slider, Progress and Guides, with a CSS entrance only. For election-night desks, newsrooms and civic data tools.
FAQ
What exactly does the swing do?
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.
Why are the parties not colours?
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.
How do I use my own results?
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.
Can I use it without a mouse?
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.