目录
可视化部分新增内容:矩形树图
矩形树图(treemap)简介
矩形树图的应用
使用echarts实现treemap
网站布局设计
以上是新闻地图此次迭代的主要内容。
首页 web前端 html教程 新闻地图迭代内容简介_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>
登录后复制
  • 动态加载所需图表

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

<body>    <!-- 为 ECharts 准备一个具备大小(宽高)的Dom -->    <div id="main" style="width: 600px;height:400px;"></div></body>
登录后复制

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

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

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

&gt; gt;的目的是什么 元素? &gt; gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

&lt; datalist&gt;的目的是什么。 元素? &lt; datalist&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

&lt; meter&gt;的目的是什么。 元素? &lt; meter&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

我如何使用html5&lt; time&gt; 元素以语义表示日期和时间? 我如何使用html5&lt; time&gt; 元素以语义表示日期和时间? Mar 12, 2025 pm 04:05 PM

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

视口元标签是什么?为什么对响应式设计很重要? 视口元标签是什么?为什么对响应式设计很重要? Mar 20, 2025 pm 05:56 PM

本文讨论了视口元标签,这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互,而滥用可能会导致设计和可访问性问题。

&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么? &lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么? Mar 20, 2025 pm 06:05 PM

本文讨论了&lt; iframe&gt;将外部内容嵌入网页,其常见用途,安全风险以及诸如对象标签和API等替代方案的目的。

See all articles