一、說明
之前在抖音上看到GDP等各種排名的可視化，一直想知道是怎么實現的。之前也有研究過一次，但覺得太麻煩放棄了，昨天又心癢難耐研究了一翻。
先是看到這篇文章說是有人基於d3.js實現：https://blog.csdn.net/qq_15351167/article/details/81363798
我想實現一個GDP的可視化排名，數據是從世界銀行下載的。首先的一個問題是，該文章指的項目中的csv時間是作為一列，而世界很行下載的csv時間是一行。
當然，理論上我可以手動將世界銀行下的csv改造成該項目的csv格式，但一是工作量很大二是時間作為一行的格式合理，凡事是有底線的如果為了實現排名功能費很大的力氣做不合理的事這簡直是一種侮辱。
要么直接閱讀和修改源代碼，要么直接放棄以后沒人指導就別再想這排名可視化的事情。一是代碼審計能力一般、二是javascript水平一般、三是d3.js就沒用過，放棄又說服不了自己只好硬着頭皮看代碼改。
二、世界各國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