大數據的可視化展現技術

《大數據和人工智能交流》頭條號向廣大初學者新增C 、Java 、Python 、Scala、javascript 等目前流行的計算機、大數據編程語言,希望大家以後關注本頭條號更多的內容。《大數據和人工智能》頭條號方便有基礎讀者的同時照顧廣大沒入門的初學者。


隨著互聯網技術的發展,尤其是移動互聯技術的發展,網絡空間的數據量呈現出爆炸式增長。如何從這些數據中快速獲取自己想要的信息,並以一種直觀、形象的方式展現出來?這就是大數據可視化要解決的核心問題。

數據可視化,最早可追溯到20世紀50年代,它是一門關於數據視覺表現形式的科學技術研究。數據可視化是一個處於不斷演變之中的概念,其邊界在不斷地擴大,主要指的是技術上較為高級的技術方法,而這些技術方法允許利用圖形圖像處理、計算機視覺及用戶界面,通過表達、建模,以及對立體、表面、屬性及動畫的顯示,對數據加以可視化解釋。

1、大數據可視化的特點

(1)可視化可以使得碎片化的數據轉換為具有特定結構的知識,從而為決策支持提供幫助。

(2)數據可視化的片面性特徵要求可視化模式不能替代數據本身,只能作為數據表達的一種特定形式。

(3)大數據所產生的數據量必然要求人們對數據進行歸納總結,對數據的結構和形式進行轉換處理。

(4)專業化特徵是人們從可視化模型中提取專業知識的環節,它是數據可視化應用的最後流程。

數據可視化的作用主要包括數據表達、數據操作和數據分析3個方面,它是以可視化技術支持計算機輔助數據認識的3個基本階段。

(1)數據表達

數據表達是通過計算機圖形圖像技術來更加友好地展示數據信息,方便人們閱讀、理解和運用數據。常見的形式如文本、圖表、圖像、二維圖形、三維模型、網絡圖、樹結構、符號和電子地圖等。

(2)數據操作

數據操作是以計算機提供的界面、接口、協議等條件為基礎完成人與數據的交互需求,數據操作需要友好的人機交互技術、標準化的接口和協議支持來完成對多數據集合或者分佈式的操作。

(3)數據分析

數據可視化可以有效地表達數據的各類特徵,幫助人們推理和分析數據背後的客觀規律,進而獲得相關知識,提高人們認識數據的能力和利用數據的水平。

2、數據可視化流程

(1)數據獲取

主動式是以明確的數據需求為目的,如衛星影像、測繪工程等;被動式是以數據平臺為基礎,由數據平臺的活動者提供數據來源,如電子商務、網絡論壇等。

(2)數據處理

數據處理是指對原始的數據進行質量分析、預處理和計算等步驟。數據處理的目標是保證數據的準確性、可用性。

(3)可視化模式

可視化模式是數據的一種特殊展現形式,常見的可視化模式有標籤雲、序列分析、網絡結構、電子地圖等。可視化模式的選取決定了可視化方案的雛形。

(4)可視化應用

可視化應用主要根據用戶的主觀需求展開,最主要的應用方式是用來觀察和展示,通過觀察和人腦分析進行推理和認知,輔助人們發現新知識或者得到新結論。

3、大數據可視化的工具

(1)Excel

Excel是Microsoft Office的組件之一,是由Microsoft為Windows和Apple Macintosh操作系統的計算機編寫和運行的一款表格計算軟件。Excel 是微軟辦公套裝軟件的一個重要組成部分,它可以進行各種數據的處理、統計分析、數據可視化顯示及輔助決策操作,廣泛地應用於管理、統計、財經、金融等眾多領域。

大數據的可視化展現技術

大數據的可視化展現技術

(2)Processing

Processing在數據可視化領域有著廣泛的應用,可製作信息圖形、信息可視化、科學可視化和統計圖形等。下面通過一個簡單實例來認識一下如何利用Processing實現數據的可視化展示。


大數據的可視化展現技術

大數據的可視化展現技術

(3)NodeXL

NodeXL 不僅具備常見的分析功能,如計算中心性、Page Rank值、網絡連通度、聚類係數等,還能對暫時性網絡進行處理。在佈局方面,NodeXL主要採用力導引布局方式。

NodeXL 的一大特色是可視化交互能力強,具有圖像移動、變焦和動態查詢等交互功能。其另一特色是可直接與互聯網相連,用戶可通過插件或直接導入E-mail或微博網頁中的數據。

(4)ECharts

ECharts自2013年6月正式發佈1.0版本以來,在短短兩年多的時間,功能不斷完善,截至目前,ECharts已經可以支持包括折線圖(區域圖)、柱狀圖(條狀圖)、散點圖(氣泡圖)、K線圖、餅圖(環形圖)、雷達圖(填充雷達圖)、和絃圖、力導向佈局圖、地圖、儀表盤、漏斗圖、事件河流圖12類圖表,同時提供標題、詳情氣泡、圖例、值域、數據區域、時間軸、工具箱7個可交互組件,支持多圖表、組件的聯動和混搭展現。

ECharts圖表工具為用戶提供了詳細的幫助文檔,這些文檔不僅介紹了每類圖表的使用方法,還詳細介紹了各類組件的使用方法,每類圖表都提供了豐富的實例。用戶在使用時可以參考實例提供的代碼,稍加修改就可以滿足自己的圖表展示需求。

4、大數據可視化展現的形式

大數據可視化展現的圖形有柱狀圖、散點圖、K線圖等等,下面列舉一些常用的展現形式:

(1)柱狀圖

柱狀圖(bar chart),是一種以長方形的長度為變量的表達圖形的統計報告圖,由一系列高度不等的縱向條紋表示數據分佈的情況,用來比較兩個或以上的價值(不同時間或者不同條件),只有一個變量,通常利用於較小的數據集分析。柱狀圖亦可橫向排列,或用多維方式表達。

大數據的可視化展現技術

大數據的可視化展現技術


(2)餅狀圖

餅狀圖常用於統計學模型,有2D與3D餅狀圖,2D餅狀圖為圓形。

餅狀圖顯示一個數據系列:在圖表中繪製的相關數據點,這些數據源自數據表的行或列。圖表中的每個數據系列具有唯一的顏色或圖案並且在圖表的圖例中表示。可以在圖表中繪製一個或多個數據系列。餅狀圖只有一個數據系列。圖中各項的大小與各項總和的比例。

餅狀圖中的數據點:在圖表中繪製的單個值,這些值由條形、柱形、折線、餅狀圖或圓環圖的扇面、圓點和其他被稱為數據標記的圖形表示。相同顏色的數據標記組成一個數據系列。


大數據的可視化展現技術

(3)散點圖

散點圖是指在迴歸分析中,數據點在直角座標系平面上的分佈圖,散點圖表示因變量隨自變量而變化的大致趨勢,據此可以選擇合適的函數對數據點進行擬合。

用兩組數據構成多個座標點,考察座標點的分佈,判斷兩變量之間是否存在某種關聯或總結座標點的分佈模式。散點圖將序列顯示為一組點。值由點在圖表中的位置表示。類別由圖表中的不同標記表示。散點圖通常用於比較跨類別的聚合數據。

大數據的可視化展現技術

(4)曲線圖

曲線圖也稱線狀圖,是指用於技術分析,線狀圖是最簡單的圖形。這種圖形清楚地記錄價格隨時間變動而變化,以點標示價格的變化,並連點成線。

線狀圖的繪製須先建立座標系,橫座標為繪圖者所選擇的時間單位,縱座標是繪圖者選擇的價格變動幅度單位,把特定時間單位內的價格水平以點的形式標在座標上,並連點成線,即可繪製成價格變動的線狀圖。該圖可清楚地反映出過去時間內匯價的變動情況。

大數據的可視化展現技術

(5)百度地圖

百度地圖是為用戶提供包括智能路線規劃、智能導航(駕車、步行、騎行)、實時路況等出行相關服務的平臺。

作為地圖行業市場的領先者,百度地圖秉持"科技讓出行更簡單"的品牌願景,以"服務用戶出行"為使命,以"科技"為手段不斷探索創新。百度地圖國際化地圖已覆蓋全球209個國家和地區。伴隨著AI時代的到來,百度地圖實現了語音交互覆蓋用戶操控全流程,還上線了AR步導、AR導遊等實用功能,更加方便用戶的出行。


大數據的可視化展現技術


5、使用Echarts實現數據可視化

Echarts是一個使用 JavaScript 實現的開源可視化庫,可以流暢的運行在 PC 和移動設備上,兼容當前絕大部分瀏覽器(IE8/9/10/11,Chrome,Firefox,Safari等),底層依賴輕量級的矢量圖形庫 ZRender,提供直觀,交互豐富,可高度個性化定製的數據可視化圖表。

Echarts的特點如下:

(1)豐富的可視化類型

ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖,用於統計的盒形圖,用於地理數據可視化的地圖、熱力圖、線圖,用於關係數據可視化的關係圖、treemap、旭日圖,多維數據可視化的平行座標,還有用於 BI 的漏斗圖,儀表盤,並且支持圖與圖之間的混搭。

除了已經內置的包含了豐富功能的圖表,ECharts 還提供了自定義系列,只需要傳入一個renderItem函數,就可以從數據映射到任何你想要的圖形,更棒的是這些都還能和已有的交互組件結合使用而不需要操心其它事情。

(2)多種數據格式無需轉換直接使用

ECharts 內置的 dataset 屬性(4.0+)支持直接傳入包括二維表,key-value 等多種格式的數據源,通過簡單的設置 encode 屬性就可以完成從數據到圖形的映射,這種方式更符合可視化的直覺,省去了大部分場景下數據轉換的步驟,而且多個組件能夠共享一份數據而不用克隆。

為了配合大數據量的展現,ECharts 還支持輸入 TypedArray 格式的數據,TypedArray 在大數據量的存儲中可以佔用更少的內存,對 GC 友好等特性也可以大幅度提升可視化應用的性能。

(3)千萬數據的前端展現

通過增量渲染技術,配合各種細緻的優化,ECharts 能夠展現千萬級的數據量,並且在這個數據量級依然能夠進行流暢的縮放平移等交互。

幾千萬的地理座標數據就算使用二進制存儲也要佔上百 MB 的空間。因此 ECharts 同時提供了對流加載(4.0+)的支持,你可以使用 WebSocket 或者對數據分塊後加載,加載多少渲染多少,不需要漫長地等待所有數據加載完再進行繪製。 

(4)移動端優化

ECharts 針對移動端交互做了細緻的優化,例如移動端小屏上適於用手指在座標系中進行縮放、平移。 PC 端也可以用鼠標在圖中進行縮放(用鼠標滾輪)、平移等。


細粒度的模塊化和打包機制可以讓 ECharts 在移動端也擁有很小的體積,可選的 SVG 渲染模塊讓移動端的內存佔用不再捉襟見肘

(5)多渲染方案,跨平臺使用

ECharts 支持以 Canvas、SVG(4.0+)、VML 的形式渲染圖表。VML 可以兼容低版本 IE,SVG 使得移動端不再為內存擔憂,Canvas 可以輕鬆應對大數據量和特效的展現。不同的渲染方式提供了更多選擇,使得 ECharts 在各種場景下都有更好的表現。

除了 PC 和移動端的瀏覽器,ECharts 還能在 node 上配合 node-canvas 進行高效的服務端渲染(SSR)。從 4.0 開始我們還和微信小程序的團隊合作,提供了 ECharts 對小程序的適配。

(6)深度的交互式數據探索

交互是從數據中發掘信息的重要手段。"總覽為先,縮放過濾按需查看細節"是數據可視化交互的基本需求。

ECharts 一直在交互的路上前進,我們提供了 圖例、視覺映射、數據區域縮放、tooltip、數據刷選等開箱即用的交互組件,可以對數據進行多維度數據篩取、視圖縮放、展示細節等交互操作。 

(7)多維數據的支持以及豐富的視覺編碼手段

ECharts 3 開始加強了對多維數據的支持。除了加入了平行座標等常見的多維數據可視化工具外,對於傳統的散點圖等,傳入的數據也可以是多個維度的。配合視覺映射組件 visualMap 提供的豐富的視覺編碼,能夠將不同維度的數據映射到顏色,大小,透明度,明暗度等不同的視覺通道。

(8)動態數據

ECharts 由數據驅動,數據的改變驅動圖表展現的改變。因此動態數據的實現也變得異常簡單,只需要獲取數據,填入數據,ECharts 會找到兩組數據之間的差異然後通過合適的動畫去表現數據的變化。配合 timeline 組件能夠在更高的時間維度上去表現數據的信息。

(9)絢麗的特效

ECharts 針對線數據,點數據等地理數據的可視化提供了吸引眼球的特效。

通過GL實現更多更強大絢麗的三維可視化。想要在 VR,大屏場景裡實現三維的可視化效果?我們提供了基於 WebGL 的 ECharts GL,你可以跟使用 ECharts 普通組件一樣輕鬆的使用 ECharts GL 繪製出三維的地球,建築群,人口分佈的柱狀圖,在這基礎之上我們還提供了不同層級的畫面配置項,幾行配置就能得到藝術化的畫面。


示例-1:


在數據倉庫hive中有個月銷售額表Month_ Sales,數據格式如下:

產品系列 單價 銷售量 銷售額


樣本數據如下:

B 255 102 26010

B2 333 76 25308

C 308 88 27104

D 399 76 30324

B1 200 87 22000

A1 300 52 23000

C1 109 73 24000

D1 101 89 24900


要求:

1、使用ajax調用後臺接口獲取Month_ Sales月銷售額度在25000以上的產品系列

2、將結果展現在圖表,如下所示:

大數據的可視化展現技術


實現過程如下所示:


$(function(){

var xAxisData = new Array();

var yAxisData = new Array();

// ajax同步從服務器請求數據

$.ajax({

type: 'get',

url: 'http://localhost:8888/bigdata/monthSales/list',

data: {},

dataType: 'json',

async: false,

success: function (data) {

for(var i in data){

//商品名稱數組

  xAxisData.push(data[i].product);

//商品銷售額數組

yAxisData.push(data[i].sales);

}

},

error: function (data) {

alert('請求失敗');

}

});


// 基於準備好的dom,初始化echarts實例

var myChart = echarts.init(document.getElementById('main'));


// 指定圖表的配置項和數據

var option = {

title: {

text: '月銷售額度在25000以上的產品系列'

},

color: ['#3398DB'],//柱狀圖顏色

tooltip : {

trigger: 'axis',

axisPointer : { // 座標軸指示器,座標軸觸發有效

type : 'shadow' // 默認為直線,可選為:'line' | 'shadow'

}

},

legend: {

data:['銷售額']

},

xAxis: {

data: xAxisData

},

yAxis: {},

series: [{

name: '銷售額',

type: 'bar',

barWidth: '50%',

data: yAxisData

}]

};


// 使用剛指定的配置項和數據顯示圖表。

myChart.setOption(option);

});



示例-2:

下面是各個國家某產品出口配額的數據(表名:export_quota):

國家 銷量(單位:億元)

中國 11.2

美國 13.5

日本 7.6

德國 8.9

法國 9.6

意大利 9.2

馬來西亞 7.4


要求使用hive實現輸入一個或者某幾個國家查詢產品的出口配額數據,將結果展現為條形圖。例如查詢上述樣本所有數據,圖形展現如下:

大數據的可視化展現技術


實現過程如下:


$(function(){

var xAxisData = new Array();

var yAxisData = new Array();

// ajax同步從服務器請求數據

$.ajax({

type: 'get',

url: 'http://localhost:8888/bigdata/exportQuota/list',

data: {},

dataType: 'json',

async: false,

success: function (data) {

for(var i in data){

//國家名稱數組

  xAxisData.push(data[i].exportAmount);

//出口配額數組

yAxisData.push(data[i].country);

}

},

error: function (data) {

alert('請求失敗');

}

});


// 基於準備好的dom,初始化echarts實例

var myChart = echarts.init(document.getElementById('main'));


// 指定圖表的配置項和數據

var option = {

title: {

text: '產品出口額'

},

color: ['blue'],//柱狀圖顏色

tooltip : {

trigger: 'axis',

axisPointer : { // 座標軸指示器,座標軸觸發有效

type : 'shadow' // 默認為直線,可選為:'line' | 'shadow'

}

},

xAxis: {

type:'value',

data: [0,2]

},

yAxis: {

data: yAxisData

},

series: [{

name: '銷售額',

type: 'bar',

barWidth: '50%',

data: xAxisData

}]

};


// 使用剛指定的配置項和數據顯示圖表。

myChart.setOption(option);

});


示例-3:

經過調查,男女身高和體重有一定的分佈關係(應該是正態分佈),就是給你一定的身高,就能大致預測出他(她)的體重。當然非正常數據除外,比如某人身高只有160,但是體重確是190斤,我們把非正常數據清洗的過程叫做"去噪"。Female_Height_Weight.log和

Male_Height_Weight.log給出2003年的調研數據。

要求:

1、使用hive能夠查詢給定男女身高範圍的散點圖,例如,查詢男身高範圍:170—190,女身高範圍:160—180,然後顯示身高和體重關係的散點圖

2、使用Echarts散點圖展現處理後的結果 :

大數據的可視化展現技術

實現過程如下所示:


$(function(){

var allmales = new Array();

var allfemales = new Array();

// ajax同步從服務器請求數據

$.ajax({

type: 'get',

url: 'http://localhost:8888/bigdata/personHeightWeight/list',

data: {},

dataType: 'json',

async: false,

success: function (data) {

for(var i in data.males){

var males = new Array();

males.push(data.males[i].height);

males.push(data.males[i].weight);

allmales.push(males);

}

for(var i in data.females){

var females = new Array();

females.push(data.females[i].height);

females.push(data.females[i].weight);

allfemales.push(females);

}


},

error: function (data) {

alert('請求失敗');

}

});


// 基於準備好的dom,初始化echarts實例

var myChart = echarts.init(document.getElementById('main'));


var option = {

title : {

text: '男性女性身高體重分佈',

subtext: '抽樣調查來自: Heinz 2003'

},

tooltip : {

trigger: 'axis',

showDelay : 0,

formatter : function (params) {

if (params.value.length > 1) {

return params.seriesName + ' :
'

+ params.value[0] + 'cm '

+ params.value[1] + 'kg ';

}

else {

return params.seriesName + ' :
'

+ params.name + ' : '

+ params.value + 'kg ';

}

},

axisPointer:{

show: true,

type : 'cross',

lineStyle: {

type : 'dashed',

width : 1

}

}

},

legend: {

data:['女性','男性']

},

toolbox: {

show : true,

feature : {

mark : {show: true},

dataZoom : {show: true},

dataView : {show: true, readOnly: false},

restore : {show: true},

saveAsImage : {show: true}

}

},

xAxis : [

{

type : 'value',

scale:true,

axisLabel : {

formatter: '{value} cm'

}

}

],

yAxis : [

{

type : 'value',

scale:true,

axisLabel : {

formatter: '{value} kg'

}

}

],

series : [

{

name:'女性',

type:'scatter',

data: allfemales,

markPoint : {

data : [

{type : 'max', name: '最大值'},

{type : 'min', name: '最小值'}

]

},

markLine : {

data : [

{type : 'average', name: '平均值'}

]

}

},

{

name:'男性',

type:'scatter',

data: allmales,

markPoint : {

data : [

{type : 'max', name: '最大值'},

{type : 'min', name: '最小值'}

]

},

markLine : {

data : [

{type : 'average', name: '平均值'}

]

}

}

]

};

// 使用剛指定的配置項和數據顯示圖表。

myChart.setOption(option);

});


大數據的可視化展現技術


《大數據和人工智能交流》的宗旨

1、將大數據和人工智能的專業數學:概率數理統計、線性代數、決策論、優化論、博弈論等數學模型變得通俗易懂。

2、將大數據和人工智能的專業涉及到的數據結構和算法:分類、聚類 、迴歸算法、概率等算法變得通俗易懂。

3、最新的高科技動態:數據採集方面的智能傳感器技術;醫療大數據智能決策分析;物聯網智慧城市等等。

4、根據初學者需要會有C語言、Java語言、Python語言、Scala函數式等目前主流計算機語言。

5、根據讀者的需要有和人工智能相關的計算機科學與技術、電子技術、芯片技術等基礎學科通俗易懂的文章。


分享到:


相關文章: