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

本文完。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180906G1K2LY00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券