閱讀529 返回首頁    go 阿裏雲 go 技術社區[雲棲]

Vega數據可視化工具——教你輕鬆玩轉大數據可視化 | 附代碼

https://yq.aliyun.com/cloud

090fa6c5219891f2c1ced8e1f545344317f1084f

什麼是大數據可視化呢，參考一些資料給出的定義如下，現代的數據可視化（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文檔示例中找到：

b49f0b85e2585f20477190a88e7e5eac7d1e9a1a

  • 數據源選擇，可以是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年特定月份的遊隼蹤跡的緯度和經度坐標：

483f3bdba3b6e2ed9a408eef281066da1465e116

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

5e7476925c7db3078c54478daacadb5da0b98b78

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

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

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

  • 數據屬性指定和過濾數據源的屬性。
  • 標記屬性定義數據項的基本可視化圖形的屬性。
  • 尺度屬性定義幾何的屬性或向數據項可視化應用的附加屬性。
  • 觀看區域維度。



"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"
            }
        }
    }
]










"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"
    }
]
















"width": 480
"height": 720











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"
                }
            }
        }
    ]
};








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"






db4b5909c05b3f84b98b3b51807b2f5894190ddf






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


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


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


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


文章為簡譯，更為詳細的內容，請查看原文








最後更新：2017-07-27 10:33:00
  上一篇：go  回顧2016年：我們見證了一場存儲行業的廝殺 
  下一篇：go  微信小程序引起熱議，但誰還記得企業微信呢？