Check this sweet data out:
\n \n\n \n \n\n```\n\nPuh! Noch einmal, mache dir sich keine Sorgen darüber, was der Großteil dieses Codes tut. Der relevante Teil hier ist eine Zeile am Anfang--`var data = <%= languages %>;`--die angibt, dass wir unser zuvor erstelltes `languages`-Array zur Manipulation an ERB übergeben.\n\nWie der Leitfaden „D3 für Sterbliche“ andeutet, ist dies nicht unbedingt die beste Anwendung von D3. Aber es dient dazu, zu veranschaulichen, wie du die Bibliothek zusammen mit Octokit verwenden kannst, um einige wirklich erstaunliche Dinge zu machen.\n\n## Kombinieren verschiedener API-Aufrufe\n\nJetzt ist es Zeit für ein Geständnis: Das `language`-Attribut innerhalb von Repositories identifiziert nur die als „primär“ definierte Sprache. Das bedeutet, wenn du über ein Repository verfügst, das mehrere Sprachen kombiniert, wird dies mit den meisten Bytes des Codes als primäre Sprache betrachtet.\n\nKombinieren wir einige API-Aufrufe, um eine *echte* Darstellung davon zu erhalten, in welcher Sprache die größte Anzahl von Bytes in unserem gesamten Code geschrieben wurde. Eine [Baumstruktur](https://www.d3-graph-gallery.com/treemap.html) sollte eine hervorragende Möglichkeit sein, die Größen unserer verwendeten Codierungssprachen statt nur die Anzahl zu visualisieren. Wir müssen ein Array von Objekten konstruieren, das wie in etwa so aussieht:\n\n```json\n[ { \"name\": \"language1\", \"size\": 100},\n { \"name\": \"language2\", \"size\": 23}\n ...\n]\n```\n\nDa wir bereits über eine Liste der Repositorys verfügen, sehen wir sie uns einmal genauer an und rufen den [Endpunkt „GET /repos/{owner}/{repo}/languages“](/de/rest/repos/repos#list-repository-languages) auf:\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\nVon dort aus fügen wir jede gefundene Sprache kumulativ einer Liste von Sprachen hinzu.\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\nDanach werden wir den Inhalt in eine Struktur formatieren, die D3 versteht:\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(Weitere Informationen zu D3 Tree Map Magic findest du in [diesem einfachen Lernprogramm](/de/rest/repos/repos#list-repository-languages).)\n\nZum Umschließen übergeben wir diese JSON-Informationen an dieselbe ERB-Vorlage:\n\n```ruby\nerb :lang_freq, :locals => { :languages => languages.to_json, :language_byte_count => language_bytes.to_json}\n```\n\nWie zuvor siehst du hier eine Reihe von JavaScripts, die du direkt in deine Vorlage ablegen kannst:\n\n```html\n\n\n```\n\nEt voila! Schöne Rechtecke, die deine Repositorysprachen enthalten, mit relativen Proportionen, die auf einen Blick leicht zu erkennen sind. Möglicherweise musst du die Höhe und Breite deiner Treemap anpassen, die als die ersten beiden `drawTreemap`-Argumente oben übergeben wurden, damit alle Informationen korrekt angezeigt werden."}