ホームページ >ウェブフロントエンド >htmlチュートリアル >ニュース マップのイテレーションの概要 content_html/css_WEB-ITnose
ニュース マップのイテレーションの概要 content_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:29:17988ブラウズ
ニュース マップのこの反復では、主にグラフにコンテンツを追加し、ビジュアル デザインを変更します。
視覚化部分の新しいコンテンツ: 長方形ツリーマップ
長方形ツリーマップ (ツリーマップ) の紹介
ツリーマップは、もともとディスクを理解する効果的な方法を見つけるために、1990 年代にメリーランド大学の教授であるベン・シュナイダーマンによって提案されました。スペースの利用方法。
教授が最初に考えたのは、ツリー構造を使用してそれを表現することでしたが、この図はスペースを取りすぎます。では、限られたスペースにツリー状のデータ構造を表示するにはどうすればよいでしょうか?ベン教授はファイル サイズを表現するために面積を使用したいと考えていますが、長方形、三角形、または円を使用する場合には特定の問題があります。
ベン教授がラウンジで考え事をしているときに、突然「ああ」と思いつき、画面を縦横の長方形に交互に分割し、再帰を使って階層関係を実現するというアイデアを思いつきました。教授は数日をかけてアイデアを検証し、わずか 6 行のアルゴリズムを完成させました。アルゴリズムと元の設計は、1992 年 1 月に「ACM Transactions on Graphics」に掲載されました。
著者: Xhinking リンク: http://zhuanlan.zhihu.com/datavis/19894525 出典: Zhihu
長方形ツリー図では、各ノードには名前と対応するサイズがあります。私たちがよく知っているファイル ディレクトリ リストを表すために長方形のツリー図を使用すると、リーフ ノードのサイズは各ファイルのボリュームを表すことができ、親ノードはフォルダーのボリュームを表すことができます。含まれるファイルのボリューム
長方形のツリー図 アプリケーション
多くのディスク管理アプリは、ユーザーがディスクの状態を視覚化できるようにツリーマップを使用しています。 Mac プラットフォームの Disk Map for Mac や Windows の spaceniffer など。
echarts を使用してツリーマップを実装する
- echarts を導入する
ECharts 3 では、AMD オンデマンドの使用が強制されなくなり、AMD ローダーがコードに組み込まれなくなりました。したがって、インポート方法は非常に簡単で、通常の JavaScript ライブラリと同様に script タグを使用するだけでインポートできます。
<!DOCTYPE html><html><header> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script></header></html>
- 必要なチャートの動的ロード
描画する前に、EChart 用の高さと幅を備えた dom コンテナを準備する必要があります。
<body> <!-- 为 ECharts 准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div></body>
その後、echarts.init メソッドを通じて echarts インスタンスを初期化し、setOption メソッドを通じて対応するタイプのチャートを生成できます。
Web サイトのレイアウト デザイン
News Map の新しいバージョンは、bootstrap3 に基づく AdminLTE フロントエンド フレームワークを使用しており、その完全な応答機能により、その上に構築された Web サイトは、小型のモバイル デバイスから大型のデスクトップ コンピューターまで、さまざまな画面解像度に適しています。カスタマイズ性が高く、使いやすいです。 ニュースデータの量、地域、イベントの種類、影響力の属性を通じて、分析アイコンをさまざまなページに配置し、以前のイテレーションよりも整理され直感的になりました。
- 数量分析ページ
ファン チャートを使用して、先月の注目の州や都市のニュース数と、2015 年全体の主要州のニュース数を数えます。
- イベント分析ページ
gdelt データのニュースの種類にはいくつかの分類方法があります。その 1 つは、すべてのインシデントを口頭協力、物質的協力、口頭衝突、物質的衝突の 4 つのカテゴリに分類し、積み上げ面グラフを使用して、昨年を通じて毎月さまざまな種類のインシデントの発生を集計しています。
さらに詳細な分類ルールがあり、イベントは 20 のカテゴリに分類され、各カテゴリにはいくつかのカテゴリがあります。詳細な説明リンク: http://gdeltproject.org/data/lookups/CAMEO.eventcodes.txt?plg_nld=1&plg_uin=1&plg_auth=1&plg_nld=1&plg_usr=1&plg_vkey=1&plg_dev=1
サンキー図を使用してユーザーに関係を表示しますマトリックス ダイアグラム/ツリーマップを使用して、さまざまなカテゴリのニュース イベント数の比較をユーザーに表示します。
- 影響分析ページ
各イベントには影響値があり、イベントの地理的座標に従って、期間内のすべてのニュースの影響力の合計を計算できます。中国のさまざまな地域におけるこの値の分布をヒート マップで確認できます。また、ホットな都市におけるニュースの数と影響力の関係も分析し、多角的に表で提示しました。
- グローバル分析ページ
gdelt は、ニュース マップ ネットワークの実用性を拡張するために、これらのデータも分析して活用します。地図と棒グラフを通じて、昨年を通じてさまざまな国や大陸のニュース統計をより直感的に見ることができます。