Check this sweet data out:
\n \n\n \n \n\n```\n\nお疲れさまでした。 このコードが何をしているか詳しく知る必要はありません。 ここで重要なのは、一番上の行の `var data = <%= languages %>;` の部分です。これは、以前に作成した `languages` の行列を、操作のため ERB に渡すことを示しています。\n\n「一般の方向けの D3」ガイドで示されているように、これは必ずしも D3 の最善の利用法ではありません。 しかし、Octokit と一緒にライブラリを使用して、本当に素晴らしいものを作る方法を説明するのには役立ちます。\n\n## さまざまなAPI呼び出しの組み合わせ\n\nここで、告白をしなくてはいけません。リポジトリ内の `language` 属性が識別するのは、\"プライマリ\" 言語として定義されたものだけです。 つまり、複数の言語を組み合わせたリポジトリでは、コードのバイト数が最も多い言語がプライマリ言語と見なされます。\n\nいくつかの API 呼び出しを組み合わせて、コード全体で記述されたバイト数が最も多い言語を *正確に* 表したものを取得してみましょう。 使用されているコード言語のサイズを視覚化する方法としては、単純なカウントよりも[ツリーマップ](https://www.d3-graph-gallery.com/treemap.html)の方が適しています。 次のようなオブジェクトの配列を構築する必要があります。\n\n```json\n[ { \"name\": \"language1\", \"size\": 100},\n { \"name\": \"language2\", \"size\": 23}\n ...\n]\n```\n\n既に上でリポジトリのリストを取得しているので、それぞれを調べて、[GET /repos/{owner}/{repo}/languages endpoint](/ja/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そこから、見つかった各言語を言語のリストに次々に追加していきます。\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\nそれから、コンテンツをD3が理解できる構造にフォーマットします。\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(D3 のツリーマップの魅力について詳しくは、[このシンプルなチュートリアル](/ja/rest/repos/repos#list-repository-languages)をご確認ください。)\n\n仕上げに、このJSON情報を同じERBテンプレートに渡します。\n\n```ruby\nerb :lang_freq, :locals => { :languages => languages.to_json, :language_byte_count => language_bytes.to_json}\n```\n\n前と同じように、テンプレートに直接取り入れることができる一連の JavaScript を以下に示します。\n\n```html\n\n\n```\n\nこれで一丁あがり! リポジトリの言語を含む美しい長方形が示されます。大きさは言語の割合に比例していて、一目でわかりやすくなっています。 すべての情報を正しく表示するためには、上記で渡した `drawTreemap` に対する最初の 2 つの引数で、ツリーマップの高さと幅の調整が必要になる場合があります。"}