1. 数据可视化常用的五种方式及案例分析
概念借助于图形化的手段,清晰、快捷有效的传达与沟通信息。从用户的角度,数据可视化可以让用户快速抓住要点信息,让关键的数据点从人类的眼睛快速通往心灵深处。 数据可视化一般会具备以下几个特点:准确性、创新性 和 简洁性。
常用五种可视化方法
下面从最常用和实用的维度总结了如下5种数据可视化方法,让我们来一一看一下:
一、面积&尺寸可视化对同一类图形(例如柱状、圆环和蜘蛛图等)的长度、高度或面积加以区别,来清晰的表达不同指标对应的指标值之间的对比。
这种方法会让浏览者对数据及其之间的对比一目了然。制作这类数据可视化图形时,要用数学公式计算,来表达准确的尺度和比例。
a: 天猫的店铺动态评分天猫店铺动态评分模块右侧的条状图按精确的比例清晰的表达了不同评分用户的占比。从下图中我们第一眼就可以强烈的感知到5分动态评分的用户占绝对的比例。
b: 联邦预算图如下图,在美国联邦预算剖面图里,用不同高度的货币流清晰的表达了资金的来源去向,及每一项所占金额的比重。
c: 公司黄页-企业能力模型蜘蛛图如下图,通过蜘蛛图的表现,公司综合实力与同行平均水平的对比便一目了然。
二、颜色可视化
通过颜色的深浅来表达指标值的强弱和大小,是数据可视化设计的常用方法,用户一眼看上去便可整体的看出哪一部分指标的数据值更突出。a: 点击频次热力图比如下面这张眼球热力图,通过颜色的差异,我们可以直观的看到用户的关注点。
b: 2013年美国失业率统计在图中可以看到,通过对美国地图以州为单位的划分,用不同的颜色来代表不同的失业率等级范围,整个的全美失业率状况便尽收眼底了。
c: 美国手机用户城市分布图中红点是用iPhone的人,绿点是用安卓的人。这两张在微博上看到的图,第一张是美国一个城市的一览,第二张图特写了纽约的市中心,尤其是曼哈顿地区。我们可以看到在市中心和主干道的人用iPhone居多,而用安卓的人都在郊区。这也引起了人们的热议,有的说在美国富人都住郊区别墅,所以富人爱用安卓手机;有的反驳说曼哈顿地区的人几乎都用iPhone,说明富人喜欢用iPhone手机。不管结论如何,都足以说明用户都被这些图所吸引,所以可视化的方式效果真的很直观。
注:科学家统计了2年里30亿条含有地理数据的twitter推文,根据客户端总结出来的数据。
三、图形可视化在我们设计指标及数据时,使用有对应实际含义的图形来结合呈现,会使数据图表更加生动的被展现,更便于用户理解图表要表达的主题。
Examples:
a: iOS手机及平板分布如下图所示,当展示使用不同类型的手机和平板用户占比时,直接用总的苹果图形为背景来划分用户比例,让用户第一眼就可以直观的看到这些图是在描述苹果设备的,直观而清晰。
b: 人人网用户的网购调查下图可以看出,该数据可视化的设计直接采用男性和女性的图形,这样的设计让分类一目了然。再结合了颜色可视化(左面蓝色右面粉色),同时也采用了面积&尺寸可视化,不同的比例用不同长度的条形。这些可视化方法的组合使用,大大加强了数据的可理解性。
四、地域空间可视化当指标数据要表达的主题跟地域有关联时,我们一般会选择用地图为大背景。
这样用户可以直观的了解整体的数据情况,同时也可以根据地理位置快速的定位到某一地区来查看详细数据。
a: 美国最好喝啤酒的产地分布下图中,通过以美国地图为大背景,清晰的记录了不同州所产啤酒在1987-2007年间在美国啤酒节中获得的奖牌累计总数。再辅以颜色可视化的方法,让用户清晰的看到美国哪些州更盛产好喝的啤酒。
五、概念可视化通过将抽象的指标数据转换成我们熟悉的容易感知的数据时,用户便更容易理解图形要表达的意义。
a: 厕所贴士下图是厕所里贴在墙上的节省纸张的环保贴士,用了概念转换的方法,让用户清晰的感受到员工们一年的用纸量之多。
如果只是描述擦手纸的量及堆积可达高度,我们还没有什么显性化概念。但当用户看到用纸的堆积高度比世界最高建筑还高、同时需砍伐500多颗树时,想必用户的节省纸张甚至禁用纸张的情怀便油然而生了。所以可见用概念转换的方法是多么的重要和有效。
b: Flickr云存储空间达1TB的可视化描述Flickr对云存储空间升至1TB确实是让人开心的事情,但相信很多人对这一数量级所代表的含义并不清晰。
所以Flickr在宣传这一新的升级产品时,采用了概念可视化的方案。从下图可以看出,用户可以动态的选择照片的大小,之后Flickr会采用动态交互的方式计算和显示出1TB能容纳多少张对应大小的图片。这样一来,用户便有了清晰的概念,知道这1TB是什么量级的容量了。
注意事项在总结了常见维度的数据可视化方法和范例之后,要再次总体强调下做数据可视化设计时的注意事项,总结了三点如下:
1)设计的方案至少适用于两个层次:一是能够整体展示大的图形轮廓,让用户能够快速的了解图表所要表达的整体概念;之后再以合适的方式对局部的详细数据加以呈现(如鼠标hover展示)。
2)做数据可视化时,上述的五个方法经常是混合用的,尤其是做一些复杂图形和多维度数据的展示时。
3)做出的可视化图表一定要易于理解,在显性化的基础上越美观越好,切忌华而不实。
总结:作为设计师,除了掌握方法来有针对性的设计之外,还要在平时多留心积累素材,同时培养自己的创造力和专业素养,保持一颗好奇心,才能真正的设计出样式精美又实用的数据可视化图表。
2. 常见的数据可视化方法有哪些
1、时态
时态可视化是数据以线性的方式展示。最为关键的是时态数据可视化有一个起点和一个终点。时态可视化的一个例子可以是连接的散点图,显示诸如某些区域的温度信息。
2、多维
可以通过使用常用的多维方法来展示目前二维或高维度的数据。多维的展示使得效果更加多元化,满足企业的需求。
3、分层
分层方法用于呈现多组数据。这些数据可视化通常展示的是大群体里面的小群体。分层数据可视化的例子包括一个树形图,可以显示语言组。
4、网络
在网络中展示数据间的关系,它是一种常见的展示大数据量的方法,结构较为复杂。
3. 大数据 分类型数据可视化方法研究报告
大数据:分类型数据可视化方法研究报告
数据可视化可以将海量数据通过图形、表格等形式直观反映给大众。降低数据读取门槛,可以让企业通过形象化方式对自身产品进行营销。
一、数据可视化原理
数据化可视原理是综合运用计算机图形学、图像、人机交互等技术,将采集或模拟的数据映射为可识别的图形、图像、视频或者动画,并允许用户对数据进行交互分析的理论方法和技术。
数据可视化可以将不可见的现象转换为可见的图形符号,并从中发现规律从而获取知识。在实际应用中,它可以针对复杂和大规模的数据,还原增强数据中的全局结构和具体细节。
二、 可视化方法
1. 数据采集:数据是可视化对象,可以通过仪器采样,调查记录、模拟计算等方式采集。在可视化解决方案中,了解数据来源采集方法和数据属性,才能有的放矢解决问题。
2. 数据处理和变换:原始数据含有噪音和误差同时数据模式和特征往往被隐藏。通过去噪、数据清洗、提取特征等变换为用户可理解模式。
3. 可视化映射(核心):将数据的数值、空间坐标、不同位置数据间的联系等映射为可视化视觉通道的不同元素如标记、位置、形状、大小和颜色等。最终让用户通过可视化洞察数据和数据背后隐含的现象和规律。
4. 用户感知:用户感知从数据可视化结果中提取信息、知识和灵感。数据可视化可用于从数据中探索新的假设,也可严重相关假设与数据是否吻合,还可帮助专家向公众展示数据中的信息。
用户感知可以在任何时期反作用于数据的采集、处理变换以及映射过程中,如下图所示:
三、具体操作
1. 将指标值图形化
一个指标值就是一个数据,将数据的大小以图形的方式表现。比如用柱形图的长度或高度表现数据大小,这也是最常用的可视化形式。
传统的柱形图、饼图有可能会带来审美疲劳,可尝试从图形的视觉样式上进行一些创新,常用的方法就是将图形与指标的含义关联起来。
比如 Google Zeitgeist 在展现 top10 的搜索词时,展示的就是“搜索”形状的柱形,图形与指标的含义相吻合,同时也做了立体的视觉变化:
2. 将指标图形化
一般用在与指标含义相近的 icon 来表现,使用场景也比较多,如下:
3. 将指标关系图形化
当存在多个指标时,为了挖掘指标之间的关系并将其进行图形化表达,可提升图表的可视化深度。常见有以下两种方式:
借助已有的场景来表现
联想自然或社会中有无场景与指标关系类似,然后借助此场景来表现。
比如网络统计流量研究院操作系统的分布(上图),首先分为 windows、mac 还有其他操作系统, windows 又包含 xp、2003、7等多种子系统。
宇宙星系中也有类似的关系:宇宙中有很多星系,我们最为熟悉的是太阳系,太阳系中又包括各个行星。根据这种关系联想,图表整体借用宇宙星系的场景,将熟知的Windows比喻成太阳系,将XP、Window7等系统比喻成太阳系中的行星,将Mac和其他系统比喻成其他星系。
构建场景来表现
指标之间往往具有一些关联特征,如从简单到复杂、从低级到高级、从前到后等等。如无法找到已存在的对应场景,也可构建场景。
比如网络统计流量研究院中的学历分布:指标分别是小学、初中、高中、本科等等。
各个类目之间是一种阶梯式的关系,因此,平台就设计了一个阶梯式的图直观的反映出了数据呈阶梯式递进的趋势。
再比如:支付宝年初出的个人年度账单中,在描述付款最多的三项时设计了一个类似颁奖台的样式也很出彩:(然而并没有觉得我在哪个类目买买买付款最多有什么骄傲的)
下方图示为供参考的线性化过程,实际可视化思考中,将哪类元素进行图形化或者图形化前后的顺序可能均有不同,需根据具体情况处理。
4. 将时间和空间可视化
时间
通过时间的维度来查看指标值的变化情况,一般通过增加时间轴的形式,也就是常见的趋势图。
空间
当图表存在地域信息并且需要突出表现的时候,可用地图将空间可视化,地图作为主背景呈现所有信息点。
Google Zeitgeist 在 2010 和 2012 年的年度热门回顾中,都是以地图为主要载体(同时也结合了时间),来呈现热门事件:
5. 将数据进行概念转换
先看下生活中的概念转换,当我们需要喝水时,通常会说给我来杯水而不是给我来500ml 的水。要注意来(一)杯水,是具象的,并不是用量化的数据来形容。在这里,500ml就是一个具体的数据,但是它难以被感知,所以用(一)杯的概念来转换。
同样在数据可视化,有时需要对数据进行概念转换。这是为了加深用户对数据的感知,常用方法有对比和比喻。感知就是一个将数据由抽象转化为具象的过程。
对比
比如下图就是一个介绍中国烟民数量的图表。如果只看左半部分中国烟民的数量:32000000(个十百千万十万百万千万亿…)好吧数据量级很大,不论是数零还是数逗号都很容易数错,而且具体这个数字有多大仍然很难感知。让我们目光向右移动,来看右半部分:中国烟民数量超过了美国人口总和,太恐怖了。这样一对比,对数据的感知就加深了。
比喻
下图是一个介绍雅虎邮箱处理数据量大小的图表,大概就是说它每小时处理的电子邮件有近1.2TB,相当于644245094 张打印的纸。
上面这个翻译很无聊是不是,但这并不是问题的重点,这个数它到底有多大呢?文案中用了一个比喻的手法:大意就是将这些邮件打印出来首尾相连可以绕地球4圈。嗯,比香飘飘奶瓶还多3圈。到这里,我相信大家肯定能初步感受到雅虎邮箱每天处理的数据量有多大了吧,而且还没有被打印出来,为地球节省了很多纸(假装环保)。
6.让图表“动”起来
数据图形化完成后,可结合实际情况,将其变为动态化和可操控性的图表,用户在操控过程中能更好地感知数据的变化过程,提升体验。
实现动态化通常以下两种方式: 交互和动画。
交互
交互包括鼠标浮动、点击、多图表时的联动响应等等。下面是网络统计流量研究院的时间分布图,该分布图采用左图右表的联动形式,左图中鼠标浮动则显示对应数据,点击则可以切换选择:
动画
动画包括入场动画、交互过程的动画和播放动画等等。
入场动画:即在页面载入后,给图表一个“生长”的过程,取代“数据载入中”这样的提示文字。
交互动画:用户发生交互行为后,通过动画形式给以及时反馈。
播放动画:通俗的来说就是提供播放功能,让用户能够完整看到数据随时间变化的过程。下图是 Gapminder 在描述多维数据时,提供随时间播放的功能,可以直观感受到所有数据的变化。
4. 鍙瑙嗗寲sp娉曟槸浠涔堟剰镐
鍙瑙嗗寲SP娉曟槸涓绉岖敤浜庢暟鎹鍒嗘瀽鍜屽彲瑙嗗寲镄勬妧链鏂规硶锛屽畠鍙浠ュ府锷╃敤鎴峰彲瑙嗗寲銆佺悊瑙e拰鍒嗘瀽鏁版嵁銆係P鏄钬沦treamline-Based-Power娉曗濓纸锘轰簬娴佺嚎镄勫己搴﹀彲瑙嗗寲鏂规硶锛夌殑缂╁啓锛岃ユ柟娉曚富瑕佺敤浜庡彲瑙嗗寲娴佷綋鍜屾皵浣撶殑寮哄害銆侀熷害绛変俊鎭銆傝繖绉嶆妧链鍙浠ュ湪涓夌淮绌洪棿涓鏋勫缓娴佺嚎锛屽苟阃氲繃棰滆壊銆佺汗鐞嗙瓑琛ㄨ揪鏁版嵁淇℃伅锛岃╃敤鎴锋洿鐩磋傚湴浜呜В鏁版嵁镄勬湰璐ㄣ
鍙瑙嗗寲SP娉曡骞挎硾搴旂敤浜庡悇涓棰嗗烟锛屽傚伐绋嬨佹皵璞°佸尰瀛︺佸湴璐ㄧ瓑锛岀敤浜庡彲瑙嗗寲鍜屽垎鏋愭祦浣撶殑妯℃嫙鏁版嵁銆备緥濡傦纴宸ョ▼棰嗗烟涓锛屽彲瑙嗗寲SP娉曞彲浠ュ府锷╁伐绋嫔笀瑙傚疗姘存祦鎴栨皵娴佸湪绠¢亾銆佹车绛夎惧囧唴閮ㄧ殑娴佸姩鐘跺喌锛屽苟浼桦寲绯荤粺璁捐°傚湪鍖诲﹂嗗烟锛岃ユ妧链鍙浠ョ敤浜庡彲瑙嗗寲蹇冭剰銆佽绠$瓑鍣ㄥ畼镄勬祦锷ㄦ儏鍐碉纴甯锷╁尰鐢熻繘琛岃瘖鏂鍜屾不鐤楄″垝镄勫埗瀹氥
闅忕潃鏁版嵁閲忕殑涓嶆柇澧为暱鍜屼汉浠瀵逛簬鏁版嵁鍒嗘瀽镄勯渶姹备笉鏂鎻愰珮锛屽彲瑙嗗寲SP娉曚篃灏嗕笉鏂鍙戝𪾢鍜屽畬锽勚傛湭𨱒ョ殑鍙瑙嗗寲SP鎶链灏嗘洿锷犳敞閲嶆暟鎹镄勫彲瑙嗗寲鏁堟灉鍜岀敤鎴蜂氦浜掓э纴钖屾椂涔熷皢镟村姞鏅鸿兘鍖栥佽嚜阃傚簲鍖栵纴鑳藉熸洿濂藉湴婊¤冻鐢ㄦ埛镄勯渶姹伞傚悓镞讹纴璇ユ妧链涔熷皢涓庝汉宸ユ櫤鑳姐佽櫄𨰾熺幇瀹炵瓑鎶链缁揿悎锛屼负鐢ㄦ埛甯︽潵镟村姞涓板瘜镄勬暟鎹浣挞獙銆