【数据可视化】360度教你如何全面学习可视化——上篇

208 阅读6分钟

通过视觉感知将数据背后的含义有效地传达给观察者。我们将学习计算机如何使用计算机图形显示信息,以及人类如何在视觉上感知该信息。我们还将研究数据的形式,包括定量和非定量数据,以及它们如何正确映射到可视化元素以被观察者很好地感知。

一、可视化概述

可视化模式, 一般来说,这些对于理解数据可视化很重要。

1、交互式可视化

这是一种用于发现的可视化。通常情况下,是单个使用者,也许一两个合作者可能会加入,但是它基本上是电脑前的一个使用者。 并且绘制数据以试图理解这数据究竟意味着什么。 可以完全控制数据,并且可以更改数据集和它是如何动态显示的,以帮助了解使用者正在查看的内容。

2、呈现式可视化

这类可视化是你在视频或者幻灯片中所看到的。其目的是为了将数据的某些方面传达给大量的观众,呈现式可视化与交互式可视化不同之处在于:呈现式可视化不支持用户输入,你只能坐在那观察但不能与数据交互,你所得到的数据已经打包好,可以帮助你理解但是无法交互。

3、交互式讲故事

它们属于演示可视化,以可交互的网页形式呈现,允许用户以有限的方式与数据进行交互,观看者不能修改数据集,但能对数据更进一步的进行调查,更多信息能一次性呈现出来,就像呈现式可视化一样。 在这里插入图片描述

二、图形、绘图和写实

二维图形

所以对于大多数数据可视化任务, 我们只需要二维计算机图形来绘制和显示数据。 为了做到这一点,我们需要使用不同的坐标系。 我们使用不同的坐标系来绘制数据,而不是用来显示数据。

矢量图形

用于绘制的图形,描述形状。例如拿起一只笔画一条直线。

光栅图形

用像素表来显示形状。例如手机屏幕,它们是像素的直线数组,这些像素是指定的颜色。通过指定某些像素的某些颜色,可以代表不同的形状。 在这里插入图片描述 栅格化

你将描述一个点, 开始和结束的行和点,你会得到一条直线,或它们之间的平滑曲线, 这些将被转换为光栅图形显示, 它将由被照亮的像素组成该路径以显示你用矢量图形描述的路径。

在这里插入图片描述 当我们在两个维度中绘制基元时,当我们想要绘制二维图形的形状时,例如对于绘制三角形函数,我们需要一个坐标系统,然后绘制这些形状,以便我们知道放置顶点的位置。

SVG示例

你可以访问 wthreeschools.com,有可缩放矢量图形(SVG)的教程。 在这里插入图片描述

二维绘图

可缩放矢量图形规范是一种描述各种系统二维图形的方法。它使用的系统之一是HTML,所以你可以通过在网页的HTML代码中放置一个SVG标签来嵌入二维图形。

它的宽度和高度,通常是以像素为单位。当svg用于网页时,用于描述文档系统。我们倾向于从左到右、从上到下的阅读方式,并适当地设置坐标系。

<svg width=pw height=ph viewbox="x y w h">......</svg>

3D图形

要了解三维计算机图形的工作原理,必须先了解光是如何离开光影,从物体反射出来的,然后达到你的眼睛,所以它可以被感知。

在现实生活中,我们有一个光源、一个反射光的物体和一个传感器,这就是我们的眼睛。

在这里插入图片描述

当光离开时,太阳和它在整个光谱中是最轻微的,所以它基本上是白色的,但后来那道光射向天空,天空以不同的方式散射光。基于它处理的频谱区域,所以红色波长的光会被更少的散射,蓝色波长的光会被更多的散射,因此光被分散到天空中的其他位置,使天空变蓝,这让太阳看起来是黄色的,因为光一直打在那里。黄色的阳光照在树、草或者任何其他生物群系上。某些波长的光被叶绿素分子吸收,并变成热合成物,为树木提供营养。所以叶绿素吸收光主要是在蓝色区域。 在这里插入图片描述 所以我们可以模拟这个过程,例如这个相机,真空相机有一个非常小的光圈,正在从物体反射光,在这种情况下,这只蓝色小兔子,穿过一个焦点,它被投影到一个图像平面上,然后在现代CCD阵列摄像头。

在这里插入图片描述 我们想做的另一件事创造一种透视感,使得远的东西显得小,近的东西显得大。在计算机图形学中,我们通过处理图元本身来做到这一点。例如下图中桌上的茶壶的透视场景,这看起来没什么问题,但是如果我们从侧面来看,实际上是正面的桌子更多,后面的桌子更小,所以当它投影到二维图像平面上时,得到了透视渲染的正确比例。

在这里插入图片描述

写实主义

写实手法会提供一些视觉提示,以此告诉我们的视觉神经系统,看到一个2D图像的时候,要让我们可以想象出来一个3D的场景。这些手法有:遮挡。这里的遮挡让你觉得小男孩的手是在画框的外面,它就是在激发你的感知系统让你觉得这是一个小男孩从画框里爬出来的场景,而不是一个二维平面的图像;其他一些手法还包括透视,比如图中的水波,越是接近地平线切越远的部分,画面上的波纹就排列得越紧密;其余手法还有光照等。 在这里插入图片描述 其中最有效的手法是遮挡,在其中加上一些光学错觉的话,会非常有意思。

在数据可视化过程中,我们可以把两种手法融合起来。

举个例子🌰

我们用粒子运动时产生的运动轨迹来模拟主动脉的血流。这里模拟里遮挡的效果,可以让一些轨迹出现在另一些轨迹的前面。你可以看到这条绿色的轨迹在蓝色轨迹的前面;此外还用了光照,可以看到这些轨迹是圆柱状的,它们有亮面和暗面,因为光线照射到它们上面的时候还发了散射;同时我们还能看出透视手法,前方的物体比较大,而后方的物体比较紧凑比较小,所以这些手法的叠加使得观者有更好的感觉。 在这里插入图片描述