搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 嘉数汇 > 浅谈数据可视化

浅谈数据可视化

嘉数汇 2017-12-02

前段时间,参加了SODA上海开放数据创新应用大赛。我们队伍为阿尔戈,是希腊神话中搭载英雄的战舰。我主要进行了少量数据处理和系统可视化部分,在这个过程中,觉得数据可视化是一个非常迷人的话题,这过程中也了解了很多相关的资料,学习了一些基础的工具,在这里分享给大家,也是为自己做一个整理和记录。


1、什么是数据可视化?


数据可视化,是利用计算机图形学和图像处理技术,将数据转换为图形或者图像在屏幕上显示出来进行交互处理的理论方法和技术。当然这是最基本的理解,进一步来说,数据可视化毫无疑问是基于数据的,我们很幸运地处于这样一个让我们兴奋的时代,数据科学让我们越来越多地从数据中发现人类社会中的复杂行为模式,以数据为基础的技术决定着人类的未来,但并非是数据本身改变了我们的世界,起决定作用的是我们可用的知识。大数据已经改变了我们生活工作的方式,也对我们的思维模式带来影响。随着体量多,类型复杂的大数据更加接近我们,传统的数据处理方法显然无法适应,而数据可视化是一种能很好展示大数据,处理大数据的方法。同时现在随着图形图像处理的快速发展,渲染引擎提高,可视化能更好的使用。当然,数据可视化不只是只各种工具,新颖的技术,同时作为一种表达数据的方式,它是对现实世界的抽象表达。它像文字一样,为我们讲述各种各样的故事。


2、为什么要进行数据可视化?


(1)我们利用视觉获取的信息量,远远比别的感官要多得多

     

如图所示,视觉器官是人和动物利用光的作用感知外界事物的感受器官,光作用于视觉器官,使其感受细胞兴奋,其信息经过视觉神经系统加工后产生视觉。通过视觉,人和动物感知到画面的大小,明暗,颜色,变化趋势,人的知识中至少百分十八十以上的信息经过视觉获得,所以,数据可视化可以帮助我们更好的传递信息,毕竟人对视觉获取的信息比较容易。



(2)数据可视化能够帮助我们对数据有更加全面的认识


对该解释有一个经典的例子。 F. J. Anscombe 在1973年在他的一篇论文 ""中分析散点图和线性回归的关系里面提到图像表示对数据分析的重要性。他用了下面这个例子,如下有四组数据:

浅谈数据可视化

对这四组数据进行简单的数据分析,每组数据有变量X和Y,我们使用常用的统计算法去分析这四组数据,会发现这四组数据拥有相同的统计值:

  • Means(平均值): X =9 Y = 7.5

  • Variance: X =11Y =4.112

  • Correlation(关联):X-Y:0.816

  • Linearregression:Y=3.0+0.5X


显然,按照传统的统计分析方法,我们无法找出这四组数据的区别,但是如果采用可视化的方法:

  • 第一租数据图告诉我们,x 和 y 有week linear relation。

  • 第二组数据图告诉我们, x 和 y 有curve regression relation。

  • 第三组数据图告诉我们, x 和 y 有strong  linear relation 而且还有一个异常点。

  • 第四组数据图可以看书横坐标数据集中在一起,而且也有一个异常值。

浅谈数据可视化

我们用了简单的图表对比以后,就会发现实际上这些在用图像表示出来后,有完全不一样的故事。


(3)数据可视化能够在小空间中展示大规模数据

如图,每一个数据变成一个点,数据间关系通过线段连接,大量的数据能映射到非常小的一张图片上。

浅谈数据可视化


(4)人类大脑在记忆能力的限制


人类的记忆能力是有限的,我们不可能记住所有的数据,单纯地记忆数据特诊对我们来说也是不小的挑战。俗话说的好,百闻不如一见。如果能够将数据总结到一张图表中,我们通过图像记忆,能更好地帮助我们记忆。

 

3、数据可视化的原材料


基于数据的可视化组件可以分为四种:视觉暗示、坐标系、标尺以及背景信息。不论在谱图的什么位置,可视化都是基于数据和这四种组件创建的。有时它们是显式的,而有时它们则会组成一个无形的框架。这些组件协同工作,对一个组件的选择会影响到其他组件。


(1)视觉暗示


可视化最基本的形式就是简单地把数据映射成彩色图形。它的工作原理就是大脑倾向于寻找模式,你可以在图形和它所代表的数字间来回切换。这一点很重要。你必须确定数据的本质并没有在这反复切换中丢失,如果不能映射回数据,可视化图表就只是一堆无用的图形。


(2)坐标系


编码数据的时候,总得把物体放到一定的位置。有一个结构化的空间,还有指定图形和颜色画在哪里的规则,这就是坐标系,它赋予 XY 坐标或经纬度以意义。有几种不同的坐标系,一下三种坐标系几乎可以覆盖所有的需求,它们分别为直角坐标系(也称为笛卡尔坐标系)、极坐标系和地理坐标系。


(3)标尺


坐标系指定了可视化的维度,而标尺则指定了在每一个维度里数据映射到哪里。标尺有很多种,你也可以用数学函数定义自己的标尺,但是基本上不会偏离这三种标尺,分别为数字标尺、分类标尺和时间标尺。


(4)背景信息


背景信息(帮助更好地理解数据相关的 5W 信息,即何人、何事、何时、何地、为何)可以使数据更清晰,并且能正确引导读者。至少,几个月后回过头来再看的时候,它可以提醒你这张图在说什么。有时背景信息是直接画出来的,有时它们则隐含在媒介中。


4、数据可视化过程

你在分析中所采取的具体步骤会随着数据集合项目的不同而不同,但在探索数据可视化时,总体而言应该考虑以下四点:

  • 拥有什么数据?

  • 关于数据你想了解什么?

  • 应该使用哪种可视化方式?

  • 你看见了什么,有意义吗?

浅谈数据可视化

(1)你拥有什么数据?


这一步常见的错误是先形成视觉形式,然后再找数据。其实应该反过来,先有数据,在进行可视化。通常获得需要的数据是最困难,耗时最多的一步。在本次比赛中,我们得到了大量的异构数据。为了之后可视化,需要对数据进行整理,这里我们花费了大量的时间。数据可视化是基于数据的,所以首先我们需要明确自己拥有的数据,并掌握必要的数据处理方法。


(2)关于数据,你想了解什么?


数据可视化主要有两个用途:一个是用于讲故事,一个是用于探索。往往当我们有一个包含数以千计甚至数个百万观察结果的数据集时,我们“淹没在信息海洋中”,不知道从哪里开始才好。为了避免这种情况的发生,你得学会游泳。我们要做的就是提出与数据有关的问题,让好奇心来引导你。针对问题,回答得越具体,方向就越明确。你可能想知道数据中最好的和最差的各是什么,这时候,你会研究排名;如果有多个变量,就要决定什么是有好处的,什么是不好的。如果有时序数据,你可能还会想知道几十年来什么改善了,什么更糟了。


(3)应该采用哪种可视化方式?


有很多图表和视觉暗示的组合可以选择。为数据选择正确的表格的时候,你可能会感到茫然。在研究的初期阶段,更重要的是要从不同的角度观察数据,并深入到对项目更重要的事情上。


制作多个图表的时,要比较所有的变量,看看有没有值得进一步研究的东西。


先从总体上观察数据,然后放大到具体的分类和独立的特点。这里,我给出基本图表的选择方法:

  • 柱状图:适用于二维数据集,但只有一个维度需要比较。柱状图利用柱子的高度,反应数据的差异。肉眼对高度差异很敏感,便是效果比较好。柱状图的局限在于只适用于中小规模的数据集。

  • 折线图:折线图适用于二维的大数据集,尤其是那些趋势比单个数据点更重要的场合。它还适用于多个二维数据集的比较。

  • 饼图:饼图应该是一种避免使用的图表,因为肉眼对面积的大小不敏感。一般情况下,总是应该用柱状图替代饼图,但是有一个例外,就是反应某个部分占整体的比重。

  • 散点图:散点图适用于三维数据集,但其中只有两维需要比较。有时候为了识别第三维,可以为每个点加上文字标识,或者不同的颜色。

  • 气泡图气泡图是散点图的一种变形,通过每个点的面积大小,反应第三维。如果为气泡图加上不同颜色(或者文字标签),气泡图就可以用来表示四维数据。

  • 雷达图:雷达图适用于多维数据(四维以上),且每个维度必须可以排序。但是,它有一个局限,就是数据点最多6个,否则无法辨别,因此试用场合有限。


(4)你看到了什么,有意义吗?


可视化数据之后,你需要寻找一些东西。包括增长、减少、离群值、或者一些组合,当然,确保不要再模式中混入干扰信息。同时也要注意有多少变化,以及模式有多明显。数据中的差异与随机性相比是怎样的?因为估值的不确定性、人为的或技术的错误或者因为人和事物与众不同,从而使得你的观察结果与众不同。人们常常认为数据就是事实,因为数字是不可能变动的。但是数据具有不确定性,因为每个数据点都是对某一瞬间所发生的事情的快速捕捉,其他地内容都是你推断的。

 

5、上海市各大商圈人流预警系统


(1)实时人流检测


系统展示的是一块地图,该地图基于采用百度地图开发。我们固定了显示范围为上海市区域。通过热力图的方式来反映各商圈的人流信息,人数越多的地方越好。为了获得更具体的人流数据,我们还加入信息点,通过地图覆盖物实现。当鼠标悬浮到信息点的时候,会显示该商圈具体人流情况,我们使用了哪些数据,就显示出来。

浅谈数据可视化

下图是系统界面:(包含时间信息显示,天气预报,事故预警,人流信息列表,地图容器,以及两个数据图表分析)

浅谈数据可视化

(2)百度地图开发


本次开发中主要使用百度地图,可以通过百度地图开放平台(http://lbsyun.baidu.com/)获取SDK,以及API参考。


百度地图是百度提供的一项网络地图搜索服务,覆盖了国内近400个城市、数千个区县。在百度地图里,用户可以查询街道、商场、楼盘的地理位置,也可以找到离您最近的所有餐馆、学校、银行、公园等等。2010年8月26日,在使用百度地图服务时,除普通的电子地图功能之外,新增加了三维地图按钮。

本次开发中遇到两个坑,这里分享下:

  • 百度有自己专门的一套坐标系统,现在国际上使用的GPS坐标(WGS84),我们获得数据都是WGS84的坐标信息,所以这个过程中需要进行坐标系的转换,百度提供了转化的函数,所以实现过程中用node谢了转化的脚本。

  • 为了鼠标悬浮覆盖物弹出信息框,发现百度自带的infoWindow样式固定,同时网页版百度地图api还提供了开源库infobox用作替换infowindows。但是开发中发现还是无法满足我需要,所以自己通过写CSS的方式实现。


查看网页信息,会发先infowindow由多个div组合,样式写死在html中,没有关注点分离,所以操作过程中等地图渲染完成后再次修改样式,这样导致执行效率比较低,目前没有其他解决方法。考虑自己写个开源库实现。



(3)商圈人流走势


为了展示商圈的人流走势,显然我们选择了折线图。在前端开发中,统计图的绘制我们选择了Echarts(http://echarts.baidu.com/)。


Echarts是一个纯JavaScript的图标库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观、生动、可交互,可高度个性化定制的数据可视化图表。


现在Echart已经迭代到了版本3,其中加入了更多丰富的交互功能和更多的可视化效果,并且对移动端做了深度的优化。Echarts官网也提供了完整的文档,入手较快。


(4)商圈人流对比


在商圈人流走势中,我们的横坐标是我们自定义算法中的商圈拥挤度,所以各大商圈走势几乎一致,在拥挤度的差别上对比却不明显,为了体现三大商圈的对比,我们采用d3.js库动态的展示了商圈人流数上的对比。


D3.js(https://d3js.org/)是一个JavaScript库,它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。D3严格遵循Web标准,因而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同时,它提供了强大的可视化组件,可以让使用者以数据驱动的方式去操作DOM。


D3官网也提供了较为清晰的文档,但相比Echarts,D3的实现更为灵活,所有入门难度稍微大一些。

 

(5)D3.js和Echarts选择上的建议


在图表制作的JavaScript库中,有前面提到的Echarts,d3.js,这里在介绍一个highcharts.js,Highcharts和echarts是一类东西,但跟d3.js维度不同。假如前面两个能解决你的需求,那么就可以先不考虑d3。英语好选highcharts,英语不好选echarts。当然最好要先评估一下它们对浏览器的兼容性,免得写完了发现用户那运行不了。Highcharts和echarts基本上就是画图表用的,而d3.js 更自由些,你很容易去做出自己想要的效果,比如mindchart、heat chart、tile chart 之类的东西。d3.js源码封装对svg的操作,而svg不依赖分辨率,而canvas则依赖分辨率低,对密集型游戏处理效果还是很不错的,而svg对复杂高的渲染速度会很慢.不过d3.js最新的迭代版本已经支持canvas操作。

 

6、优秀的数据可视化作品欣赏


在学习过程中,脑海中有了这个名词,当遇到这方面的内容总会多关注下,下面分享一些优秀的可视化作品。

  • http://www.iqiyi.com/v_19rrnue9oc.html,爱奇艺中可以搜索可视化看到。这里不是打广告哈。

  • D3制作的example(注意迭代版本): https://github.com/d3/d3/wiki/Gallery

  • 风、气象、海洋状况的全球地图: https://earth.nullschool.net/zh-cn/

  • 视物|致知: http://www.vizinsight.com/

  • 阿里指数: https://alizs.taobao.com/

  • iremember: http://i-remember.fr/en

  • 标签云制作tagul: https://tagul.com/

  • 可视化案例: http://www.open-open.com/news/view/154a034/

  • 地理信息可视化开源库: http://mapv.baidu.com/

  • 看名字就知道: http://www.informationisbeautiful.net/

  • 同样看名字就知道: http://www.visualisingdata.com/

 

当然,优秀的可视化作品数不胜数,我也分享下几本可视化方面的书籍。

链接:http://pan.baidu.com/s/1hsmJPaO,密码:io4x


最后希望大家能够喜欢可视化。 



版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《浅谈数据可视化》的版权归原作者「嘉数汇」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注嘉数汇微信公众号

嘉数汇微信公众号:Datahui

嘉数汇

手机扫描上方二维码即可关注嘉数汇微信公众号

嘉数汇最新文章

精品公众号随机推荐