腾讯设计师：超实用的数据可视化零基础教程之实战案例篇

腾讯ISUX -凯杨：上篇文章简单的介绍了数据可视化的基础，将数据进行设计可视化后，可以让我们有一种全新的方式去认识数据，改变对数据的呈现和思考方式。那现在就开始做一份数据的可视化表，一步步的来看下我们如何获取数据，以及如何进行可视化的展示。

往期回顾：从零开始搭建数据可视化系统的实用指南

在上章内容中，提到了关于【数据可视化迭代过程】的步骤，这也能看出整个过程包含的步骤，大致有：

确定主题 – 数据获得 – 图表选择（表达）- 图表绘制

当然了我们也可以看到可视化是要一个不断迭代的过程，步骤之间都需要多次的迭代修改的。

确定主题

这肯定是第一步了，在做数据可视化的时候，首先你要明了你要做什么，想要从数据获中取什么信息，有了目标才能明确的往下做。

那我们这次还是来做关于空气质量PM2.5的数据展示，了解历年来PM2.5的实际情况和发展趋势。

数据获得

对于全国空气质量的数据，最权威的来源肯定是来自于中国环境监测总站（http://www.cnemc.cn/）的数据提供。但是监测总站的API提供的并不是很详细，还有很多第三方也提供类似的API接口，比如PM25.in（http://pm25.in/），在API说明上做的很详细，他们的数据每日更新。所以这次我们选择PM25这个网站来获取数据源。

我们可以看到PM25提供的内容是相当多，包括PM2.5、AQI、PM10、CO、NO2、O3等等。我们只需要PM2.5的数据，所以我们把其他不需要的数据都可以去除掉，同时把Json的数据转换为CSV的数据格式，这里转换数据只是为了下一步处理方便，我这边是选用Processing来做数据可视化处理的。如果你用D3.js，Echart来做的话，Json可能会更方便点。

图表选择（表达）

对于很多人（非设计师）来说数据可能容易获取，但是像要把数据转换成合适的图表进行表达反而非常困难的。因为同样的数据，用不同的图表进行展示出来，得到的效果是完全不一样的。平时可能用到最多的就是通过Excel来做图表，在Excel2010的版本里面，提供了10类共53个图表，还提供了什么数据透视图，自定义图表等等，总之种类非常多。不过尽管图表种类繁多，但其基本类型只有以下几种：

• 曲线图：用来反映随时间变化的趋势。
  
• 柱形图：用来反映分类项目之间的比较，也可以用来反映时间趋势。
  
• 条形图：用来反映分类项目之间的比较。
  
• 散点图：用来反映相关性或分布关系。
  
• 饼图：用来反映构成，即部分占总体的比例。
  
• 地图：用来反映区域之间的分类比较。
  
  

那知道了，基础图表的类型，那怎么去选择。国外专家Andrew Abela他将图表展示的关系分为4 类：比较、分布、构成、联系。然后根据这个分类和数据的状况给出了对应的图表类型建议。当我们不确定使用什么类型的图表的时候，可以参考下这个图。

图表绘制

俗话说【不会撸码的交互不是好的数据可视化设计师】，现在市面上有各式各样的可视化的方法和工具，但坦白来说【这些可视化工具都是大坑！！！】，要想做好可视化的表现，最好的方式还是需要掌握一门编程语言，只有这样你才能最合适的表达清楚出你想传达出来的数据信息。

这里给各位想跳入数据可视化这个大坑的设计师们（编程大佬请无视），推荐一下Processing这个创意编程语言。

Processing是美国麻省理工学院媒体实验室旗下美学与运算小组创造出来的（搞设计的人做出来的编程语言），非常容易上手，代码逻辑也很简单，几段代码就能做出十分出现效果的展示。

不过Processing没有代码提示的功能的，用起来还是十分痛苦的，经常是因为一个单词写错了，而造成程序报错。不过后来我发现到Subilme Text能支持Processing的编译环境，而且能提供代码提示功能，简直是发现新大陆一样，从此Processing用起来再也不费劲了。

确定用Processing来实现后，我们继续来做PM2.5的可视化展示。国家环保部将空气质量分为六个等级，分别用绿、黄、橙、红、紫、褐六个颜色来标注，对于着优、良、轻度污染、中度污染、重度污染和严重污染六个空气质量。我们要展示历年来PM2.5的实际情况和发展趋势，就可以把每天的空气质量转换一个个不同颜色的小方格，通过颜色的区别来展示当天的PM2.5情况。

先在纸上画一个简单的草图。已年为划分，下面用小方格展示该年内每天的空气质量是什么等级，把当天的PM2.5数值转换对应的颜色值。

代码很简单的，我大概编写了40来行就完成了，代码逻辑很简单就是导入数据，判断当前数据的值是多少，根据不同的值属于小方块不同的颜色。

实现之后，看起来就是这样子的。日期时间轴是按照1月到12月排列的，通过上面的图示我们可以比较清楚的看到污染程度比较高的时间是集中在开头和结尾，就是1-2月，11-12月之间，也就是每年冬天就是PM2.5污染程度高的时间。

我们继续把成都历史的数据可视化后来看下。我们发现12年之前成都空气质量都还不错的，在14年的时候，就没有小绿格了，可见14年成都空气质量有多差劲，15年、16年后慢慢的开始有点好转，应该是政府开始治理了。我们在把北京，上海和深圳的天气拔来看看。

第一列是成都08-16年的空气质量，第二列是北京的，第三列是上海的，第四列是深圳的。可见深圳的空气质量完爆成都、北京和上海。几乎全是小绿格，真是宜居好地方啊。而帝都北京空气质量是这四个城市中最差的。

小结

将数据可视化后，我们可以发现数据中更大的意义，最重要的还是实践做出来，这篇文章简单的讲解了下可视化的整个过程，我们如何寻找数据，以及做出有意义的可视化图表出来。希望更多的人兴趣，一起来做数据可视化。

原文地址：腾讯isux