制图教室｜逃离R软件，在线生成数据可视化

好看的数据图千变万化，但都逃不开JAVA或者R软件的制裁。作为一个设计师，没事干学学语言也不是什么坏事。

比如这样：

不务正业之余还可以【装B】。

但是吧，为了做一张图学一个软件，甚至程序员语言看起来实在不怎么值得。于是，我们决定研究一下如何偷懒，看看在线网页生成能不能帮我们解决数据可视化问题再顺路【装个B】

比如这样：

或者这样：

「 RAW Graphs 」

这是一个神奇的在线数据可视化网站，帮助代码无能人士完成多样的在线或本地数据可视化表达。

起始页面十分简单。可选择粘贴复制的数据，上传本地数据（TSV, CSV, DSV, JSON数据均可，使用EXCEL可以将表格数据转化为CSV数据，很多境外城市数据库都提供JSON数据页面，直接复制粘贴进来就好），通过URL网页链接引入数据等。如果为了预览出图效果，还可以使用网站的样例数据。

接下来我们使用样例数据中的Hate crimes in New York进行示范。

STEP 1

第一项Load your data中可以查看数据。

这里Gender分为男女两项，Race代表人种，大约5-6种分类，Agr group每10年一组，约7组，最后一项Bias-Motivation分为很多项，表达犯罪动机。在Stack on对话框中我们保留默认的Column选项，用数据量决定图表中的可视化尺寸。

STEP 2

第二项Choose a chart，用于选择图表类型，我们使用Alluvial Diagram完成连线图。

STEP 3

第三项Mapping，用于选择可视化数据列。

Steps选项中的顺序代表了图表中从左到右的顺序。在调整本项的时候，最后一项Customize将实时显示结果。上图所示我们将年龄和人种进行联系，可以看出各个人种不同年龄段的犯罪比例。这么看来传统观念中的黑人小哥反而占比不高，倒是30-40岁的白人老哥显得十分暴躁。

在这一项中也可以添加多组数据列，比如下图我们将性别、种族、犯罪动机联立：

STEP 4

第四项Customize，可以调整数据外观。

Width (px)、Height (px)选项控制图幅，如果过小的话会显示不出，并且系统会告知你最小值不应小于多少：

Background选择背景色：

Margin用于缩进图幅。当标注显示不全的时候，可以缩进相对应的边保证图表的完整：

Nodes width用于调整每一项数据的小黑条宽度，Padding用于调整间距，Links opacity (0-1)调整透明度：

Links blend mode调整图层叠加的颜色，个人感觉区别像是正片叠底；Sort nodes by调整数据顺序，Flows alignment调整数据的起始列位置：

Colors色彩调整，可以选择不同的配色色卡，也可以单独为每个数据配色：

最后一项Labels，选择是否在图上显示数据量：

最后导出成图，推荐svg矢量格式，可以用AI编辑。下面我导出了一个PNG格式大家可以预览一下：

类似的，选择Arc Diagram，就可以制作下图这样的图表，有兴趣的同学可以自己试试作图，把27种图表玩个遍：