forked from ncase/ballot
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
833 lines (799 loc) · 53.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
<!doctype html>
<html lang="fr">
<head>
<!-- Meta -->
<title>Pour un meilleur scrutin</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="Pour un meilleur scrutin">
<meta itemprop="description" content="un guide interactif des modes de scrutin alternatifs">
<meta itemprop="image" content="https://xdeadc0de.github.io/ballot-fr/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="Pour un meilleur scrutin">
<meta name="twitter:description" content="un guide interactif des modes de scrutin alternatifs">
<meta name="twitter:creator" content="@ncasenmare">
<meta name="twitter:image" content="https://xdeadc0de.github.io/ballot-fr/social/thumbnail.png">
<!-- Open Graph data -->
<meta property="og:title" content="Pour un meilleur scrutin">
<meta property="og:type" content="website">
<meta property="og:url" content="https://xdeadc0de.github.io/ballot-fr">
<meta property="og:image" content="https://xdeadc0de.github.io/ballot-fr/social/thumbnail.png">
<meta property="og:description" content="un guide interactif des modes de scrutin alternatifs">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/index.css">
<base target="_blank">
</head>
<body>
<a href="https://github.com/xDEADC0DE/ballot-fr/"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 10000;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<!-- - - - - - - - -
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 class="words">
<p>
Non, cela ne parle pas de l'élection présidentielle de 2017. Enfin, <em>pas uniquement</em> de ça, en tout cas.
</p>
<p>
Avant tout, je dois vous expliquer un <em>bug</em> étrange de notre système électoral. Imaginons deux candidats, Camille Carré <img src="play/img/square.png" alt="Camille Carré" /> et Théo Triangle <img src="play/img/triangle.png" alt="Théo Triangle" />, le long de deux axes politiques (par exemple, « droite contre gauche » et « mondialisation contre protectionnisme »). Imaginons aussi un électeur <img src="play/img/voter.png" /> qui vote pour la ou le candidat le plus proche de ses convictions. À quoi est-ce que ça ressemble ?
</p>
</div>
<div class="sim-intro">
<p class="caption" style="margin-top:30px">
<b><span style="font-size:2.5em;">cliquez & faites glisser</span><br>les candidats et l'électeur :</b>
</p>
<iframe src="play/model1.html" width="305" height="360" scrolling="no"></iframe>
</div>
<div class="words">
<p>
Ce n'est pas évident. Triangle a des arguments pointus, mais Carré a davantage de dimensions ! Hélas, au final on ne peut voter que pour une seule personne.
</p>
<p>
Bien sûr, il y a d'autres votants dans une élection. Voyons à quoi ressemble le scrutin avec une centaine de votants.
</p>
</div>
<div class="sim-intro">
<p class="caption">
<b>déplacez les candidats & <span class="underline">les</span> électeurs.<br>(pour les déplacer, faites glisser le <em>centre</em> de la foule)<br>observez comment le résultat de l'élection évolue :</b>
</p>
<iframe src="play/model2.html" width="320" height="400" scrolling="no"></iframe>
</div>
<div class="words">
<p>
Voici maintenant une autre élection. Théo Triangle est <em>déjà</em> devant Camille Carré dans les sondages, quand un 3<sup>e</sup> candidat, Hichem Hexagone <img src="play/img/hexagon.png" alt="Hichem Hexagone" /> se présente (les soutiens d'Hexagone aiment le fait qu'il voit les problèmes sous plus d'angles). Inspiré par son succès, il se place politiquement très proche de Triangle.
</p>
<p>
On pourrait croire que donner aux électeurs davantage de ce qu'ils aiment donnera un <em>meilleur</em> résultat, ou au moins, pas <em>pire</em>, n'est-ce pas ? Eh bien…
</p>
</div>
<div class="sim-intro">
<p class="caption">
<b>au départ, <img src="play/img/triangle.png" alt="Théo Triangle"/> gagne contre <img src="play/img/square.png" alt="Camille Carré"/>.<br>
glissez <img src="play/img/hexagon.png" alt="Hichem Hexagone" /> <i>juste en dessous</i> de <img src="play/img/triangle.png" alt="Théo Triangle"/>,<br>
et voyez ce qui se passe :</b>
</p>
<iframe src="play/model3.html" width="320" height="460" scrolling="no"></iframe>
</div>
<div class="words">
<p>
Eh oui. Camille Carré, la candidate la <em>moins</em> populaire, l'emporte ! Quand vous avez deux bons candidats, ils se « volent » des voix entre eux, ce qui permet à un troisième, moins bon, de gagner.
</p>
<p>
On appelle ça le partage des voix. L'exemple français le plus célèbre est l'élection de 2002, quand de nombreux candidats minoritaires de gauche ont « pris » des votes à Lionel Jospin, permettant à Jean-Marie Le Pen de se hisser, contre toute attente, au second tour.
</p>
<p>
Le phénomène de partage/vol des voix devrait <em>en théorie</em> être moins fort en 2017. Après tout, les nombreuses primaires sont censées avoir réduit le nombre de candidats d'un même courant politique. D'un autre côté, peut-être que les primaires <em>amplifient</em> les bugs de notre système électoral. En tout cas, on a déjà l'exemple de François Bayrou, qui a renoncé à se présenter pour éviter <em>« la dispersion des suffrages et des propositions »</em> (Bayrou, le 22 févr. 2017).
</p>
<p>
Mais encore une fois, le sujet n'est <em>pas</em> l'élection présidentielle de 2017.
</p>
<p>
<strong>Le but est de construire une démocratie en laquelle les gens ont <em>confiance</em>.</strong>
</p>
<!-- Exemple inadapté en France
<p>
Malgré tout le brouhaha autour des élections de 2017, de <em>nombreux</em> français n'iront pas voter. Et parmi ceux qui ont voté pour Clinton/Trump, <a href="http://www.nytimes.com/interactive/2016/11/08/us/politics/election-exit-polls.html">20 % ont déclaré ne pas avoir confiance en leur candidat</a>, mais <em>ont quand même voté pour eux</em>. <a href="https://www.theatlantic.com/international/archive/2016/07/trust-institutions-trump-brexit/489554/">Partout dans le monde, la confiance des gens en leur gouvernements</a> - ou la crédibilité des élus - n'a jamais été aussi basse. Ce n'est pas la démocratie Américaine qui est en jeu. C'est <em>toutes les démocraties au monde</em>.
</p>
<p>
…tranquille.
</p>-->
<p>
Rétablir la confiance est une tâche complexe sans solution simple. Mais je pense qu'il <em>existe bien</em> une première étape simple. C'est une étape qui pourrait éviter le besoin de « choisir entre deux maux », et qui pourrait donner aux citoyens plus de choix, de <em>meilleurs</em> choix. Et pourtant, cette solution n'est pas si intimidante que de revoir le financement des partis, les circonscriptions électorales, ou le manque de <em>représentation proportionnelle</em>. Non, il s'agit uniquement de changer un <em>bout de papier</em>, et la méthode pour compter ces papiers.
</p>
<p>
Cette idée <em>n'est pas</em> le principal problème. Ça <em>n'est pas</em> la solution à tout. Mais par rapport à l'effort fourni, c'est là qu'on pourra faire le plus d'améliorations.
</p>
<p>
<strong>Voyons comment créer un meilleur scrutin.</strong>
</p>
</div>
<!-- - - - - - - - -
PART I:
THE ALTERNATIVE BALLOTS
- - - - - - - - - -->
<div class="banner">
<img src="img/part1.png" />
</div>
<div class="words">
<p>
Bon, vous avez sans doute quelques objections !
</p>
<p>
Premièrement, pourquoi est-ce ceux qui sont au pouvoir changeraient le mode de scrutin qui leur <em>a permis d'accéder au pouvoir</em> ? Eh bien, la droite comme la gauche ont déjà perdu des élections importantes à cause du partage des voix. Supprimer ce bug serait un avantage pour les petits partis, <em>mais aussi</em> pour les grands ! Par ailleurs, ce genre de réforme électorale fait déjà des émules. Il y a quelques mois seulement, <a href="http://www.nytimes.com/2016/12/03/us/maine-ranked-choice-voting.html" title=""Maine Adopts Ranked-Choice Voting. What Is It, and How Will It Work?", Katharine Q. Seelye, New York Times">l'état du Maine a adopté la méthode du Vote Alternatif</a>. <s>Et Justin Trudeau, <a href="http://cdn.pinknews.co.uk/images/2016/02/justin_trudeau.jpg">le Premier ministre « beau-gosse » du Canada</a>, veut mettre en place un meilleur scrutin dans son pays dès 2017.</s> <b>(MISE À JOUR : raté.)</b>
</p>
<p>
Deuxièmement, j'ai cru entendre que quelqu'un avait démontré que <em>tous</em> les modes de scrutins étaient injustes ? Pas exactement. Vous pensez au célèbre <a href="https://fr.wikipedia.org/wiki/Th%C3%A9or%C3%A8me_d%27impossibilit%C3%A9_d%27Arrow">théorème d'impossibilité</a> de Kenneth Arrow, le mathématicien qui, dans les années 50, a lancé l'étude des systèmes électoraux.
</p>
<p>
Il y a deux réponses à ça :
<ol>
<li>il n'en reste pas moins que certains types de scrutins sont <em>plus</em> justes que d'autres, même si aucun n'est parfait. Et</li>
<li>la démonstration de Kenneth Arrow ne <em>s'applique pas</em> à tous les types de votes, c'est une erreur fréquente. Elle ne s'applique qu'aux systèmes où l'on <em>range les candidats selon un ordre</em>.</li>
</ol>
Plus tard, nous verrons quelques systèmes où l'on ne range <em>pas</em> les candidats, ainsi que d'autres alternatives à notre système électoral actuel et ses problèmes.
</p>
<p>
Mais d'abord, voyons de plus près les systèmes de vote qui sont utilisés aujourd'hui :
</p>
</div>
<div class="sim-ballot">
<h2 class="ballot_title" style="margin-bottom: 0.2em;" id="SUM">SCRUTIN UNINOMINAL MAJORITAIRE</h2>
<p class="ballot_caption">comme avant, cliquez & glissez les candidats et l'électeur
</p>
<iframe src="play/ballot1.html" width="655" height="256" scrolling="no"></iframe>
</div>
<div class="words">
<p>
<strong>Comment compter :</strong> On additionne tout simplement les voix. Celui ou celle qui a le plus de voix, gagne.
</p>
<p>
Ça semble logique, mais comme on l'a déjà vu cela peut produire un bug étrange, où deux <em>bons</em> candidats peuvent faire basculer le résultat en faveur d'un troisième, <em>mauvais</em> candidat. C'est la raison pour laquelle certaines personnes votent « stratégiquement », en votant non pas pour leur véritable favori, mais choisissent « le moins pire ». Laisser les gens voter de façon stratégique n'est pas un problème en soi, mais posez-vous la question : <b>comment peut-on s'attendre à ce que nos élus soient honnêtes, quand le scrutin <em>lui-même</em> ne nous permet pas de voter honnêtement ?</b>
</p>
<p>
Bref, pour résoudre le problème du partage de voix, d'autres systèmes ont été suggérés, tels que…
</p>
</div>
<div class="sim-ballot">
<h2 class="ballot_title" style="margin-bottom: 0.15em;" id="vote-classement">VOTE PAR CLASSEMENT</h2>
<p class="ballot_caption">
là aussi, cliquez & faites glisser
</p>
<iframe src="play/ballot2.html" width="655" height="256" scrolling="no"></iframe>
</div>
<div class="words">
<p>
<strong>Comment compter :</strong> il y a en fait <em>plusieurs</em> façons de compter ce genre de bulletins. Je
vais parler ici des trois principales méthodes…
</p>
<p>
<strong>Vote Alternatif :</strong> c'est l'alternative <em>la plus populaire</em> au Scrutin Uninominal Majoritaire. L'Australie et l'Irlande l'utilisent pour leurs élections nationales. San Francisco, Minneapolis, et Portland (état du Maine) l'ont choisi pour les municipales. Et Justin Trudeau, <a href="https://queerty-prodweb.s3.amazonaws.com/wp/docs/2016/02/justintrudeautorontopride.jpg">Premier ministre viril du Canada</a>, réfléchit aussi au vote alternatif.
</p>
<!-- Pas sûr que ces détails soient importants en français où les traductions n'existent pas toujours
<i>
(Note : le vote à tours instantanés est aussi appellé ~~"Ranked Choice Voting",
bien qu'il existe d'autres façons de compter les bulletins avec ~classement.
~IRV/VTI est souvent simplement appellé « vote alternatif",
alors qu'il existe une douzaine de modes de scrutin différents.
Quel égoisme dans le nommage, franchement !)
</p>-->
<p>
Le Vote Alternatif est un peu plus compliqué que Scrutin Majoritaire, mais voilà comment ça fonctionne :
</p>
<ol>
<li>On compte tous les 1<sup>ers</sup> choix.</li>
<li>Si une personne a plus de 50 % des voix, elle gagne ! FIN.</li>
<li>Sinon, on élimine celui ou celle qui a eu le moins de voix.</li>
<li>Nouveau « tour » : on compte les voix comme si le candidat éliminé ne s'était pas présenté.</li>
<li>On répète cette opération jusqu'à ce que quelqu'un ait 50 % ou plus des voix.</li>
</ol>
<p>
Si tout ça semble trop lourd, il y a une méthode bien plus simple de compter des bulletins avec classement…
</p>
<p>
<strong>Méthode Borda :</strong> il s'agit simplement d'additionner les rangs. Comme au golf, celui ou celle qui a <em>le plus petit</em> score l'emporte. Le décompte de Borda est utilisé en Slovénie et dans une poignée de petites
îles en Micronésie.
</p>
<p>
Mais si vous voulez une méthode de décompte encore plus obscure, vous pouvez essayer…
</p>
<p>
<strong>La Méthode Condorcet :</strong> on simule une « élection » entre chaque paire de candidats, en utilisant les informations de classement fournies par les électeurs sur leurs bulletins. S'il y a un candidat qui bat tous les autres en un-contre-un, ce candidat gagne l'élection. Attention, c'est un gros SI (comme nous le verrons plus tard…). Le bon côté de cette méthode, c'est que <em>quand</em> elle permet de déterminer un gagnant, c'est toujours le meilleur candidat théoriquement possible.
</p>
<p>
Pour l'instant, cette méthode n'est pas utilisée dans des élections nationales mais par certaines organisations publiques. En 2016, le vote populaire pour le nom de la nouvelle région issue de la fusion du <em>Languedoc Roussillon</em> et de <em>Midi-Pyrénées</em> a été <a href="http://www.laregion.fr/le-nom-de-ma-region">comptabilisé selon la méthode de Condorcet</a> (le nom retenu est « Occitanie »).
</p>
<p>
Voilà, vous connaissez désormais les modes de scrutin <em>où l'on trie les candidats</em> – ceux pour lesquels Kenneth Arrow a démontré qu'ils étaient <em>toujours</em> invalides de manière crasse ! Mais quels sont les modes de scrutin où l'on ne <em>trie pas</em> les candidats ? Ils sont plus méconnus, mais maintenant, au moins, vous les connaitrez :
</p>
</div>
<div class="sim-ballot">
<h2 class="ballot_title" style="margin-bottom: 0.15em;" id="vote-approbation">VOTE PAR APPROBATION</h2>
<p class="ballot_caption">ouaip, toujours cliquer & glisser
</p>
<iframe src="play/ballot3.html" width="655" height="256" scrolling="no"></iframe>
</div>
<div class="words">
<p>
<strong>Comment compter :</strong> ajoutez les approbations. La personne qui a le plus d'approbations gagne.
</p>
<p>
<em>Comment ? On peut choisir plus d'un candidat ? Ce n'est pas de la triche, comme si on avait plusieurs votes par personne ?</em> Je comprends votre interrogation. En fait, votre vote n'a jamais été qu'une simple voix. Quand vous votez, vous exprimez votre avis sur <em>l'ensemble des candidats</em>. Dans ce mode de scrutin, vous avez seulement la liberté de soutenir <em>tous</em> les candidats que vous approuvez, et non pas uniquement votre favori ou votre deuxième favori « stratégique ».
</p>
<p>
Mais si vous voulez un mode de scrutin <em>encore plus</em> explicite, pourquoi ne pas essayer le…
</p>
</div>
<div class="sim-ballot">
<h2 class="ballot_title" style="margin-bottom: 0.15em;" id="vote-valeurs">VOTE PAR VALEURS</h2>
<p class="ballot_caption">vous savez quoi faire.
</p>
<iframe src="play/ballot4.html" width="655" height="256" scrolling="no"></iframe>
</div>
<div class="words">
<p>
<strong>Comment compter :</strong> additionnez simplement les notes. Celui ou celle qui a le score moyen le plus haut, gagne. Un peu comme les notes des commentaires Amazon, mais version Démocratie (note : ceci <em>n'est pas</em> un vote par classement, car deux candidats peuvent avoir le <em>même</em> score).
</p>
<p>
Voilà donc les six systèmes qu'on retrouve le plus souvent : celui que nous utilisons, et cinq alternatives populaires. Mais comment savoir laquelle de ces alternatives est, en vrai, la meilleure ? Est-ce qu'<em>elles-mêmes</em> n'auraient pas des bugs ? Et du coup, connaissant ces bugs, quel mode de scrutin serait « le meilleur » ?
</p>
<p>
Comme on l'a fait avant, simulons des élections !
</p>
</div>
<!-- - - - - - - - -
PART II:
HOW DO THE ALTERNATIVES HOLD UP?
- - - - - - - - - -->
<div class="banner">
<img src="img/part2.png" />
</div>
<div class="words">
<p>
Vous vous souvenez de la simulation du partage des voix que nous avons vu un peu plus tôt ? Eh bien, la revoilà, sauf que cette fois vous pouvez basculer entre six modes de scrutin différents !
</p>
</div>
<div class="sim-test">
<p class="caption-test">
déplacez <img src="play/img/hexagon.png" alt="Hichem Hexagone" /> <em>juste en dessous</em> de <img src="play/img/triangle.png" alt="Théo Triangle" /> pour voir le partage des voix.<br> comparez ensuite les six modes de scrutins :<br><span style="font-weight:bold; font-size:0.8em">
(note : dans les rares cas d'ex æquo, je choisis aléatoirement le vainqueur)
</span>
</p>
<iframe src="play/election1.html" width="800" height="380" scrolling="no"></iframe>
</div>
<div class="words">
<p>
Comme vous pouvez le voir, <em>tous</em> les modes de scrutin sont immunisés contre le vol de voix sauf le Scrutin Uninominal Majoritaire. Quoi, c'est bon, on a fini ? Bang bang, le bug est mort ? On a juste à choisir une des alternatives
et c'est réglé ?
</p>
<p>
Et non ! En se débarrassant d'un bug, ces modes de scrutin alternatifs créent <em>d'autres</em> bugs. Dans certains cas, le remède est pire que la maladie.
</p>
<p>
Prenons par exemple, le Vote Alternatif. Au début, Théo Triangle <img src="play/img/triangle.png" alt="Théo Triangle" /> gagne, et vous allez encore <em>rapprocher</em> davantage les intentions de vote vers lui. Normalement, si un candidat est déjà en train de gagner une élection, et devient <em>encore plus</em> populaire, il devrait toujours gagner, non ?
</p>
<p>
Vous avez probablement deviné où je voulais en venir…
</p>
</div>
<div class="sim-test">
<p class="caption-test">
déplacez les votants <img src="play/img/voters.png"> <em>doucement</em> vers <img src="play/img/triangle.png" alt="Théo Triangle"
/>:
</p>
<iframe src="play/election2.html" width="800" height="380" scrolling="no"></iframe>
</div>
<div class="words">
<p>
Que s'est-il passé ? À la base, <img src="play/img/hexagon.png" alt="Hichem Hexagone" /> est éliminé au premier tour, donc <img src="play/img/triangle.png" alt="Théo Triangle" /> se retrouve confronté à <img src="play/img/square.png" alt="Camille Carré" />, qui est plus faible, et gagne. Mais quand on déplace un tout petit peu les intentions de vote dans la direction de <img src="play/img/triangle.png" alt="Théo Triangle" />, la personne éliminée <em>change</em> ! Maintenant, <img src="play/img/square.png" alt="Camille Carré" /> est éliminée, ce qui veut dire que <img src="play/img/triangle.png" alt="Théo Triangle" /> se retrouve face à <img src="play/img/hexagon.png" alt="Hichem Hexagone" />, qui est plus fort, et <em>perd</em>.
</p>
<p>
Avec le Vote Alternatif, il est donc possible qu'un favori <em>perde en devenant plus populaire</em>. Quelle absurdité !
</p>
<p>
Est-ce que ça arrive souvent ? <a href="http://aceproject.org/main/francais/es/esy_au.htm" title=""Vote Alternatif en Australie", The Electoral Knowledge Network">Il y a quelques cas confirmés</a>, et <a href="http://www.rangevoting.org/Monotone.html" title=""(non)Monotonicity and Instant Runoff Voting", Warren D. Smith">des mathématiciens estiment que ce bug pourrait se produire dans 14,5 % des cas</a>. Malheureusement, nous ne pouvons pas le savoir avec certitude, car les gouvernements n'ouvrent pas tous <em>suffisamment d'informations relatives aux votes</em> pour reconstruire le <abbr title="Vote Alternatif">VA</abbr> et vérifier les résultats.
</p>
<p>
Donc, non seulement le bug du Vote Alternatif est aussi peu démocratique que celui du Scrutin Uninominal Majoritaire mais, <em>pire</em>, sa méthode de décompte est complexe et opaque, ce qu'on ne peut pas reprocher au <abbr title="Scrutin Uninominal Majoritaire">SUM</abbr>. Vous savez comme moi qu'une absence de transparence est encore plus problématique de nos jours tant la confiance dans les gouvernements n'a jamais été aussi faible.
</p>
<p>
(Attendez ! On parlera du risque du <em>vote stratégique</em> plus tard. Est-ce que le <abbr title="Vote Alternatif">VA</abbr> fera un retour inattendu ? Suspens…)
</p>
<p>
Bon, c'en est fini de l'alternative la plus populaire. Qu'en est-il de la seconde alternative, la méthode de Borda ? Dans la prochaine simulation, vous allez déplacer un candidat <em>perdant</em> dans la direction d'un autre. Dans le cas du <abbr title="Scrutin Uninominal Majoritaire">SUM</abbr>, le partage des voix aurait divisé leurs intentions de vote, les faisant perdre tous deux encore plus. Regardez ce qui arrive avec la méthode de Borda…
</p>
</div>
<div class="sim-test">
<p class="caption-test">
déplacez <em>juste un peu</em> <img src="play/img/hexagon.png" alt="Hichem Hexagone" /> dans la direction de <img src="play/img/square.png" alt="Camille Carré"/>:
</p>
<iframe src="play/election3.html" width="800" height="380" scrolling="no"></iframe>
</div>
<div class="words">
<p>
Et ouais. La méthode de Borda à <em>l'effet inverse</em> du partage des voix. Au lieu que ce soit un bon candidat qui en affaiblisse un autre en s'en rapprochant, avec la méthode de Borda, c'est un mauvais candidat qui <em>aide</em> un <em>autre mauvais candidat</em> en s'en rapprochant.
</p>
<p>
Qu'est-ce qui se passe ? Au début, les votants classent <img src="play/img/square.png" alt="Camille Carré" />><img src="play/img/triangle.png" alt="Théo Triangle" />><img src="play/img/hexagon.png" alt="Hichem Hexagone" />, mais après vous déplacez <img src="play/img/hexagon.png" alt="Hichem Hexagone" /> plus près que <img src="play/img/square.png" alt="Camille Carré" />, du coup les votants <em>basculent</em> vers un classement <img src="play/img/square.png" alt="Camille Carré" />><img src="play/img/hexagon.png" alt="Hichem Hexagone" />><img src="play/img/triangle.png" alt="Théo Triangle" />, ce qui pénalise suffisamment <img src="play/img/triangle.png" alt="Théo Triangle" /> pour le faire perdre face à <img src="play/img/square.png" alt="Camille Carré" />.
</p>
<p>
Et pourtant, la méthode de Borda n'est pas la pire. Au moins, on peut reconnaitre qu'elle est plus simple et transparente que le Vote Alternatif. Et si on comparait à la Méthode de Condorcet ? Quand la Méthode de Condorcet désigne un gagnant, c'est "théoriquement" toujours le meilleur… mais ça, c'est <em>quand</em> elle désigne un gagnant.
</p>
<p>
Jusqu'ici, j'ai simulé les votants comme <em>un seul et même</em> groupe, avec un centre et un certain diamètre. Quand on voit à quel point les élections sont, aujourd'hui, polarisées, on peut imaginer qu'en réalité nous avons <em>plusieurs</em> groupes de votants avec des centres complètement différents. La Méthode de Condorcet essaie de désigner le candidat qui bat tous les autres en face à face. Mais avec des votants <em>polarisés</em>, on peut finir avec un paradoxe façon Pierre-Feuille-Ciseaux, où une majorité de votants préfère A à B, B à C <em>et</em> C à A.
</p>
<p>
Dans certaines situations, les autres modes de scrutin avaient des bugs. La méthode de Condorcet, elle, <em>s'effondre</em>. Essayez par vous-même :
</p>
</div>
<div class="sim-test">
<p class="caption-test">
créez votre propre paradoxe de Condorcet !<br> déplacez les votants <img src="play/img/voters.png"> de manière à ce que PERSONNE ne gagne :
</p>
<iframe src="play/election4.html" width="800" height="380" scrolling="no"></iframe>
</div>
<div class="words">
<p>
Bon, en pratique (même si en fait aucun gouvernement n'utilise ce mode de scrutin), quand la Méthode de Condorcet échoue à déterminer un vainqueur, l'élection utilise une des autres méthodes comme la méthode de Borda. Mais bon, si vous faites ça, vous récupérez les bugs de la solution de secours. Poubelle.
</p>
<p>
Scrutin Uninominal Majoritaire, Vote Alternatif, méthodes de Borda ou Condorcet… Tous ces systèmes utilisent un <em>classement</em> — ceux pour lesquels notre mathématicien du début, Kenneth Arrow, a prouvé qu'ils étaient <em>toujours</em> injustes ou bogués d'une manière ou d'une autre. Qu'en est-il des systèmes où on ne classe <em>pas</em>, comme le Vote par Approbation et le Vote par Valeur ? Eh bien…
</p>
<p>
…je n'ai pas trouvé de simulation pour montrer leurs défauts. Il faut dire <em>qu'en théorie</em>, ils n'ont pas de gros défauts.
</p>
<p>
Mais c'est vraiment un gros, gros « en théorie » ! Si ça se trouve, <em>en pratique</em>, les votants calculateurs appliquent le Vote par Approbation et le Vote par Valeurs exactement comme le Scrutin Uninominal Majoritaire, en donnant 5 à leur candidat favori et en désapprouvant fortement tous les autres même s'ils les <em>apprécient</em> <a href="http://www.fairvote.org/why-approval-voting-is-unworkable-in-contested-elections" title=""Why Approval Voting is Unworkable in Contested Elections", The Non-Majority Rule Desk">(les anglophones peuvent lire cette critique du vote par approbation, en faveur du Scrutin Uninominal Majoritaire, sur FairVote)</a>.
</p>
<p>
Mais bon, même si le Vote par Approbation et le Vote par Valeurs ne vous incitent pas à exprimer une opinion sincère concernant la personne que vous mettez <em>en seconde position</em>, le <abbr title="Scrutin Uninominal Majoritaire">SUM</abbr> et le <abbr title="Vote Alternatif">VA</abbr> vous punissent carrément d'avoir exprimé honnêtement votre <em>premier</em> choix. De plus, si le Vote par Approbation peut être manipulé, alors le <abbr title="Vote Alternatif">VA</abbr> peut l'être aussi, en pire <a href="http://www.rangevoting.org/LNH.html">(Ici une contre-critique de l'article de Fairvote par un mathématicien, en défense du Vote par Approbation)</a>. Bref, au final…
</p>
<p>
Il va nous falloir un paquet de simulations supplémentaires.
</p>
<p>
Ci-dessous et en anglais, un graphique
<a href="https://electology.org/tactical-voting-basics">(source)</a>, montrant le résultat de 2,2 <em>millions</em> de simulations. Une <i>incroyable</i> variété de scénarios a été testée. Avec tous les votants honnêtes. Avec tous les votants agissant de manière stratégique. Avec des indécis, avec quelques stratèges, avec certains qui savaient à l'avance l'opinion des autres ou qui ne savaient pas, ou qui le savaient un peu, etc. Vous savez qu'il s'agit d'un <em>vrai</em> graphique de mathématicien parce que ça fait saigner les yeux :
</p>
<p>
<img class="real" src="img/comparison.png">
</p>
<p>
Les résultats pour chaque méthode sont représentés par des barres bleues plutôt moches. Plus la barre se situe vers la droite, plus heureux sont les votants. Plus la barre est vers le haut, plus le mode de scrutin est simple. La largeur de la barre représente la performance de la méthode, suivant que l'on considère des votants plus ou moins honnêtes, ou stratèges.
</p>
<p>
Un des premiers trucs qu'on remarque est que le vote stratégique rend les gens <em>moins heureux</em> que quand on les laisse voter de manière honnête, et ce <em>quel que soit</em> le mode de scrutin. J'étais très surpris en apprenant ça (mais ça me semble logique si vous imaginez, par exemple, une pièce remplie de gens qui essaient de se parler. Une personne peut appliquer une stratégie consistant à crier pour se faire entendre mais si tout le monde commence à crier, personne n'entendra plus personne, et il ne restera que des gorges irritées et des gens tristes).
</p>
<p>
L'autre truc intéressant est de regarder quel mode de scrutin rend les gens les plus heureux. Si vous avez principalement des gens honnêtes, <em>le Vote par Valeurs est le meilleur</em> (avec la Méthode de Borda pas loin derrière). Si, au contraire, vous avez plutôt des votants qui jouent les stratèges, alors <em>le Vote par Approbation et le Vote par Valeurs</em> sont les meilleurs.
</p>
<p>
Mais bon, tout ça, c'est que des simulations sur ordinateur. Comment ces différents modes de scrutin se comporteraient <em>en réalité</em> ? C'est pas comme si on pouvait conduire notre DeLorean de 1988, remonter le temps jusqu'avant les élections présidentielles de 2012, et voir ce qui se passerait en changeant le mode de scrutin…
</p>
<p>
<em>… à moins qu'on puisse ⁈</em>
</p>
<p>
Non, non, on se calme, on ne peut pas. Mais il y a quelque temps, une chercheuse et un chercheur du <abbr title="Centre national de la recherche scientifique">CNRS</abbr> <a href="https://www.cairn.info/revue-francaise-d-economie-2012-4-page-11.htm">ont fait quelque chose qui s'en rapproche</a>.<br/>
Ils ont récupéré les résultats d'un sondage commandé par Terra Nova et réalisé par OpinionWay, de 993 personnes représentatives de l’électorat français, fait quelques jours avant le premier tour de l’élection présidentielle en France, du 12 au 16 avril 2012 puis ont extrait une sous-population de 773 personnes représentant de manière fidèle les résultats du 1<sup>er</sup> tour du 21 avril 2012. Une fois sûr d'avoir un échantillon représentatif, ils sont testés les réponses des participants au sondage pour en déduire quel aurait été le vainqueur suivant le mode de scrutin.<br/>
Résultat : quel que soit le mode de scrutin, c'est toujours François Hollande qui l'emporte, mais l'équilibre entre les candidats change du tout au tout ! Le scrutin majoritaire élimine le candidat centriste et favorise les extrêmes, les méthodes de Condorcet et Borda font l'inverse, le Vote par Valeurs donne un résultat entre les deux.
</p>
<p>
<em>Mais alors, c'est n'importe quoi ?</em>
</p>
</div>
<div class="sim-test">
<p class="caption-test">
Un exemple d'élection où tout peut arriver…<br>
<span style="font-weight:100; font-size:0.85em"> Camille <img src="play/img/square.png" alt="Camille Carré"/> gagne avec <abbr title="Scrutin Uninominal Majoritaire">SUM</abbr>, Hichem <img src="play/img/hexagon.png" alt="Hichem Hexagone" /> gagne en Valeurs, et Théo <img src="play/img/triangle.png" alt="Théo Triangle"/> gagne avec Borda !</span>
</p>
<iframe src="play/election5.html" width="800" height="380" scrolling="no"></iframe>
</div>
<div class="words">
<p>
Woaw.
</p>
<p>
Avant de conclure… vous vous rappelez de Kenneth Arrow ? L'infâme mathématicien qui a financé une étude sur les modes de scrutin dans les années 50 ? Eh bien, <a href="https://electology.org/podcasts/2012-10-06_kenneth_arrow">dans une interview donnée 60 ans après</a>,
Kenneth Arrow se prononça à propos du mode scrutin qu'il préférait :
</p>
<p class="quote">
<em>“Eh bien, j'aurais tendance à penser que les scrutins où on évalue</em> [comme l'Approbation ou le Vote Par Valeurs] <em> les candidats sur trois ou quatre</em> [pas 10, 20 ou 100] <em>sont, en dépit de ce que j'ai pu dire concernant les possibles manipulations</em> [les votes stratégiques]<em>, peut-être le meilleur choix.”</em>
</p>
<p>
C'est probablement l'aveu de confiance le plus clair que vous ne pourrez jamais extraire du cerveau d'un matheux.
</p>
</div>
<!-- - - - - - - - -
PART III:
CONCLUSION. OPEN LETTER
- - - - - - - - - -->
<div class="banner">
<img src="img/part3.png" />
</div>
<div class="words">
<p>
<em>hum</em>
</p>
<p style="text-align:center">
<strong style="font-size:1.4em"><s>CHER JUSTIN <a href="http://www.newyorker.com/wp-content/uploads/2016/03/Borowitz-Justin-Trudeau.jpg">« TROGNON »</a> TRUDEAU</strong></s><br>
<b style="font-size:0.93em">(MISE À JOUR : bon, chère toute personne cherchant à<br>reformer un mode de scrutin à travers le monde)</b>
</p>
<p>
Merci d'avoir fait ce petit pas, néanmoins essentiel ! Nous savons depuis bien trop longtemps que notre mode de scrutin actuel, le Scrutin Uninominal Majoritaire, oblige les électeurs à être malhonnêtes, favorise des scénarios où les électeurs doivent choisir le « moins pire » et pénalise à la fois les favoris <em>et</em> les petits candidats.
</p>
<p>
Néanmoins, vous ne considérez probablement que le Vote Alternatif qui est, pour être honnête, <em>meilleur</em> que le Scrutin Majoritaire. Si vous n'avez le choix qu'entre ces deux-là, <em>c'est sûr</em>, prenez le Vote Alternatif. Mais le <abbr title="Vote Alternatif">VA</abbr> a un bug aussi antidémocratique que le <abbr title="Scrutin Uninominal Majoritaire">SUM</abbr>. Pire encore, à notre époque où la confiance n'a jamais été aussi difficile à gagner et à conserver, miser sur le manque de transparence du Vote Alternatif pourrait être mortel pour la démocratie. Certes, le Vote Alternatif était le meilleur mode de scrutin qu'on pouvait imaginer <a href="https://en.wikipedia.org/wiki/History_and_use_of_instant-runoff_voting">en 1870</a>. Depuis, le Vote Alternatif est au cœur des conversations, simplifiant involontairement tout débat autour d'une réforme du scrutin en « simple contre expressif ».
</p>
<p>
<b>Mais c'est un faux choix.</b> Grâce aux simulations informatiques, aux études sur des cas réels et à un petit groupe de geeks des maths, <b>nous connaissons désormais des modes de scrutin qui sont à la fois simples <i>et</i> permettent aux citoyens de s'exprimer.</b>
</p>
<p>
<i>En ce qui me concerne</i>, je penche pour le Vote par Valeurs. C'est simple, ça permet aux gens d'expliquer ce qu'ils pensent, et ça ne dépaysera pas celui ou celle qui a déjà voté pour un produit sur Amazon ou mis une note sur cinq étoiles sur YouTube. C'est mon humble opinion. Vous pouvez également envisager le Vote par Approbation parce qu'il est plus <i>pratique</i>, encore plus simple, et compatible avec la façon <i>dont on vote déjà aujourd'hui</i>. Tout ce que vous auriez à faire est de changer la consigne de « Votez pour la ou le candidat de votre choix » en « Votez pour le<b class="underline">s</b> candidat<b class="underline">s</b> de votre choix ».
</p>
<p>
<em>Ou peut-être que je me plante sur le Scrutin Uninominal Majoritaire et qu'en fait c'est plutôt cool.</em> Hey ! Vous pourriez même choisir la méthode de Borda pour blaguer un peu.
</p>
<p>
Je ne vais pas prétendre savoir quel système est le meilleur. Je suis prêt à en discuter aussi longtemps <em>qu'il le faudra</em> pour trois raisons :
</p>
<p>
1) Si je prétends qu'un système est le meilleur, point barre, j'aurais tous les tarés de la théorie du choix social sur le cul, me criant « MAIS NICKY, EST-CE QUE T'AS PENSÉ AU <a href="http://www.law.uchicago.edu/faculty/research/eric-posner-quadratic-vote-buying-efficient-corporate-governance/qanda">VOTE QUADRATIC ?</a> »
</p>
<p>
2) Nous avons encore besoin de tester ces modes de scrutin avec <em>de vrais cas de figure</em>, et pas uniquement nous reposer sur des <span style="text-decoration:line-through">discussions enflammées mais ennuyeuses entre partisans du Scrutin Majoritaire et partisans du Vote Alternatif sur Internet</span> théories. Une raison de plus pour que les petites villes, les régions, et des pays comme le Canada soient, par leurs expérimentations courageuses, des <em>pionniers</em>.
</p>
<p>
3) Continuer à discuter des choses, c'est <em>l'essence</em> de la démocratie.
</p>
<p>
<a href="http://www.journalofdemocracy.org/article/danger-deconsolidation-democratic-disconnect">Une étude récente</a> a déterminé que dans les pays occidentaux, de la Suède à l'Australie en passant par les États-Unis, les voix en faveur de la démocratie <em>se font de plus en plus rares</em>. En 2011, presque <em>un quart</em> des jeunes Américains pensaient que la démocratie était une « mauvaise », voire une « très mauvaise » façon de diriger un pays. <em>Aujourd'hui</em>, un américain sur six trouve que si le pays était placé sous la <em>loi martiale</em>, cela sera « bien » ou « très bien ».
</p>
<p>
Cette méfiance vis-à-vis de la démocratie trouve ses fondements dans <em>bien plus</em> que juste les détails techniques de nos modes de scrutin. Il n'y aura pas de tour de magie capable de réparer ça. Une première étape, à notre portée, serait de dire que <em>oui</em>, on peut faire en sorte que le système soit plus réceptif aux besoins, aux douleurs, aux espoirs et aux rêves des gens. Pourquoi ne pas commencer par le mode de scrutin ?
</p>
<p>
Parce qu'au fond, il ne s'agit pas uniquement du mode de scrutin.
</p>
<p>
Il s'agit de construire une meilleure <em>démocratie</em>.
</p>
<p>
<strong><3,</strong><br>
<b>~ Nicky Case (traduit par <a href="https://twitter.com/xDEADC0DE" title="Compte Twitter de xDEADC0DE">xDEADC0DE<a> et <a href="https://github.com/borisschapira" title="Compte Github de Boris Schapira">Boris Schapira<a>)</b>
</p>
<hr>
<p>
<strong>P.S. :</strong> vous avez lu et joué jusque-là, vous méritez bien un petit bonus ! Voici un simulateur d'élection en mode bac à sable, avec jusqu'à <em>cinq</em> candidats. Vous pouvez sauvegarder et partager votre scénario personnalisé avec les autres. Bonne simu !
</p>
</div>
<!-- - - - - - - - -
PART IV:
SANDBOX
- - - - - - - - - -->
<div id="sandbox">
<div class="sim-sandbox">
<h1 class="caption-test" style="margin: 30px 0 15px 0;">BAC À SABLE ! <a href="sandbox">(lien direct vers <em>juste</em> ça)</a></h1>
<iframe src="sandbox/sandbox.html" width="802" height="508" scrolling="no"></iframe>
</div>
<div class="words">
<p>
Si j'ai créé ce bac à sable, c'est dans l'espoir que les lecteurs puissent échanger et débattre en l'utilisant. Pas seulement pour me dire que j'ai tort, mais pour <em>me le montrer</em>. Par exemple, <a href="sandbox?m=%7B%22s%22%3A%22SUM%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%22Voici%20ce%20que%20je%20pense%20%C3%AAtre%20un%20des%20plus%20gros%20challenges%20que%20doivent%20relever%20les%20votes%20par%20approbation%20ou%20valeurs.%202%2F3%20des%20votants%20n%27aiment%20pas%20du%20tout%20les%20candidats%2C%20mais%20d%C3%A9testent%20un%20peu%20moins%20Camille%20Carr%C3%A9.%20Cependant%2C%201%2F3%20des%20votants%20ADORE%20Th%C3%A9o%20Triangle%20et%20DETESTE%20Camille%20Carr%C3%A9.%20Avec%20SUM%2C%20VA%20et%20Condorcet%2C%20Carr%C3%A9%20gagne%20parce%20qu%27une%20majorit%C3%A9%20de%20gens%20la%20pr%C3%A9f%C3%A8re%20un%20tout%20petit%20peu.%20Mais%20avec%20les%20votes%20par%20approbation%20ou%20valeurs%2C%20c%27est%20Th%C3%A9o%20Triangle%20qui%20gagne%20parce%20qu%27il%20est%20tr%C3%A8s%20aim%C3%A9%20d%27une%20%20minorit%C3%A9.%20Est-ce%20que%20%C3%A7a%20vous%20semble%20BON%20%3F%20Est-ce%20que%20%C3%A7a%20trahit%20la%20d%C3%A9mocratie%20ou%20est-ce%20que%20%C3%A7a%20la%20sauve%20de%20la%20tyrannie%20de%20la%20majorit%C3%A9%20%3F%20C%27est%20m%C3%AAme%20pas%20une%20question%20th%C3%A9orique%2C%20c%27est%20carr%C3%A9ment%20de%20la%20*philo*.%22%7D">
voici un modèle que j'ai construit dans le mode Bac à Sable,
qui marque des points <em>contre</em> le vote par Approbation et le Vote par Valeurs</a>. OK, l'outil est super limité, il ne gère pas les votes stratégiques et l'information imparfaite mais c'est un début, et il peut améliorer nos discussions démocratiques !
</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:73px; height:97px; color:#fff; position: relative; left: -5px; line-height: 1em; text-align: center;"><b>DOMAINE PUBLIC</b></div>
<a href="https://creativecommons.org/publicdomain/zero/1.0/deed.fr" rel="license" target="_blank">Aucun droit réservé</a>. Je donne mon œuvre, mon code, mes mots pour que les professeurs, mathématiciens, passionnés, activistes, et conseillers politiques puissent les utiliser comme bon leur semble ! C'est fait pour.
<a href="https://github.com/ncase/ballot" target="_blank">Voici le code source d'origine, pour la version anglaise</a> et <a href="https://github.com/xdeadc0de/ballot-fr" target="_blank">voici la version française que vous consultez en ce moment et qui obéit aux mêmes règles</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>
-->
</body>
<script src="js/index.js"></script>
</html>