<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Visualisation | Dr. Goulu</title><link>https://drgoulu.com/tags/visualisation/</link><atom:link href="https://drgoulu.com/tags/visualisation/index.xml" rel="self" type="application/rss+xml"/><description>Visualisation</description><generator>HugoBlox Kit (https://hugoblox.com)</generator><language>fr-FR</language><lastBuildDate>Sat, 19 Jan 2013 00:00:00 +0000</lastBuildDate><image><url>https://drgoulu.com/media/icon_hu_eee4a95885829ab2.png</url><title>Visualisation</title><link>https://drgoulu.com/tags/visualisation/</link></image><item><title>Comment bien brasser les cartes</title><link>https://drgoulu.com/2013/01/19/comment-bien-brasser-les-cartes/</link><pubDate>Sat, 19 Jan 2013 00:00:00 +0000</pubDate><guid>https://drgoulu.com/2013/01/19/comment-bien-brasser-les-cartes/</guid><description>&lt;p&gt;Les amateurs de jeux de cartes savent qu&amp;rsquo;il faut accorder beaucoup d&amp;rsquo;attention au brassage des cartes pour éviter la triche, mais qu&amp;rsquo;en est-il par exemple dans les jeux de poker en ligne ?&lt;/p&gt;
&lt;p&gt;Les informaticiens se sont beaucoup
, mais relativement peu sur les problèmes de brassage, moins fréquents et apparemment plus simples. Mais comme disait
 : &amp;ldquo;il faut se méfier des appâts rances&amp;rdquo; ©&amp;hellip;&lt;/p&gt;
&lt;p&gt;Examinons pour commencer un algorithme tout bête que j&amp;rsquo;avoue avoir utilisé plusieurs fois  : on échange la première carte (ou donnée) avec une autre choisie au hasard parmi les N cartes*, puis on fait de même pour la 2ème carte, la 3ème et ainsi de suite jusqu&amp;rsquo;à la N-ième. Cette méthode semble réunir toutes les caractéristiques d&amp;rsquo;un bon algorithme : simplicité, rapidité, et efficacité.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;(Si vous avez un vrai browser, 
. C&amp;rsquo;est ma première oeuvre faite avec
, fortement inspirée de
, et que j&amp;rsquo;essaie désespérément d&amp;rsquo;inclure directement dans cet article&amp;hellip;)&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Et pourtant, un tel brassage s&amp;rsquo;avère &amp;ldquo;biaisé&amp;rdquo; : toutes les
 possibles n&amp;rsquo;ont pas la même probabilité d&amp;rsquo;être produites. Déjà en ne brassant que N=3 cartes par cette méthode, 3 des 6 permutations possibles sont nettement moins probables que les 3 autres  
.&lt;/p&gt;
&lt;figure class="alignright" style="max-width: 240px; width: 100%;"&gt;&lt;a href="http://bost.ocks.org/mike/shuffle/compare.html" target="_blank" rel="noopener"&gt;&lt;img src="https://drgoulu.com/posts/2013/images/fdd88ca55a8f211b9fc8f978d988744c_hu_42fde1d106c510f.webp" srcset="https://drgoulu.com/posts/2013/images/fdd88ca55a8f211b9fc8f978d988744c_hu_42fde1d106c510f.webp 240w" sizes="(max-width: 640px) 100vw, 240px" alt="biais naïve swap (i ↦ random)" loading="lazy" class="rounded-lg shadow-sm w-full h-auto" data-zoomable /&gt;&lt;/a&gt;&lt;figcaption&gt;biais naïve swap (i ↦ random)&lt;/figcaption&gt;&lt;/figure&gt;
&lt;p&gt;Avec N=60 cartes, ce biais est bien visible sur la figure ci-contre, produite par une autre 
  en ligne
. Elle effectue 10'000 mélanges avec le même algo, compte dans une matrice le nombre de fois ou la i-ième carte se retrouve à la j-ième position après le brassage, et représente les
 positifs en vert et les négatifs en rouge.&lt;/p&gt;
&lt;p&gt;La variante &amp;ldquo;swap (random ↦ random)&amp;rdquo; dans laquelle on échange N fois 2 cartes choisies au hasard n&amp;rsquo;est pas meilleure : elle présente un biais positif sur la diagonale (i=j) qui s&amp;rsquo;atténue si on effectue 2N échanges, et disparaît presque pour 3N échanges.&lt;/p&gt;
&lt;p&gt;Signifierait-ce qu&amp;rsquo;il faut plus de N opérations pour obtenir un &amp;ldquo;bon&amp;rdquo; brassage de N cartes ? On pourrait le penser car il existe un algorithme tout simple sans biais : extraire successivement des cartes prises au hasard dans le tas pour en constituer un deuxième, mais il nécessite N.log(N) opérations***, voire N² s&amp;rsquo;il est mal programmé
. Or N.log(N) est la complexité des algorithmes de tri, donc on pourrait avoir l&amp;rsquo;idée aussi surprenante que séduisante de se faire un brassage en utilisant
 auquel on passe une fonction aléatoire comme critère de tri.&lt;/p&gt;
&lt;p&gt;C&amp;rsquo;est tellement beau que j&amp;rsquo;exhibe même ici le petit bout de code Javascript qui fait ça:&lt;/p&gt;
\[source language="javascript"\]&lt;p&gt; function shuffle(array) { array.sort(function() {return Math.random() - .5}); }&lt;/p&gt;
\[/source\]&lt;figure class="alignright" style="max-width: 240px; width: 100%;"&gt;&lt;a href="http://bost.ocks.org/mike/shuffle/compare.html" target="_blank" rel="noopener"&gt;&lt;img src="https://drgoulu.com/posts/2013/images/4515a7fe42f5229307c0f50570d991ca_hu_23c38f7925303819.webp" srcset="https://drgoulu.com/posts/2013/images/4515a7fe42f5229307c0f50570d991ca_hu_23c38f7925303819.webp 239w" sizes="(max-width: 640px) 100vw, 240px" alt="biais sort (random comparator)" loading="lazy" class="rounded-lg shadow-sm w-full h-auto" data-zoomable /&gt;&lt;/a&gt;&lt;figcaption&gt;biais sort (random comparator)&lt;/figcaption&gt;&lt;/figure&gt;
&lt;p&gt;random() renvoie un nombre aléatoire entre 0 et 1, donc Math.random() - .5 tire à pile ou face si une carte est &amp;ldquo;plus grande&amp;rdquo; que l&amp;rsquo;autre lors du tri, ce qui est supposé mélanger au lieu de trier.&lt;/p&gt;
&lt;p&gt;Cette méthode produit la matrice de biais ci-contre, dont la non-trivialité me laisse pantois.&lt;/p&gt;
&lt;p&gt;Par contre, la variante dans laquelle on commence par générer un vecteur de nombres aléatoires, puis on &amp;ldquo;dé-trie&amp;rdquo; les données en utilisant ces nombres aléatoires pour les comparaisons donne un résultat non biaisé. (voir &amp;ldquo;sort (random order)&amp;rdquo; dans
)&lt;/p&gt;
&lt;p&gt;Et une fois qu&amp;rsquo;on est tout content d&amp;rsquo;avoir trouvé un algorithme de brassage non biaisé de complexité N.log(N), on découvre celui de
 datant de 1938, non biaisé, assez simple : &lt;/p&gt;
\[source language="javascript"\]&lt;p&gt; function shuffle(array) { var j = array.length, t, i; while (j) { i = Math.floor(Math.random() * j&amp;ndash;); t = array&lt;/p&gt;
\[j\]&lt;p&gt;; array&lt;/p&gt;
\[j\]&lt;p&gt; = array&lt;/p&gt;
\[i\]&lt;p&gt;; array&lt;/p&gt;
\[i\]&lt;p&gt; = t; } }&lt;/p&gt;
\[/source\]&lt;p&gt; Les 3 dernières lignes échangent les cartes en i-ième et en j-ième position tout comme dans notre premier algorithme naïf, mais ici on ne choisit la carte à échanger que parmi celles qui n&amp;rsquo;ont pas encore été traitées. Et pour des raisons de simplicité du code, on mélange le tableau &amp;ldquo;depuis la fin&amp;rdquo;.&lt;/p&gt;
&lt;p&gt;Et le plus beau est que sa
est proportionnelle à N, ce qui est in exemple de plus de l’universalité du principe de Murphy de la thermodynamique de la tartine beurrée qui dit qu&amp;rsquo;il est toujours plus facile de générer du désordre que de l&amp;rsquo;ordre.&lt;/p&gt;
&lt;p&gt;D&amp;rsquo;autre part, si vous devez brasser beaucoup de données de manière irréversible, je ne sais pas moi, pour une application de vote par internet par exemple, souvenez-vous de Fisher-Yates. Et utilisez un
 , car un
 peut non seulement souffrir de biais, mais surtout être reproductible à partir de la &amp;ldquo;graine&amp;rdquo; et permettre ainsi d&amp;rsquo;inverser le brassage.&lt;/p&gt;
&lt;p&gt;Bon, je voulais encore modéliser différentes techniques de brassage de vraies cartes en JavaScript pour déterminer combien d&amp;rsquo;opérations sont nécessaires pour obtenir un mélange sans biais, mais je préfère laisser ça en exercice pour ChipRaptor et d&amp;rsquo;autres.&lt;/p&gt;
&lt;div class="my-6 mx-auto" style="max-width: 640px; width: 100%;"&gt;
&lt;div class="w-full relative rounded-lg overflow-hidden shadow-md bg-black" style="padding-bottom: 56.25%; height: 0;"&gt;
&lt;iframe
src="https://www.youtube-nocookie.com/embed/UYmcmIgL1yA"
title="YouTube video player"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
loading="lazy"&gt;
&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3 id="notes"&gt;Notes:&lt;/h3&gt;
&lt;p&gt;Gag © Pierre-Alain de 
&lt;/p&gt;
&lt;p&gt;* et non N-1, car il faut garder une chance sur N que la carte soit &amp;ldquo;échangée avec elle même&amp;rdquo; et reste à sa place dans le tas.&lt;/p&gt;
&lt;p&gt;** félicitations au premier lecteur qui calculera les probabilités respectives de ces permutations et expliquera ainsi le biais&amp;hellip;&lt;/p&gt;
&lt;p&gt;*** parce qu&amp;rsquo;on doit alors forcément parcourir des
&lt;/p&gt;
&lt;h3 id="références"&gt;Références:&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;&lt;span id="ref-1"&gt;&lt;/span&gt;
,  &amp;ldquo;
&amp;rdquo;, 14 janvier 2012&lt;/li&gt;
&lt;li&gt;&lt;span id="ref-2"&gt;&lt;/span&gt;Mike Bostock,  &amp;ldquo;
&amp;rdquo;, 21 janvier 2012&lt;/li&gt;
&lt;li&gt;&lt;span id="ref-3"&gt;&lt;/span&gt;Jeff Atwood &amp;ldquo;
&amp;rdquo;, 2007, Coding Horror&lt;/li&gt;
&lt;/ol&gt;</description></item><item><title>reMap</title><link>https://drgoulu.com/2009/07/27/remap/</link><pubDate>Mon, 27 Jul 2009 00:00:00 +0000</pubDate><guid>https://drgoulu.com/2009/07/27/remap/</guid><description>&lt;p&gt;Le
s&amp;rsquo;accompagne de travaux intensifs sur la visualisation d&amp;rsquo;énorme quantités de données, un domaine qui combine maths (graphes, algorithmique &amp;hellip;) et art. Le site
répertorie des centaines de visualisation extrêmement variées réalisées pour des applications aussi diverses que la biologie, la
, la politique, internet et les réseaux sociaux etc.&lt;/p&gt;
&lt;p&gt;Avec toutes ces visualisations, il devenait utile de disposer d&amp;rsquo;un visualisateur de visualisations&amp;hellip; C&amp;rsquo;est ce qu&amp;rsquo;ont réalisé les infographistes de
dont j&amp;rsquo;avais déjà parlé
avec une nouvelle réalisation épatante :
.&lt;/p&gt;
&lt;p&gt;
ReMap permet de naviguer de façon interactive et animée dans
en mettant en évidence les relations entre les visualisations.&lt;/p&gt;
&lt;p&gt;Heures de navigation instructive et multicolore droit devant!&lt;/p&gt;
&lt;p&gt;source :
&lt;/p&gt;</description></item></channel></rss>