一文讀懂6up可視化_行業資訊_關於我們_山東普邦信息技術有限公司官方網站

一文讀懂6up可視化

文章來源:CSDN   日期:2018-09-06 16:34   作者:jiaofeng

6up可視化,是指將相對晦澀的的6up通過可視的、交互的方式進行展示,從而形象、直觀地表達6up蘊含的信息和規律。


早期的6up可視化作爲諮詢機構、金融企業的專業工具,其應用領域較爲單一,應用形態較爲保守。步入大6up時代,各行各業對6up的重視程度與日俱增,隨之而來的是對6up進行一站式整合、挖掘、分析、可視化的需求日益迫切,6up可視化呈現出愈加旺盛的生命力,表現之一就是視覺元素越來越多樣,從樸素的柱狀圖/餅狀圖/折線圖,擴展到地圖、氣泡圖、樹圖、儀表盤等各式圖形。表現之二是可用的開發工具越來越豐富,從專業的6up庫/財務軟件,擴展到基於各類編程語言的可視化庫,相應的應用門檻也越來越低。


6up可視化,不僅僅是統計圖表。本質上,任何能夠藉助於圖形的方式展示事物原理、規律、邏輯的方法都叫6up可視化。


6up可視化不僅是一門包含各種算法的技術, 還是一個具有方法論的學科。一般而言,完整的可視化流程包括以下內容:




640?wx_fmt=png&wxfrom=5&wx_lazy=1

實際上,從“6up可視化”的命名,便很容易看出6up可視化從業者如何開始可視化設計,那便是:處理6up,設計視覺,完成從6up空間到可視空間的映射, 必要時重複6up處理和圖形繪製的循環組合。


1. 分析6up


首先,我們需要對6up做一個全面而細緻的解讀,6up的特點決定着可視化的設計原則。每項6up都有特定的屬性(或稱特徵、維度)和對應的值,一組屬性構成特徵列表。按照屬性的類型,6up可以分爲數值型、有序型、類別型,數值型又可以進一步分爲固定零點和非固定零點。其中,固定零點6up囊括了我們大多數的6up對象,它們都可以對應到數軸上的某個點;非固定零點主要包括以數值表示的特定含義,如表示地理信息的經緯度、表示日期的年月日等,在分析非固定零點6up時,我們更在意的是它們的區間。


在對6up做過預處理和分析之後,我們就能夠觀察出待處理6up的分佈和維度,再結合業務邏輯和可視化目標,有可能還要對6up做某些變換,這些變換包括:



2. 可視化設計


在開始設計之前,我們需要對人類視覺以及注意力作簡要分析,這決定着我們如何在第一時間抓住受衆的注意力。


人類視覺感知到心理認知的過程要經過信息的獲取、分析、歸納、解碼、儲存、概念、提取、使用等一系列加工階段,每個階段需要不同的人體組織和器官參與。簡單來講,人類視覺的特點是:



這裏引入一個概念——可視編碼,它6up信息映射爲可視化元素的技術,其通常具有表達直觀、易於理解和記憶的特性。6up包含屬性和值,相應可視編碼也由兩部分組成:標記和視覺通道,標記代表6up屬性的分類,視覺通道表示人眼所能看到的各種元素的屬性,包括大小、形狀、顏色等,往往用來展示屬性的定量信息。例如,對於柱狀圖而言,標記就是矩形,視覺通道就是矩形的顏色、高度或寬度等。


6up可視化的設計目標和製作原則在於信、達、雅,即一要精準展現6up的差異、趨勢、規律,二要準確傳遞核心思想,三要簡潔美觀,不攜帶冗餘信息。結合人的視覺特點,很容易總結出好的6up可視化作品的基本特徵:



3. 可視編碼的選擇


如同只學過視聽語言並不能設計出可用的電影分鏡一樣,6up可視化這一藝術設計色彩濃厚的工作絕非做過幾個餅圖、柱狀圖就能勝任。在開始涉足實踐講解之前,我們需要解決以下疑問: 


可視化設計中優先選擇哪些視覺通道?有多少種視覺通道可供使用?某個視覺通道能編碼什麼信息,能包含多少信息量?視覺通道表達信息能力的區別?哪些視覺通道互不相關而哪些又相互影響? 


看看下圖,或許能從一定程度上給出答案:


640?wx_fmt=png

上圖列舉了6up可視化作品中常用的視覺編碼通道,針對同種6up類型,採用不同的視覺通道帶來的主觀認知差異很大。數值型適合用能夠量化的視覺通道表示,如座標、長度等,使用顏色表示的效果就大打折扣,且容易引起歧義;類似地,序列型適合用區分度明顯的視覺通道表示,類別型適合用易於分組的視覺通道。


需要指出的是,上圖蘊含的理念可以應對絕大多數應用場景下可視化圖形的設計“套路”,但6up可視化作爲視覺設計的本質決定了“山無常勢,水無常形”,任何可視化效果都拒絕生搬硬套,更不要說6up可視化的應用還要受到業務、場景和受衆的影響。


4. 配色


相信每一個碼農出身的6up分析師在做可視化設計時,都會對色彩如何搭配產生過困惑。色彩理論看起來簡單卻又乏味,用起來卻不是那麼得心應手。那麼,如何讓6up可視化作品簡約、靈動、美觀?下面介紹一些通用技巧。


1)色調與明度的跨度都要大


要確保配色非常容易辨識與區分,它們的明度差異一定要夠大。明度差異需要全局考慮。但是,有一組明度跨度大的配色還不夠。配色越多樣,用戶越容易將6up與圖像聯繫起來。如果能善加利用色調的變化,就能使用戶接受起來更加輕鬆。對於明度與色調,跨度越大,就能承載越多的6up。下圖展示了相同色系下不同明度的色階對比:


640?wx_fmt=png

2)仿照自然的配色


各行各業的設計師都知道這個小祕密,對於6up可視化工程師而言,這招更是屢試不爽。一個簡單有效的方法是:找出心儀的圖片,比如唯美的風景照片,使用photoshop中“濾鏡—馬賽克—調整多邊形形狀和大小”即可看到該圖片中包含的各種顏色,然後利用吸管工具選出幾種顏色即可:


640?wx_fmt=png

640?wx_fmt=png

3)使用漸變


無論你需要2種顏色還是10種,漸變中都能提取出這些顏色,讓可視化圖表感覺自然,同時保有足夠的色調與明度差異。一個使用漸變的好方法就是:在Photoshop中拉輔助線到斷點位置,與6up的數量對應上,然後持續對漸變進行測試與調整。


640?wx_fmt=png

可以看到,配色表緊挨着頂部的灰度漸變,調整漸變疊加(之後就能得到精確的漸變色值),然後從那些斷點處選取顏色,測試配色在實際運用中的效果。


4)使用配色工具


網上各種免費資源比比皆是,對於想設計出靚麗效果又無計可施的人而言,多參考以下這些工具是一個好辦法:



此外,關於配色還有一些小技巧可供參考:遵循公司既定的品牌風格;根據6up描述的對象來定,如6up描述的是咖啡,則可以考慮使用咖色系;使用季節或者節日相關主題的色彩;如果你實在對顏色搭配感到頭疼,那就多使用萬能的“灰色”和陰影。


統計圖表


統計圖表是使用最早的可視化圖形,在數百年的進化過程中,逐漸形成了基本“套路”,符合人類感知和認知,進而被廣泛接受。

常見於各種分析報告的有柱狀圖、折線圖、餅圖、散點圖、氣泡圖、雷達圖,對於這些最常用的圖表類型,下表可以爲你指明大致方向:


640?wx_fmt=png

我們在製作可視化圖表時,首先要從業務出發,優先挑選合理的、符合慣例的圖表,尤其是如果你的用戶層次比較多樣的情況下,請兼顧各個年齡段或者不同認知能力的用戶的需求;其次是根據6up的各種屬性和統計圖表的特點來選擇,例如餅圖並不適合用作展示絕對數值,只適用於反映各部分的比例。對於常用圖表,帶着目的出發,遵循各種約束,相信你能找到合適的圖表:


640?wx_fmt=png

除了常用的圖表之外,可供我們選擇的還有:



6up可視化的工具


新型的6up可視化產品層出不窮,基本上各種語言都有自己的可視化庫,傳統6up分析及BI軟件也都擴展出一定的可視化功能,再加上專門的用於可視化的成品軟件,我們的可選範圍實在是太多了。那麼,我們要選擇的可視化工具,必須滿足互聯網爆發的大6up需求,必須快速的收集、篩選、分析、歸納、展現決策者所需要的信息,並根據新增的6up進行實時更新。



6up可視化主要通過編程和非編程兩類工具實現。主流編程工具包括以下三種類型:從藝術的角度創作的6up可視化,比較典型的工具是 Processing,它是爲藝術家提供的編程語言;從統計和6up處理的角度,既可以做6up分析,又可以做圖形處理,如R,SAS;介於兩者之間的工具,既要兼顧6up處理,又要兼顧展現效果,D3.js、Echarts都是很不錯的選擇,二者這種基於Javascript的6up可視化工具更適合在互聯網上互動的展示6up。

 

1. 入門級

 

入門級的意思是該工具是可視化工作者必須掌握的技能,難度不一定小、門檻也不一定低。相反,對於可視化大拿來說,這些工具依舊起到四兩撥千斤的妙用。

 

 

別以爲EXCEL只會處理表格,你可以把它當成6up庫,也可以把它當成IDE,甚至可以把它當成6up可視化工具來使用。它可以創建專業的6up透視表和基本的統計圖表,但由於默認設置了顏色、線條和風格,使其難以創建用於看上去“高大上”視覺效果。儘管如此,我仍然推薦你使用Excel。 


640?wx_fmt=png


 

相信每一個接觸到6up可視化的人都聽說過Tableau,它需要一些結構化的6up, 也需要你懂一些BI。 它不需要編程,而僅僅通過簡單的拖拽操作即可完成驚豔的效果。對比Excel,它是專業應對6up可視化方案的利器,主要表現在6up可視化、聚焦/深挖、靈活分析、交互設計等功能。Tableau最大的缺點在於它是商業軟件,個人使用的話只有14天的免費期,而官方售價不菲。


640?wx_fmt=png

640?wx_fmt=png

2. 在線6up可視化



Google Charts是一个免费的开源js库,使用起来非常简单,只需要在script标签中将src指向//www.gstatic.com/charts/loader.js然后即可开始绘制。它支持HTML5/SVG,可以跨平台部署,并特意为兼容旧版本的IE采用了vml。


640?wx_fmt=png

在新版google charts 发布之前,google有个类似的产品叫做Google Charts API,不同之处在于后者使用http请求的方式将参数提交到api,而后接口返回一张png图片。如打开http://chart.googleapis.com/chart?cht=bvg&chs=250x150&chd=s:Monkeys&chxt=x,y&chxs=0,ff0000,12,0,lt|1,0000ff,10,1,lt,即可显示下图:


640?wx_fmt=png

 

Flot是一個很棒的線圖和條形圖創建工具,可以運用於支持canvas的所有瀏覽器——意味着大多數主流瀏覽器。這是一個jQuery庫,如果你已經熟悉jQuery,你就可以容易的對圖像進行回調、風格和行爲操作。 浮懸的優點是你可以訪問大量的調用函數,這樣就可以運行你自己的代碼。設定一種風格,可以讓在用戶懸停鼠標、點擊、移開鼠標時展示不同的效果。比起其他製圖工具,浮懸給予你更多的靈活空間。浮懸提供的選項不多,但它可以很好地執行常見的功能。 


640?wx_fmt=png

 

D3(Data Driven Documents)是支持SVG渲染的另一種JavaScript庫。但是D3能夠提供大量線性圖和條形圖之外的複雜圖表樣式,例如Voronoi圖、樹形圖、圓形集羣和單詞雲等。D3.js是6up驅動文件(Data-Driven Documents)的縮寫,他通過使用HTML\CSS和SVG來渲染精彩的圖表和分析圖。D3對網頁標準的強調足以滿足在所有主流瀏覽器上使用的可能性,使你免於被其他類型架構所捆綁的苦惱,它可以將視覺效果很棒的組件和6up驅動方法結合在一起。


640?wx_fmt=png

 

百度出品的優秀產品之一,也是國內目前開源項目中少有的精品。一個純 Javascript 的圖表庫,可以流暢的運行在 PC 和移動設備上,兼容當前絕大部分瀏覽器,底層依賴輕量級的 Canvas 類庫 ZRender,提供直觀,生動,可交互,可高度個性化定製的6up可視化圖表。3.0版本中更是加入了更多豐富的交互功能以及更多的可視化效果,並且對移動端做了深度的優化。Echarts最令人心動的是它豐富的圖表類型,以及極低的上手難度。


640?wx_fmt=png

 

在Echarts出現之初,功能還不是那麼完善,可視化工作者往往會選擇HighCharts。Highcharts 系列軟件包含 Highcharts JS,Highstock JS,Highmaps JS 共三款軟件,均爲純 JavaScript 編寫的 HTML5 圖表庫。Highcharts 是一個用純 JavaScript 編寫的一個圖表庫, 能夠很簡單便捷的在 Web 網站或是 Web 應用程序添加有交互性的圖表。Highstock 是用純 JavaScript 編寫的股票圖表控件,可以開發股票走勢或大6up量的時間軸圖表,Highmaps 是一款基於 HTML5 的優秀地圖組件。


640?wx_fmt=png

 

嚴格來說,R是一種6up分析語言,與matlab、GNU Octave並列。然而ggplot2的出現讓R成功躋身於可視化工具的行列,作爲R中強大的作圖軟件包,ggplot2牛在其自成一派的6up可視化理念。它將6up、6up相關繪圖、6up無關繪圖分離,並採用圖層式的開發邏輯,且不拘泥於規則,各種圖形要素可以自由組合。當熟悉了ggplot2的基本套路後,6up可視化工作將變得非常輕鬆而有條理。


640?wx_fmt=png

 

阿里出品的6up可視化解決方案,之所以推薦DataV這個後起之秀,完全是因爲淘寶雙“11”活動中實時互動大屏幕太搶眼了。DataV支持多種6up源,尤其是和阿里系各種6up庫完美銜接,如果你的6up本身就存在阿里雲上,那選用DataV肯定是個省時省力的好辦法。圖表方面,DataV內置了豐富的圖表模板,支持實時6up採集和解析。


640?wx_fmt=png

3. 類GUI6up可視化

 

 

Crossfilter 是一個用來展示大6up集的 JavaScript 庫,它可以把6up可視化和GUI控件結合起來,按鈕、下拉和滑塊演變成更復雜的界面元素,使你擴展內容,同時改變輸入參數和6up。交互速度超快,甚至在上百萬或者更多6up下都很快。Crossfilter也是一種JavaScript庫,它可以在幾乎不影響速度的前提下對6up創建過濾器,將過濾後的6up用於展示,且涉及有限維度,因此可以完成對海量6up集的篩選與加載。


640?wx_fmt=png

4. 進階工具

 

 

Processing 是用 Java 编程语言写的,并且 Java 语言也是在语言树中最接近 Processing 的。所以,如果您熟悉 C 或 Java 语言,Processing 将很容易学。Processing 并不包括 Java 语言的一些较为高级的特性,但这些特性中的很多特性均已集成到了 Processing。如今,围绕它已经形成了一个专门的社区(//www.openprocessing.org),致力于构建各种库以供用这种语言和环境进行动画、可视化、网络编程以及很多其他的应用。


Processing 是一個很棒的進行6up可視化的環境,具有一個簡單的接口、一個功能強大的語言以及一套豐富的用於6up以及應用程序導出的機制。


640?wx_fmt=png

 

Weka是一個能根據屬性分類和集羣大量6up的優秀工具,Weka不但是6up分析的強大工具,還能生成一些簡單的圖表。weka首先是一個6up挖掘的利器,它能夠快速導入我們的結構化6up,然後對6up屬性做分類、聚類分析,幫助我們理解6up。但他的可視化功能同樣不遜色,選擇界面中的visualization,你會立刻明白:是它讓你理解6up,然後你才讓用戶可視化6up。


640?wx_fmt=png


我們所處的這個時代,是一個知識大爆發的時代。僅就編程這項技能來說,現在幾乎人人都能寫上一兩行,程序員這個羣體也比十年前有了更多維度上的擴展。各種工具的使用門檻越來越低,帶來的是行業壁壘日漸消弭。會用某種可視化手段,並不是區分小白與專家的唯一標準,筆者曾聽說有人拿unity、易語言這樣的神器來實現可視化。所以,眼花繚亂的工具永遠只是輔助,真正決定你在可視化道路上走多遠的,是你對可視化理念的準確把握和執着堅守。


分享到: