Ka-Ping Yee's blog post about election methods and how to visualize them has long been one of my favourites. As always, a well chosen diagram or picture is much easier to understand than a verbose description, and can make corner cases directly leap into our face. The human visual system is a powerful pattern detector, we should make use of it whenever we can!
Inspired by Yee's blog post, I made an interactive simulator to allow you to explore the four main voting systems directly in your browser: Plurality (aka first past the post), Approval, Borda and Instant-runoff (Hare). I did not implement Condorcet yet, as it requires more effort and at least in Yee's examples seems to give the same results.
Please see Ka-Ping Yee's original blog post for a description of how the simulation works; I've stayed faithful to his version as much as possible.
The selected voting system and candidate locations are persisted to the URL, so if you find especially interesting patterns you can share them with your friends or post them to the comments :)
Voting System Simulator
On mobile devices, the simulation seems to run much faster with Chrome than with Firefox, especially if you want to use the high quality render button I recommend Chrome.
Instant-runoff is much slower to compute than the other methods, so please be patient.
I implemented the simulator in Rust, compiled to WebAssembly so it can run in the browser. The Rust WebAssembly book was very helpful to get started; also see my previous post for an even simpler way to serve WebAssembly in your browser. Hopefully sometime soon, WebAssembly will have support for SIMD, and I can make the simulation faster.
The full source code is on GitHub: Mononofu/voting-map. I haven't had much time to clean it up yet, but at least it's reasonably short, ~400 lines :)