https://nichub.github.io/microclub/tags/d3/ Recent content in D3 on MICRoCLUB Hugo -- gohugo.io fr-CH © 2026 Microclub Fri, 09 Oct 2026 17:59:59 +0200 https://nichub.github.io/microclub/2012/11/21/graphiques-au-look-xkcd-en-javascript-avec-d3/ Wed, 21 Nov 2012 19:58:51 +0100 https://nichub.github.io/microclub/2012/11/21/graphiques-au-look-xkcd-en-javascript-avec-d3/ <p><em>Article original sur  <a href="http://dan.iel.fm/xkcd/" target="_blank" rel="noreferrer">dan.iel.fm</a>  <a href="http://www.scoop.it/t/algos/p/3427052977/graphiques-au-look-xkcd-en-javascript-avec-d3" target="_blank" rel="noreferrer">Scoop.it</a>é et traduit par Goulu sur  <a href="http://www.scoop.it/t/algos" target="_blank" rel="noreferrer">Algos</a> :</em></p> <p>Inspiré par <a href="http://jakevdp.github.com/blog/2012/10/07/xkcd-style-plots-in-matplotlib/" target="_blank" rel="noreferrer">cet article de blog</a> et le commentaire de Mike Bostoc <a href="http://news.ycombinator.com/item?id=4597977" target="_blank" rel="noreferrer">sur ce forum</a>, <a href="http://dan.iel.fm/" target="_blank" rel="noreferrer">Dan Foreman-Mackey</a> a décidé de faire un <a href="http://xkcd.com/1064/" target="_blank" rel="noreferrer">style de graphique XKCD</a> en Javascript en utilisant <a href="http://d3js.org/" target="_blank" rel="noreferrer">D3</a> et une <a href="http://bl.ocks.org/3310323" target="_blank" rel="noreferrer">fonction d’interpolation maison</a>. Il a aussi essayé d’utiliser le <a href="http://bost.ocks.org/mike/chart/" target="_blank" rel="noreferrer">paradigme  « reusable chart » de D3</a>.</p> <p>Vous devriez vraiment regarder le <a href="http://bl.ocks.org/3914862" target="_blank" rel="noreferrer">code source</a>.</p> <p>Voici un exemple:</p> <p><a href="http://www.scoop.it/t/algos/p/3427052977/graphiques-au-look-xkcd-en-javascript-avec-d3" target="_blank" rel="noreferrer"><figure><img class="my-0 rounded-md" loading="lazy" decoding="async" fetchpriority="low" alt="" src="http://img.scoop.it/1cBpc4BongRLCxMK7fnIeDl72eJkfbmt4t8yenImKBXEejxNn4ZJNZ2ss5Ku7Cxt" ></figure> </a></p> <h2 class="relative group"> <a class="heading-self-link" href="#commentaires">Commentaires <!-- Ajoutez un commentaire ci-dessous sous la forme : ### Votre nom — AAAA-MM-JJ --></a> <div id="commentaires" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none"> <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#commentaires" aria-label="Ancre">#</a> </span> </h2>