Visualizing cities with graphs: Apache AGE Viewer
Tags: postgres, apacheag, ageviewer, opencypher
Published: 2023-03-11 02:28:30

## INTRODUCTION
This blog post is intended to introduce user to the fundamental capabilities of graphs and their visualization using Apache AGE viewer. The reader is expected to have set up AGE viewer before proceeding.
Read about AGE-viewer here: https://age.apache.org/
GitHub here: https://github.com/apache/age-viewer/
All queries used in this blog can be found here: https://pastebin.com/Ggr6jj4j

## THE CONTEXT
The idea is to create vertices representing some cities and towns through AGE-viewer, establishing WAY_TO relationships in between them with property denoting the distance, and then analyzing it visually through some simple queries.
The graph can be expanded upon by including multiple edges denoting different routes of traveling, or also adding travel time as a property as desired by the reader. However, we only deal with it at a basic level here.

## GRAPH CREATION
To create city and town vertices, the following queries can be used.
We will denote the type of town/city through the vertex label. Name and the population of the town/city is stored as a vertex property.
```
--To create a city
CREATE (:CITY {name:"Delhi", population:43000000}) 
--To create a town
CREATE (:TOWN {name:"Rishikesh", population:140000})

```
Once, we are done creating our nodes. Running a query such as: 

```
MATCH (n) RETURN n
```
Should give us all our cities/towns.

![4 cities, 2 towns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nn89cgo3x3l7fscvz2x.png)

Next, we will be adding WAY_TO relation in between the cities.
We can use the following query to achieve the same.

```
MATCH (d:CITY {name:"Delhi"}), (m:CITY {name:"Mumbai})
CREATE (d)-[r:WAY_TO {distance:1400}]->(m)
```

## VISUALIZING
Running this query will output your all vertices along with all the edges in your graph

```
MATCH (n)
OPTIONAL MATCH (n)-[r]->(m)
RETURN n, r, m
```


![The graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6tg93atveqdb0t5lfcp.png)

This is also an example of a complete graph because every vertex has an edge with every other vertex of the graph.

Using AGE, you can change the way the vertices are displayed by clicking on the layout option and selecting your desired layout.

![Spread layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vp2io17vce5qjg1hcgu.png)

You can also view data in the form of a table by clicking on the table option.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s680aso6je6xc8c2feav.png)

You can also pick filters to display edge weights.

![Applied](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3t3mi26enmjhyiz0odl.png)

## SOME QUERIES
The following query will give you the path from Delhi to Mumbai.
`MATCH (d:CITY {name:"Delhi"})-[r:WAY_TO]-(m:CITY {name:"Mumbai"})
RETURN d, r, m`

![Mumbai to Delhi](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iavy29nltl73cda6j4l4.png)



To obtain the path from Delhi to Mumbai through intermediary city, the following query can be used.

`MATCH (d:CITY {name:"Delhi"})-[r1:WAY_TO]-(x)-[r2:WAY_TO]-(m:CITY {name:"Mumbai"})
RETURN d, r1, r2, x, m`

![Query executed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lsxqscx54ctizjt25zw.png)


Thank you for reading, we will build upon it in future posts :)