Jadual Kandungan
可视化部分新增内容:矩形树图
矩形树图(treemap)简介
矩形树图的应用
使用echarts实现treemap
网站布局设计
以上是新闻地图此次迭代的主要内容。
Rumah hujung hadapan web html tutorial 新闻地图迭代内容简介_html/css_WEB-ITnose

新闻地图迭代内容简介_html/css_WEB-ITnose

Jun 24, 2016 am 11:29 AM

新闻地图本次迭代主要对图表的内容进行增加以及视觉设计进行修改。

可视化部分新增内容:矩形树图

矩形树图(treemap)简介

treemap由马里兰大学教授Ben Shneiderman于上世纪90年代提出,起初是为了找到一种有效了解磁盘空间使用情况的方法。

教授首先想到的是用树状结构来表示,但是这样图表会太占空间。那么如何在受限空间内展示树状数据结构呢?Ben教授想利用面积来表示文件大小,但是用矩形、三角形还是圆形都有一定的问题。

正当Ben教授在休息室中思考时,突然“Aha”,想到了将屏幕交替切分为水平和垂直方向的矩形,用递归来实现层级关系。教授花了几天时间验证这个想法,并完成了只有六行的算法。算法和最初的设计发表在1992年1月的《ACM Transactions on Graphics》上。

作者:Xhinking 链接:http://zhuanlan.zhihu.com/datavis/19894525 来源:知乎

在矩形树图中,每个节点都有名字和相应的大小。如果用矩形树图表示我们熟悉的文件目录列表,那么叶子节点的大小就能表示各个文件的体积,父节点就能表示文件夹的体积也就是它包含的文件体积之和

矩形树图的应用

很多磁盘管理App使用Treemap帮助用户可视化磁盘状况。如Mac平台上的Disk Map for Mac,windows的spacesniffer。

使用echarts实现treemap

  • 引入echarts

ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器。因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html><html><header>    <meta charset="utf-8">    <!-- 引入 ECharts 文件 -->    <script src="echarts.min.js"></script></header></html>
Salin selepas log masuk
  • 动态加载所需图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 dom 容器。

<body>    <!-- 为 ECharts 准备一个具备大小(宽高)的Dom -->    <div id="main" style="width: 600px;height:400px;"></div></body>
Salin selepas log masuk

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成相应类型的图表。

网站布局设计

新版新闻地图使用了基于bootstrap3的 AdminLTE前端框架,它完全响应式的特点使得基于其构建的网站适合从小型移动设备到大型台式机很多的屏幕分辨率,且AdminLTE高度可定制的,易于使用。 通过对新闻数据数量、区域、事件类型、影响力的属性,我们将分析图标安排在不同的页面,比之前一次迭代的版本更加有条理性,直观性。

  • 数量分析页面

通过扇形图统计上个月热点省市的新闻数量以及2015年全年主要省份的新闻数量。

  • 事件分析页面

gdelt数据的新闻类型有几种分类方法。其中一种将所有事件分为四类:口头合作、物质合作、口头冲突、物质冲突,我们通过堆叠区域图将去年全年每个月各类事件发生的情况进行统计。

另外还有一种更为详细的分类规则,在这个规则下,事件被分为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

我们通过桑基图(sankey diagram)向用户展现分类之间的关系,通过矩阵图(matrix diagram/treemap)向用户展现各种分类下新闻事件的数量比较。

  • 影响力分析页面

每个事件都有一个影响力大小的值,根据事件的地理坐标我们可以通过计算得出某一个地区在一段时间内所有新闻产生的影响力大小的总和,记作该地区的影响力,通过热力图可以看出中国各地区该数值的分布。另外我们还分析了热点城市新闻发生的数量与影响力的关系,通过一张多元化的表格加以呈现。

  • 全球分析页面

gdelt提供了全球数据,我们为了扩充新闻地图网的实用性,对这些数据也加以分析利用。通过地图和柱状图两种形式统计了去年全年内各国和几大洲的新闻发生情况,可以较为直观的看出大体的趋势。

以上是新闻地图此次迭代的主要内容。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Mar 12, 2025 pm 04:05 PM

Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Mar 20, 2025 pm 05:56 PM

Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

See all articles