我对web前端与可视化的一些思考|🏆 技术专题第三期

6,325 阅读16分钟

前言

      我大概在2017年年底接触的可视化,至今一直在从事相关的产品开发和研究,主要是可视化分析方向。在这三年的时间里,产生了大量的疑惑和思考。趁着这次机会,总结一下。也希望通过自己的心得体会,能给一些有兴趣未入门的web开发人员一些帮助吧。

     我会尽量涉及到作为前端开发人员所需要涉及到的知识链。有时也会涉及到一些基础知识,所以内容会比较多,但是希望能够静下心来慢慢的看下去,思考下去。

    本文并不注重实践和实际的技术细节,而是提供可视化与web前端之间的一些思考。因为作者水平有限,如有知识遗漏或表达方式有误,欢迎大家在评论区处指正,谢谢大家🙏。

可视化的基础知识

    主要是可视化的基础知识,让新来的同学了解一下可视化的大概框架,不涉及过多的细节。

可视化的定义

     要做可视化,肯定得先了解什么是可视化。

    可视化有多种定义,我们在这里只说在计算机学科中的可视化定义:利用人眼感知能力对数据进行的可视表达以增加认知的技术,叫做可视化技术。听起来比较绕,人的眼睛是一个高带宽处理器,可视化的作用是用来增强人对数据的认知的,而可视表达(如图像)则能够携带更多的数据,通过眼睛传入到我们的大脑,在里面得到可感知的结果。

   也可以简单的理解为:运用计算机图形学或图像处理技术,将数据转化为图像,达到更容易理解数据的技术。

可视化的作用

为什么需要可视化?

  • 为了让数据理解起来更容易、更直观。

  • 发现数据背后有价值的信息。

  • 提升各种效率,最终还是映射到业务的效率上。

  • ....

下面放一个经典的图来帮助大家理解。

      这个是一个表格,内容为I,II,III,IV四列数据,每列数据的每一项都有x,y两个属性,下面问这四组数据的特征,是不是连数据看起来都很费劲,更别说看数据背后的特征了。但是我们通过可视化的方法画出上面的数据。

      我们很轻松的就看出了它们各自的规律和一些附加信息。这也是可视化的魅力所在。

可视化的分支领域

可视化主要有以下分支领域

1、科学可视化(SciVis)

      科学可视化是可视化中出现最早的,也是发展最为完备的一个分支领域。主要是描绘自然界中的真实存在的数据,应用在物理、化学、气象、航空、医学等领域。例如我们常见的气象图,星云图,洋流图等。

     科学可视化处理的数据都有天然的几何结构,如磁感线。

2、信息可视化(infoVis)

      在有限的空间里,图像化大量的数据,以直观的方式展示出所含有的抽象信息。我们日常生活中常见的可视化大部分都属于信息可视化的领域。例如地铁交通图。它有一个特点,没有复杂的交互,趋向于静态的。

3、可视分析(VAST)

      可视化分析是一个较为新的分支,被定义为以可视化界面为基础的分析推理科学。结合图像学、数据分析、人机交互等技术,以可视交互为通道,将人的感知力融入到数据处理过程,形成人脑智能和机器智能优势互补和相互提升,建立螺旋式信息交流与知识提炼途径,完成有效的分析推理和决策。

      这个定义让人望而生畏,简单的理解就是通过可视图表组合,通过主动性质的人为交互,来分析数据,得到一些隐藏的数据信息,从而帮助制定决策。

     以上就是目前较为公认的是可视化的三个领域,三者之间的交界也比较模糊。

可视化的历史

    可视化简史这篇文章介绍的就挺好,我就不做过多的累述了,历史上有几张图挺有名的,拿破仑东征图,1854年英国宽街霍乱图。

如何去做一个可视化

     可视化的步骤其实多种多样,但是大同小异,之间的差别都是一些微不足道的地方,中心思想是一致的。我下面说一下我一直用的一个步骤。同样,也是蜻蜓点水,一掠而过。

1、明确需求

       再干一件事之前,你得知道你要干什么?你想要了解什么?需求是做可视化设计的第一步骤。这个需求必须得是一个具体的问题,你要把它能够写出来,讲清楚,才算是一个需求。例如某公司今年汽车的销售额受什么因素影响。

2、数据

       限于篇幅,直接把数据收集和处理等步骤统一写成数据了。根据需求,从各种数据源拿到原始数据。原始数据是大部分情况一个大杂汇。我们需要做数据清洗,例如整理为统一格式,删除不需要的数据维度,去掉重复信息等。

        经数据清洗后,我们就得到了一份比较规范可用的数据库了。接下来就需要在应用层面上业务化数据。根据第一步提出的需求,将数据进行进一步的处理,如根据不同的维度聚合、分割数据等。

3、可视化

       根据我们提出的需求,和数据的结构来选择可视化的展示方式。在这里我们要了解一些常见图的特点和适用数据结构。

       我下面列举几个图的特征。后面会给大家贴一些帮助大家选图的网站。

       自己当然也可以创建图。在这里有一个小建议,创建新的图,尽量从基础图延伸,这样的图既有创新性,用户的学习成本低,接受度较高。例如把柱状图分块,变成柱状推叠图。再加上个轴做对比,变成了双轴柱状堆叠图。

     关于图的优化,放在下一步。

4、做决定

       上面三个步骤后,就得到了一个初步的图表。这时候需要对照需求,看看是否能够满足我们提出的需求。如果不满足,要思考出现问题的步骤。

  • 需求的不合理?例如想知道小猫生娃的数量和全球汽车的销量(这个说不定真有关系,我随意说的)。

  • 数据获取的不对?例如在做图的时候,发现数据缺失一些关键信息,那么我们就解决数据问题。

  • 图选的不对?重新思考数据结构和需求,再选图。

如果满足到了需求,那么接下来就是要做优化。

       其实设计图这一个步骤真的是一个很大的学问。一个好的可视化作品要有良好的故事性、完善的图表要素、人机交互、感知认知(例如格式塔)等等。后面也会贴一些相关知识的链接。看经典要比听我逼逼强的多。

什么是好的可视化作品?

       在这里提一个准则,是香港科技大学的屈华民教授讲的可视化的信、达、雅。也可以对照自己的作品做优化。

1、信

      可视化作品不能带有偏见,不能误导用户。要如实的传达数据的真实面貌。

      有一个可视化案例,是美国汽车换购汽车的选择。数据分析发现90%的用户第一选择都是A牌子的厂家。数据仅仅告诉了我们选择A牌子的用户多。我们并不能因此确定A牌子的汽车就是质量好,受欢迎程度高,因为可能有太多数据集之外的因素影响了数据结果,例如国家政策,厂家优惠等。我们只需要将原始数据带给我们的信息表达出来即可。

      这个信也就是第一步准则,重中之重。

2、达

      可视化的根本用途不是为了美观,也不是为了简洁。而是要解决你第一步提出的那个需求,要“达到”那个需求。才是一个高效的可视化。当然,如果你的需求就是要酷,要美观,那也可以。

3、雅

     可视化设计美观和优雅。在达到上面两个准则后,我们则可以考虑在作品里添加一些艺术成分。有本书就是《Beautiful Visualization》,讲的就是可视化之美。

可视化应用

      可视化的应用非常广泛,简单来说需要成像的、有数据产生并且有分析需求的行业,都少不了可视化的参与,并且能带去很大的价值。例如军工行业的作战地图、作战设备(枪械性能、战斗机状况)等,网络安全行业的流量分析、攻击图等,医疗行业的CT影像。媒体行业的讲述故事(例如澎湃实验室)等等无穷无尽的应用场景。这次新冠肺炎的防控战役中,就涌现出了大量优秀的可视化作品,并且提供了极大的助力。例如丁香医生。

     当数据成图后,往往还能带来一些意外的收获。引用一个屈教授之前讲的一个有趣的事例,他的团队之前参与过一个视频在线学习的项目。然后网站记录了一些用户的交互操作,例如看视频时的快进、后退的操作。

      将这些数据分析可视化之后,就得到了一个视频中用户的交互反馈可视化。然后就发现了对于一个视频中,哪些时间片是用户反复去看的,讲师则去看一下这些时间片是不是比较难,或者讲的不是很透彻。还有一些时间片大都跳过的、加速的。那么确认一下是不是不是重点却占用了很多时间。从而达到提高课程质量的能力。

      另一个有意思的现象则是,有类用户在大家都觉得难的地方,也不怎么停留操作。还有一类用户在大家反复停留的地方看的飞快,在大家快进的地方却反复的看。这两类用户的考试成绩的区别大家可以估计出来吧😁。

       总的来说,可视化大有作为。关于可视化的基础知识就讲这么多,感兴趣的人多的话,后期会单独写一系列。

可视化与web前端

为什么要做可视化(对于我个人)

1、有兴趣。

     兴趣是第一生产力,我就喜欢炫酷的东西。如果终日都在实现各种后台管理系统,我会丧失对前端的激情,而当作是一个糊口的工作。人一生如果能够从事自己喜欢的职业,是一件及其幸运的事情。我毕业后选择前端岗位而不是本专业的Java和嵌入式。就是因为前端的可见性高。

2、自由度高

     牵扯到设计和交互,自由度就提升起来了。例如一个球体,可以上下转,可以左右转,还可以离子化。可以尽情的发挥你的想象力和创作力。

3、成就感强

     熟知的“页面仔”称呼,总被“鄙视”🐶🐶🐶(狗头保命)。可视化则是能够打破梏桎,进入到一个新的领域。等你做一个宇宙大爆炸产生星系的效果出来后,大家只能喊666了👏👏👏。

4、市场环境好

     赶上了大数据时代,市场的需求量是毋庸置疑的。随着硬件的升级,AR/VR的普及。以及webassembly的发展,可视化的需求会越来越大,技术氛围也会越来越好。

5、职业接入性好

     运行环境是浏览器,天然带有优势,快来入坑哦😊😊😊。 

可视化如何入门

入门阶段

知识储备
  • 看相关的可视化书籍,积累可视化基础知识,例如常见图表用法,常见可视化方法等。

  • 基础掌握Web开发语言,svg、canvas、openGL等。

  • 学习基础数据分析知识。例如数据获取、清洗等。

  • 会用常见的库,例如D3.js、Three.js。

  • 科学上网(这个可以说是最重要的😂😂😂)。

    会这么多,就足以应对简单的设计了和常见的可视化开发了。

    一点小建议哈,不要过多的使用封装的太好的Chart库。

注重方面
  • 注重实现。先不要考虑过多的语言原理和可视化设计方法。先把技术练好了。

  • 开始有意识的搭建自己的可视化知识体系。

  • 接触可视化的氛围,多参会,多交流。你过了一段时间后,就会发现自己的朋友圈、公众号关注开始逐渐都是可视化相关的内容了,然后促进更加的深入。

       前期最重要的就是大量的练习。如果公司有相应的业务,那么直接可以在业务上学习。如果没有的话,就自己找数据,自己提需求。还可以用一些可视化大会的考题。例如ChinaVisIEEE VAST Challenge,每年的挑战赛基本都提供数据和问题,优秀的作品有些也提供下载等。大家也可以报名参赛。

        具体的技术的实现呢,会在接下来的拆分系列文章里,逐一的详细讲解。

进阶方向

知识储备
  • OpenGl

  • 游戏引擎

  • 可视分析

  • 可视化设计(认知感知,人机交互,用户心理学)

  • 计算机图形学,计算机视觉

  • 图论、图算法

  • 数理统计

      不要看这么多词汇就吓到了,了解的程度看你个人就行,毕竟是工业应用,不是搞研究的。学习别人总结好的东西,如果自己再来一点小灵感就再好不过了。想要了解的更深当然最好,毕竟等你走到后期的时候,限制你发展的往往就是你最短板的地方。

注重方面
  • 最好选一个方向。多看该方向的论文等文献之类的。

  • 实现能力毋庸置疑。

  • 专注可视化能产生的价值。

  • 精通可视化设计能力。

  • 延长自己的短板。

疑惑和解答

Q:在初始做可视化的时候,我总是在想什么才算是可视化工程师。是注重开发还是设计?

A:如果你是刚入门的话,不要想那么多,一定要把开发技术搞好,一般的设计都有专门的人来做。首先就得完美的实现他们的合理设计才行。等你把技术都融会贯通了,设计自然就是你下一步的方向了。

Q:做可视化是不是就不用在学习React等市面上流行的UI库了?

A:不仅要用,而且要用的更好,你的前端基础知识要更加的扎实才行。因为大部分的可视化都是集成在产品里面的,并且包含更多的数据和交互。如果你对现有框架了解的不够的话,有时会产生性能或其他问题。

Q:为什么我做的可视化不够好?

A:大部分情况是没有按照可视化的流程去走。每一步都要稳,不要急于去实现。多思考。

    篇幅有限,都是我个人的思考,可能不适用于大家,就不多写了。接下来你提Q,我来A。

推荐的一些资源

       推荐资源我只列举一小部分。本文不是资源帖,另外选择多了,容易失去焦点。下面的资源每一方面都涉及到。

可视化书籍

  • 《数据可视化》(陈为教授)五星推荐

  • 《数据可视化之美》翻译的一言难尽,尽量看英文的吧

  • 《Information Visualization Perception for Design》(科林瓦雷)

网上课程

  • 北大暑期学校、浙大暑期学校(有条件的同学如果还举办的话,可以参加一下)

  • GAMES101 我男神,讲的特别好,五星推荐

  • 网易云课堂 时长感人

有图学性质的网站

大会和组织

  • ChinaVis

  • IEEE VIS

  • 北大可视分析小组、浙大可视分析小组

期刊

公众号

一些可视化自媒体,做的很不错

  • 宽视善知

  • 帝都绘

  • 上观数据

  • DT财经

  • 湃客工坊(有数)

  • 澎湃新闻

综上

     本次我们团队也参加了ChinaVis挑战赛,拿到了不错的成绩,本来想在这里写一下思路,帮一些朋友练习一下的,但是由于种种原因吧,下次一定。

      好几天没睡午觉,写了这一篇文章,如果能够帮助到您,请您点个赞再走,让我账号快点升级。将是我最大的荣幸。谢谢各位了哈。

     最后如果本文内您有什么疑惑,或者侵犯到您的个人权益,请联系我修改。关于资料的话,如果想要更多的,或者指定领域的资源,可以私信我,或者加我微信wang_xlv。

🏆 技术专题第三期 | 数据可视化的那些事......