经常光顾 B 站的各位想必一定遇到过一类被称为“数据可视化”的视频：柱状图随着时间流逝上下翻飞，营造出一种数据随时间流动不断变化的动态感，使用得当会给人留下鲜明的整体印象。这样的视频不但可以放在网站上与大家一起分享，还可以在数据演示时让观众眼前一亮。

上面这个就是我曾经做过的一个数据可视化的视频。这类视频虽然看似复杂，但仰赖 B 站 up 主 @Jannchie见齐 在 GitHub 上的 这个开源项目，几乎每个人都可以用自己手中的数据快速生成一个这样的视频。

调整数据格式

你可以在项目的说明中看到它最基础的使用方式，即按照如下的格式将数据整理成表格，并保存为 一个.csv 文件。

name	type	value	date
名称 1	类型 1	值 1	日期 1
名称 2	类型 2	值 2	日期 2

这里，表头处列名不可变，用于程序识别其类型。其中每行表示一个当前时间下的个体数据，name 表示个体名称、type 表示其类别、value 表示该个体的当前值、date 表示时间。type 实际上是一个可选项，它作为高于 name 的一个层级（例如市(name) - 省(type) 之间的关系），用于定义同一类的图形颜色等属性。如果你的数据无需进行二级分类，可以不必存在此列。date 列的数据如果是日期最好保存为 "YYYY-MM-DD"（年-月-日）的形式，方便程序的自动排列和默认的格式识别。在一个数据可视化视频中，同一日期的不同个体数据实际上组成了一张“静态统计图”，不同日期间的数据串联起来之后便成为了一个动态的可视化视频。整理数据的过程可以使用 Excel、Numbers 等软件，也可以使用 Python、R 等程序语言，达成最终所需结果即可。文件的编码格式最好选择 utf-8 以匹配程序的默认设置，也避免一些乱码问题。

输入数据

数据整理为所需格式后，就可以将其输入到程序中了。首先在 GitHub 中 colne 或下载项目文件，然后双击打开 src/ 目录下的 bargraph.html 文件，文件会显示到浏览器中，但整个页面只有一个“选择文件”的按钮。（这里推荐使用 Chrome 浏览器保证完整功能，Safari 下遇到过图片无法显示的问题）。点击并选择刚刚整理好的.csv 文件即可，接下来程序会自动运行并开始可视化过程。程序目前无法自主生成视频，可以使用任何录屏软件录下整个过程作为视频素材，能隐藏鼠标的软件最佳（ Mac 上可以使用 Kap ）。

自定义设置

虽然这个可视化项目看起来很简单，但依然提供了很多的选项用来进行自定义操作。不过对于一个几乎没有 UI 界面（如果输入数据的网页不算的话）的程序，所有的基本设置都是在 src/ 目录下的 config.js 文件中完成的。所有的设置项都是简单的 "key: value" 形式的键值对，并且作者已经写好了详细的注释说明，所以即使没有学过编程也不必担心。其中在使用中发现比较常用的一些设置项包括：

1. 决定根据哪一列区分数据类型的 divide_by 选项，默认为 'type'。若数据中没有 'type' 列，可以将其更改为 'name'，同时程序将关闭类型显示功能。
2. 决定根据哪一列区分颜色的 divide_color_by 选项，默认为 'name'。若需要根据类型区分颜色，可以更改为 'type'。
3. 用于指定柱状图配色的 color。如果需要使用自定义配色，将名称与所需颜色匹配成键值对填入这里。这里各项的名称与 divde_color_by 所指定的列一致，如果按 'name' 则使用 name 列下的各项名称指定颜色，按 'type' 则按 type 列下的各项指定颜色（比如我在如上视频中指定第一集的颜色则使用 'CAT.1 喵': '#00b894'）。
4. 指定顶部文字的 itemLabel 和 typeLabel，实际上按注释中所写的 left label 和 right label 理解更为直观，用来指定输入左侧和右侧的文字。
5. 控制顶部文字位置的选项如 item_x, text_y, text_x, offset 等，当顶部文字之间出现遮挡时可以使用它调整位置。
6. 用于调整每个时间点实际间隔时常的 interval_time，可以根据数据量大小、背景音乐的节奏，配合控制交换动画速率的选项 update_rate 一起，用于控制整个视频的时间和画面更新频率。
7. 用于指定是否显示榜首在榜时长的计数器：use_counter，默认为 false。由于计数器与类型显示器（即右侧标签）二者位置相同的关系，不能同时使用。
8. 指定可视化动画在输入数据后延迟多久开始的选项 wait。调高该选项有利于给后期剪掉输入数据等无用部分时留出充足的空间。
9. 指定每个柱状图图片的选项 imgs，与设置颜色时相同，利用键值对为每个条目（即 name 列下的各项名字）指定图片所在的地址。如果条目太多也可以在 src/ 下的 imgs.js 中独立进行设置。

其他用于控制统计图边界位置、单页最多条形图数量、是否显现图标签等选项不一而足，这里不再罗列，可以在使用时自行阅读并修改。每次修改配置后刷新用于读取数据的浏览器页面，重新读取数据后配置即可生效。

你也可以参见项目原作者在 B 站上传过的教学视频对软件使用有一个快速的了解。

程序的活用

最适合制作成可视化视频的数据，应该是被成为“面板数据”的数据结构——即既有同一时间下不同种类的数据，又有不同时间维度上的各类数据。这样才能达成以某个单一时间为一页，不同时间串联在一起形成动态视频的最佳效果。但是很多数据并非是这样的，它们可能只有单一维度而难以“动起来”。实际上开头的视频就使用了并不符合“时间 - 条目”这样二维结构的数据，视频描述了每一集《罗小黑战记》与前一集之间相隔多久，实际上一张条形图就能概括（每一集为 x 轴，相隔时间为 y 轴）。但 由于《罗小黑战记》太能鸽了 我们依然可以采用“每一天只让最新一集的数值增长 +1，而之前剧集保持最长间隔时间不动¹ ，之后剧集在当天不出现”的方式，满足软件所需的数据结构。这样虽然每个时刻只有一个条形图在动，反而强调了更新历程艰难，直至第 28 话一骑绝尘独自甩开所有话 鸽王降世 的戏剧性效果，这也正是这个可数据视化视频的主题。同时我也在 B 站上遇到过展示条目间片名而没有时间维度的可视化视频。通过发挥自己的创意以及对现有程序的活用，你依然可以在数据看起来不是很满足需求的情况下完成自己想要表达的内容。

另一个好消息是作者在 GitHub 上表示过自己将会择期重构整个项目，或许以后它的功能会更加丰富，使用起来也会更加方便。

如果你也想让自己手里的数据动起来，不妨尝试这种方式，为你的数据展示添加一点儿动感吧！