ニュース マップのイテレーションの概要 content_html/css_WEB-ITnose
ニュース マップのこの反復では、主にグラフにコンテンツを追加し、ビジュアル デザインを変更します。
視覚化部分の新しいコンテンツ: 長方形ツリーマップ
長方形ツリーマップ (ツリーマップ) の紹介
ツリーマップは、もともとディスクを理解する効果的な方法を見つけるために、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 は、ニュース マップ ネットワークの実用性を拡張するために、これらのデータも分析して活用します。地図と棒グラフを通じて、昨年を通じてさまざまな国や大陸のニュース統計をより直感的に見ることができます。
上記は、今回のニュース マップの主な内容です。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7569
15
1386
52
87
11
28
107
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
