在感叹的同时，小笨聪也很好奇这类可视化图表是怎么制作的？便找到了作者 Jannchie见齐的 B 站主页：
哔哩哔哩 ( ゜- ゜)つロ 乾杯~ Bilibilispace.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.母亲节祝福代码
你的点赞和关注就是对我最大的支持！
网友评论