让你的数据动起来，数据可视化视频制作入门指引

写在前面

不知道你有没有注意，前段时间乃至是现在，当你浏览朋友圈、视频网站、微博等社交网络的时候，经常会有人发一些看起来很酷炫的动态数据可视化视频。就是类似下面的这种视频。
这种视频的题材也是多种多样，比如GDP排名、大学排名、B站Up主排名、IOS应用排名等等，可谓种类繁多花样百出。但是，这些视频的主题都离不开数据。视频的发布者将采集到的各式各样的数据通过工具处理变成可视化的视频。原本枯燥乏味的数据马上就活灵活现起来，视频的观看者也能从这些动起来的数据上发现出更多的精彩和乐趣。相信你也曾经被这些数据可视化视频所吸引，并被视频所展现出来的各式各样的有趣的变化而感慨万千。

这类视频之所以能够火爆，要归功于B站一位热心的技术宅Up主Jannchie见齐。是他最先制作了此类数据可视化视频，并将视频制作的工具开源出来为大家所用，才有了后来此类视频的火爆。从技术上将，开发制作可视化数据视频的工具并没有太大难度。但是更多人缺乏的是像Jannchie见齐那样用技术给大家带来快乐和满足的奇思妙想，以及热心积极的开源精神。

那么，你是是否也有些心动像制作这样看起来很酷炫的数据可视化视频呢。我们只需要借助一些工具，就可以轻松达成这个目的。而且方法还不止一个，其门槛和难度都不高。只要你有好的创意，能够提供有趣的数据就可以啦。下面，我就来教大家这几种制作数据可视化视频的方法。

数据可视化教程

目前B站上常见的数据可视化视频框架，除了Jannchie见齐的Historical-ranking-data-visualization-based-on-d3.js框架外，还有狸子LePtC的AutoAni框架。两种框架所采用的技术路线不一样，呈现出来的效果也各有特色。两者的学习成本都不算太高，具体想用哪个框架就看个人的喜好了。

本教程所使用到的开源程序都托管于Github上。对于程序员来说，如果你对数据可视化视频的制作感兴趣，我只需要指出代码仓库的地址，下面你就可以自学成才了。对于没有任何经验的普通用户，本文也只是提供入门指引。更多的还需要自己发挥主观能动性去探索和创造。

Historical-ranking-data-visualization-based-on-d3.js

By Jannchie见齐

框架代码地址在这里：点我，普通用户无需注册，点击“clone and download”，然后点击“Download ZIP”使用浏览器下载即可。耐心等待代码下载完成。


将下载到的zip文件解压到任意工作目录，可以看到文件结构如下，重要的文件其实都在src目录里面。除此之外的文件其实没有用处，但是也请保留。

进入src目录，可以看到如下几个文件。其实这个框架就是由利用JavaScript代码，在网页上进行渲染，生成动画效果。bargraph.html文件就是这个网页本身，可以当作程序的主入口。config.js是配置文件，能够进行一些简单的配置，从而影响到渲染动画生成的效果。example.csv就是你需要提供的数据集合了，目前只有示例数据。stylesheet.css是样式文件，改变它可以调整网页渲染的样式效果。visual.js主要负责将数据读入，并提取配置信息，在网页端渲染出动画。

具体这个框架如何使用，我这里做一个简单的示范。

首先，使用Chrome打开bargraph.html文件。选择Chrome会让你的数据可视化视频制作之路少走很多弯路。打开后的网页显示如下。点击选择文件，载入example.csv。

然后，就可以看到网页上显示出了数据可视化动画。想要重新载入，直接刷新页面即可。

所以，框架的使用是非常简单的。制作数据可视化视频最重要的工作就是数据的采集和整理。因此，我们要了解框架可接受的数据的格式是什么样的。

使用excel或者任意文本编辑器打开example.csv文件，可以看到数据元素的格式如下。

每条数据由四个属性组成，分别是：name、type、value和date。下面我举一个实际的例子解释下这四个属性的意义。

我们浏览什么值得买的时候，经常会看到右侧有一个原创达人榜，上面会列出一段时间内某位用户累计收到的点赞数和收藏数。假设我可以获取到全站用户的每天的累计点赞数，那么我可以这样组织数据。name显而易见就是用户名。type其实是可选项，这里可以指定是普通用户还是普通生活家，或者是达人生活家。value就是由date指定的那天的该用户的累计点赞数。最后整理出来的数据元素应该是这样子的。

注意，保存数据文件的时候，要保持文本编码格式为UTF-8。

如果我能够获取全站用户的点赞数据，并按照上面的格式进行数据归纳，每天只取前二十名的用户的数据，这样等我数据整理完毕后，我就能够观察到什么值得买收到的点赞数最多的前十名用户的动态排名了。

针对用户的个性化需求，框架还提供了配置文件，使用户可以按照自己的需要进行有限的修改。框架的配置文件即是config.js，可以使用任意文本编辑器打开。

配置文件本身针对每一条可供修改的选项都提供了较为详细的注释。我这里对几个常用的选项进行进一步说明。

max_number：控制每个时间节点上，最多显示的条目数。用户提供的数据集合中，在相同的时间节点上可能存在很多条数据，此变量可以让你选择显示前max_number个。

timeFormat：控制时间显示格式，有些数据可能不是以日期为单位的，也可能是以月份或者年份为单位的。此处的时间格式要和数据中date的格式保持一致。

interval_time：这个变量用来控制数据的播放速度。如果增加这个值，两个时间节点之间变化的时间间隔会变大，效果就是数据变化播放速度变慢。

剩下的选项看注释比较好理解，理解不了的一般也不需要修改。

如果觉得上面的文字教程不够直观和详尽，也可以直接看框架作者制作的视频教程。

AutoAni

**By 狸子LePtC**

除了上面的框架，狸子LePtC利用Adobe Flash开发了一套全新的框架，而且显示效果更为酷炫一些。普通用户使用的话，可以直接下载这个代码仓库中的某些文件，里面有编译好的现成的动画模板。如果对代码层面的东西感兴趣，则可以访问这个仓库：点我。

下面简单演示一下如何使用这套框架。首先进入AutoAni，进入“已发布的swf”目录。这里的文件都是已经编译好的不同版本的动画模板。按照我的习惯，我直接选择版本号最高的最新的动画模板，即是 v0.8.5-竖屏-去掉启动时暂停.zip这个文件。注意我这里下载的是竖屏版。

点击”Download”进行下载。

下载完毕后解压文件，目录结构如下。图片资源都是素材文件，data.csv是用户需要提供的数据集合，config.csv是配置文件。

模板中已经内置了示例数据和相关资源，我们直接使用视频播放器打开自适应柱图-竖屏.swf，我这里使用的是Potplayer。如果画面显示太小，可以尝试调整一下显示比例。模板自带的示例数据是全国各大火车站的日旅客发送量排行榜，稍等片刻，就可以看到酷炫的动态数据视频了。

从视频上可以看出，这套框架会对每个时间节点上的数据进行求和，根据求和值进行排行。因此数据展示出来的是某个时间段内的累计排行变化。而上一节的框架则不会对数据进行累加，展示出来的是单个时间节点上的排行变化。如果想实现和本届=节框架一样的效果，则用户需要在数据整理的时候，自行按照日期对数值进行累加。

使用已经编译好的模板，用户只需要提供数据即可。在某些情况下，也可能需要修改相关配置。接下来，我们先看一下本套框架所需要的数据格式。打开data.csv文件，可以看到如下的数据。

和上一节的数据格式有很大不同，我们逐行分析。
第一行数据以“.png”开头，作为图片文件的后缀名称。后面的是该数据列对应加载图片的名称。组合起来就是完整的图片名，比如1.png、2.png等。当然，后缀名也可以是其他常见的图片格式后缀，比如jpg、bmp等，图片名称也可以自定义。要保证图片素材和数据文件中组成的文件名保持一致，且放到当前目录下。

第二行数据以“cname”开头，后面则是数据列要显示的名称。这个比较好理解，不再过多解释了。

第三行数据以“color”开头，后面的值表示每个数据列想显示的颜色。颜色值用十六进制颜色码表示。

第四行开始，都以时间日期为开头，后面跟着每个数据列的数值。

看完示例数据后，上面每行数据的涵义应该很好理解了。注意，保存数据文件的时候，要保持文本编码格式为UTF-8。
本框架同样了提供了配置文件，可以根据不同的需求进行修改。配置文件也同样提供了较为详细的注释，自己多加揣摩和验证，就能理解其中的含义。此外，配置文件建议使用文本编辑器进行修改。

同样地，作者也提供了视频教程以供参考：点我。

视频录制教程

上面使用的两种框架生成的动态可视化数据，第一个是渲染在网页端，第二个是利用播放器进行播放的flash，都不是可以直接用于传输到视频网站上的文件格式。因此，为了让我们生成的动态可视化数据变成视频，我们还需要借助于屏幕录制软件。根据每个人的习惯不同，你可以选择不同的屏幕录制软件。这里我将介绍一下我使用的屏幕录制方式，即利用Windows 10自带的屏幕录制工具，即方便使用，也无需安装额外的工具。

首先，进入”Windows设置”中，选择”游戏”。

然后，打开屏幕录制开关，即可以启动Windows自带的屏幕录制功能。

以第一种框架为例，简述一下如何录制视频。
1.使用Chrome打开bargraph.html

2.使用快捷键Win+G，打开视频录制工具栏。第一次打开会弹出提示框，勾选”是的，这是一个游戏”。

3.点击工具栏上的录制按钮开始录制视频。

4.在网页上打开数据文件，并播放生成的动画。等待播放结束。

5.播放结束后，点击工具栏上的停止录制按钮结束屏幕录制。相应的视频文件会保存在C:UsersXXXVideosCaptures文件夹中。

有了原始的视频素材后，剩下如何处理加工视频，本文就不再进一步深入讨论了。

总结

正所谓师傅领进门，修行靠个人。本文是针对如何制作数据可视化视频的入门教程，对两种不同的框架进行了简明扼要的入门指导。受限于篇幅（其实是懒），没能对两个框架的具体使用和配置进行深入的展开。两个框架的作者也确实很照顾普通用户，实际上其使用门槛都不高。大部分时间，我们所需要做的就数据的搜集和整理。框架所提供的配置文件都有着很详细的注释，大部分情况下，我们只需要修改几个简单的配置即可。那么，本文已经给出了入门的大方向，你是否也跃跃欲试，让手中的数据动起来呢。