3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

尋夢新聞LINE@每日推播熱門推薦文章,趣聞不漏接❤️

加入LINE好友

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  分享嘉賓

  鄒磊

  DT財經高級可視化設計師

  可視化小組負責人

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  本期看點

  1、如何圍繞著選題製作圖表,圖片的設計、創新和生產應該如何平衡?

  2、設計方法論是什麼?如何做到工具軟件的「跨界使用」?

  3、獨家揭秘制圖流程:編輯與設計如何才能高效溝通?

  10月23日完,鏑次元線上沙龍活動中,鄒磊老師以「當數據遇到設計」為主題,從DT可視化小組在做些什麼、可視化方法論、工作流程對接方法三個方面來給大家分享一些經驗。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  DT可視化小組在做些什麼

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  我們在做什麼?

  DT可視化小組的主要工作主要是圍繞數據做可視化設計,分為數據內容和數據社群。

  如上圖,數據內容中包含了地鐵1公里和NEXT情報局數據新聞中所需的可視化配圖(包括日常深度稿件、NEXT50系列、新國貨系列),數據社區的工作主要是數據俠實驗室、數據科學50人以及線上線下精品課的數據海報設計等。詳細內容可以進入DT財經的官網進行查看。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  接著,鄒老師從設計師的角度出發進行了分享,他把團隊所具體的技能點進行了歸類分為原子設計(藍色)、模塊化可視化工具(紅色)、編程(黃色)(如上圖)三大技能點,三大技能點分別與三個技能輸出的價值,也就是設計、創新、生產相對應(如下圖)。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  技能點1

  原子設計與設計

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  對於設計,掌握其中的2-3項是可視化設計師的基本技能.日常內部工作中DT可視化小組主要基於AI 、PS做數據內容的可視化配圖以及數據社區的經營物料海報等等;外部的話主要做一些數據可視化長圖比如:工銀安盛、lamer、優信二手車、阿里研究院合作的長圖等等。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  技能點2

  模塊化可視化工具與創新

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  模塊化的可視化工具,是指借助開源的可視化工具(如鏑數、RAW、CARTO)通過簡單的拖拽或是修改代碼可以快速的輔助設計師把多維的數據或複雜的數據進行圖表的創新生產。這對於設計師來說是非常友好的,一方面可以做出漂亮美觀的圖表另一方面也可以大大的節省工作效率;

  基於開源的可視化工具,DT可視化小組做過很多項目比如多維數據呈現的《AppleMusic2016年度熱門歌曲》《靜安女子圖鑒》等;基於地理位置信息的VR動圖、支付寶情懷動圖、OFO項目項目等等(如下圖)。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  技能點3

  編程-生產

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  對於編程來說,DT可視化小組主要用於生產,這需要設計師掌握一些代碼的能力。比如熟悉D3.JS或Processing等。

  生產的內容分兩類,一類是模塊化的可視化生產,主要解決的是重復性、多維度的圖表類型解決方案。

  舉例來說,比如深圳、上海、北京地鐵一公里附錄中玫瑰圖,數量都是在幾百個以上,如果單純的用AI去做雖然也能完成,但會花費大量的時間和完人力成本,如果基於編程就會更加高效。做好一個模版剩下的就跟著自己的排版布局進行生產,大大節省設計師的工作量。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  除此之外,為了解決日常數據新聞的配色問題。基於D3.JS,可視化小組還開發了一個基於多種顏色模式差值計算的配色工具,只需要輸入顏色代碼就可以快速的生成所需的顏色。同時還可導出SVG在AI中進行取色應用。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  如果你對自己的配色覺得沒有把握也可以進入這個網站https://projects.susielu.com/viz-palette,它會幫你對你的配色進行分析並給出意見。

  另一類是基於Processing的計算設計,主要應用於DT官方的經營海報、節日創意海報、同時這次北京地鐵一公里的主視覺報告封面、線下物料等也是基於Processing生成的。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  案例

  北京地鐵一公里

  這里可以舉一個北京地鐵一公里的案例,北京地鐵一公里的主視覺是基於泰森多邊形算法,將京405個站點呈現出來,找到7個一級聚類top5的相鄰站點並進連線,最後所呈現的視覺效果。此方案還做了不同的版本應用到了線下,在北京的東直門地鐵站也進行了四個畫面的視覺呈現。

  (泰森多邊形法,荷蘭氣候學家A·H·Thiessen提出了一種根據離散分布的氣象站的降雨量,來計算平均降雨量的方法,即將所有相鄰氣象站連成三角形,作這些三角形各邊的垂直品分線,將每個三角形的三條邊的垂直平分線的交點,連接起來得到一個多邊形。用這個多邊形內所包含的一個唯一氣象站的降雨程度來表示這個多邊形區域內的降雨強度,並稱這個多邊形為泰森多邊形)。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  北京地鐵一公里東直門地鐵站宣傳海報

  地鐵一公里項目除了報告,每一年都會做一個數據可視化交互工具產品。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  重新認識地鐵上的深圳

  (鏈接 https://metrocity.dtcj.com/)

  2016年,DT可視化小組在做深圳地鐵一公里網站時,所有的網站的內容全部是基於SVG生成,最後出現了一個頭疼的問題就是如果電腦性能不好的話,就會造成畫面的卡頓。

  所以在2017年,在做上海地鐵網站的時候便進行了升級,地圖部分用百度的API生成,頁面交互也做了一些重新的優化調整。在網站體驗上也更加的流暢完整。

  今年,在做北京地鐵網站時,可視化小組和編輯一起討論希望讓整個網站更加像一個查詢的工具網站,所以我們對整個網站的架構進行了調整,所以的功能都集中在右上方,你可以通過點擊右上角的菜單在地圖上進行探索,同時每一個功能都是聯動的。比如你在看行政區域數據的時候還可以點擊某個站點進行查詢。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  設計方法論

  製作可視化圖表不僅不要局限於一個工具,還要把很多工具進行跨界組合使用。很多的工具不用特別的精通,但要全面了解。這樣作品呈現出來是豐富的,是一個整體。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  軟件跨界使用圖

  除此以外,為了呈現的更好作品,DT財經總結了一套標準的作圖規範。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  做圖規範

  DT財經會規定每個柱狀圖的寬度以及網格粗細具體值。包括標題的間距、圖形顏色等等,都會制定一套規範,新人加入時,他可以快速的上手使用。

  所以說規範是進行可視化設計的一個前提,通過規範小組成員之間可以進行快速闡述交流。2016年,DT財經幾乎每天都要產出一篇稿子,對於設計師、編輯來說,這樣的規範大大提高了工作效率。

  同時DT財經,也會結合前人經驗,對可視化圖呈現進行思考。這些圖都可以保存下來,其實對於進行數據可視化來說都是非常不錯的。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  結合經驗

  使用任何可視化工具都有利弊。使用簡單的模塊化可視化工具的時候,靈活性和自定義性不高。如果靈活性非常高或者DIV,那就需要進行一些代碼的編寫了。

  鄒老師接著給大家推薦了幾個實用網站。

  第一個是數據可視化的門戶導航字典或者工具。http://dataviz.tools

  另一個就是數據可視化呈現目錄。這個已經有了中文版,如果對於圖表不了解,或者說拿到一組數據之後不知道怎麼呈現,那可以把數據對應著列表當中去對應去找。

  https://www.datavizcatalogue.com/ZH/index.html

  另外,形成個人的興趣以及資源聚集庫是非常重要的。可以通過twitter關注一些大牛動向多看他們分享的以及做過的數據可視化作品,另一方面可以通過Google,包括知乎、微博,還有一些比較出名的博客收集相關內容。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  工作流程對接方法

  一切的高效率,一切的產出,如果有一套規範去適用的話,其實是非常方便的,所以2016年DT財經就制定了一套流程。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  編輯和設計師有一個群,編輯把主要需求發到群里,設計師拿到數據之後會和編輯確認樣式,成稿後會發到群里等待主編、編輯反饋。之後設計師就會進行修改。一般情況下,一次或兩次修改就可以完成了。編輯給設計師的數據往往是編輯腦子里面寫文章的那套數據。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  編輯與設計師的數據

  對於設計師來說,會基於選擇的工具的邏輯去呈現數據,再配合編輯的思路去二次修改,對於設計師來說,想要達到數據呈現效果也要有基本的數據處理能力。

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  課後Q&A

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  關於入門

  Q1

  鄒老師,您好。作為一名沒有編程背景,不是新聞專業的理工生,又對可視化很感興趣,如何在平時的工作崗位做好可視化表達(主要是ppt中的圖表),如何下手?從什麼工具開始?

  A: 一方面靠經驗積累多學習,多看,多去學習別人的東西,多去搜尋、借鑒。另一方面要提高數據的敏感性。入門要從Excel開始,這是所有數據可視化的基礎。

  Q2

  鄒老師你好,我目前是在英國學習data science研究生,對設計相關工具還比較熟悉,未來想從事數據可視化相關工作,由於對編程方面沒有任何背景,想問下對於現階段從什麼方面入手來學習編程和可視化工具echart和d3之類。現在在學python是否合理呢,或者先階段應該學習哪些軟件呢?

  A: 建議從簡到雜,可以從研究Echarts開始,了解它的底層,它的背景,它是如何將數據呈現出來的,嘗試打開一個例子去更改里面的代碼,然後在去看她的api,了解下編程的思維。

  關於實操

  Q1

  老師,我看在製作圖表之前會有一套「邏輯程序」,例如中心的你想展示什麼?分為四步,分布,比較,聯繫,構成。這些是編前會收集好數據、整合,然後細化嗎?

  A: 是的。設計師是與編輯大多時候是一起分析數據的。表現形式能用簡單的表達方式就用簡單的,設計師出現往往是需要表現複雜的形式。

  Q2

  想請問鄒老師,如何轉換成經緯度坐標呢?

  A: 一般經緯度我們都會進行轉化,因為地圖商都會有偏移。網上會有一些開源的轉化工具,比如https://github.com/hujiulong/gcoord。

  Q3

  鄒老師好,編輯是提供數據還是需要整理好數據,設計師只是管圖形設計和美化?

  A: 是的。編輯提供的數據是提供好的,其中20%的數據可能需要設計師二次加工。

  Q4

  想了解一下數據采集途徑、來源。

  A: 主要依靠公司資源,有專門的數據采集分析師、編輯。我們的編輯也具有一定的數據采集和分析能力,數據主要來源於公司的數據合作方比如:阿里大數據、大眾點評、高德等等。

  其他

  Q1

  請問老師,貴團隊的工作地點目前是在上海和北京兩個地方嗎?

  A:主要在上海,北京有一個分部主要對接數據俠社區經營的部分。

  Q2

  想問下老師,在團隊工作中是如何協調編輯和設計師之間的工作呢?

  A: 因人而異,因地制宜。如果出現分歧,設計師要加強自身沉淀,具備說服編輯的能力;更重要的是要主動加強與編輯交流,不僅在工作中,日常休息、生活中,多與編輯互動,最好的關係就是二者之間能相互輔正思路。

  往期回顧

  #59期

  數據辣評四川 | 鏑次元59期沙龍分享

  #60期

  微博轉PO破9000的數據新聞是怎樣「煉」成的 | 鏑次元60期沙龍分享

  #61期

  帝都繪:我們想和你好好聊聊這座城

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

  

  ”掃碼即刻開啟創意數據可視化”

  本文由鏑次元數據整理撰寫完成

  添加時請註明公眾號名稱

  鏑次元長期接受優秀數據新聞作品投稿

  稿費從優

  作品請發至[email protected]

  end

3000餘張數據圖,揭秘DT財經數據可視化|鏑次元62期線上沙龍

About 尋夢園
尋夢園是台灣最大的聊天室及交友社群網站。 致力於發展能夠讓會員們彼此互動、盡情分享自我的平台。 擁有數百間不同的聊天室 ,讓您隨時隨地都能找到志同道合的好友!