Vega data visualization tool - teach you to easily play with big data visualization | with code

Abstract:  Vega is an efficient tool for big data visualization. This paper takes the analysis of the migration of peregrine falcons as an example to demonstrate the powerful capabilities and easy-to-learn and easy-to-use features of the Vega tool.

We are currently in the information age, and the era of the Internet of Everything has arrived. From our daily life, we can find that from small smart homes around us, to shared bicycles, Didi and other taxi software, etc., a large amount of data is generated all the time. The amount of data generated in the past few years has far exceeded the sum of other times in history. So much data is aggregated into a big data, how to effectively analyze and utilize these data becomes very important, and big data visualization is a powerful tool for big data analysis.

What is big data visualization? The definition given by reference to some materials is as follows. Modern data visualization (Data Visualization) technology refers to the use of computer graphics and image processing technology to convert data into graphics or images and display them on the screen. And the theory, method and technology of interactive processing. Simply put, it is a technology that displays seemingly meaningless data, information, knowledge, etc. in an easy-to-understand visual way, so as to conduct more in-depth observation and analysis of the data. This article will introduce a visual grammar Vega, which is very simple and easy to learn and use. I hope it can help you provide some ideas for data visualization and analysis.

Vega is a visual syntax, a declarative language for creating, saving and sharing interactive visual designs. Using Vega, we are able to describe the visual appearance and interaction behavior of visualizations in JSON format and generate web-based views using Canvas or SVG. In addition Vega provides basic building blocks for various visualization designs: data loading, transformations, scaling, map projections, axes, legends, and graphic markers (such as rectangles, lines, plot symbols, etc.). Vega provides a very fast representation for the computational generation of visualizations that can serve as the basis for new APIs and visual analysis tools. This article will mainly introduce MapD Vega below.

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/

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326511487&siteId=291194637