漂亮的流動桑基圖有什麼快速的製作方法?
一 什麼是桑基圖？
桑基圖是一種表現資料間包含和權重關係流向的統計圖表！
最早的桑基圖是查爾斯·米納德（Charles Minard）繪製的《1812年拿破崙東征圖》。這張圖形象的描繪了拿破崙在1812到1813年進攻俄國時所遭受的災難性損失。
圖片來源於網路
圖中黃色為進軍路線，黑色為撤退路線，線條的寬度代表拿破崙的軍隊人數變化，從圖中可以清楚的看到，在深入寒冷的俄國腹地時，拿破崙軍隊的人數在逐漸的減少，到黑色線條撤退返回時，線條細的都快看不見了（活著返回法國的只有1萬餘人）。這張圖呢，就是大家現在看到的桑基圖的祖師爺。
常見的桑基圖佈局形式有
左右流向佈局
和
上下流向佈局
。
桑基圖的佈局形式
其中線條的粗細代表了數值的大小，線條的顏色代表不同的分支種類，透過線條流動的位置和歸屬，來表現各類別資料之間的包含關係。
二 如何快速製作桑基圖？
其實方法非常的簡單，藉助網站就可以快速的生成，我推薦的這個網站就是
RAWgrahs
，在日常工作中經常會用到的網站，在這裡強烈推薦給大家。
我一般把RAWGraphs簡單叫做RAW，它是一個線上快速生成視覺化圖表的網站，對於不懂程式碼的小白來說， 它的操作真的是非常友好。
有多簡單呢？你只需要把資料拖上去，2-3分鐘內就能生成各種各樣的視覺化圖表。而且啊，它還支援匯出SVG格式的圖片，這樣大家就可以在Adobe Illustrator中進行美化加工。
好訊息是，它的2。0版本也即將釋出，在自定義性和圖表形式的豐富度上會繼續提升。等2。0推出以後，我會第一時間給大家帶來新版本的體驗教程。
首先，我們需要準備一份適合用桑基圖來表達和展示的資料。
這個資料中要至少包含一列數值，至少包含兩列分類標籤，也就是說一個數字同時歸屬於至少兩個分類陣營。比如說下面這個樣例資料裡，有一個數據是2008年1月旅遊開支1000元，這個1000元就同時對應2008年1月和旅遊開支這兩個分類。我們使用桑基圖呢，就可以同時看到各個分類之間的包含和權重關係。
資料的格式最好就是使用規範格式，也就是你們在做資料透視表時要用到的樣式，我自己會叫它堆疊樣式，第一行是各列的欄位名，接下來每一行資料就是一條完整記錄。（ 堆疊樣式在使用工具網站時會經常用到，建議大家在日常整理資料時都使用堆疊樣式）。
這裡我以《2018年度醫院排行榜前10（綜合）》資料為例，給大家帶來桑基圖的生成教程（資料鏈接地址：石墨文件 ）。
第一步，我們開啟RAW網站，點選綠色按鈕USE IT NOW！，然後將資料複製貼上到這個網站中。出現綠色提示資訊後，就代表資料載入成功了。
如果你的資料並沒有在 Excel 中進行堆疊，那麼RAW有一個貼心的功能，可點選右下角的 Data is stacked now。 Click here to stack it 進行資料格式的規範化轉換。
第二步，我們滑鼠往下滑動，會發現有很多圖表樣式，這裡選中Alluvial Diagram（桑基圖也成為衝擊圖）。
往下滑動，會出現 Map your Dimensions 的操作介面。與此同時，資料的標題/欄位名行已經變成了綠色塊，出現在了畫面左側（可以看到 RAW 非常的智慧，它將資料進行了模組化封裝處理）。
第三步，我們將左側資料塊中的醫院名稱和所在城市拖放在【Steps 】中，將綜合得分拖拽到【Size】中。【Steps 】影響的是分類的連線，每拖一個數據塊到【Steps】中，就多一個分類的連線。【Size】影響的是線條的粗細，也就是數值的大小，所以我們將綜合得分拖拽到了這裡。
拖拽完成後，我們會發現桑基圖已經生成了。
這裡我們可透過左側的選項對圖表進行細節的調整（比如圖表的大小、節點黑色矩形的大小、線條透明度、配色、排序方式）；
第四步，因為RAW的細節調整還不夠完善（比如自定義字型、字型大小等等），剩下的細節調整我們可以匯出SVG，在AI中加工。
滑鼠往下滑，選擇SVG，隨便命名一個名字，點選Download。
三 在AI中美化桑基圖
第一步，將匯出後的SVG用AI開啟，拖拽到新建的畫板中，透過不停的按快捷鍵【Shift + Ctrl / Command + G】取消編組 。編組取消後，我們按著
所在城市的類別
對線條進行配色的調整。（對AI還毫無概念的新朋友，可以先移步
之前的教程
，熟悉一下AI的使用）。
第二步，我們選擇任意一個文字，執行選單欄 →【
選擇
】 → 【
相同
】→ 【
外觀
】，這樣我們將所有的文字全部選中，就可以統一調整字型和文字大小了。
文字調整後，我們發現整體文字有點偏下，可將文字全部選中，按快捷鍵【Shift 】加滑鼠，對文字進行微調，直到視覺上對齊為止。
第三步，文字對齊後，可在上方加上分類的說明資訊，告訴讀者左邊和右邊兩個類別分別代表什麼。
最後加入【標題】、【注】、【資料來源】、【線條粗細的說明】和其他元素，再根據版面調整下間距，那麼這張
透過RAW生成的桑基圖的美化
在AI中就完成了。
四 製作桑基圖的一些注意小事項
1.控制分類的數量
桑基圖的分類儘量保持2-3個以內，如果分類眾多，讀者的理解成本就會加大。
2.按需標註數值
如果想更清楚更直接地讓讀者知道線條粗細的數值，可將數字放在節點的旁邊。
3.增加參考線指引
如果分類說明文字與圖表較遠，可透過虛線連線的指引方式，引導讀者。
4.資訊置於節點矩形內
如果你做的是豎向桑基圖，那麼可將節點的矩形放大，這樣可將文字或者數字資訊放置在節點上，這樣就增加了圖表的美觀度。
5、增加一些裝飾細節
可增加一些裝飾性的元素，比如主題Icon，讓畫面更加豐富。
五 總結
RAW這個網站不僅可以做桑基圖，網站中的圖表樣式還有很多，我在日常工作中也基於這個網站做了很多的創新視覺化圖表，比如下圖：
還是我一直提到的方法論理念：
不要侷限於工具、軟體本身，任何的工具、軟體都是為你的作品服務的!
只要是能夠提升效率，完成作品，我們就可以在多種工具、軟體、網站中進行跨界的結合使用。
圖片來源於網路
如果你覺得我分享的這篇不錯，
歡迎點贊、評論、和轉發！
我們下期見！
如何3分鐘內製作出一張漂亮的流動桑基圖？
