如何使用TigerGraph Insights创建一个可视化图分析应用程序
如何在30分钟内使用TigerGraph Insights创建一个可视化图分析应用程序

TigerGraph Insights (Insights)是一个无代码/低代码的直观可视化图分析应用构建工具，它建立在TigerGraph 原生并行图数据库之上，允许任何用户(技术人员或非技术人员)轻松、快速地获得有意义的可视化洞察，如果没有对其关联数据进行深入的图分析，这些可视化洞察将仍然是隐藏的。
为了简化构建可视化图分析应用程序，TigerGraph Insights 支持用户在可视化界面上简单地点击、拖放，渐进式地探索可视化图模式搜索、动态链接和导航。通过点击、拖放，即可构建具有丰富交互功能的、多页面的、数据驱动的可视化图表，并支持传统的BI视图部件。这些图还可以借助交互式dashboard连接起来，以便轻松共享，从而更深入地了解和洞察关联数据。
在这篇博客中，我将向你展示如何通过TigerGraph Insights建立一个功能丰富的交互式可视化图分析应用程序。 这个可视化图应用（见下图），基于一个电影样本图，允许用户探索电影的许多不同维度，人物（演员、导演、作家……），以及他们之间的相互联系，有内置的图探索、过滤、图算法和不同视图（图、表、图表）之间的动态互动。

前期准备：在TigerGraph中创建一个Movies Graph（约10分钟）

在开始建立你的第一个TigerGraph Insights应用程序之前，你需要完成一些准备工作。

第1步：在https://tgcloud.io 注册一个免费的TigerGraph 云账户，如果已注册过，则可以登录现有账户。

第2步：创建一个免费的数据库集群，并选择空白的入门套件。
第3步：启动GraphStudio开发工具，并导入示例的Movie解决方案。
从 “工具 “菜单中选择 “GraphStudio”。
从这里下载 “Movies “示例解决方案，并将其放在你的本地磁盘上。
在GraphStudio中选择 “导入现有解决方案”。
从上述下载的文件位置选择本地存储的 “Movies”解决方案来导入。 可能需要几分钟的时间来完成导入。
解决方案导入后，在下拉菜单中选择导入的图 “Movies”。
你可以点击 “设计图模式 “来查看导入的Movies 图schema。你应该可以看到2个顶点类型（Person和Movie），5个连接Person和Movie的边类型（act, direct, write, produce 和review）和1个连接Person和Person的边类型（follow）。
从这里下载并解压文件，然后选择 “映射数据到图”》”新增数据文件”，将所有本地文件上传到TigerGraph集群。
所有文件都上传后，你应该看到一个可供映射的文件列表。点击 “取消 “以退出文件上传页面。
最后一部分是将数据加载到TigerGraph。选择 “加载数据” 》 “开始/继续加载 “来启动加载工作。
现在你已经准备好建立你的第一个TigerGraph Insights应用程序。你可以从你新创建的集群上的工具菜单中打开TigerGraph Insights。

使用TigerGraph Inisights 创建 “Movies “应用程序

在打开TigerGraph Inisights 后，点击”新应用程序”按钮来创建你的第一个TigerGraph Insights应用程序。如果你愿意，TigerGraph Insights允许你创建多个应用程序。

然后你需要给应用程序命名。这里，我们把它命名为Movie App。你还可以给应用程序添加图标，并从底层的TigerGraph数据库中选择一个默认图标。请注意，你至少需要一个图才能创建TigerGraph Insights应用程序。

点击 “确定 “来保存。应用程序创建后，你将进入应用程序dashboard的编辑模式。

创建页面

TigerGraph Insights支持多页面应用程序。首先，通过点击左边菜单上的 “新页面 “按钮，在应用程序中创建你的第一个页面。
对于这个简单的电影应用程序，我们将创建4个页面。
  • Overview – 基于发行年份的电影的概述信息。
  • Movie Details–关于特定电影的详细信息。
  • Person Graph – 我们数据库中所有人物的整个关系图。
  • Person Details–关于特定人的详细信息。
每个页面可以有多个部件。 所有页面创建后，你可以点击屏幕右下角的 “+”按钮，在你的页面上添加一个小部件。

创建 Graph 组件

我们回到应用程序中的 “Overview “页面，添加你的第一个部件。只需从添加小组件菜单中选择图。当你编辑一个小组件时，你总是可以切换小组件的类型。

在小组件编辑视图中，有三个部分。最上面的部分是模式搜索/编写 GSQL 查询面板。你可以编写图模式或原始的GSQL查询，从TigerGraph数据库中检索数据。右边的部分是设置面板，允许你配置你的小组件。屏幕中间的主要部分是结果面板，它以你所配置的方式将查询结果可视化。
模式搜索支持自动完成功能，你可以输入你的搜索模式，并从下拉菜单中选择一个匹配的模式。 你还可以通过点击模式搜索框右侧的设置按钮（齿轮图标）来指定顺序和数量限制。
对于高级用户，你也可以从你指定的图模式中复制生成的GSQL查询，并对其进行自定义。
在搜索栏中选择以下图模式：
点击模式搜索框右侧的播放按钮（三角形图标），预览图数据。然后点击右下角的 “应用 “按钮来应用改变。
小组件创建后，你也可以拖动标题线来移动小组件到你想要的位置。而且你也可以拖动每个小组件右下角的调整大小按钮来调整小组件的大小。下面是调整第一个图组件的大小后的样子。

创建 Inputs 组件

TigerGph Insights允许用户为每个页面指定变量，这些变量可以在搜索模式或GSQL查询中使用。我们来创建2个变量，分别叫做fromYear和toYear。这两个变量都是用来根据发行日期来过滤电影的。

从“新建小组件”菜单中选择Inputs，创建一个新的Inputs小组件。
要向小组件添加user Input，你需要点击设置面板中Data>Inputs 部分的 + 按钮。
你可以创建以下2个inputs：
这就是创建上述2个inputs后的样子。请注意，变量名称是每个input的身份名称，当用户需要从另一个小组件或页面链接到这个input时，需要使用对应的变量名称。
现在，我们可以将input变量链接到我们之前创建的图组件上。要做到这一点，你可以点击图组件上的三个点，然后选择编辑组件。
在模式搜索框中，当悬停在每个对象上时，你可以点击小的+按钮，对其添加过滤器。请在 “Movie “顶点的 “released “属性中添加以下两个条件：
在应用改变后，如果你在输入框中更新了起始和终止年份，图将根据所选的电影发行年份范围重新加载。

使用GSQL查询创建一个小组件

如前所述，TigerGraph Insights支持对用户更友好地模式搜索，以及针对高级分析的强大的GSQL查询语言。

我们通过从“新建组件”菜单中选择Single Value来创建一个基于GSQL查询的单值组件。

我们可以在最左边的下拉菜单中切换到GSQL，而不是使用模式搜索。
切换后，模式搜索框变成了一个GSQL查询编辑器。
请将以下查询语句复制到你的查询编辑器并运行查询。你也可以改变Single Value的图标、颜色和大小。 
				
					INTERPRET QUERY(INT fromYear, INT toYear) FOR GRAPH Movies {  
    SELECT COUNT(p) AS totalNumber INTO T  
    FROM Movie:p
    WHERE p.released >= fromYear and p.released <= toYear;  
    PRINT T;
}
应用改变后，你可以调整 Single Value组件的大小，并移动到以下位置：

创建表格小组件

表格是一种流行的视图，用于增强可视化，因为它为用户提供了一种熟悉的方式来一次看到多行和多列。通过从“新建组件”菜单中选择 “Table “来创建一个新的表组件。请使用我们已经创建的变量搜索以下模式。
你还需要在右边的Data部分配置列。
在应用改变和移动仪表板中的小组件后，它应该看起来像这样。

创建饼图小组件

饼图是我们在许多仪表盘中看到的传统BI图表。 你也可以在你的应用程序中添加一个。

从“新建组件”菜单中选择饼状图，创建2个饼状图小组件。一个是前10名导演，另一个是前10名演员。也请分别使用以下GSQL查询语句： 
				
					INTERPRET QUERY(INT fromYear, INT toYear) FOR GRAPH Movies{
    SELECT p.name AS Director, count(m) AS MovieCount INTO T
    FROM Person:p -(DIRECTED>:e)- Movie:m
    WHERE m.released >= fromYear AND m.released <= toYear
    GROUP BY p
    ORDER BY count(m) desc
    LIMIT 10;
    PRINT T;
}
				
			
				
					INTERPRET QUERY(INT fromYear, INT toYear) FOR GRAPH Movies{
    SELECT p.name AS Director, count(m) AS MovieCount INTO T
    FROM Person:p -(ACTED_IN>:e)- Movie:m
    WHERE m.released >= fromYear AND m.released <= toYear
    GROUP BY p
    ORDER BY count(m) desc
    LIMIT 10;
    PRINT T;
}
应用并调整位置/大小到以下位置：

创建折线图小组件

我们现在在仪表板上添加另一个折线图部件。通过小组件选择菜单添加一个折线图小组件，并给它命名为 “Release Trend”。

使用下面的GSQL查询语句来查询数据库： 
				
					INTERPRET QUERY(INT fromYear, INT toYear) FOR GRAPH Movies SYNTAX v2 {
    SELECT m.released, count(DISTINCT m) as totalCount INTO T
    FROM Movie:m
    WHERE m.released >= fromYear and m.released <= toYear
    GROUP BY m.released;
    PRINT T;
}
现在第一个页面创建完成了。

创建另一个图组件，以借助图算法探索更多的洞察力

我们现在建立另一个图组件来尝试TigerGraph Insights中新的图算法。进入左侧导航菜单上的Person Graph页面，创建一个图组件，然后添加以下搜索模式，并运行它。
应用改变，并调整小组件以适应整个屏幕。
你可以在图组件的左上角看到图算法的按钮。
在3.8 版本中，TigerGraph Insights支持2种图算法Page Rank和Louvain。这两种图算法都是基于图组件中的当前结果集运行的，它并不做全图搜索。如果你想运行全图算法，你可以在GraphStudio中安装算法，然后在模式搜索框中运行安装的查询。
Louvain算法通过近似最大化图的模块化得分来划分图中的顶点。通过应用Louvain算法，你可以在当前图上进行快速的社群检测。
如上图所示，Louvain算法对顶点进行了划分和着色，你可以很容易地通过颜色看到图中的不同社区。
另一方面，PageRank算法测量的是每个顶点对其他每个顶点的影响。它需要在排名顶点上定义一个自环。你也可以选择加权选项，该选项在自环上使用一个基于数字的属性来做一个更准确的页面排名。
在图上应用Page Rank后，它使用顶点大小来可视化算法的结果。你可以很容易地发现，较大的顶点代表较高的Page Rank，而较小的顶点具有较低的Page Rank。
请注意，算法结果不会保存在服务器上，用户需要在需要时应用这些算法。
如果我想在当前图的基础上探索更多的数据怎么办？例如，我想看所有与某个人有关的电影。有了TigerGraph Insights 的Graph组件，你可以通过右键点击你想探索的顶点来轻松实现。

你可以找出该特定顶点的所有邻居，无论其类型如何，或者你可以探索某个邻居类型。你也可以使用双击来探索所有邻居。
PathFinding算法也是找出两个顶点之间关系的好方法。按住command/ctrl键选择2个顶点，并在其中一个被选中的顶点上点击右键来访问PathFinding 算法。TigerGraph Insights提供了2种PathFinding 算法 —— 一条最短路径和所有最短路径。

应用PathFinding算法后，匹配的路径将被突出显示。

在页面之间建立链接

TigerGraph Insights是否支持通过链接将变量从一个页面传递到另一个页面？答案是肯定的。在本节中，我们将指导你如何做到这一点。进入左侧导航菜单上的 “Movie Details “页面，并创建一个Inputs 组件。
Input 类型选择 Dropdown，变量名称命名为movieName。然后点击“Use query to generate option”，从数据库中检索电影列表。
在弹出的窗口中，在模式搜索栏中选择Movie，并配置顺序选项，然后运行搜索。
点击 OK 保存搜索，然后你应该能够像这样配置选项的键和值。你也可以从下拉菜单中选择默认值。
像下面的截图所示一样，保存该组件。
现在，你可以导航到 “Overview “页面，并编辑我们之前创建的 “Movies “表格组件。在 高级部分，你可以添加一个名为 “Details “的table action。将URL改为 “Movie Details “页面。选择URL后，参数将显示我们在该页面定义的所有可用的Input变量。第二个下拉菜单允许你从当前表格行中选择一个值。在这种情况下，我们选择Movie.title来传递给Movie Details页面的movieName变量。
点击 “OK “后，表格将显示一个新的 “Action “列。应用变化，你将能够通过点击每行电影的Details链接来导航到Movie Details页面。

完善 Movie Details 页面

我们回到Movie Details页面，根据movieName变量添加更多的小组件。
对于Release Year 和Tagline，你可以使用Single Value组件，并进行以下查询： 
				
					INTERPRET QUERY(string movieName) FOR GRAPH Movies{
    SELECT m.released INTO T
    FROM Movie:m
    WHERE m.title == movieName;
    PRINT T;
}
				
			
				
					INTERPRET QUERY(string movieName) FOR GRAPH Movies{
    SELECT m.tagline INTO T
    FROM Movie:m
    WHERE m.title == movieName;
    PRINT T;
}
然后添加另一个图组件来显示所有与所选电影有关的人。 
				
					INTERPRET QUERY(string movieName) FOR GRAPH Movies{
    SELECT p,m,e INTO T
    FROM Person: p -(_>:e)- Movie:m
    WHERE m.title == movieName;
    PRINT T;
}
添加4个表，每个表都列出该电影的导演、演员、编剧和制片人。我们可以使用以下模式来列出所选电影的所有导演。
调整仪表板的布局，以很好地适应每个组件。

完善 Personal Details 页面

最后一个页面是Personal Details。和Movie Details页面一样，我们可以先在Inputs组件中创建一个personName变量。这使我们能够从其他页面导航到Personal Details页面。
然后添加Single Value部组件来显示所选人物的一些详细信息，例如出生年份、演过的电影数量、导演的电影数量和粉丝数量。
然后添加一个名为Profile Graph的图组件，以列出所有相关电影以及数据库中的所有粉丝。
最后一个要添加的组件是在表格视图中列出所有相关的电影。
最后，将每个小组件调整到所需的位置。

小结

恭喜你，你已经成功地使用TigerGraph Insights创建了一个丰富的、交互式的可视化图分析应用程序!
如果您不想从头操作上述所有步骤，TigerGraph Insights允许您在几秒钟内导入一个应用程序。只要从 这里下载应用程序文件并通过右上角菜单的导入功能导入。这将为您提供一个已经完全建成的应用程序。
你可以通过点击右上角的预览按钮来分享这个应用程序，供他人查看，只需把新打开的网页URL分享给他人。
您可以随时在TigerGraph开发者论坛上分享您的意见和建议，或寻求帮助。

3分钟认识TigerGraph

相关资源

TigerGraph Blog

分类

最新帖子