Python + Vue + D3 数据分析及可视化项目分享

2022/11/10 声明

（这篇文章居然被下架了…）
这个项目只是以 GTD 数据库为例做数据的统计及可视化，不涉及对任何具体事件的分析和评论，希望能恢复发表！

前言

这个项目是BIT软件工程专业数据仓库与数据挖掘课程的大作业，主题是GTD数据分析与可视化展示。博主也是通过这个项目入门了数据分析和可视化的一些技术，特此记录一下。数据分析和处理使用Python实现，主要由我的队友完成，这部分只简要介绍一下。可视化部分由我完成，呈现形式为网页，使用了Vue前端框架和D3可视化库，本文主要内容也是分享一些动态、有交互性（说简单点就是看起来比较酷炫ww）的可视化图表实现。

选题介绍

翻译一段官网的介绍：全球恐怖主义数据库（Global Terrorism Database, GTD）是世界上最全面的未分类恐怖袭击数据库，记录了全球范围内自1970年以来超过20万次恐怖袭击。每项事件提供了丰富的具体信息，包括时间地点，使用的武器，攻击目标，伤亡数，发动组织等。

官网链接：GTD | Global Terrorism Database

该数据库开源，可以在官网上下载。下载文件大小约90MB，格式为xlsx，表格共有20万行，150列左右，每行为一次恐怖袭击记录，每列为一个属性。列中有些为两两对应的数字编码和文本（例如下图中country和country_txt），编码和文本的对应关系可以在官网下载GTD说明手册中找到。同时，有大量的列为空（无记录）。另外，1993年的数据不在该主文件中，需要在官网另外下载一个xlsx文件，自行合并。

本小组的选题是对GTD数据库进行统计分析（具体方向见下文）并进行可视化展示，从各维度观察恐怖袭击的趋势，从中提取出有价值的信息。因为恐怖袭击的随机性过大，我们考虑后没有做数据预测部分。

部分成果展示

按理说应该是放在最后一部分的，但既然是写Blog，还是先放成果吧。各位看官要是觉得有意思，再继续慢慢看。所有效果使用D3库实现，而且基本都可以个性化修改（细致到每一条线的大小粗细哦）。

折线图：二级联动菜单目录选择栏，可选全世界、地区、国家三个等级，每个等级下有相应子选项。指标可选攻击次数、死亡人数、受伤人数。鼠标悬浮显示十字线，提示年份和指标值。折线颜色根据指标值按比例染色。选项改变坐标轴和折线有过渡效果。

词云图：输入年份区间和指标类型，根据发生次数和死亡人数动态生成词云图。例如下图中可以看到Bombing/Explosion（炸弹、爆破袭击）是最常发生的袭击类型。有过渡效果。

排名赛跑图：近几年比较热门的一种动态可视化图表类型，网上很多类似项目是用Python数据处理后借助工具网站自动生成的（如https://flourish.studio/）。这里会介绍如何用D3从零开始实现这样的图表（也意味着图中任何一部分都可以自由更改哦）。

甜甜圈（饼、环形）图：10个恐怖组织具体的统计数据。个人认为动画效果做得还比较好，看着很舒服ww

世界地图：恐怖袭击发生的空间分布，地图可拖动，缩放，鼠标悬浮显示国家数值，附带目标颜色加深，背景颜色变浅，描边等效果。

数据分析

根据GTD数据，我们提炼出了5个分析方向：

1. 恐怖袭击随时间发展的趋势：提取出数据中的年份、地区、伤亡人数和袭击人数，通过统计各个地区相应年份伤亡人数和袭击次数并绘制折线图来判断。
2. 恐怖袭击在空间上的分布特性：提取出数据中的地区、经纬度、国家、地区、伤亡人数和袭击人数，以国家或地区为单位统计伤亡人数，并根据伤亡人数在地图上绘制出恐袭热力图
3. 哪些恐怖袭击组织在哪些时间段肇事较多：根据年份，统计各个恐怖袭击组织的袭击造成的伤亡人数，进行排行，筛选出影响恶劣的恐怖组织，做成竞赛图。
4. 研究知名恐怖组织的相关信息：进一步研究这些影响恶劣的恐怖组织的活跃地区、惯用袭击类型、武器和目标人群等，并用扇形图展示各项所占的比例。
5. 某个时间段内哪些恐怖袭击相关的关键字较为活跃：在该时间段的数据中提取出出现次数最多或者相关死亡人数最多的恐怖袭击类型、武器类型和目标人群的相关关键字做成词云图

也就是对应上面的五张图。数据处理用Python的panda和numpy库，先去除不用的列，再去除信息缺失严重的行，有编号和文本对应的，只保留编号列。由此得到清理后的数据表，再根据分析方向对该表做统计，得到5张图用的5个csv，总共大小压缩到了2MB以内。这样保证前端不会出现读取过慢，网页卡顿的问题。

可视化技术路线

前端框架：Vue

emm现在反思一下其实不使用也可以。一开始我以为我们会做的规模更大一点所以还临时学了用了Vue，但做到后期发现好像时间不够了，一共就做了五种图。。。

可视化库：D3

全称Data-Driven Documents，非常强大的数据可视化库，我使用中的感受是它既简化了数据和图表的绑定过程，又最大限度地保留了对图表操作的自由性。不过确实和网上说的一样，学习曲线比较陡峭，刚上手会很懵。个人建议是先跟着教程把简单的图表做下来，然后自己尝试各处改改代码，理解每段代码的作用。推荐网站：

1. d3/d3: Bring data to life with SVG, Canvas and HTML.
   Github项目地址，不多说，主要查API用。不过有些API没有实例。
2. Learn D3
   D3作者自己写的一个系列教程，对入门理解概念很有用。Observable这个网站也是他开发的，但注意这个网站的代码语法和结构跟传统js有差别，基本不能直接搬。代码部分只能参考理解（博主没找到能比较方便地把这个网站上的代码改成传统js的办法，欢迎分享）
3. D3 Gallery
   Observable网站上的D3图表展览，种类很全，而且效果基本也是最好的。代码不能搬比较伤，需要自己在理解的基础上魔改。
4. The D3.js Graph Gallery
   这个网站案例全都是用传统js写的，强烈推荐。入门跟着做几个图能很快熟悉语法和流程。不足在于图的种类相对较少。
5. Blocks
   疑似被Observable替代的图表网站，优点在于也是用传统js写的。缺点是内容比较散，可以作为4的补充。

推荐学习路线为：1中把D3下载调试好 -> 把2的教程过一遍，理解逻辑 ->跟着4做想要的图表 -> 根据需求在3、5中找效果更好（或4中找不到）的图表，理解学习 -> 自己个性化魔改。

干货开始

因为想讲讲具体的代码实现，考虑了一下5种图还是各开一篇博文吧，不然写在一起太长了。博主慢慢施工。当然写这些主要是展示一下能做出的一种成果，详细的实现教程在上面的网站中都有。

Vue + D3 动态可视化图实现之一：折线图

Vue + D3 动态可视化图实现之二：词云图

Vue + D3 动态可视化图实现之三：排名赛跑图

Vue + D3 动态可视化图实现之四：甜甜圈（饼状，环形）图

Vue + D3 动态可视化图实现之五：世界地图

反复考虑感觉这些图的具体实现还是很难总结出一个通用的总结，毕竟细节实在是比较多。如果想学习这个项目的话可能得费点心思啃啃项目源码了。

项目地址

Github：Altair-Alpha / GTD_Analysis

命令行定位到项目文件夹，执行npm命令，然后浏览器输入http://localhost:8080即可查看。

npm install
npm run serve

如果卡住，换cnpm install试试。

一点感想

因为我们的数据挖掘课是半学期课程，这个项目完成的时间还是比较紧的，一共可能也就用了两周左右。这期间压力是相当大的，不说别的课程，光前端技术这块，学校其实没有系统地教过JS，更不用说Vue，React这种前端框架了。JS还是我上学期做一个小程序项目时熟悉的，但很多进阶的内容也没有学到。

当时是先跟着教程1天光速入门Vue基本操作，接着啃全英文教程学D3（百度上真的没找到什么好资料），然后常年开着二三十个网页一边查bing一边查google，一两天做一个图的速度赶，最终还是实现了比较理想的效果，但代码是没时间做整理改进了。作为大三学生，这次项目一方面是让我上手了D3，以后有可视化相关的任务再捡起来会比较轻松，另一方面的确是锻炼了查资料，自学和抗压能力。虽然布置任务时说了也可以用EChart甚至一些模版，但作为大学生，这个阶段应该做的还是要接触底层，多挑战自己啊（笑）