3
A
答えて
4
をtreemapping ツリーマップ/を検索します。これはWikipediaはそれらを記述する方法である：
「情報の可視化およびコンピューティングにおいて、treemappingは、ネストされた長方形を使用して階層データを表示する方法である[...]
ツリーマップは、（ツリー構造の階層表示します。 ）データを、 のネストされた矩形の集合として表し、ツリーの各枝には矩形が与えられ、 は、その部分枝を表す小さな矩形でタイル張られている。 葉ノードの矩形は、 "
この手法を使用する注目すべきツールは、WinDirStatです。彼らのウェブサイトはまた、この種の視覚化をツリーマップとして参照しています。
この用語を使用すると、a web searchを実行するだけで簡単にJavaScriptライブラリを見つけることができます。 （私はそれらを使用していないので、以下のいずれかをお勧めできませんが、リンクされたGoogleの検索では、最初の結果ページでjsTreemap、Plotly.js、Google Chartsなどが検索されます）
Ifあなたはこれらの図の背後にあるアルゴリズム（複数可）についての興味が、これらの論文は、参考になります。
3
これはtreemapと呼ばれ、ZingChartはそれを持つJavaScriptチャーミングライブラリです。これは、階層データをグラフ化するのに便利な方法です。また、ユーザーがツリーマップにさらにドリルダウンできるので、ユーザーとの対話も可能です。以下のデモをご覧ください。
var myConfig = {
"graphset":[
{
"type":"treemap",
"plotarea":{
"margin":"0 0 30 0"
},
"tooltip":{
},
"options":{
},
"series":[
{
"text":"North America",
"children":[
{
"text":"United States",
"children":[
{
"text":"Texas",
"value":21
},
{
"text":"California",
"value":53
},
{
"text":"Ohio",
"value":12
},
{
"text":"New York",
"value":46
},
{
"text":"Michigan",
"value":39
},
{
"text":"Alabama",
"value":25
}
]
},
{
"text":"Canada",
"value":113
},
{
"text":"Mexico",
"value":78
}
]
},
{
"text":"Europe",
"children":[
{
"text":"France",
"value":42
},
{
"text":"Spain",
"value":28
},
{
"text":"Switzerland",
"value":13
},
{
"text":"Germany",
"value":56
},
{
"text":"Cyprus",
"value":7
}
]
},
{
"text":"Africa",
"children":[
{
"text":"Egypt",
"value":22
},
{
"text":"Congo",
"value":38
},
{
"text":"Lesotho",
"value":9
}
]
},
{
"text":"Asia",
"children":[
{
"text":"India",
"value":92
},
{
"text":"China",
"value":68
},
{
"text":"Mongolia",
"value":25
}
]
},
{
"text":"South America",
"children":[
{
"text":"Brazil",
"value":42
},
{
"text":"Argentina",
"value":28
},
{
"text":"Peru",
"value":15
},
{
"text":"Uruguay",
"value":33
}
]
},
{
"text":"Australia (continent)",
"children":[
{
"text":"Australia (country)",
"value":121
},
{
"text":"New Zealand",
"value":24
}
]
}
]
}
]
};
zingchart.render({
\t id : 'myChart',
\t data : myConfig,
\t height: 400,
\t width: 600
});<head>
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script>zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
\t \t ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script>
\t </head>
\t <body>
\t \t <div id='myChart'></div>
\t </body>免責事項：私はZingChartチームのです。あなたはもっと質問があれば教えてください。ありがとう！
関連する問題
- 1. グラフの変換 - その名前は何ですか？
- 2. このタイプの名前は何ですか？私のアプリで
- 3. 誰かがこのコントローラの名前は何ですか？
- 4. Pythonでこの演算子 "_"の名前は何ですか？
- 5. このハッシュテーブルの最適化の名前は何ですか？
- 6. AppKitのこのコンポーネントの名前は何ですか？
- 7. このタイプの演算子の名前は何ですか： '+ ='、 ' - ='
- 8. このレイアウトスタイルの名前は何ですか？
- 9. このパターンの名前は何ですか？
- 10. このJavaウィジェットの名前は何ですか？
- 11. この問題の名前は何ですか？
- 12. この同期方法の名前は何ですか？
- 13. この「スクロール」の名前は何ですか？
- 14. この正規表現の名前は何ですか？
- 15. このインターフェースの最適な名前は何ですか？
- 16. このプログラミングルールの名前は何ですか？
- 17. この「仲介」パターンの名前は何ですか？
- 18. この要素の名前は何ですか？
- 19. このツリーの名前は何ですか？
- 20. この週番号アルゴリズムの名前は何ですか？
- 21. このコンセプトの名前は何ですか？
- 22. このゲームの名前は何ですか？
- 23. このIDEの名前は何ですか？
- 24. これをプログラミングする際の名前は何ですか？
- 25. 逆レンズの名前は何ですか？
- 26. リムーバブルボタンの名前は何ですか？
- 27. スイングコンポーネントの名前プロパティは何ですか？
- 28. ポリゴンマスキングの名前は何ですか？
- 29. グラフ/グラフのjsプラグインは何ですか？
- 30. このアンチパターンの名前は何ですか？メソッドシグネチャは嘘つきです