本文同步发布于 Medium Bootcamp 专栏：medium.com/p/d84ed99df…
无论是执行数据分析还是制作数据报表，我们都会大量使用图表的形式来更好的呈现数据。装饰复杂的图表、简洁直白的图表、数据密集的图表等等，在无数风格迥异的图表之间，我们应当如何来评价什么样的图表是好的，什么样的图表又是不好的呢？
好图表，坏图表
让我们先看看《好图表，坏图表》中的两个图表示例：
图表一：柱状图
图表二：三维柱状图
-- "Good Charts, Updated and Expanded The HBR Guide to Making Smarter, More Persuasive Data Visualizations"
图表一与图表二之间所呈现的内容存在一定的差异。图表一是我们所常见的柱状图，颜色简单，内容直白。不同地区之间的数据变化百分比通过零值线上下柱子的延伸而清晰的表现了出来。图表二使用了更容易抓住阅读者实现的三维形式。从俯视的角度观察不同季度的数据增长，数据之间的高低比例由于透视关系而表现的更为醒目。
那么，这两个图表之间存在绝对的好坏之分吗？《好图表，坏图表》书中是这样表述的：
The answer is that we don’t know. Without context, no one—not me, not you, not a professional designer or data scientist, not Tufte or Few or Wong—can say whether that chart is good. In the absence of context, a chart is neither good nor bad. It’s only well built or poorly built.
当我们需要具体的来评价某一个图表的“好坏”时，我们需要足够的背景信息：关于这一图表我们想要表达什么数据观点？我们所面向的目标用户是哪些人群？我们的这一图表最终将放在何种用途中？基于这些背景信息，我们才能从具体的角度来分析图表。例如，图表是否绘制了足够醒目的标注引导用户获取特定的数据观点、用于图表报表上的数据是否简单清晰以便决策者快速掌握数据情况并做出判断等等。
那么，图表之间就没有某一绝对的评价标准来衡量图表本身的好坏了吗？也许是有的。对此，我希望借用诗人庞德的一句格言来描述：陈述的基本准确性是写作的唯一道德准则。
"Fundamental accuracy of statement is the one sole morality of writing."
-- Ezra Pound
对于图表而言，数据呈现的基本准确性是图表制作中唯一的道德准则。
从我的角度来看，评价图表中唯一的绝对标准在于：图表本身是否准确的还原了原始数据的信息。图表最重要的意义在于呈现数据。无论阅读者本身的主观判断如何变化，审美取向如何分歧，还原数据始终是图表的核心意义所在。
什么是图形语法
数据。数据。
你是否思考过一份数据是如何转换为图表的呢？是的，我们有柱状图、折线图、面积图、饼图，我们在 excel 里头框选某个范围的数据，点击嵌入就能生成一张图表。但是这些图表上的不同部件，不同元素，是如何从原始的数据一步步转换为最终的视觉呈现的呢？
图形语法描述了这一转换过程。
图形语法是什么？简而言之，图形语法描述了原始数据转换为特定的数据映射，并最终基于特定的图元形式组织为图表的过程中的各个关键阶段，例如从下图中的左侧的表格数据映射到右侧饼图中的扇区。
那么图形语法能给我们带来什么样的好处呢？
无论是设计师或是程序员，如果你需要完成图表相关的工作，你需要理解图表是如何与数据构建关联的。尤其是当你有多种不同类型的图表制作任务时，你需要一套完整的逻辑来解释：数据的更新如何影响图表的渲染；图表的轴或者图例等组件如何与图表的其他部分产生关联等等关键问题。
这就是图形语法的价值。从 1980's 到现在，Leland Wilkinson 的图形语法理论已经被图表相关的研究人员广泛学习与应用。当然，图形语法的理论本身并不完美。近年来，许多研究者也试图提出一些新的理论来替代或者完善图形语法的理论内容，但是图形语法本身的核心逻辑并没有出现非常大的变更。这也说明了图形语法理论本身的鲁棒性。
从数据到图形
我们要如何制作一个饼图呢？（How to make a pie?）
图形语法给出了一个直观且清晰的流程：
From data to graphic:
-- "The Grammar of Graphics"
这一个流程是什么含义呢？如果你希望能够完整掌握图形语法的理论，那么毫无疑问，直接阅读 Leland Wilkinson 的《The Grammar of Graphics》是最为有效的方法。GoG 的理论本身并不特别复杂，不过对于学习者而言仍然需要一些简单的数据基础。
简单而言，GoG 的核心流程可以分为两个主要阶段：数据（从 Variables 到 Statistics）以及图形（从 Geometry 到 Aesthetics） 。
- 数据阶段：数据阶段负责将原始的数据转换为用于绘图的数据。
举例而言，数据库中存储了每一个订单的交易信息。首先 Variables 阶段通过 SQL 查询获取订单的类型以及区域信息。Algebra 阶段可以将两个字段的信息进行叉乘整合成一个新的数据表，从而在一个图表中展示多个字段的信息。Scale 阶段将离散的字段信息映射到整数形式的编号。最后，为了减少数据量，Statistics 阶段可以统计表格中相同 Type 以及 Area 的数量，并生成一个新的 Count 字段。
通过这些数据阶段，我们得到了最后将会用于图表渲染的最终数据内容。
- 图形阶段： 图形阶段负责将渲染的数据和具体的图形关联起来，并且设置具体的视觉通道，例如颜色和位置。
延续上一个例子，我们得到用于渲染的数据之后，通过 Geometry 阶段将数据关联到具体的 interval 图形，随后通过 Coordinate 阶段将这些图形转换到特定的坐标系中（例如饼图需要转换到极坐标系），并最终在 Aesthetics 阶段为这些图形设置上颜色和位置（例如 Count 的数值将会转化为柱子的高度，Type 的值将会转化为柱子的颜色）。
通过数据和图形两个阶段，我们最终将原始的数据转换为了一张由图形构成的图表。
从图形语法的视角
图形语法的理论构建了一个严谨的从数据到图形的流程，抛开那些复杂的统计计算或者代数计算，图形语法的核心就在于映射：数据的值是如何映射到实际的图形属性的。
在上一章的柱状图的示例中，Count 字段的数据值与线性的比例尺结合，就构成了每一个 Interval 图形的高度：
这也为我们提供了一个评价图表的视角：图表中实际呈现的内容，图形的颜色、形状、尺寸，究竟是如何通过数据映射而来的呢？
让我们看几个糟糕图表的例子：
这张描述了评论中身份分布比例的图表乍一看做的非常精致，但是当仔细观察图表内容的时候又令人觉得疑惑：Pseudonyms / Anonymous / Real Identity 三个部分表现为一个对话气泡中不同比例的部分，但是与此同时，三个部分又显示为了阶梯的形状，分别设置了不同的高度。
三个身份所对应的比例数值究竟映射到了什么图形属性上呢？61% 对应的是绿色图形的长度，面积还是阶梯的高度？图形表现中包含长宽高三个维度，而实际上的数据只有一个维度，这也就不可避免的为数据阅读造成了困难。如果这个图表将阶梯的差异去除掉，也许整个数据逻辑会显得更加清晰一些。
让我们再看一个设置了图形填充的例子：
又是一张令人感到迷惑的图表。虽然形状上是美国地图，但是本质上它是通过堆叠面积图的形式来讨论美国人口中的种族比例变化，地图的形状只是用来对面积做裁剪。从映射的角度来看，数据中的年份映射到了面积图形在 X 方向上的位置，占比映射到了面积图形在 Y 方向上的高度。但是从视觉表现上来看，由于地图的存在，图表的阅读者会直观的认为经纬度和实际的数据映射存在关联。
除了令人疑惑的数据映射之外，地图形状的裁剪也导致较小比例的 Asian 和 Other 数据几乎不可见了。从一定程度上讲，图表没有正确的反映原始的数据信息。
尽管填充图形在图表中非常常见（例如水波图或者各种不同形式的象形图），但我仍然建议尽量减少使用特定形状的填充来描述数据比例关系：
-
首先，对于阅读者而言很难搞清楚实际上数据映射的图形属性是填充的面积还是长度/宽度；
-
此外，阅读者通常对于面积的差异并不敏感，填充的形状本身也会干扰阅读者对信息的获取。
最后再来看一个更接近常见图表的案例：
图表对比了不同语言的使用者数量，在除了 Chinese 以外的语言中，图表通过常规的条形图来对比不同语言的人数差异，数据中语言对应的使用者数量映射到了 interval 图形的宽度。
但是在 Chinese 数据中，也许是觉得按照一般的逻辑来映射宽度会导致 interval 图形显得过于长了，作者特意增加了 interval 图元的高度，使得它表现为更小的宽度与更大的面积。
除此之外，其他数据的图形表现也十分怪异。English 与 Spanish 的数据相差 60%，但是图形的长度却接近相等，这也导致数据与图形的映射关系显得非常混乱。
在上述例子的分析里头，我们通过图形语法的视角对图表进行了快速的判断：这个图表是否正确的构建了数据到图形之间的关系，是否具有 数据呈现的基本准确性。
你并不需要图形语法
但事实上，你并不需要图形语法。至少对于非图表库的开发者或者对于图表本身制作有着严苛要求的数据科学家而言，在日常的工作中图形语法并不是必须的。
是的，基于图形语法的理论，你可以很轻松的做出判断：虽然外形与饼图非常相似，但是从数据逻辑上来讲玫瑰图实际上更加接近于在极坐标系下绘制的柱状图。
但是在每一天的工作中，我们实际上并不总是需要从零开始构建一个图表。如果你是开发者，你可以选择像是 VChart(visactor.io/vchart) 这样基于图形语法实现的图表库来快速创建图表。如果你是设计师，也可以在 Figma 中使用各种图表插件生成你需要的图表。
如果你感兴趣的话，可以尝试一下我开发的 VChart 图表插件（www.figma.com/community/p…
插件内置了多种图表类型与模板，提供不同的主题以及样式配置（点击右上角 Language 按钮可以切换语言）。当然，最重要的是，所有图表完全遵循 数据呈现的基本准确性。
