世界各國GDP動態排名可視化實現（基於d3.js）

1、說明

以前在抖音上看到GDP等各類排名的可視化，一直想知道是怎麼實現的。以前也有研究過一次，但以爲太麻煩放棄了，昨天又心癢難耐研究了一翻。

先是看到這篇文章說是有人基於d3.js實現：https://blog.csdn.net/qq_15351167/article/details/81363798

我想實現一個GDP的可視化排名，數據是從世界銀行下載的。首先的一個問題是，該文章指的項目中的csv時間是做爲一列，而世界很行下載的csv時間是一行。

固然，理論上我能夠手動將世界銀行下的csv改形成該項目的csv格式，但一是工做量很大二是時間做爲一行的格式合理，凡事是有底線的若是爲了實現排名功能費很大的力氣作不合理的事這簡直是一種侮辱。

要麼直接閱讀和修改源代碼，要麼直接放棄之後沒人指導就別再想這排名可視化的事情。一是代碼審計能力通常、二是javascript水平通常、三是d3.js就沒用過，放棄又說服不了本身只好硬着頭皮看代碼改。

 

2、世界各國GDP動態排名可視化實現

項目地址：https://github.com/PrettyUp/GdpDynamicRankVisual

 

2.1 項目結構說明

-|----src
 |     |----node_modules----npm安裝jquery和d3生成的目錄
 |     |----API_NY.GDP.MKTP.CD_DS2_en_csv_v2_10515210.csv----從世界銀行下的的GDP數據
 |     |----bargraph.html----可視化的html文件
 |     |----config.js----可視化配置文件
 |     |----main_country.csv----從API_NY.GDP.MKTP.CD_DS2_en_csv_v2_10515210.csv提取出的G20國家GDP
 |     |----package-lock.json----npm產生的文件，不用管
 |     |----stylesheet.css----可視化css文件
 |     |----visual.js----可視化功能實現的主要文件
 |
 |----src_bak----原項目src目錄，其下文件未改動
 |
 |----LICENSE----原項目許可證，未改動
 |
 |----README.md----說明文件，已改動

 

2.2 運行效果

 運行：下載----進入項目src目錄----使用瀏覽器打開bargraph.html---載入要可視化的文件。（有網友反映運行後條形圖並不顯示，這應該是換行致使的問題，見下邊評論回覆）

以main_country.csv爲例，main_country.csv格式以下：

運行效果以下：

 

2.3 通用化改造

咱們這裏實現了各國GDP動態排名可視化，但下次可能就想實現各省GDP、各省汽車產量等等的排名可視化，下面講一下在當前基礎上的改造要點。

數據表----csv格式，各列前後順序無影響。

數據表----由於沒有作任何額外處理因此做爲key的各項必定要在第一行。

數據表----若是年分不是1960年開始2017年結束那麼要同步修改config.js中的start_year和total_year。

數據表----如今時間增加經過相似"year += 1"的形式實現，若是時間不是年份而是「年-月」的形式那麼要另外處理一下月份增加問題。

數據表----若是使用數據表年份除外的列名（如這裏的Country_Name/Country_Code/Indicator_Name/Indicator_Code）能夠是任意的（但中間不要有空格），但若是不是四列則要將config.js中的before_time_columns改爲相應的列數。

 

參考：

https://blog.csdn.net/qq_15351167/article/details/81363798

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