数据可视化 - 简介

845 阅读5分钟

简介

有的人认为数据可视化就是图表展示,没什么好学的。我认为数据可视化不仅仅是图表展示,它是通过分析数据把蕴含在数据中的规律和道理,通过合理的图表展示出来。本篇以我的理解来给大家简单的分析下数据可视化。

什么是数据可视化

  1. 借助于图形化的手段,清晰有效地传达与沟通信息。
  2. 换个说法,就是将不可见或难以直接显示的数据转化为可感知的图形、符号、颜色、 纹理等,增强数据识别效率,传递有效信息的手段就是数据可视化。
  3. 数据可视化与信息图形、信息可视化、科学可视化以及统计图形密切相关。

2282434dc2524929bad00dd627f40653_tplv-k3u1fbpfcp-zoom-in-crop-mark_3024_0_0_0.webp

  • 我们拿到上图的数据表格时,无法在短时间内分析出它们每一组数据的关系。作为一个开发都不能及时的发现关系,用户就不用说了。为了更好的让用户理解,我们就需要在数据中找寻规律和现象。

2d3cd4f6-3349-4879-a62a-954c18e68587.png

  • 通过发现数据中的规律和现象,以图形化的方式来表现数据。相信不管是开发还是用户都可以迅速的从数据中发现它们的关系。

  • 通过这个例子就能很好的发现,从分析数据的规律和现象,到通过这些规律和现象使用对应的图表展示出来,的过程就是数据可视化。

数据可视化有什么用

增强认知

  • 人们对图形的记忆要高于对一堆数据的记忆。把数据和视觉元素关联起来,就能让人们更容易记住可视化图形。如地铁图。

130dbd42f0859ee1.jpg

数据多维度显示

  • 把数据进行分类、排序、组合并显示每个维度的值。
  • 比如,当我们有大量的人员职场信息时。可是使用折线图以年龄和人数的维度分析出职场上各年龄的人数分布,以年龄和平均工资的维度分析出各年龄的平均收入。

复杂信息简单化

  • 一家企业内部每天都会产生大量的数据。把这些复杂、抽象的数据,通过可视的简单理解的方式展示出来,更加直观生动地表达其中的信息与规律,使数据更高效、更容易懂。如大屏可视化。

v2-23f7f6c52471c59e54a303f4624d53b2_720w.jpg

如何进行数据可视化

  • 大概分为这几个步骤。
  1. 确认要解决的问题。
  2. 分析数据,处理数据。
  3. 确定使用的图表类型。

确认要解决的问题

  • 确认当前的可视化需要解决什么问题?如何把数据转换为用户能看懂和理解的数据?一般都是通过趋势、对比、分布、流程、时序、空间、关联性等角度来分析。这一步是比较有挑战的,分析错误就会加大后面的开发量。

分析数据,处理数据

  • 确认目前的数据是否满足条件。不满足就需要对数据进行分类、排序、组合等一系列算法转换。
  • 确认数据的规模有多大,如何加载到页面,是否需要在前端对数据处理。好判断使用什么技术进行开发。
  • 确定要显示的数据维度,能更好的分析出使用什么图表。

确定使用的图表类型

  • 根据确认好的数据维度,选出使用什么图表。这一步也是比较有挑战的,是自己手绘满足灵活性,还在在市面选择一种数据可视化工具。
  • 这里就需要自己分析一下目前自己处于什么情况下。比如赶工期直接使用自己熟悉的可视化工具开发。比如客户定制化要求高工期合理,那就手绘满足灵活性。

简介Web的可视化技术

  • 在前端,目前世面上有很多可视化工具。它们都是基于 Web 图形的底层技术规范实现的。这里先了解这些技术规范,后续在详细讲解其他框架。

SVG

  • 可缩放矢量图形,是基于可扩展标记语言用于描述二维矢量图形的一种图形格式。
  • 每个被绘制的图形均被视为DMO对象,可以使用JavaScript操作。被当成了DMO对象就有他的弊端,数据量大对象多页面就会卡顿。
  • 社区的相关框架 snapsvgrapheal.js 等。

canvas 2D

  • 通过 JavaScript 来绘制 2D 图形,通过逐像素来进行渲染。
  • 一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景都需要重新绘制。
  • 社区的相关框架 zrender等。

canvas 3D WebGL

  • WebGL 是一个 JavaScript API,用于在任何兼容的 Web 浏览器中渲染 3D 图形。WebGL 程序由用 JavaScript 编写的控制代码和用 OpenGL 着色语言(GLSL)编写的着色器代码构成。需要注意这项技术入门难度比较高。
  • 它和canvas 2D有一样的问题。
  • 社区的相关框架 three.js等。

数据可视化工具

  • 这里从项目中常用的可视化需求,来说说使用什么工具。
  1. 通用报表。
  2. 移动端图表。
  3. 大屏可视化。
  4. 地理可视化。

通用报表

移动端可视化

  • 使用高级可视化工具,上面说的都可以用。专注于移动端的框架 F2F6等。

大屏可视化

  • 根据需求来判断,定制需求少可以直接使用高级可视化工具。
  • 专注大屏可视化的框架 finereport 等。
  • 定制化需求过多,使用低级可视化模块。需要自己处理数据,通过框架API绘制不同的模块。如 D3 等。

地理可视化

  • L7 地理空间数据可视。
  • 百度地图 MapVGL
  • 高德地图 LOCA
  • 一些开发GIS地图的框架如 OpenLayers等。

我正在参与掘金技术社区创作者签约计划招募活动,点击链接报名投稿