Visual Pattern Examples
You have learnt all the basic concepts of the Visual Query Builder in the previous article. In this article we will walk you through building several visual patterns step by step, and then show you more graph analytics questions and how to solve them with visual patterns.
Video tutorials
In addition to the examples below, TigerGraph has also created a YouTube playlist with 44 video examples of the Visual Query Builder applied to different graph problems.
View the videos here: TigerGraph Visual Query Builder example playlist
Example 1. Find all the departments with male employees
Click in the pattern list pattern, input the pattern name, and click
:
![assets lhvjxin4 6ba0t qmu lvvuteg9eqbxemig3sx lvvvsnl5eksscgabgze demo 2 name](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvvuteg9eqbxemig3sx_-lvvvsnl5eksscgabgze_demo_2_name.png)
Clickin the toolbar to add a vertex pattern:
![assets lhvjxin4 6ba0t qmu lvvuteg9eqbxemig3sx lvvxrsv4oqboqfdo5rn add 1st vertex pattern](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvvuteg9eqbxemig3sx_-lvvxrsv4oqboqfdo5rn_add-1st-vertex-pattern.png)
In the config panel, change the vertex type to be department, and put it in result:
![edit vertex pattern](../_images/edit-vertex-pattern.png)
Confirm the change by click:
![assets lhvjxin4 6ba0t qmu lvvuteg9eqbxemig3sx lvvxyennhcuze3pjgew changed to department](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvvuteg9eqbxemig3sx_-lvvxyennhcuze3pjgew_changed-to-department.png)
Clickin the toolbar to add another vertex pattern:
![assets lhvjxin4 6ba0t qmu lvvuteg9eqbxemig3sx lvvyo9rsvkzoxl5ti45 2nd vertex pattern](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvvuteg9eqbxemig3sx_-lvvyo9rsvkzoxl5ti45_2nd-vertex-pattern.png)
Expand the Filter section in the config panel:
![open filter](../_images/open-filter.png)
Clickto add a filter:
![add filter](../_images/add-filter.png)
Edit the filter to be (gender == "male"):
![edit filter](../_images/edit-filter.png)
Confirm the change:
![assets lhvjxin4 6ba0t qmu lvvuteg9eqbxemig3sx lvvaran9ybyvmp5ddmo apply filter](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvvuteg9eqbxemig3sx_-lvvaran9ybyvmp5ddmo_apply-filter.png)
Clickin the toolbar, then click the person vertex pattern in the working panel:
![click person vp](../_images/click-person-vp.png)
Then click department vertex pattern in the working panel to create an edge pattern between the two vertex patterns:
![assets lhvjxin4 6ba0t qmu lvvuteg9eqbxemig3sx lvwcirpqnzwxjjmibcm click dep vp](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvvuteg9eqbxemig3sx_-lvwcirpqnzwxjjmibcm_click-dep-vp.png)
In the config panel, change the edge type to be work_in:
![edit etype](../_images/edit-etype.png)
Apply the change, and drag the person vertex pattern to a better position:
![assets lhvjxin4 6ba0t qmu lvvuteg9eqbxemig3sx lvwcxjavy9gzmh4fyzv apply etype change](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvvuteg9eqbxemig3sx_-lvwcxjavy9gzmh4fyzv_apply-etype-change.png)
Click in the toolbar to
save the pattern, and
click
in the
toolbar to run the pattern.
You can also try to output the entire matched subgraphs.
Click in the toolbar
to enter output toggle mode, then click the person vertex pattern and
the work_in edge pattern:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvvuteg9eqbxemig3sx_-lvwe_5_izo_dqy6pq3s_toggle-output.png)
Click in the toolbar
again to exit output toggle mode, then
click
to run the
pattern:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvvuteg9eqbxemig3sx_-lvwf5sghnsn1ueleppj_pattern-result-1.png)
Example 2. Find all such people A, B, C: A and B are friends, A and C are friends, and B manages C.
Create a new visual pattern named FriendsManagerABC.
Click in
the console panel to switch to graph schema:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwfa_jg53mztz9qs87_-lvwkwq25sm1gxtjubld_schema-in-pattern.png)
Click in the toolbar,
then click the friend edge type in the graph schema:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwfa_jg53mztz9qs87_-lvwlwh76dzytgclrkor_pick-edge.png)
An edge pattern is added into the working panel:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwfa_jg53mztz9qs87_-lvwo0h98unajvnqwuia_friend-1.png)
Similarly, use to add
another friend edge pattern and a manage edge pattern into the working
panel:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwfa_jg53mztz9qs87_-lvwofvai82aycjxsbyj_edge-3.png)
Adjust the vertex patterns' positions:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwfa_jg53mztz9qs87_-lvwomds8bycwkyyqie8_move-position.png)
Hold Shift key and choose the two vertex patterns on the left, then
click in the toolbar
to merge them together:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwfa_jg53mztz9qs87_-lvwodylbzk0sgn7ttot_merge-1st.png)
Then, merge the top two vertex patterns:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwfa_jg53mztz9qs87_-lvwojoequux6ziyicjf_merge-2nd.png)
Then, merge the right two vertex patterns:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwfa_jg53mztz9qs87_-lvwooxl8ofw6hod2te2_merge-3rd.png)
Now you have a triangle visual pattern representing the three people relationship!
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwfa_jg53mztz9qs87_-lvwoyw8xb-i3gb6ri-b_after-merge.png)
Now, click in the
toolbar and put all the vertex patterns and edge patterns into result:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwfa_jg53mztz9qs87_-lvwp9hypyw9tbbpbkii_add-output.png)
Click again to exit
output toggle mode,
click
to save the
pattern, and
click
to run the
pattern:
![image](../_images/run_triangle.png)
Example 3. Find the top 2 cities where the most number of companies of an industry are located in.
Create a new visual pattern named IndustryCenterCity.
Click in
the console panel to switch to graph schema.
Use in the toolbar to
pick the company_locate_at edge type and belong_to edge type in graph
schema:
![image](../_images/pick-edges.png)
Use Shift key to select the two company vertex patterns, and
click to merge them
into one. Drag the vertex patterns to make their positions look good:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwpsgl7org8uej3dw2_-lvww7qmtmgs2f_oiha2_merge-and-reposition.png)
Click the industry vertex pattern, then
click in the toolbar (or
double click the industry vertex pattern), now you are in edit mode:
![image](../_images/vqb-example3-edit-industry_3.3.png)
Change the vertices to be from parameter, and give a parameter name ind. This annotates the industry as an input vertex set when running the pattern:
![image](../_images/change-industry.png)
Confirm the change, and notice there is an id condition on the industry vertex pattern:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwpsgl7org8uej3dw2_-lvwfkjmr-j8e5ccnisg_apply-change.png)
Click the company vertex pattern, then
click in the toolbar, and
change the Name to C:
![image](../_images/vqb-example3-edit-company_3.3.png)
Confirm the change, and the label of company vertex pattern becomes company as C:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwpsgl7org8uej3dw2_-lvwgylchchachlxgiiu_confirm-edit-company.png)
Click the city vertex pattern, then
click in the toolbar:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwpsgl7org8uej3dw2_-lvwmigwtcze0gpznc2s_1-edit-city.png)
Expand the Aggregation section in the config panel, and add an aggregation:
![image](../_images/vqb-example3-2-add-attachment_3.3.png)
Confirm the change:
![image](../_images/vqb-example3-3-confirm-attachment_3.3.png)
Expand the Order section in the config panel, and add a descending order of aggregation result countCompany:
![image](../_images/4-add-order.png)
Confirm the change:
![image](../_images/vqb-example3-5-confirm-order_3.3.png)
Expand the Limit section in the config panel, check the use limit checkbox, and change limit to 2:
![image](../_images/6-add-limit.png)
Confirm the change:
![image](../_images/vqb-example3-7-confirm-limit_3.3.png)
Click , then click
the city vertex pattern, then
click
again to exit
output toggle mode,
click
to save the
pattern:
Click . Because
the pattern has one input parameter ind, the Pattern parameters
section in the pattern list panel expands:
![image](../_images/9-run.png)
Click to add one
industry vertex, and input "big data" for vertex id, then click
:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwmzsftkfmajvmccm0_-lvwnopp6-_3mp6ndy4b_10-big-data.png)
Change the industry vertex id to be "internet", and run the pattern again:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwmzsftkfmajvmccm0_-lvwnrxlwx4u7ivox3y1_11-internet.png)
Again, you can choose to output everything in the matched subgraphs:
![image](../_images/vqb-example3-12-full_3.3.png)
Example 4. Find the people who either were born in Redwood City or attended Stanford university, but didn’t work for Hooli.
Expand Graph patterns section in the pattern list panel, then create a new visual pattern named SearchPeople. Create the following visual pattern following similar steps as above:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwnvp3dgnx-vok3v4n_-lvwq7ggctwogkilkkjj_widget-base%20(1).png)
Click in the toolbar,
and choose Union:
![image](../_images/1-union.png)
Click the left two person vertex patterns respectively to add the union widget:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwnvp3dgnx-vok3v4n_-lvwspew3aygvwqpnad8_2-union.png)
Click in
the toolbar, and choose Subtract:
![image](../_images/3-subtract.png)
Click the output person vertex pattern of the union widget, then click the right person vertex pattern, a subtract widget is added into the visual pattern:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwnvp3dgnx-vok3v4n_-lvwsveopdlwkrij6849_4-subtract.png)
Put the output person vertex pattern of the subtract widget into result:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwnvp3dgnx-vok3v4n_-lvwszgkk0ui6kghylhv_5-output.png)
Save and run the pattern:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwnvp3dgnx-vok3v4n_-lvwt1jugq5zvf-7iqdh_6-result.png)
Example 5. Find all the people that were born in a city with population no more than 100,000, worked for Graphlet, and have research skill.
A snowflake-like visual pattern is commonly used in this type of searching problems:
![image](../_images/assets_-lhvjxin4__6ba0t-qmu_-lvwvacebmsfya4_x1e0_-lvwv_2yllbcss4fur5e_people-search-2.png)
Example 6. Giving a person P, among all his direct friends and friends' friends who have programming skill, what are the top 5 other skills that most of these people have?
First, we get the friends and friends' friends of P. We use the programming skill to filter these friends, then we find the other skills that these people have. Then we count the number of people having these skills, and choose the top 5 skills as the result.
![image](../_images/vqb-example6-top-skills_3.3.png)