-
Notifications
You must be signed in to change notification settings - Fork 40
/
index.html
910 lines (728 loc) · 44.7 KB
/
index.html
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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
<!doctype html>
<html lang="en">
<head>
<!-- Meta -->
<title>To Build a Better Ballot</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta charset="utf-8">
<link rel="icon" type="image/png" href="favicon.png">
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="To Build a Better Ballot">
<meta itemprop="description" content="an interactive guide to alternative voting systems">
<meta itemprop="image" content="http://ncase.me/ballot/social/thumbnail.png">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ncasenmare">
<meta name="twitter:title" content="To Build a Better Ballot">
<meta name="twitter:description" content="an interactive guide to alternative voting systems">
<meta name="twitter:creator" content="@ncasenmare">
<meta name="twitter:image" content="http://ncase.me/ballot/social/thumbnail.png">
<!-- Open Graph data -->
<meta property="og:title" content="To Build a Better Ballot">
<meta property="og:type" content="website">
<meta property="og:url" content="http://ncase.me/ballot/">
<meta property="og:image" content="http://ncase.me/ballot/social/thumbnail.png">
<meta property="og:description" content="an interactive guide to alternative voting systems">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/index.css">
<base target="_blank">
</head>
<body>
<!-- - - - - - - - -
SPLASH!
- - - - - - - - - -->
<div id="splash" class="banner">
<iframe id="splash_iframe" src="splash/splash.html" width="1500" height="400" scrolling="no"></iframe>
<img src="img/logo.png"/>
</div>
</div>
<div id="content">
<!-- - - - - - - - -
INTRODUCTION:
THE SPOILER EFFECT
- - - - - - - - - -->
<div style="position: absolute;width: 120px;font-size: 17px;left: calc(50% + 380px);">
<b>Translations:</b>
<br>
<a href="https://pour-un-meilleur-scrutin.fr/">Français</a>
<br>
<a href="https://antoniokov.com/voting/">русский</a>
<br>
<a href="https://pourdamghani.github.io/ballot/">فارسی</a>
<br><br>
<a href="https://github.com/ncase/ballot">Full source code here!</a>
</div>
<div class="words">
<p>No, this is not about the 2016 U.S. election. Not <em>just</em> that, anyway.</p>
<p>First, I need to explain a weird glitch in our voting system.
Let's say there's two candidates, Steven Square <img src="play/img/square.png"/> and Tracy Triangle <img src="play/img/triangle.png"/>, on a couple political axes. (for example, “left vs. right” and “globalist vs. nationalist”) Let's also say there's a voter <img src="play/img/voter.png"/> who simply votes for whoever's political position is closest. What would that look like?</p>
</div>
<div class="sim-intro">
<p class="caption" style="margin-top:30px">
<b><span style="font-size:2.5em;">click & drag</span><br>the candidates and the voter:</b>
</p>
<iframe src="play/model1.html" width="305" height="360" scrolling="no"></iframe>
</div>
<div class="words">
<p>It's a tough choice. Triangle's got some sharp points, but Square understands more sides! Alas, in the end, you can only vote for one.</p>
<p>Of course, there's more than just one voter in an election. Let's simulate what an election would look like with 100+ voters.</p>
</div>
<div class="sim-intro">
<p class="caption">
<b>drag the candidates & voter<span class="underline">s</span> around.<br>(to move voters, drag the <em>middle</em> of the crowd)<br>watch how that changes the election:</b>
</p>
<iframe src="play/model2.html" width="320" height="400" scrolling="no"></iframe>
</div>
<div class="words">
<p>Now let's consider a different election. Say Tracy Triangle is <em>already</em> beating Steven Square in the polls, and a third candidate, Henry Hexagon <img src="play/img/hexagon.png"/>, sees this. (Hexagon's supporters like how he tackles problems from more angles) Inspired by her success, Hexagon swoops in and takes a political position close to Triangle's.</p>
<p>Now, you'd think giving the voters more of what they want should result in a <em>better</em> choice, or at least, not result in a <em>worse</em> choice, right? Well...</p>
</div>
<div class="sim-intro">
<p class="caption">
<b>
at first, <img src="play/img/triangle.png"> beats <img src="play/img/square.png">.<br>
drag <img src="play/img/hexagon.png"> to <i>just under</i> <img src="play/img/triangle.png">,<br>
and see what happens:</b>
</p>
<iframe src="play/model3.html" width="320" height="460" scrolling="no"></iframe>
</div>
<div class="words">
<p>That's right. Steven Square, our <em>least</em> popular candidate, now wins! This is because when you have two good candidates, they "steal" votes from each other, letting a bad third candidate win.</p>
<p>This is called <strong>the spoiler effect.</strong> The most famous real-world example of this was in 2000, when Ralph Nader "stole" votes from Al Gore, letting George Bush win. And though the spoiler effect didn't play a big role in 2016, its impact could still be felt.</p>
<p>In the Republican primary, one anti-establishment nominee, Trump, ran against <em>sixteen</em> GOP establishment nominees, who all "stole" votes from each other, letting Trump grab the nomination, <em>easily</em>. As for the Democratic primary, fear of splitting the vote prevented Sanders from running as independent. And to cap it all off, there was always the worry that other candidates like Johnson, Stein, and McMullin could spoil the election.</p>
<p>But again, this is <em>not</em> about the 2016 U.S. election.</p>
<p><strong>This is about designing a democracy that people can <em>trust</em>.</strong></p>
<p>Despite so much hoopla around the 2016 election, a full <em>half</em> of Americans did not vote. Even of those who voted for Clinton/Trump, <a href="http://www.nytimes.com/interactive/2016/11/08/us/politics/election-exit-polls.html">20% of them said their candidates were untrustworthy</a>, <em>and voted for them anyway.</em> <a href="https://www.theatlantic.com/international/archive/2016/07/trust-institutions-trump-brexit/489554/">And around the world, people's trust in their governments</a> – or the trust<em>worthiness</em> of their governments – has never been lower. It's more than America at stake. It's <em>every democracy in the world.</em></p>
<p>...so yeah, no pressure.</p>
<p>Rebuilding trust is a complex problem with no easy solutions. But I think there <em>is</em> an easy first step. It's a step that could get rid of our “lesser of two evils” problem, and give us citizens more choices, <em>better</em> choices. And yet, it won't be as daunting as fixing campaign finance or gerrymandering or lack of proportional representation, no, it'd just require changing <em>a piece of paper</em>, and how we count those pieces of paper.</p>
<p>This idea is <em>not</em> the most important issue. It <em>won't</em> solve everything. But as a first step? It'd give us the biggest bang-for-buck.</p>
<p><strong>Let's talk about how to build a better ballot.</strong></p>
</div>
<!-- - - - - - - - -
PART I:
THE ALTERNATIVE BALLOTS
- - - - - - - - - -->
<div class="banner">
<img src="img/part1.png"/>
</div>
<div class="words">
<p>Now, some of you may have a couple objections!</p>
<p>
First objection. Why would the people in power change the voting system that <em>got</em> them in power? Well, the spoiler effect has cost <em>both</em> Dems & Reps a major election before. Getting rid of that glitch would be a win-win for major <em>and</em> minor parties! Also, voting reform is already picking up steam. Just last month, <a href="http://www.nytimes.com/2016/12/03/us/maine-ranked-choice-voting.html">Maine adopted Instant Runoff</a>, and
<s>Justin Trudeau, <a href="http://cdn.pinknews.co.uk/images/2016/02/justin_trudeau.jpg">Canada's Cutie-In-Chief</a>, will be moving his nation towards a better voting system in 2017.</s>
<b>(UPDATE: ha ha <a href="https://www.theguardian.com/world/2017/feb/01/justin-trudeau-abandons-voter-reform-canada">nope</a>)</b>
</p>
<p>Second objection. Didn't some guy once prove that <em>all</em> voting systems will be unfair? Not quite. You're thinking of the infamous <a href="https://en.wikipedia.org/wiki/Arrow%27s_impossibility_theorem">Impossibility Theorem</a> by Kenneth Arrow, the mathematician in the 1950's who founded the whole study of voting systems.</p>
<p>Two answers to that: 1) some voting systems can still be <em>more</em> fair than others, even if none are perfect. And 2) Kenneth Arrow's proof <em>doesn't</em> apply to all voting systems! That's a misconception. It only applies to voting systems <em>where you rank candidates</em>. Later, we'll see some voting systems where you <em>don't</em> rank candidates – along with other alternatives to our current, glitchy voting system.</p>
<p>But first, let's take a closer look at the voting system we <em>do</em> have:</p>
</div>
<div class="sim-ballot">
<h2 class="ballot_title" style="margin-bottom: 0.2em;">FIRST PAST THE POST (FPTP)</h2>
<p class="ballot_caption">same as before. click & drag<br>the candidates and voter</p>
<iframe src="play/ballot1.html" width="655" height="256" scrolling="no"></iframe>
</div>
<div class="words">
<p><strong>How To Count:</strong> Simply add up the votes. Whoever gets the most votes, wins.</p>
<p>Sounds logical enough. But as you saw earlier, it can lead to a weird glitch, where having two <em>good</em> candidates can make the election go to a third <em>bad</em> candidate. This is why some people vote "strategically", voting not for their actual honest favorite, but voting for the lesser of two evils. And strategic voting is fine – but! – ask yourself this: <b>how can we expect our elected officials to be honest, when our voting system <em>itself</em> doesn't let us be honest?</b></p>
<p>So, to fix the spoiler effect, other voting systems have been suggested. Such as...</p>
</div>
<div class="sim-ballot">
<h2 class="ballot_title" style="margin-bottom: 0.15em;">RANKED VOTING</h2>
<p class="ballot_caption">again, click & drag</p>
<iframe src="play/ballot2.html" width="655" height="256" scrolling="no"></iframe>
</div>
<div class="words">
<p><strong>How To Count:</strong> There's actually <em>several</em> different ways to count these kinds of ballots. Here, I'll just show you the top three:</p>
<p>
<strong>Instant Runoff Voting (IRV):</strong>
This one is <em>the</em> most popular alternative to First Past The Post (FPTP).
Australia and Ireland use it in national elections.
San Francisco, Minneapolis, and Portland, Maine use it in local elections.
And <s>Justin Trudeau, <a href="https://queerty-prodweb.s3.amazonaws.com/wp/docs/2016/02/justintrudeautorontopride.jpg">Prime Man-ister of Canada</a>,
is leaning towards Instant Runoff, too.</s> <b>(UPDATE: nevermind)</b>
</p>
<p>
(Note: Instant Runoff Voting is also called “Ranked Choice Voting”,
even though there's other ways to count ranked ballots.
IRV is also often just called “Alternative Vote”,
even though there's a flippin' dozen other voting methods.
Such selfish naming! Sheesh!)
</p>
<p>IRV is a bit more complicated than FPTP, but here's how it works:</p>
<ol>
<li>Count up the #1 choices.</li>
<li>If someone has more than 50%, they win! END.</li>
<li>If not, eliminate the last-place loser.</li>
<li>Run a new "round" of the election, minus that loser.</li>
<li>Repeat until someone has 50% or more.</li>
</ol>
<p>If that seems like too much, there <em>is</em> a much simpler method of counting ranked ballots...</p>
<p><strong>Borda Count:</strong> Simply add up the rank numbers. Like in golf, whoever has the <em>lowest</em> score, wins. Borda count is used in Slovenia and a bunch of tiny islands in Micronesia.</p>
<p>But if you want an even nerdier way of voting, you could try...</p>
<p><strong>Condorcet Method:</strong> Run a simulated "election" between every pair of candidates, using the info on voters' ballots. IF there's a candidate who beats all other candidates in one-on-one "elections", that candidate wins the <em>real</em> election. However, that's a very big "IF". (as we'll see later...) The upside is, when this method <em>does</em> pick a winner, it's always the “theoretically best” candidate! Currently, this method is not being used by any governments, and is only being used by neeerrrrrds.</p>
<p>So, those are the voting systems <em>where you rank candidates</em> – the ones that Kenneth Arrow proved would <em>always</em> be unfair in some big way! But what of voting systems where you <em>don't</em> rank candidates? They're less well-known, but now, at least <em>you'll</em> know 'em:</p>
</div>
<div class="sim-ballot">
<h2 class="ballot_title" style="margin-bottom: 0.15em;">APPROVAL VOTING</h2>
<p class="ballot_caption">yup, stiiiiill click & drag</p>
<iframe src="play/ballot3.html" width="655" height="256" scrolling="no"></iframe>
</div>
<div class="words">
<p><strong>How To Count:</strong> Simply add up the approvals. Whoever gets the most approvals, wins.</p>
<p><em>Wait, picking more than one candidate? Doesn't that violate the one-vote-per-person rule?</em> I hear you ask. Well, your vote was never a single check mark, your vote was always <em>the whole ballot</em>. And on this ballot, you get to honestly express <em>all</em> the candidates you approve of, not just your favorite or strategic second-favorite.</p>
<p>But if you want a <em>more</em> expressive voting system, why not try...</p>
</div>
<div class="sim-ballot">
<h2 class="ballot_title" style="margin-bottom: 0.15em;">SCORE VOTING</h2>
<p class="ballot_caption">you guessed it</p>
<iframe src="play/ballot4.html" width="655" height="256" scrolling="no"></iframe>
</div>
<div class="words">
<p><strong>How To Count:</strong> Simply add up the ratings. Whoever has the highest average score, wins. Kind of like Amazon reviews, but with democracy. (Note: this is <em>not</em> a ranking system, because two candidates can have the <em>same</em> score.)</p>
<p>So there's our top 6 voting systems: the one we use, and five popular alternatives. But how can we tell if these alternatives are actually better? What glitches might <em>they</em> have? And which voting system – if any – can we say is "the best"?</p>
<p>Like before, let's simulate 'em.</p>
</div>
<!-- - - - - - - - -
PART II:
HOW DO THE ALTERNATIVES HOLD UP?
- - - - - - - - - -->
<div class="banner">
<img src="img/part2.png"/>
</div>
<div class="words">
<p>Remember that simulation of the spoiler effect from earlier? Well, here it is again, but now you can switch between the six different voting systems! Here's the "spoiler effect" simulation again. See how different voting systems deal with potential spoilers:</p>
</div>
<div class="sim-test">
<p class="caption-test">
drag <img src="play/img/hexagon.png"> to <em>just under</em> <img src="play/img/triangle.png"> to create a spoiler effect.<br>
then compare the 6 different voting systems:
<br>
<span style="font-weight:bold; font-size:0.8em">
(note: in the rare cases there's a tie, i just randomly pick a winner)
</span>
</p>
<iframe src="play/election1.html" width="800" height="380" scrolling="no"></iframe>
</div>
<div class="words">
<p>As you could see, <em>every</em> voting system except First Past The Post is immune to the spoiler effect. So, that's it, right? Ding dong, the glitch is dead? Just pick any other alternative voting system and be done with it?</p>
<p>But, alas. In getting rid of one glitch, some of these alternative voting systems create <em>other</em> glitches – for some, the cure is even worse than the disease.</p>
<p>For example, here's a sim of Instant Runoff Voting. In the beginning, Tracy Triangle <img src="play/img/triangle.png"/> is already winning, and you're going to move the voters even <em>closer</em> to her. Obviously, if a candidate is already winning an election, and becomes even <em>more</em> popular, they should <em>still</em> win afterwards, right?</p>
<p>You can probably guess where this is going...</p>
</div>
<div class="sim-test">
<p class="caption-test">
drag the voters <img src="play/img/voters.png"> <em>slowly</em> up towards <img src="play/img/triangle.png">:
</p>
<iframe src="play/election2.html" width="800" height="380" scrolling="no"></iframe>
</div>
<div class="words">
<p>What happened?
Originally, <img src="play/img/hexagon.png"/> is eliminated in the first round, so
<img src="play/img/triangle.png"/>
goes against a weaker <img src="play/img/square.png"/>, and wins.
But when you move the voters closer to <img src="play/img/triangle.png"/>,
the loser <em>changes!</em>
So now, <img src="play/img/square.png"/> is eliminated in the first round,
which means <img src="play/img/triangle.png"/> goes against a stronger <img src="play/img/hexagon.png"/>,
and <em>loses</em>.</p>
<p>Under Instant Runoff, it's possible for a winning candidate to lose, <em>by becoming more popular</em>. What a glitch!</p>
<p>How often does this actually happen in real life? <a href="https://en.wikipedia.org/wiki/Monotonicity_criterion#Real-life_monotonicity_violations">There's a couple confirmed examples</a>, and <a href="http://www.rangevoting.org/Monotone.html">mathematicians estimate this glitch would happen about 14.5% of the time</a>. But sadly, we can't know for sure, because governments usually <em>don't release enough info about the ballots</em> to reconstruct an IRV election & double-check the results.</p>
<p>So, not only is Instant Runoff's glitch as undemocratic as First Past The Post's glitch, it's possibly <em>worse</em> – because while FPTP's counting method is simple and transparent, Instant Runoff is anything but. And a lack of transparency is an even deadlier sin nowadays, when our trust in government is already so low.</p>
<p>(But wait! We'll be talking about the risk of <em>strategic voting</em> later.
Can IRV make a comeback? Stay tuned...)</p>
<p>So much for the most popular alternative. What about the second-most popular, Borda Count? In this next simulation, you move a losing candidate closer to <em>another</em> losing candidate. Under FPTP, the spoiler effect would split their votes, making both of them lose even more. But watch what happens under Borda Count instead...</p>
</div>
<div class="sim-test">
<p class="caption-test">
drag <img src="play/img/hexagon.png"> to <em>just slightly left</em> of <img src="play/img/square.png">:
</p>
<iframe src="play/election3.html" width="800" height="380" scrolling="no"></iframe>
</div>
<div class="words">
<p>Yup. Borda Count has a <em>reverse</em> spoiler effect. Instead of one good candidate hurting another good candidate by moving closer, with Borda Count, one bad candidate can <em>help</em> another bad candidate by moving closer.</p>
<p>Here's what happened: at first, some voters ranked
<img src="play/img/square.png"/>><img src="play/img/triangle.png"/>><img src="play/img/hexagon.png"/>,
but when you moved <img src="play/img/hexagon.png"/> closer to <img src="play/img/square.png"/>,
those voters then <em>swung</em> to ranking
<img src="play/img/square.png"/>><img src="play/img/hexagon.png"/>><img src="play/img/triangle.png"/>,
hurting <img src="play/img/triangle.png"/> enough
to make her lose to <img src="play/img/square.png"/>.</p>
<p>Still, Borda's not the worst, and at least it's simpler and more transparent than Instant Runoff. But how does Condorcet Method compare? When Condorcet picks a winner, it's always the “theoretically best” winner – but that's <em>when</em> it picks a winner.</p>
<p>So far, I've just been simulating voters as a <em>single</em> group, with a center and some spread. But seeing how polarized politics is nowadays, one could imagine <em>several</em> groups of voters, with totally different centers. Now, Condorcet tries to pick the candidate who beats all other candidates in one-on-one races. But with <em>polarized</em> voters, you could end up with a Rock-Paper-Scissors-like loop, where a majority of voters prefer A to B, B to C, <em>and</em> C to A.</p>
<p>In certain situations, the other voting systems just had glitches. In Condorcet, the voting system <em>crashes.</em> Try it out for yourself:</p>
</div>
<div class="sim-test">
<p class="caption-test">
create your own “condorcet cycle”!<br>
move the voters <img src="play/img/voters.png"> in such a way that NOBODY wins:
</p>
<iframe src="play/election4.html" width="800" height="380" scrolling="no"></iframe>
</div>
<div class="words">
<p>Now, in actual practice – not that any government actually uses this voting system – when Condorcet fails to find a winner, the election falls back to another method like Borda Count. But if you do that, it'll get the glitches of its backup method. So it goes.</p>
<p>First Past The Post. Instant Runoff. Borda Count. Condorcet Method. Those were all the voting systems that use <em>ranking</em> – the ones that our math boy, Kenneth Arrow, proved would <em>always</em> be unfair or glitchy in some big way. What about the voting systems that <em>don't</em> use ranking, like Approval & Score voting? Well...</p>
<p>...I couldn't come up with a simulation to show their flaws. Because, <em>in theory</em>, they don't have many big flaws.</p>
<p>
But that's a really, really, really big <em>“in theory!”</em>
It may be that, in <em>practice</em>, strategic voters use Approval & Score Voting exactly like First Past The Post –
only approving or giving 5 stars to their top candidate, and disapproving or giving 1 star to all others,
even if they actually <em>like</em> the others.
<a href="http://archive3.fairvote.org/research-and-analysis/blog/why-approval-voting-is-unworkable-in-contested-elections/">(See FairVote's critique of Approval Voting, and defense of Instant Runoff)</a>
</p>
<p>
Then again, even if Approval & Score Voting disincentivize you from expressing an honest <em>second</em> choice,
FPTP and IRV punish you for expressing an honest <em>first</em> choice.
Besides, if Approval can be "gamed", then that goes double for IRV.
<a href="http://www.rangevoting.org/LNH.html">(See this mathematician's critique of FairVote's critique, and defense of Approval)</a>
So, in the end... [confused shrugging sounds]</p>
<p>
We're gonna need a hecka lot more simulations.
</p>
<p>
So, below is a chart
<a href="https://electology.org/tactical-voting-basics">(source)</a>,
showing the results of 2.2 <em>million</em> simulations.
A <i>huge</i> variety of scenarios were tested. All-honest voters.
All-strategic voters. Half-honest, half-strategic.
Voters who know each others' preferences.
Voters who <i>don't</i> know each others' preferences.
Voters who only sorta-know each others' preferences.
And so on.
You can tell that a <em>real</em> mathematician made this chart,
because it's makin' my eyes bleed:
</p>
<p><img class="real" src="img/comparison.png"></p>
<p>
Each voting method's results is shown as an ugly-blue bar.
The further to the right a voting method is, the more it "maximizes happiness" for the voters.
The higher up a voting method is, the simpler it is.
And a bar's width shows the range of a voting system's performance,
given different ratios of honest-to-strategic voters.
</p>
<p>
The first thing to note is that strategic voting makes voters <em>less happy</em> than honest voting
– in <em>all</em> voting systems! I was very surprised when I first learnt that.
(But it makes sense, if you think about, say, a crowded room full of people trying to talk. Any one person can be "strategic" by shouting over others, but if <em>everybody</em> is "strategic", nobody can hear anybody, and all you're left with is sore throats and sad peeps.)</p>
<p>The other thing to note is which voting systems make people the happiest. If you have mostly honest voters, <em>Score Voting is best</em>. (with Borda Count a close second) And if you have mostly strategic voters, then <em>both Approval & Score Voting are best</em>. (and with strategic voters, IRV does <em>just as bad</em> as FPTP)</p>
<p>However, those are still computer simulations. How would these different voting systems play out <em>in real life?</em> Well, we can't just get the DeLorean up to 88, go back in time before the 2016 election, change the voting system, and see what would happen...</p>
<p><em>...or can we?!</em></p>
<p>No, no we can't. But last month, researchers did something close enough.
<a href="http://www.vox.com/policy-and-politics/2016/11/25/13733322/instant-runoff-ranked-voting-2016">A polling study asked 1,000+ U.S. registered voters to rank & rate the six presidential candidates</a>,
to simulate who would've won the (popular) vote under different voting systems!
(But keep in mind that if we had a different voting system in the primaries, we'd have different candidates <em>entirely</em>.
So take this study with a pillar of salt.)
The results: under Instant Runoff, Condorcet, and Approval Voting, the winner would've been Hillary Clinton. But under Score Voting, the winner would've been Donald Trump. And under Borda Count, the winner would've been... uh... <em>Gary Johnson?</em>
</p>
<p><em>?????</em></p>
</div>
<div class="sim-test">
<p class="caption-test">
a guesstimated model of the 2016 US election?...<br>
<span style="font-weight:100; font-size:0.85em">
how Clinton <img src="play/img/square.png"> wins IRV,
Trump <img src="play/img/hexagon.png"> wins Score,
and Johnson <img src="play/img/triangle.png"> wins Borda??
</span>
</p>
<iframe src="play/election5.html" width="800" height="380" scrolling="no"></iframe>
</div>
<div class="words">
<p>Anyway.</p>
<p>Before we wrap all this up – remember Kenneth Arrow? The infamous mathematician who founded the study of voting systems in the 1950's? Well, <a href="https://electology.org/podcasts/2012-10-06_kenneth_arrow">in an interview 60 years later</a>, Kenneth Arrow had this to say, about which voting method he likes most now:</p>
<p class="quote">
<em>“Well, I’m a little inclined to think that score systems</em> [like Approval & Score Voting] <em>where you categorize in maybe three or four classes</em> [so, giving a score out of 3 or 4, not 10 or 100] <em>probably – in spite of what I said about manipulation</em> [strategic voting] <em>– is probably the best.”</em></p>
<p>That's as strong an endorsement as you'll ever squeeze out of a math-head.</p>
</div>
<!-- - - - - - - - -
PART III:
CONCLUSION. OPEN LETTER
- - - - - - - - - -->
<div class="banner">
<img src="img/part3.png"/>
</div>
<div class="words">
<p><em>ahem</em></p>
<p style="text-align:center">
<strong style="font-size:1.4em">
<s>DEAR JUSTIN <a href="http://www.newyorker.com/wp-content/uploads/2016/03/Borowitz-Justin-Trudeau.jpg">“TOTES ADORBZ”</a> TRUDEAU</strong></s>
<br>
<b style="font-size:0.8em">(UPDATE: okay, dear everyone else around the world pushing for voting reform)</b>
</p>
<p>Thank you for taking this small but powerful first step! We've known for way too long that our current voting system – First Past The Post – forces voters to be dishonest, creates a polarizing "lesser of two evils" scenario, and screws over both major <em>and</em> minor candidates.</p>
<p>
However, you're probably only considering Instant Runoff Voting.
Which, to be fair, <em>is</em> better than than First Past The Post,
and if it's a choice between just those two, <em>definitely</em> go for Instant Runoff.
But IRV still has a glitch as undemocratic as FPTP's –
and worse, in our age of distrust, Instant Runoff's lack of transparency may be deadly for democracy.
Yes, sure, IRV was the best voting system we could come up with...
<a href="https://en.wikipedia.org/wiki/History_and_use_of_instant-runoff_voting">in 1870</a>.
And since then, IRV has dominated the conversation,
unwittingly framing the whole voting reform debate as “simple vs expressive”.
</p>
<p>
<b>But that is a false choice.</b> Thanks to computer simulations, real-life studies, and a bunch of math nerds,
<b>we now know of voting systems that are both simple <i>and</i> expressive.</b>
</p>
<p>
<i>Personally</i>, I'm leaning towards Score Voting.
It's simple, very expressive, and already familiar to anyone who's seen Amazon's or Yelp's “five star” review system.
But that's just my humble opinion.
You could also make the case that Approval Voting is more <i>practical</i>,
because it's even simpler, and would <i>already work with existing voting machines!</i>
All you'd need to do is change the instructions from
“vote for the candidate you like” to “vote for the candidate<b class="underline">s</b> you like”.
</p>
<p>
<em>Or maybe I'm completely wrong about Instant Runoff Voting, and it's actually pretty okay.</em>
Heck, you could even go for Borda Count, as a hilarious prank.
</p>
<p>I won't claim to know which voting system is The Best™. I shall keep open this discussion, just as long as we <em>have</em> this discussion. For three reasons:</p>
<p>1) If I claim one voting system is the best, end of story, all the social-choice-theory nerds will be on my butt, yelling, BUT NICKY WHAT ABOUT <a href="http://www.law.uchicago.edu/faculty/research/eric-posner-quadratic-vote-buying-efficient-corporate-governance/qanda">QUADRATIC VOTE BUYING</a></p>
<p>2) We still need to test these alternative voting systems with <em>actual experience</em>,
not just <span style="text-decoration:line-through">annoying internet flame wars between IRV advocates and Score Voting advocates</span> theory.
All the more reason for small towns, local states, and nations like Canada to be <em>pioneers</em>, to bravely experiment!</p>
<p>3) Keeping the discussion going is what democracy <em>is</em>.</p>
<p><a href="http://www.journalofdemocracy.org/article/danger-deconsolidation-democratic-disconnect">A recent study</a> found that in many Western countries – from Sweden to Australia to the United States – support for democracy has <em>plummeted</em> over the last several generations.
In 2011, almost <em>a full quarter</em> of young Americans said democracy was a "bad" or "very bad" way to run a country.
And <em>today</em>, one in six Americans say it'd be "good" or "very good" to be under <em>actual military rule</em>.
</p>
<p>Our age of distrust goes a <em>lot</em> deeper than the technical details of a voting system. There isn't gonna be One Weird Trick to fix democracy. But as a first step, a low-hanging fruit, a way to show that, <em>yes</em>, you will make the system respond to the needs and wants and pains and hopes and dreams of your people – well, fixing our voting system's a good start as any.</p>
<p>Because, this isn't just about trying to build a better ballot.</p>
<p>This is about trying to build a better <em>democracy</em>.</p>
<p><strong><3,</strong><br>
<b>~ Nicky Case</b></p>
<hr>
<p><strong>P.S:</strong> Since you've read & played this all the way, here, have a bonus!
A “Sandbox Mode” of the election simulator, with up to <em>five</em> candidates.
You can also save & share your very own custom election scenario with others. Happy simulating!</p>
</div>
<!-- - - - - - - - -
PART IV:
SANDBOX
- - - - - - - - - -->
<div id="sandbox">
<div class="sim-sandbox">
<h1 class="caption-test" style="margin: 30px 0 15px 0;">SANDBOX MODE! <a href="sandbox">(link to <em>just</em> this)</a></h1>
<iframe src="sandbox/sandbox.html" width="802" height="508" scrolling="no"></iframe>
</div>
<div class="words">
<p>
One hope for Sandbox Mode is that readers can debate with me and each other <em>using</em> this tool!
Not just telling me I'm wrong, but <em>showing</em> me I'm wrong.
For example –
<a href="sandbox?m=%7B%22s%22%3A%22FPTP%22%2C%22v%22%3A%5B%5B54%2C147%5D%2C%5B54%2C72%5D%2C%5B249%2C109%5D%5D%2C%22c%22%3A%5B%5B54%2C227%5D%2C%5B249%2C106%5D%5D%2C%22d%22%3A%22This%20is%20the%20biggest%20challenge%20to%20Approval%2FScore%2C%20IMHO.%20Below%3A%202%2F3%20of%20voters%20dislike%20both%20candidates%2C%20but%20dislike%20Square%20slightly%20less.%20However%2C%201%2F3%20of%20voters%20LOVE%20Triangle%20and%20HATE%20Square.%20Under%20FPTP%2C%20IRV%20%26%20Condorcet%2C%20Square%20wins%2C%20coz%20a%20majority%20of%20voters%20barely%20prefer%20him.%20But%20under%20Approval%20%26%20Score%2C%20Triangle%20wins%2C%20coz%20she's%20intensely%20loved%20by%20her%20minority.%20Now%2C%20is%20this%20OKAY%3F%20Is%20this%20a%20betrayal%20of%20democracy%2C%20or%20actually%20*saving*%20democracy%20from%20a%20tyranny%20of%20the%20majority%3F%20This%20question's%20not%20just%20theoretical%2C%20it's%20*philosophical*.%22%7D">
here's a model I made in Sandbox Mode,
showing an interesting argument <em>against</em> Approval & Score Voting</a>.
Granted, this tool is very limited – it doesn't handle strategic voting or imperfect information –
but I think it's a start, and may help improve our Democratic Discourse™
</p>
</div>
</div>
<!-- - - - - - - - -
PART V: THE END
- What Can I Do?
- Social Sharing
- Credits
- Stay In Touch
- - - - - - - - - -->
<div id="end">
<div id="credits">
<!-- Public Domain -->
<div id="uncopyright">
<img src="img/public_domain.png" width="180">
<div style="float:right; width:750px; font-size:20px; color:#999;">
<div style="font-size:91px; height:97px; color:#fff; position: relative; left: -5px; line-height: 1em;"><b>PUBLIC DOMAIN</b></div>
<a href="https://creativecommons.org/publicdomain/zero/1.0/" target="_blank">Zero rights reserved.</a>
I'm giving away
all my art/code/words,
so that you
teachers, mathematicians, hobbyists, activists, and policy wonks
can use them however you like!
This is for you.
<a href="https://github.com/ncase/ballot" target="_blank">Get my source code on GitHub!</a>
</div>
</div>
<div id="appendix_container">
<!-- Further Reading -->
<div id="further_reading">
<div class="appendix_title" style="font-size:50px; line-height:50px">“BUT WHAT CAN <em>I</em> DO?”</div>
<p>
<b>For citizens:</b> Remember, <i>think global, but act local</i>.
Change from the bottom-up lasts longer.
If you're in the US,
<a href="http://www.house.gov/representatives/find/">find your representative</a>
and badger 'em.
If you're in Canada,
<a href="http://www.lop.parl.gc.ca/ParlInfo/compilations/houseofcommons/memberbypostalcode.aspx">find your Member of Parliament</a>
and badger 'em.
Also if you're Canadian,
<a href="https://www.mydemocracy.ca/">fill out the MyDemocracy.ca survey before the end of 2016!</a>
This survey has a few questions specifically about voting reform!
(sadly, the question is <i>still</i> framed as "simple vs expressive".
<i>that</i> is why i've been so gung-ho about Approval & Score,
and maybe a bit too mean towards IRV)
</p>
<p>
<b>For learners:</b>
Watch CGP Grey's <a href="https://www.youtube.com/playlist?list=PL7679C7ACE93A5638"><i>Politics in the Animal Kingdom</i></a> series!
It's charming, and covers more ground than I did here – it explains
gerrymandering, proportional representation, and more.
Also, read <a href="https://www.amazon.com/Gaming-Vote-Elections-Arent-About/dp/0809048922"><i>Gaming The Vote</i></a> by
William Poundstone.
It's a thrilling read,
with dramatic human stories of crooks & conmen trying to game our glitchy voting systems –
and sometimes, succeeding.
</p>
<p>
<b>For teachers:</b>
This entire "explorable explanation" is public domain, copyright-free,
meaning you <i>already</i> have permission to use this freely in your classes!
You can even use the <a href="sandbox">Sandbox Mode</a> to create your own material,
or as a tool for students to make something on their own.
</p>
<p>
<b>For coders:</b>
This is all open source!
So you can <a href="https://github.com/ncase/ballot">get my code on GitHub</a>, and remix it to your heart's content.
(sorry in advance for my messy code)
</p>
<p>
<b>Check out these organizations:</b>
Though they may differ on what voting system they like best,
they all have a common goal: to reform the one we have.
<a href="https://electology.org/">Electology</a> likes Approval Voting most,
<a href="http://www.fairvote.org/">FairVote</a> likes Instant Runoff most,
and <a href="http://rangevoting.org/">RangeVoting.org</a> likes Score Voting most.
</p>
<div class="appendix_title" style="font-size:36px; line-height:50px; margin-top:35px;">ON THE SHOULDERS OF GIANTS</div>
<p>
This "explorable explanation" was directly inspired by these two projects:
</p>
<img src="img/zesty.png" style="width:100%"/>
<p>
<a href="http://zesty.ca/voting/sim/">Voting Sim Visualization</a> by Ka-Ping Yee (2005)
was a real eye-opener.
(hat tip to <a href="https://twitter.com/worrydream/status/781324328054951936">Bret Victor</a> for sharing it with me!)
I've heard lots of written debate over FPTP vs IRV vs Condorcet vs Approval vs blah blah blah,
but I'd never seen their difference <i>visualized</i> so clearly!
It gave me instant insight.
And it actually changed my mind – I used to think IRV was pretty good,
but after seeing IRV's <i>messiness</i> (as shown above), I realized it's actually kinda stinky cheese.
</p>
<p>
However, even <i>this</i> brilliant visualization was still too abstract.
And since it wasn't interactive, I couldn't test the many questions & scenarios that came to mind.
So that's why my second inspiration was...
</p>
<img src="img/ladder.png" style="width:100%"/>
<p>
<a href="http://worrydream.com/LadderOfAbstraction/">Up and Down the Ladder of Abstraction</a>
by Bret Victor (2011).
It's one of the web's earliest "explorable explanations" (also a term Bret coined)
and it is <i>gorgeous</i>.
Obviously, I borrowed the format of mixing words & "games" to explain things,
but I also followed the formula of starting concrete – one voter –
then moving up to the more abstract – a whole election.
</p>
<p>
<a href="http://explorableexplanations.com/">
You can learn more about Explorable Explanations here.</a>
</p>
<p>
And last but not least, thank you to all the math & policy nerds
who spent way too much time thinking about all this.
</p>
<div class="appendix_title" style="font-size:47px; line-height:50px; margin-top:35px;">
STAY IN TOUCH, MAYBE?</div>
<p>
Every once in a while, I'll fall into an endless rabbithole –
like this one on voting systems – and slowly crawl my way out, bloodied and bruised,
with a new interactive thing for you!
If you wanna find out
when I finally get around to making new shtuff, you can...
</p>
<ul>
<li>
<a href="https://twitter.com/ncasenmare">Follow me on Twitter</a>
</li>
<li>
<a href="https://www.patreon.com/ncase">Buy me a hot chocolate via Patreon</a>
</li>
<li>
<a href="http://us11.campaign-archive2.com/home/?u=07d288de26e77b8126d33e2d6&id=5c3178c4cb">I also have a mailing list???</a>
</li>
</ul>
<p>
And if you wanna see more of my past projects,
<a href="http://ncase.me/">check out my wobsite!</a>
</p>
<p>
See you again soon! Have a Happy New Year 2017, or try to, anyway.
</p>
</div>
<!-- Supporters and Special Thanks -->
<div id="supporters">
<div class="appendix_title" style="text-align:center; height:22px">A BIG THANKS TO ALL MY</div>
<div class="appendix_title" style="text-align:center; font-size: 46px; margin: 10px 0 15px 0;">SUPPORTERS</div>
<a href="https://www.patreon.com/ncase" target="_blank">
<img src="img/patreon.png" width="320">
</a>
<div id="supporter_drawings">
<div><img src="rewards/aimee.png"><div>aimee jarboe</div></div>
<div><img src="rewards/frank.png"><div>frank leon rose</div></div>
<div><img src="rewards/jared.png"><div>jared cosulich</div></div>
<div><img src="rewards/louis_jean.png"><div>louis-jean teitelbaum</div></div>
<div><img src="rewards/matt.png"><div>matt hughes</div></div>
<div><img src="rewards/micah.png"><div>micah cowan</div></div>
<div><img src="rewards/michael.png"><div>michael alan huff</div></div>
<div><img src="rewards/natalie.png"><div>natalie sun</div></div>
<div><img src="rewards/noel.png"><div>noel lehmann</div></div>
<div><img src="rewards/phil.png"><div>phil dougherty</div></div>
<div><img src="rewards/tom_c.png"><div>tom cascio</div></div>
<div><img src="rewards/tom_k.png"><div>tom knowles</div></div>
</div>
<div style="overflow:hidden; clear:both">
<div style="margin-bottom:25px; text-align:center; overflow:hidden;">
<div style="width:160px; float:left">
Adam M. Smith<br>
Alex Dytrych<br>
Andrew <br>
Andy <br>
Artemiy Solopov<br>
Aschelon <br>
ben fei<br>
Benjamin Riggs<br>
Bob Wise<br>
Brandon <br>
Brent Werness<br>
Brian Wu<br>
Bruno Guerrero<br>
Buster Benson<br>
Casey Ross<br>
Charlie McIlwain<br>
Christopher <br>
Colin <br>
Colin <br>
Cort Stratton<br>
Craig Steele<br>
Daniel Horowitz<br>
Daniel Shiffman<br>
Dave Tu<br>
David Smit<br>
Dylan Meconis<br>
Fahrstuhl <br>
Feiya Wang<br>
Forrest Oliphant<br>
Frank Leon Rose<br>
Henry Reich<br>
Iñaki <br>
J. Hu<br>
Jacob Christian Munch-Andersen<br>
Jacques Frechet<br>
James Hogan<br>
Janusz Leidgens<br>
John_Ca <br>
Johnny Owens<br>
Joseph Perry<br>
Joshua Horowitz<br>
Julia Karmo<br>
Karen Cooper<br>
Kat Suricata<br>
Kate Fractal<br>
Kathryn Long<br>
Kevin <br>
Kevin Wang<br>
</div>
<div style="width:160px; float:left">
Klemen Slavic<br>
kuerqing1024 <br>
Linda Booth Sweeney<br>
Maic Lopez Saenz<br>
Matt "Kupo" Roszak<br>
Matt Warren<br>
May-Li Khoe<br>
Mekki MacAulay<br>
Micah Cowan<br>
Michael Duke<br>
Michelle Brown<br>
Michelle Kelly<br>
Milan Pingel<br>
Monika Denes<br>
Mustafa Alic<br>
Nick Schrag<br>
Nikita<br>
Noah Swartz<br>
Pablo Lopez Soriano<br>
Pat Mächler<br>
Peter McEvoy<br>
Philip Tibitoski<br>
Piotr Migdal<br>
Rachel Nabors<br>
Raphael D'Amico<br>
Richard Hackathorn<br>
Rob Napier<br>
Roland Tanglao<br>
Ryan Barker<br>
Sam Anderson<br>
Sam Maynard<br>
Samira Nedungadi<br>
Sarah Barbour<br>
sarah mathys<br>
SB Sigma<br>
Seanny123 <br>
Serguei Filimonov<br>
Sigpipe <br>
Sylvain Francis<br>
Syria Carys Sirlay<br>
T_Caramel <br>
TisGood <br>
Tony Onodi<br>
Traci Lawson<br>
Yona <br>
Yu-Han Kuo<br>
Zach Smith<br>
Zoe Bogner
</div>
</div>
</div>
<div class="appendix_title" style="text-align:center;">AND SPECIAL THANKS TO</div>
<div style="margin-top:15px; text-align:center;">
<div style="width:160px; float:left">
Alex Dytrych<br>
Alex Jaffe<br>
Brian Bucklew<br>
Chris Walker<br>
Christine Zhang<br>
Dan Zajdband<br>
Daniel Cook<br>
Droqen<br>
Jason Grinblat<br>
</div>
<div style="width:160px; float:left">
Jessie Salz<br>
Lisa Charlotte Rost<br>
Martin Shelton<br>
Patrick Dubroy<br>
Pietro Passarelli<br>
Sandhya Kambhampati<br>
Tanya Short <br>
</div>
</div>
</div>
</div>
</div>
<div style="text-align:center; color:#fff;">
sharing is caring!
<ul class="share-buttons">
<li><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fncase.me%2Fballot%2F&t=To%20Build%20a%20Better%20Ballot" title="Share on Facebook" target="_blank"><img alt="Share on Facebook" src="social/Facebook.png"></a></li>
<li><a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fncase.me%2Fballot%2F&text=Woah%2C%20check%20out%20this%20interactive%20guide%20to%20alternative%20voting%20systems!%20To%20Build%20a%20Better%20Ballot%3A%20http%3A%2F%2Fncase.me%2Fballot%2F&via=ncasenmare" target="_blank" title="Tweet"><img alt="Tweet" src="social/Twitter.png"></a></li>
<li><a href="mailto:?subject=To%20Build%20a%20Better%20Ballot&body=An%20interactive%20guide%20to%20alternative%20voting%20systems:%20http%3A%2F%2Fncase.me%2Fballot%2F" target="_blank" title="Send email"><img alt="Send email" src="social/Email.png"></a></li>
</ul>
</div>
</div>
</div>
</body>
<script src="js/index.js"></script>
</html>