Pyhton可视化（1）：历年中国大学学术排行榜

摘要：：最近在朋友圈看到一个很酷炫的动态数据可视化表，介绍了新中国成立后各省GDP的发展历程，非常惊叹竟然还有这种操作，也想试试。于是，照葫芦画瓢虎，在网上爬取了历年中国大学学术排行榜，制作了一个中国大学排名Top20强动态表。

https://www.makcyun.top/Python_analysis1.html

1. 作品介绍

这里先放一下这个动态表是什么样的：

不知道你看完是什么感觉，至少我是挺震惊的，想看看作者是怎么做出来的，于是追到了作者的B站主页，发现了更多有意思的动态视频：

这些作品的作者是：@Jannchie见齐，他的主页：https://space.bilibili.com/1850091/#/video

这些会动的图表是如何做出来的呢？他用到的是一个动态图形显示数据的JavaScript库：D3.js，一种前端技术。难怪不是一般地酷炫。

那么，如果不会D3.js是不是就做不出来了呢？当然不是，Jannchie非常Open地给出了一个手把手的简单教程：

https://www.bilibili.com/video/av28087807

他同时还开放了程序源码，你只需要做2步就能够实现：

到他的Github主页下载源码到本地电脑：

https://github.com/Jannchie/Historical-ranking-data-visualization-based-on-d3.js

打开文件夹里面的文件，放进你想要展示的数据，再用浏览器打开网页，就可以实现动态效果了。

下面，我们稍微再说详细一点，实现这种效果的关键点是要有数据。观察一下上面的作品可以看到，横向柱状图中的数据要满足两个条件：一是要有多个对比的对象，二是要在时间上连续。这样才可以做出动态效果来。

看完后我立马就有了一个想法：想看看近十年中国的各个大学排名是个什么情况。下面我们就通过实例来操作下。

2. 案例操作：中国大学Top20强

2.1. 数据来源

世界上最权威的大学排名有4类，分别是：

原上海交通大学的ARWU

http://www.shanghairanking.com/ARWU2018.html

英国教育组织的QS

https://www.topuniversities.com/university-rankings/world-university-rankings/2018

泰晤士的THE

https://www.timeshighereducation.com/world-university-rankings

美国的usnews

https://www.usnews.com/best-colleges/rankings

关于，这四类排名的更多介绍，可以看这个：

https://www.zhihu.com/question/20825030/answer/71336291

这里，我们选取相对比较权威也比较符合国情的第一个ARWU的排名结果。打开官网，可以看到有英文版和中文版排名，这里选取中文版。 排名非常齐全，从2003年到最新的2018年都有，非常好。

2.2. 抓取数据

2.2.1. 分析url

首先，分析一下URL:

可以看到，url非常有规律，只有年份数字在变，很简单就能构造出for循环。

格式如下：

下面就可以开始写爬虫了。

2.2.2. 获取网页内容

上面需要注意的是，不同年份网页采用的编码不同，返回response.test会乱码，返回response.content则不会。关于编码乱码的问题，以后单独写一篇文章。

2.2.3. 解析表格

用read_html函数一行代码来抓取表格，然后输出：

可以看到，很顺利地表格就被抓取了下来：

但是表格需要进行处理，比如删除掉不需要的评分列，增加年份列等，代码实现如下：

需要注意的是，国家没有被抓取下来，因为国家是用的图片表示的，定位到国家代码位置：

可以看到美国是用英文的USA表示的，那么我们可以单独提取出src属性，然后用正则提取出国家名称就可以了，代码实现如下：

然后，我们就可以输出一下结果：

数据很完美，接下来就可以按照D3.js模板中的example.csv文件的格式作进一步的处理了。

2.3. 数据处理

这里先将数据输出为文件，结果见下表：

10年一共5011行×6列数据。接着，读入该表作进一步数据处理，代码如下：

上面需要注意两点：

可以提取包含港澳台在内的大中华区所有的大学，也可以只提取内地的大学，还可以提取世界、美国等各种排名。

定义了一个求Topn的函数，能够按年份分别求出各年的前20名大学名单。

打开输出的文件：

结果非常好，可以直接作为D3.js的导入文件了。

2.3.1. 完整代码

将代码再稍微完善一下，完整地代码如下所示：

至此，我们已经有基础数据，下面就可以进行可视化呈现了。

2.4. 可视化呈现

首先，到作者的github主页：

https://github.com/Jannchie/Historical-ranking-data-visualization-based-on-d3.js

2.4.1. 克隆仓库文件

如果你平常使用github或者Git软件的话，那么就找个合适文件存放目录，然后直接在 GitBash里分别输入下面3条命令就搭建好环境了：

如果你此前没有用过上面的软件，你可以直接点击下载下来然后解压即可，不过还是强烈建议使用第一种方法，因为后面如果要自定义可视化效果的话，需要修改代码然后执行命令才能够看到效果。

2.4.2. 效果呈现

好，所有基本准备都已完成，下面就可以试试看效果了。

任意浏览器打开网页，点击选择文件，然后选择前面输出的文件，看下效果：

可以看到，有了大致的可视化效果，但还存在很多瑕疵，比如：表顺序颠倒了、字体不合适、配色太花哨等。可不可以修改呢？

当然是可以的，只需要分别修改文件夹中这几个文件的参数就可以了：

config.js 全局设置各项功能的开关，比如配色、字体、文字名称、反转图表等等功能；

color.css 修改柱形图的配色；

stylesheet.css 具体修改配色、字体、文字名称等的css样式；

visual.js 更进一步的修改，比如图表的透明度等。

知道在哪里修改了以后，那么，如何修改呢？很简单，只需要简单的几步就可以实现：

打开网页，，箭头指向想要修改的元素，然后在右侧的css样式表里，双击各项参数修改参数，修改完元素就会发生变化，可以不断微调，直至满意为止。

把参数复制到四个文件中对应的文件里并保存。

Git Bash运行，之后刷新网页就可以看到优化后的效果。

最后，再添加一个合适的BGM就可以了。以下是我优化之后的效果：

BGM：ツナ覚醒

如果你不太会调整，没有关系，我会分享优化后的配置文件。

以上，就是实现动态可视化表的步骤。 同样地，只要更改数据源可以很方便地做出世界、美国等大学的动态效果，可以看看：

中国（含港澳台）大学排名：

http://pc1lljdwb.bkt.clouddn.com/Greater_China_uni_ranking.mp4

美国大学排名：

http://pc1lljdwb.bkt.clouddn.com/USA_uni_ranking.mp4

本文完。