用DataV带你去看世界

浏览: 3557

相信很多朋友都见过下面这张图,两年前马云爸爸就是紧盯着这块大屏,实时了解当天的剁手数据,而这块红黄篮三色交织的屏幕也成为大屏可视化技术领域的经典之作。

image.png

曾经,那些画面酷炫、操作简便的大屏显示系统我们只有在科幻片里见过,而如今,随着大屏可视化成为大数据落地的一种重要方式,并且已经在交通运输、网络安全、电力网络、航天航空等领域有着丰富的实践应用,特别是在涉及大数据的监控、指挥、调度等方面,大屏显示系统已经成为大数据分析不可或缺的核心基础系统。

今天,作为一个非专业技术人员,我们也将有机会使用这种大屏展现技术,因为阿里云的可视化团队为我们带来了一款革新的应用——DataV。接下来,小编我将通过自己使用DataV制作的一个案例,来为大家介绍这样一款神奇的产品。

开车之前,请各位系好安全带。

 

1、 数据准备

本案例使用的数据来自Google Jigsaw支持的全球新闻报道监测项目——GDELT Project。项目详情和数据结构不是本文重点,请见http://www.gdeltproject.org。由于该项目提供数据压缩包的链接,因此可以通过很多方式去下载数据。

本案例使用的数据来自Google Jigsaw支持的全球新闻报道监测项目——GDELT Project。项目详情和数据结构不是本文重点,请见http://www.gdeltproject.org。由于该项目提供数据压缩包的链接,因此可以通过很多方式去下载数据。简单叙述一下小编的方法:

l 用python里的urllib.urlretrieve下载文件压缩包;

l 用zipfile解压缩;读取文件,把每行内容写入MySQL数据库;

l 完事。

 

2、 数据连接

正式连接数据之前,首先,我们需要在DataV平台上完成注册,平台路径:登录阿里云——产品——大数据(数加)——DataV数据可视化

image.png

完成注册之后,我们就可以进入DataV产品的管理后台,后台分三个部分:

l 我的可视化:用户创建、发布和管理作品的地方;

点击了“新建可视化”之后,是的,你没有看错,那些年看过的那些经典的可视化作品都在这里,供你使用,任你践踏,还在等什么!

 image.png

l 我的数据:管理数据源的地方,支持多种数据连接方式;

l 优秀案例和教程:产品的Blog区,可以学习经验,观摩案例。

 

本案例的数据放在服务器的MySQL数据库里,所以本文选择的是“兼容MySQL数据库”方式来连接数据。

image.png

Tips:记得改数据库权限,让数据库允许远程访问,grant all privileges on *.* to 'root'@' ' identified by,详情问度娘吧。

 

测试连接,连接成功。

 

3、 分析数据,得出故事

       这一步主要是分析数据,结合数据里有的字段,得出想展示的结论,这一步其实是很重要的,是一个写故事的过程。篇幅原因,此处不展开叙述。

 

4、 创建画布

明确了展示的内容,接下来我们就要开始作画了。

首先,我们在“我的可视化”里新建可视化,这里小编没有选择模板,而是选择了空白画布。

image.png

点击创建,我们就进入了大屏的编辑界面:

image.png

大屏的编辑界面分这么几个部分:

l 画布:大屏显示的地方,也是作画的地方;

l 图形元素:供我们选择图形、指标、文字、装饰的地方,说白了大屏上的可见元素;

l 图层调整:调整元素间的上下层级,类似PS里的图层;

l 参数设置:给各种可见元素设置格式,配置数据,调整参数的地方。

 

5、 选择图形

纸张已经铺开,接下来我们需要把每项内容用一个可视化元素画到这画布上,在这方面,DataV已经为我们准备好了丰富的图表元素以供选择。

image.png

结合想展示的内容,小编做了如下对应:

l 新闻数量汇总和正负面占比——数字翻牌器+指标占比饼图;

l 正负面新闻的时间趋势——区域翻牌器;

l 正负面话题汇总——水平胶囊柱图;

l 按国家、种族、机构、宗教四个方面汇总——轮播列表;

l 关键词云——词云。

 

6、 为图形连通数据

确定图形之后,点击图形,该款图形便会添加到画布上,同时右侧的参数设置面板会调整为该元素可供设置的参数。我们这里先不管样式,而是点击数据,通过“静态数据”了解了图形所需的数据格式,接下来通过各种方式,生成这种格式的数据即可。

以数字翻牌器为例:

image.png

可见,value是必须有的数值。于是在数据库里编好SQL语句,得出想要的数据,如:

 image.png

接下来,在“数据”的“数据源类型”里选择“数据库”,这时系统会自动列出我们前面连上的数据库(此处为news),在SQL框内粘贴编好的语句。点击下方“查看数据响应结果”,这时数据会自动匹配上,图形上的数据也会自动更新。

 image.png

然后,用同样的方法,把每个图形都通过SQL语句,连接上数据。

 image.png

7、 调整布局

所有元素都连上数据之后,接下来通过拖动调整每个元素的位置。

image.png

然后给整个大屏加上标题,给每个图形也加上适当的小标题和介绍。

image.png

加完之后的效果,是不是已经能看出点样子了。

 image.png

8、 设置格式,加装饰

点击任何一个图形,在右侧的参数面板里,我们可以设置图形的相关参数,比如高低、位置、字体、颜色、数据系列等等,这个读者还是自己慢慢探索吧。

image.png

接下来,我们可以给图形加一些边框,给标题加一些背景图等。除此之外,还给大家分享一点装饰的技巧。虽然DataV为我们内置了一些装饰图,但是如果我们想让自己的作品更加个性化,可以通过添加“单张图片”,然后上传做好的png图或者gif图来给可视化作品添加一些效果,比如下图是小编在PPT里自制的小边框,很简单的哦~

image.png 

至此,一个还算完整的大屏可视化作品就完成了。我们将一个用60多个字段,每天数据几十万行的数据库,变成了下面这个样子,是不是比看数据库要更让人眼前一亮呢。

image.png

e.gif

 

实际上,这仅仅是一次小小的尝试,我们将一个不大不小的数据库,用可视化的方式来进行呈现,以期能从中得到些许洞察。但是,小编认为这种尝试在不久的未来会成为一种常态,当互联网越来越深的介入到我们的生活情景当中,比如智慧城市、智能交通、共享经济、物联网、健康医疗等,大量的行为数据将会积累起来,而这个量会远远超过人类大脑的“信道容量”,就像超声波和红外线超过人类的器官感知一样。这时,我们不得不借助一些“翻译”工具,将这些超过我们感知容量的数据“翻译”成我们能够理解和识别的图形图像,只有这样我们才能真正驾驭这些数据。

推荐 4
本文由 天善智能 创作,采用 知识共享署名-相同方式共享 3.0 中国大陆许可协议 进行许可。
转载、引用前需联系作者,并署名作者且注明文章出处。
本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台,并不用于任何商业目的,如果有任何问题,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

3 个评论

太给力了
关注,这个GIF太赞了
free?

要回复文章请先登录注册