20秒纵览中国大学学术排行榜变化

微信公众号原文链接

在感叹的同时，小笨聪也很好奇这类可视化图表是怎么制作的？便找到了作者 Jannchie见齐的 B 站主页：

哔哩哔哩 ( ゜- ゜)つロ 乾杯~ Bilibili​space.bilibili.com

点进去发现还有大量此类有趣酷炫的视频。

嗯，俺也想学！

那他是怎么实现的呢？原来他用到了一个动态图形显示数据的 JavaScript 库：D3.js。那么，如果不会 D3.js 是不是就做不出来了呢？当然不是，Jannchie非常 nice 地给出了一个手把手简单教程：

见齐 手把手教程

最主要的，他还开放了程序源码，只需要做2步就能够实现：

到他的Github主页下载源码到本地电脑：https://github.com/Jannchie/Historical-ranking-data-visualization-based-on-d3.js

打开文件夹里面的exampe.csv文件，放进你想要展示的数据，再用浏览器打开bargraph.html网页，就可以实现动态效果。只不过要注意使用的数据格式要求。

下面是小笨聪的实例运用。首先爬取大学排行榜的数据并做处理，然后利用源码将数据可视化。

先提前感受一下效果

1.大学排行榜数据爬取

(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

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

确定好数据来源，然后就可以把数据爬取下来啦。

（2）分析URL获取内容

网页的URL 还是很简单的，随着年份变化而变化，我们抓取十年的数据，只需在 main 里构造一下 for 循环，url 格式如代码里所示。另外，需要注意，不同年份网页采用的编码不同，返回 response.test 会乱码，返回response.content 则不会。

（3）解析表格

使用read_html 函数抓取表格，并对表格进行必要处理。

此时的表格数据并不完整，因为没有将国家抓取下来。国家在网页里使用图片表示的，因为我们可以定位到国家代码位置。

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

（4）数据处理

将前面生成的 university.csv 文件进一步处理。另外，这次的代码不仅可以获得内地大学排名，还可以列出含港澳台的排名和美国大学的排名。小笨聪也定义了一个 topn 函数，能够按年份分别求出各年的前20名大学名单。

获取的表格数据效果如下：

2.数据可视化

首先到 见奇 的 Github 主页下载源码，然后将 bargraph.html 拖拽到浏览器，点击 选择文件，将刚才下载好的 university_ranking.csv 文件选中，即可看到动态数据图表。

不过还是有一些需要完善，比如字体大小、柱形颜色、数据项位置、图表反转等等，这些参数在源码的文件里均可以修改。当然，比较方便的办法是可以先在该网页的 css 样式表里改，改好后再到源码里修改。

源码有四个方便修改参数的文件：

config.js : 配置各功能的开关，比如配色、字体、是否反转图表等等；

color_ranges.js : 修改柱形图的颜色；

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

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

当然，如果你比较懒，我已经帮你修改好啦（其实也并不是很容易修改...）。

以上就是本次爬取大学排行榜数据并制作动态图标的分析过程。

微信公众号“学编程的金融客”后台回复“大学排行榜”即可获取源码。

微信公众号原文链接

往期推荐

1.流浪地球影评

2.北上广深租房图鉴

3.图虫网美女

4.猪小屁视频

5.母亲节祝福代码

你的点赞和关注就是对我最大的支持！

http://weixin.qq.com/r/EDl2bvHEkKzvrbUN92wC (二维码自动识别)