Check this sweet data out:
\n \n\n \n \n\n```\n\nOuf ! Encore une fois, vous n’avez pas à vous soucier de ce que fait la plus grande partie de ce code. La partie qui nous intéresse ici est une ligne située en haut (`var data = <%= languages %>;`) qui indique que nous passons notre tableau `languages` dans ERB afin de le manipuler.\n\nComme le suggère le guide « D3 for Mortals », ce n’est pas nécessairement la meilleure façon d’utiliser D3. Toutefois, cela sert à montrer comment utiliser la bibliothèque, ainsi que Octokit, pour réaliser des choses vraiment étonnantes.\n\n## Combinaison de différents appels d’API\n\nMaintenant, nous devons vous dire quelque chose : l’attribut `language` qui se trouve dans les dépôts identifie uniquement le langage « principal » défini. Cela signifie que si vous disposez d’un dépôt qui combine plusieurs langages, celui avec le plus d’octets de code sera considéré comme le langage principal.\n\nNous allons combiner quelques appels d’API pour obtenir une *vraie* représentation du langage qui a le plus grand nombre d’octets écrits dans l’ensemble du code. Le [compartimentage](https://www.d3-graph-gallery.com/treemap.html) est un excellent moyen de visualiser la taille des langages de codage utilisés, plutôt que leur nombre. Nous devons construire un tableau d’objets qui ressemble à ceci :\n\n```json\n[ { \"name\": \"language1\", \"size\": 100},\n { \"name\": \"language2\", \"size\": 23}\n ...\n]\n```\n\nÉtant donné que nous avons déjà la liste des dépôts ci-dessus, examinons chacun d’eux avant d'appeler le [point de terminaison GET /repos/{owner}/{repo}/languages](/fr/rest/repos/repos#list-repository-languages) :\n\n```ruby\nrepos.each do |repo|\n repo_name = repo.name\n repo_langs = octokit_client.languages(\"#{github_user.login}/#{repo_name}\")\nend\n```\n\nÀ présent, nous allons ajouter cumulativement chaque langage trouvé à une liste de langages :\n\n```ruby\nrepo_langs.each do |lang, count|\n if !language_obj[lang]\n language_obj[lang] = count\n else\n language_obj[lang] += count\n end\nend\n```\n\nAprès cela, nous allons mettre en forme le contenu dans une structure que D3 comprend :\n\n```ruby\nlanguage_obj.each do |lang, count|\n language_byte_count.push :name => \"#{lang} (#{count})\", :count => count\nend\n\n# some mandatory formatting for D3\nlanguage_bytes = [ :name => \"language_bytes\", :elements => language_byte_count]\n```\n\n(Pour plus d’informations sur la magie des cartes arborescentes D3, consultez [ce tutoriel simple](/fr/rest/repos/repos#list-repository-languages).)\n\nPour terminer, nous allons passer ces informations JSON au même modèle ERB :\n\n```ruby\nerb :lang_freq, :locals => { :languages => languages.to_json, :language_byte_count => language_bytes.to_json}\n```\n\nComme tout à l’heure, voici un ensemble de JavaScript que vous pouvez ajouter directement dans votre modèle :\n\n```html\n\n\n```\n\nEt voilà ! De beaux rectangles contenant les langages de vos dépôts, avec des proportions relatives qui sont compréhensibles en un coup d’œil. Pour que toutes les informations s’affichent correctement, vous devrez peut-être ajuster la hauteur et la largeur de votre carte arborescente, passées comme les deux premiers arguments à `drawTreemap` ci-dessus."}