Vega資料視覺化工具—教你輕鬆玩轉大資料視覺化 | 附程式碼

摘要： Vega是一種大資料視覺化的高效工具，本文以分析遊隼的遷徙情況為例，展示了Vega工具的強大能力及易學易用特點。

目前我們處於資訊時代，萬物聯網的時代已經到來。從我們的日常生活中可以發現，小到身邊的智慧家居，再到平時出行的共享單車、滴滴等叫車軟體等，無時無刻不在產生大量的資料。這幾年的時間裡產生的資料量，已經遠遠超過了歷史上其它時間的總和。那麼這麼多的資料匯聚成一個大資料，如何對這些資料進行有效分析與加以利用就變得十分重要了，而大資料視覺化是進行大資料分析的一把利器。

什麼是大資料視覺化呢，參考一些資料給出的定義如下，現代的資料視覺化（Data Visualization）技術指的是運用計算機圖形學和影像處理技術，將資料換為圖形或影像在螢幕上顯示出來，並進行互動處理的理論、方法和技術。簡單來說就是將看似毫無意義的資料、資訊、知識等等以一種容易理解的視覺方式展示出來的技術，從而對資料進行更深入的觀察和分析。本文將介紹一種視覺化的語法Vega，非常簡單易學易用，希望能幫助大家在資料視覺化及分析上提供一些思路。

Vega是一種視覺化語法，用於建立、儲存和共享互動式視覺化設計的宣告式語言。使用Vega，我們能夠以JSON格式描述視覺化的視覺外觀和互動行為，並使用Canvas或SVG生成基於Web的檢視。另外Vega為各種視覺化設計提供基本構建塊：資料載入、轉換、縮放、地圖投影、軸、圖例和圖形標記（如矩形，線條，繪圖符號等）。Vega為視覺化的計算生成提供了非常快捷的表示，可以作為新的API和視覺分析工具的基礎。本文下面將主要介紹MapD Vega。

MapD Vega是基於Jeffrey Heer及其在華盛頓大學的團隊開發的開源Vega規範。我們已經將原始規範適用於MapD平臺，因此可以使用SQL研究資料，並能快速實施自定義視覺化。MapD使用Vega直接在SQL查詢的結果集上驅動渲染引擎，而不需要資料離開GPU，使得使用者能夠以純粹的前端視覺化工具以不可能的方式視覺化細粒度資料。下圖是Vega渲染的歐洲推文影像，根據語言進行顏色編碼，這可以在Vega文件示例中找到：

作為開發人員或資料分析師，可以藉助視覺化工具輕鬆瞭解收集的資料，並且不會因為幾何視覺化細節的複雜性而受到任何損失。Vega比大多數視覺化工具更加高階，並且可以輕鬆支援自定義演算法和高階視覺化技術。下面將以一個簡單的例子來說明使用Vega是多麼的簡單易學，讀者也可以將其用作探索自己的資料的跳板。

Vega規範採用JSON結構，因此易於以程式設計方式建立、理解和操作。甚至還可以建立一些常見的圖表型別。Vega規範包括：

• 資料來源選擇，可以是SQL語句或行內資料。

• 在圖或表上可以表示資料的選項：

  • 點

  • 幾何形狀符號

  • 多邊形

• 縮放渲染資料和量化資料屬性的選項：

  • 定量 - 線性、對數、指數、平方根和量化尺度

  • 離散 - 順序和閾值尺度

MapD 聯結器API可以輕鬆地將Vega JSON傳送到後臺，從而呈現視覺化，並將base64編碼的PNG影像返回給客戶端。我們可以使用API 或Apache Thrift直接在幾個步驟中進行呈現請求：

• 1. 建立Vega規範

• 2. 使用Thrift或renderVega()API函式進行呈現請求，API取決於node-connector.js或browser-connector.js

• 3. 非同步地接收渲染的影像並將其顯示在應用程式中。

Vega文件包括教程、參考指南以及在客戶端瀏覽器中使用Vega的示例原始碼，因此建議你使用Vega探索你的資料。

“地球上最快的動物”遇到了地球上最快的大資料探索平臺

MapD平臺是最快的大資料探索平臺，而遊隼是潛水中已被記錄的全球最快的動物，時速為242英里。使用Vega能更好地瞭解你的資料，比使用其他大多數視覺化工具更快且更加直觀。我們來仔細看看遊隼是怎麼回事。

在我們簡單的調查中，來看看沿太平洋遷徙路線的鳥類遷徙。具體來說，在舊金山灣地區，鳥類在南太平洋和舊金山灣之間彙集在一起 。除了業餘鳥類愛好者的報導外，鳥類還被位於馬林縣霍克山的金門猛禽天文臺以及雷耶斯和法拉隆群島的點藍組織統計。我們的資料來自於ebird機構，是與康奈爾鳥類實驗室協調統一報告和收集的結果。

如果我們使用你已經熟悉的MapD Immerse SQL編輯器，將會獲得一個視覺化的列表圖表，顯示的是2015年特定月份的遊隼蹤跡的緯度和經度座標：

從列表中可以很容易地瞭解遊隼的數量。如果想看看每個月的獵鷹隼的數量是如何變化的，並且可能還需對任何變化的原因進行一些評估，那麼Vega這個更強大的視覺化工具可以幫助你。每個增加的資料中的可見性程度通常表明我們可能要考慮到視覺化的其他資料欄位，並且對於Vage而言，新增更多的資料和欄位到分析中是非常容易的。在這個例子中，我們可能想知道遊隼在某些月份天氣中的遷徙特徵。我們來看看一個Vega視覺化，下圖顯示把緯度和經度作為x和y軸座標，將觀察到的次數疊加在海灣區域的地圖上：

每個繪圖點是一個Vega 標記規範，其中按照觀察次數進行月份的著色。

我們可以看到，最大數量的遊隼出現在十月份，可以預料到，在霍克山、金門大橋北面和法拉隆群島也都能觀察到遊隼。雷耶斯的西北地區在六月份出現大量的遊隼，這真是意想不到的，這也表明需要更多的資料或不同的視覺化來更好地瞭解遊隼遷徙的影響。同時我們也可以看到這些景象集中在沿海地區，大概是因為海鳥是遊隼最喜歡的飲食。

我們來看看如何從ebird資料庫中的數百萬條記錄的鳥類目錄中建立這麼以下這個視覺化。

Vega規範包括：

• 資料屬性指定和過濾資料來源的屬性。

• 標記屬性定義資料項的基本視覺化圖形的屬性。

• 尺度屬性定義幾何的屬性或向資料項視覺化應用的附加屬性。

• 觀看區域維度。

資料屬性

"data": [
    {        "name": "ptable",
        "sql": "SELECT decimalLongitude as x, decimalLatitude as y, c10_month as m, individualCount as c, ebird.rowid FROM ebird WHERE (county = 'San Francisco' OR county = 'Marin') AND c9_year = 2015 AND scientificName = 'Falco peregrinus' AND individualCount IS NOT NULL LIMIT 2000000"
    }]

Vega支援SQL語句，所以可以從ebird資料集中提取出緯度、經度、月份及觀察次數。此外，將資料限於2015年兩個海灣區縣。

通過ptable為資料集分配名稱，其他規範屬性可以引用資料來源得到。

標記屬性

marks: [
    {        "type": "points",
        "from": {            "data": "ptable"
        },
        "properties": {            "x": {                "scale": "x",
                "field": "x"
            },
            "y": {                "scale": "y",
                "field": "y"
            },
            "fillColor": {                "scale": "color",
                "field": "m"
            },
            "size": {                "scale": "count",
                "field": "c"
            }
        }
    }]

使用ptable資料，標記屬性將緯度和經度定義為圖中x座標和y座標。每個渲染的資料點的大小根據一個計數刻度，其大小對應於觀察到的遊隼數量，並使用比色刻度尺對相關的觀察月份進行著色。

尺度屬性

"scales": [
    {
        "name": "x",
        "type": "linear",
        "domain": [-123.03,-122.35],
        "range": "width"
    },
    {
        "name": "y",
        "type": "linear",
        "domain": [37.4833,38.3094],
        "range": "height"
    },
    {
        "name": "count",
        "type": "quantize",
        "domain": [1,10],
        "range": [3,6,9,12,15,18,21,24,27,30]
    },
    {
        "name": "color",
        "type": "ordinal",
        "domain": [1,2,3,4,5,6,7,8,9,10,11,12],
        "range": ["#f49242", "#f4c842", "#e8f441",
                  "#acf441", "#64f441", "#41f4bb",
                  "#42b3f4", "#4170f4", "#8241f4",
                  "#cd41f4", "#f441b8", "#f44161"],
      "default": "#6c809b",
      "nullValue": "#cacaca"
    }]

該尺度屬性將輸入資料對映域到輸出視覺化範圍。Vega支援定量和離散縮放以匹配固有的資料連續性。其中，緯度和經度定義為x和y座標軸，並且將兩個縣的邊界對映到視覺化區域。

計數尺度定義了渲染的點尺寸，將範圍量化為10個值。這覆蓋了觀察次數的範圍，當我們使用SQL編輯器查詢資料時，顯示10是觀察遊隼數最大的值。

在顏色比例給每個月份分配不相關聯的顏色時，如果記錄資料未指定月份，則將遊隼的中間顏色分配為預設值。空資料條目以淺灰色表示，儘管SQL語句已經刪除了所有的空資料條目。

視覺化區域屬性

最後，使用以下觀看區域尺寸，這個尺寸很方便地匹配了資料的十進位制GPS座標：

"width": 480
"height": 720

以下是此示例中使用的完整JSON結構：

const exampleVegaSpec = {
    "width": 480,
    "height": 720,
    "data": [
        {
            "name": "ptable",
            "sql": "SELECT decimalLongitude as x, decimalLatitude as y, c10_month as m, individualCount as c, ebird.rowid FROM ebird WHERE (county = 'San Francisco' OR county = 'Marin') AND c9_year = 2015 AND scientificName = 'Falco peregrinus' AND individualCount IS NOT NULL LIMIT 2000000"
        }
    ],
    "scales": [
        {
            "name": "x",
            "type": "linear",
            "domain": [-123.03,-122.35],
            "range": "width"
        },
        {
            "name": "y",
            "type": "linear",
            "domain": [37.4833,38.3094],
            "range": "height"
        },
        {
            "name": "count",
            "type": "quantize",
            "domain": [1,10],
            "range": [3,6,9,12,15,18,21,24,27,30]
        },
        {
            "name": "color",
            "type": "ordinal",
            "domain": [1,2,3,4,5,6,7,8,9,10,11,12],
            "range": ["#f49242", "#f4c842", "#e8f441",
                      "#acf441", "#64f441", "#41f4bb",
                      "#42b3f4", "#4170f4", "#8241f4",
                      "#cd41f4", "#f441b8", "#f44161"],
            "default": "#6c809b",
            "nullValue": "#cacaca"
        }
    ],
    marks: [
        {
            "type": "points",
            "from": {"data": "ptable"},
            "properties": {
                "x": {
                    "scale": "x",
                    "field": "x"
                },
                "y": {
                    "scale": "y",
                    "field": "y"
                },
                "fillColor": {
                    "scale": "color",
                    "field": "m"
                },
                "size": {
                    "scale": "count",
                    "field": "c"
                }
            }
        }
    ]};

VEGA可以輕鬆快速發現資料之間的關係和依賴關係，每個視覺化可以讓你更深入地瞭解資料，並驅使你想從中提取更多的有用資訊。花費幾分鐘時間使用我們的示例資料，並對資料屬性SQL語句進行一個小的更改，就可以得到一個完全不同的遊隼檢視。下面來看看10年間隔內每個月觀察遊隼的相關情況：

SELECT c10_month as mo, c9_year as yr, county as cty, SUM(individualCount) as c FROM ebird WHERE scientificName = 'Falco peregrinus'  AND (county = 'San Francisco') GROUP BY cty,c9_year,c10_month HAVING (SUM(individualCount) > 0) AND (c9_year >= 2006 AND c9_year <= 2015) LIMIT 2000000"

在這裡我們使用月份和年份代替緯度和經度來擴充套件我們的資料點，使用規範county= ‘San Francisco’及county = ‘Marin’渲染兩個圖表，下圖將其結合並對其註釋：

在這十年的時間裡，我們可以發現遊隼的數量是有所增加。但是，在過去的兩年裡，遊隼們似乎全年在馬林縣徘徊，這也可能部分地解釋了在六月份看到的意外數量的觀察數。

作者資訊

Maped網站：該網站是由科學家、工程師和資料分析師創立，網站的使命是使資料探索成為身臨其境的體驗。

Site：https://www.mapd.com/

本文由北郵@愛可可-愛生活老師推薦，阿里云云棲社群組織翻譯。

文章原標題《Vega makes visualizing BIG data easy》，作者：Gene，譯者：海棠

更為詳細的內容，請檢視原文：

http://click.aliyun.com/m/27111/