數據可視化練習-用powerBI生成自動播放的動態排行榜

前言

最近在B站很流行各種動態排行榜視頻,動態排行榜製作源代碼來自一位大神基於d3.js做的一個將歷史數據排名轉化爲動態柱狀圖圖表的數據可視化項目,但原項目中的圖表在網頁上是一次性運行,除非實時錄屏,否則在其他電腦上需重做,無法直接分享,本人新入數據分析行業,嘗試利用powerBI仿製可直接分享的動態排行榜

1. 前期準備:賬號註冊及軟件下載

poweiBI Desktop 爲在自己電腦上製作圖表的BI軟件
註冊powerBI賬號可以在power BI online 將自己在Desk上製作的圖表共享到網絡
powerBI Desktop 下載地址:https://www.microsoft.com/zh-CN/download/details.aspx?id=45331
powerBI 賬號註冊官網:https://powerbi.microsoft.com/zh-cn/get-started/
注意powerBI賬號只能用企業型郵箱註冊

2、數據獲取及預處理

本次要做的排行數據爲全國主要城市年末總人口排名,數據來源爲國家統計局http://data.stats.gov.cn/easyquery.htm?cn=E0105&zb=A02&reg=110000&sj=2016
powerBI Desk 可以從web獲得不需驗證的公開數據,但統計局網站數據下載需要登陸驗證,鑑於爬蟲功夫還沒到家,我還是老實註冊賬號登陸下載數據
數據初始格式如下
在這裏插入圖片描述
在powerBI裏數據是以power query 編輯器模式打開,每一列是一個特徵,只能做特徵內值的比較而不能直接做特徵之間比較,因此要做成動態排行榜,需要把上表裏所有城市融爲一列,所有人口數據融爲一列,最終每行只有單城市在單獨年份的人口數據
要做這種轉置在excel裏很麻煩,但是在powerBI的power query 編輯器裏確很簡單,我們先打開power BI Desktop 在“開始”-“獲得數據”-“excel”裏選擇剛纔下載的表格
在這裏插入圖片描述

選取文件點擊打開後,在彈出到導航器中勾選圖表,並點擊左下角中間按鈕 “編輯”
在這裏插入圖片描述
如此便進入了powerquery 編輯器
在這裏插入圖片描述
首先通過“刪除行”中的“刪除前幾行”和“刪除後幾行”將頭三行及最末行的文字內容刪除,通過刪除列將最後一列數據有確實的1997年數據刪除
在這裏插入圖片描述
然後通過“將第一行用作標題”將首行轉爲標題
在這裏插入圖片描述
接下來是第一個重點-轉置環節,按住shift選中除地區列職位所有年份數值列,然後點擊‘轉換’中的**“逆透視列”**
在這裏插入圖片描述
轉換結果如下
在這裏插入圖片描述
最後通過空值替換的方式把年份列中的“年”字全部清除掉,並將”屬性“列選中,右鍵重命名爲”年份“,數據的預處理就完成了
在這裏插入圖片描述
點擊“關閉及應用”進入畫布
在這裏插入圖片描述

3、可視化效果搭建

首先我們來搭一個普通的排行榜
選擇畫布右邊可視化效果中的“簇狀條形圖”,然後將最右邊的字段中“地區”拉到可視化效果編輯器中的“軸”,將字段“值”拉到編輯器中的“值
在這裏插入圖片描述
如果默認沒有排序或不是按值排序可以通過可視化窗口右上角的下拉菜單進行調整
在這裏插入圖片描述
接下來是第二個重點-時間軸的引入
在powerBI默認的可視化效果中並沒有時間軸,這個效果叫做Play Axis,我們需要在powerBI的Marketplace中搜索並添加
在這裏插入圖片描述
導入成功後,點擊畫布上的空白地方,再點擊可視化效果中的 play axis ,將字段中的“年份”拖到可視化編輯器中的“field”裏
在這裏插入圖片描述
ok,時間軸和排行榜都到了,接着要解決它們的聯動問題,因爲直接點擊播放會是這個樣子
在這裏插入圖片描述
這是因爲排行榜中默認的值顯示方式是所有年份值的總和,而深綠色是對應時間軸單獨年份的值,要解決這個問題我們進入下一步
接下來是第三個重點-編輯交互
點擊菜單欄“格式”-“編輯交互”,會發現可視化窗口的右上角出現了三個小圖標,點擊最左邊的漏斗型“篩選圖表”
在這裏插入圖片描述
現在再按一下play axis 裏的 播放鍵 會發現這次排行榜只顯示當年的數據並且在動態變化了!
如果要特別顯示第一的城市,可以新建個卡片可視化窗口單獨標註
選擇可視化效果“卡片圖”,將“地區”拖到“字段”,在下方的篩選器中將“值”拖入視覺篩選器,篩選器類型下拉菜單選擇“前N個”,顯示項目下拉選擇“上”,右邊的空格中填入1,然後再次把“值”拖到下面的“按值”中
在這裏插入圖片描述
大致步驟已經完成了,細節部分可以通過可視化編輯器中間刷子按鈕進入調整,比如設置柱條顏色,以及將時間軸設爲自動播放和循環播放
在這裏插入圖片描述

4、發佈共享

點擊”開始“-右上角“發佈”將做好的表格發佈到powerBI網頁版,發佈完成後,在網頁版中可以打開在線編輯
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
再點擊網頁版的左上角文件裏可以發佈到web網頁或者發佈爲ppt
在這裏插入圖片描述
發佈網頁會生成嵌入代碼
在這裏插入圖片描述
如果不小心關掉了網頁,重新登陸powerbi主業後點工作區-報表即可看到自己發佈過的報表
在這裏插入圖片描述

編輯後我做的動態報表示例如下

web網址:https://app.powerbi.com/view?r=eyJrIjoiNDNlNzBkNDEtOWU5Yy00ZjlhLTlhZTktZjMxYTMzZGM1ZjMzIiwidCI6ImU4OGQ5ODBhLWQyYjAtNGEzMS05NWZhLTUxOTg2OTU3OTE2OCIsImMiOjN9

其他

目前大致框架就是這樣,其實還有很多小細節有待改進,比如報表的動態效果還是不夠流暢,後期會繼續研究,另附B站動態排行榜大神Jannchie的js教程[B站數據可視化排行榜項目入門指南]

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章