ニュースマップのイテレーションの概要 content_html/css

ニュースマップのイテレーションの概要 content_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:29:17

オリジナル

989 人が閲覧しました

ニュースマップのこの反復では、主にグラフにコンテンツを追加し、ビジュアルデザインを変更します。

視覚化部分の新しいコンテンツ: 長方形ツリーマップ

長方形ツリーマップ (ツリーマップ) の紹介

ツリーマップは、もともとディスクを理解する効果的な方法を見つけるために、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

サンキー図を使用してユーザーに関係を表示しますマトリックスダイアグラム/ツリーマップを使用して、さまざまなカテゴリのニュースイベント数の比較をユーザーに表示します。