TigerGraph Web App Hack Winners
- Blog >
- TigerGraph Web App Hack Winners
Congratulations to the Winners of TigerGraph Web App Hack!
TigerGraph wants to thank and congratulate the participants and hackathon winners of TigerGraph’s Web App Hack! The almost 200 participants across 32 countries demonstrated TigerGraph Community’s imagination and clever solutions for practical problems by using TigerGraph’s Graph Database Solutions. Not only did they get to show off their skills, but the winners received $15,000 worth of prizes and an opportunity to speak at Graph + AI Summit (Register here).
As a company, we’re delighted to support developers and the TigerGraph community as they continue to impress us with their innovative solutions that help expand the broader community.
Some Background: The hackathon challenge was based on TigerGraph’s Cloud Starter Kits (25+ Options or the developers could create their own), that were built with sample graph data schema, dataset, and queries focused on a specific use case such as Fraud Detection, Recommendation Engine, Supply Chain Analysis, and/or a specific industry such as healthcare, pharmaceutical, or financial services. We challenged the developers to use one of the Starter Kits and build something that was creative and communicated a story of the data in the starter kit by using Streamlit as a Graphical User Interface alongside using visualization tools such as Graphistry and Plotyly.
We’re pleased to announce and celebrate the eight winners that won various categories by how they integrated TigerGraph’s Graph Solutions.
Thank you again to all the participants, partners, hosts, and judges who made the TigerGraph hackathon possible. Our creative TigerGraph Developer Community continues to dazzle us with their imagination and collaboration with TigerGraph’s Graph Solutions! We look forward to introducing and showcasing these inventive TigerGraph solutions from these fantastic developers that are listed below.
TigerGraph Web App Hack Winners:
- 1st Place: Graph Shortest Path and Centrality
- 2nd Place: TigerStream
- 3rd Place: TigerGraph Visual Query Tool
- Best Streamlit App: Covid 19 exploration
- Best Graphistry App: Linked Open Data halal visualization
- Most Popular: Temporal Analysis
- Best Designed: Easy Analysis
- Best Documented: Dataland
Created by: Frances Keung (jianglinx) | Qi Chen (chicoq1996)
Watch the video here.
Inspiration
This shortest-path application is a convenient visualization tool for backpackers or common travelers to search the airport information around the world. They can obtain airport details or compare the different paths between stops by visualization. These functions are simple but untapped. The project can be used in different B2C platforms to help users save time on buying tickets, especially in this pandemic period.
What it does
- Data Overview: users can explore all the data by Graphistry visualization.
- Centrality: users can obtain the centrality including Degree, Closeness, Betweenness, and PageRank based on country and city name. Users can also specify the max hops and check the nearby airport centrality by city name.
- Shortest Path: users can find the shortest path based on unweighted and weighted graph data. Users can click or input start position, terminal position and search max hops to see if there are shortest paths between the stops. Visualization and click events are supported.
How we built it
Database: TigerGraph Frameworks: Streamlit, React Data visualization: Graphistry, folium, pydeck, altair, google map api
Challenges we ran into
This is the first time for us to do the project with python. So it is really challenging at the beginning such as connecting between different servers. But fortunately, we overcame them. For the click event, we met the challenge that the data is too large to return from HTML to Streamlit.
Accomplishments that we’re proud of
Click event: we use React and HTML based on Streamlit to implement an interactive user interface. Users can select the start position and terminal position by clicking the points on the map rather than writing into the input boxes.
What we learned
- Interaction operation among TigerGraph, Streamlit, Visualizations, and so on.
- Get a better grasp of GSQL programming.
- Centrality Algorithms: Degree, Closeness, Harmonic, Betweenness, Eigenvector, PageRank, Percolation.
- Shortest path Algorithms: Dijkstra, Bi-Directional Shortest Path, Multiple Hop pattern Shortest Path…
What’s next for graph shortest path & centrality
- Speed up the project by optimizing shortest path algorithms and adding data cache.
- Optimize user interaction by changing React to Plotly-dash. In our project, two servers are supposed to be opened together due to React, while Plotly-dash only needs to open one server.
- Support more algorithm visualizations by implementing more centrality algorithms to the application visualization.
Built With
Try it out
Created by: Kaushal Chapaneri
Watch the video here.
Inspiration
Graph databases transform a complex web of dynamic data into meaningful relationships to help deliver real-time insight and action. This hackathon inspired me to explore TigerGraph and develop an interesting application using it. Streamlit is such a great tool that it gives confidence to non-front-end developers so that they can also build beautiful and interactive UI with few lines of code.
What it does
Movie Recommendation starter kit is used for this hackathon, in which various analytical aspects of the data are showcased with interactive UI using tools such as Graphistry, Plotly, pyviz etc.
- User Statistics: Shows the key information of a user.
- User Network: Who are the similar people of a user and how many similar movies they have.
- Recommendation: Recommended movies for a user
How we built it
- Backend : Installed GSQL queries in TigerGraph database
- Frontend : Streamlit and Visualizations tools such as Graphistry, Plotly, Pyviz, etc. Pandas for data transformation
Challenges we ran into:
Integration of TigerGraph and Graphistry with Streamlit was a little challenging and so was preparing various interpret-able plots.
Accomplishments that we’re proud of
Got to learn a lot about TigerGraph, Graphistry and Streamlit. Happy to submit a working application.
What’s next for TigerStream
More Exploration – More development
Built With
Try it out
Created By Jesse Lutan
Watch the video here.
Inspiration
My passion is in web development, so I was immediately drawn to using Streamlit because it was the first of its kind that I’ve ever used. I found it very easy to get started, and I was able to get started on my project immediately. I was also drawn to the concept of graph databases, which I had never heard of before.
What it does
My project connects to a TigerGraph database, allows the user to run an installed query or write a custom one, set arguments using interactive Streamlit widgets, and choose the format in which the data is displayed.
How I built it
Using Python and Python libraries including pyTigerGraphBeta, Streamlit, pandas, and flat table.
Challenges I ran into
- Formatting issues when trying to print query data as a chart.
- Using GSQL for the first time.
Accomplishments that I’m proud of
The application can successfully connect to a database, run queries with user-defined arguments, and display the data to the page as a JSON object or a table.
What I learned
- Lots of Streamlit and pyTigerGraph API.
- Benefits of graph databases over other types.
- New data analysis and visualization tools.
What’s next for TigerGraph Visual Query Tool
- More user control over how data is displayed
- More options to output data
Built With
Try it out
Best Streamlit App: Covid 19 exploration: The project aims to give insight on how was the per to per interaction between infected people.
Created by: José Manuel Nápoles Duarte
Watch the video here.
Introduction
I have been somewhat related to the Covid 19 fight in the city of Chihuahua in México as a volunteer for the Health Services Department of Chihuahua regarding the geospatial distribution of Covid-19. This has made me think about how it could be possible to gain insight of the spread of the virus, and I have been thinking about graphs to better understand this. When I saw the kind of problems in the hackathon, I immediately knew that the Covid 19 starter kit would be the one that will keep me stuck to this contest, although I know it could be one of the most recurrent problems as it is very actual. This is not a problem for me, because my real interest here is to learn and hopefully to bring this knowledge to my community. I think that doing this I have only good things to win and none to lose.
What it does
There are three main parts in the web-app. A Graphistry interface and two that depend on two new Streamlit components build specially for this web-app. In the first part, the whole graph can be seen. The data in that graph comes from the allConnections GSQL query. In that part, the user can choose a cluster of interest and take the ID of one of the patients. That ID can be given to a Patient ID box in the sidebar, which prepares the data for the next part. The second part displays a subgraph of the patient using the stvis component, a new component which allows to render an interactive graph on Streamlit using the pyvis library, and helps to understand that structure. The third part also depends on a new Streamlit component called pxmap which allows rendering a scatter mapbox with Plotly express. The idea is that by combining the graphs and the map, we can gain insight on how the contact was between the patients and where the place of contagion was.
How we built it
Integrating Graphistry and TigerGraph on Streamlit is somewhat direct using pyTigerGraphBeta and Graphistry libraries. In order to render the graph, we can use the iframe method of Streamlit components. For stvis and pxmap I used more or less the same approach but in this case worked the components as python packages in order that other users can install them. If you are interested, you can play with these components by doing:
pip install stvis
pip install pxmap
Challenges we ran into
For me, it was challenging to understand the GSQL queries. Writing one for doing what I wanted was hard, but finally, it worked. After that, it was also difficult to understand the structure of the data, as I had in mind from the beginning that I wanted to get the coordinates of the cluster around a given patient. Fortunately, everything worked more or less than I expected.
Accomplishments that we’re proud of
I have to say, I am proud of the whole task. At first, the challenge looked like a paramount job. However, I decided to progress making small steps. Making the two components was not in my original plan, but it was something that was rounding my mind and I finally decided to do it.
What we learned
- GSQL
- I didn’t know about TigerGraph and Graphistry before, so I had to learn from the very beginning.
- I had some experience with Streamlit components but with this I have realized a couple of things.
What’s next for Covid 19 exploration
There are lots of patients that for some reason don’t have coordinates. When the user selects one of these, the app sends an error message. The app needs to be improved in that part. Also, for now it is based on static components, and the next step would be to do bidirectional components, maybe for taking the information with a mouse click.
Built With
Try it out
Best Graphistry App: Linked Open Data halal visualization: Creating a visualization of halal products
Created By: Rarasmaya Indraswari | Nur Aini Rakhmawati | Girraz Karyo Utomo | Irfan Rifqi Susetyo
Watch the video here.
Inspiration
Indonesia is one of the countries with the largest Muslim Community. One legal provision in Islam is related to halal food, which does not contain ingredients made from pork, etc. Therefore, food circulating in the market must have a halal certificate. However, not all of the manufacturers comply with this policy. Therefore, it is necessary to map the halal certification food.
What it does
Linked Open Data system for halal products (LODHalal) proposed a halal food vocabulary that is enhanced from two food existing vocabularies. It provides a web application to search a food product and visualize data related to the halal product, such as the link of product and ingredients or manufacturers. For more information, please go to our website.
In this project, we exploit TigerGraph, machine learning, StreamLit, and Graphistry for LODhalal visualization.
How we built it
Our RDF Halal dataset is converted to CSV and stored at TigerGraph Cloud. We created a set of preinstalled queries at TGCloud. These queries are the features for our machine learning. In addition, we also generate graph-embedding using Node2vec. The source code of the application is written in Python language. Streamlit and Graphistry were used for data visualization. Our code can be accessed at GitHub.
Challenges we ran into
We are unfamiliar with Tigergraph,GSQL, StreamLit and Graphistry. We found out about this competition too late, and there are features of the application that we haven’t had the chance to implement.
Accomplishments that we’re proud of
Considering that we only had a very short time (2 weeks only!) to study the modules needed to develop the application and implement it, we are proud to have successfully completed our application and submitted it. Furthermore, we are quite happy to introduce our halal dataset. 🙂
What we learned
Actually, we are unfamiliar with TGCloud, Streamlit, and Graphistry. Therefore, we got a lot of new knowledge and experience from participating in this hackathon.
What’s next for Linked Open Data halal visualization
At the moment, we only use K-Means clustering. In the future, we will employ other machine learning and deep learning methods in our dataset. Moreover, graph embedding will be implemented as well. You could find our embedding dataset at our GitHub.
Built With
- Graphistry
- machine-learning
- python
- Streamlit
Try it out
Created by: Yusuf Canbaz
Watch the video here.
Inspiration
Time-based filtering is usually the de-facto standard way of dealing with large databases. The data simply piles up as time passes. Enterprises heavily rely on date/time-based filtering for focusing on a specific part of the data. Also, time-based statistics/metrics could be very useful to get some insights into the data.
What it does
It provides the ability to make time-based filtering. To make time-based filtering more advanced, the user can generate their own filtering conditions (metrics) with simple GSQL statements. You can set the starting date-time value and the number of data points. And then you can simply bring the related data as a graph.
You might want to make your custom metrics. For example, for each year you can see the count of “Customers” whose name starts with the letter ‘A’ and bought more than 1 “Product”. Here, instead of just counting the customers, you can also aggregate on some other attribute of “Customers”. For example, instead of counting, you can get the sum of the “age” attribute of “Customers”.
Let’s say you want to focus on a specific year. You can set the time unit to month and you can see the count of customers month by month. In a relational database system, a metric that gets the counts of “Customers” whose name starts with the letter ‘A’ is easy. But if “Customer” and “Product” are 2 different tables in the database, this might be time-consuming. You might need to join the tables and this might take a long time. In contrast, this can be a lot faster in a graph database. In GSQL, outdegree function is used here.
You can create multiple metrics and see them on a single graph. The app saves your metrics as a JSON file so that you can use them later.
Let’s say after playing with metrics, you see that there are 10 “Customers” in March 2017. These 10 “Customers” are the ones who satisfy the conditions that you created (e.g. name starts with the letter ‘A’ and bought more than 1 “Product”.) You might want to see them as a graph just like in the TigerGraph database. You can do that also. You can visualize these nodes and their neighbors as a graph.
How we built it
I mainly used Streamlit for running the application. I used Plotly for drawing charts. I made HTTP requests to TigerGraph Cloud instances for getting graph data and chart data.
Basically, I injected some user input into GSQL codes and then executed them for drawing charts.
Challenges we ran into
Streamlit is pretty new for me. It is good for building fast prototypes but I wanted to make a little more complex UX and UI functionality. It was challenging to build complex user experiences. Also, I don’t want the user to write GSQL. I wanted to build a complex UI component for generating GSQL code from purely user-interface components but I couldn’t do it.
Accomplishments that we’re proud of
- Without writing any code, the user can see the number of objects for each time unit.
- The user can select the time unit as year, month, day, hour, minute, or second.
- The user can select the number of points in the graph.
- The user can show the objects as a graph.
- The user can save their metrics as JSON.
- The user can view multiple metrics at the same time.
- By writing simple GSQL statements like x.price > 50, the user can make their own filtering rules (I call them “metric”).
What we learned
- I learned a lot more about GSQL. It looks powerful.
- I learned Streamlit and Graphistry a bit. ## What’s next for Temporal Analysis.
- Firstly, by building a Streamlit component, I want to remove writing GSQL. I would like the user to build very complex rules with simple buttons and input. In fact, I already did such a thing with angular before, like the image below.
- Actually, in a chart, any attribute which has a type as a number can be put to the horizontal axis. For example, if “id” is a number, we can also do id-based filtering, and basically, the horizontal axis in our charts can be “id”. So even if the dataset doesn’t contain any DateTime, you can just use numbers.
Built With
Try it out
Created by: Rishav Raj Jain | Abhay R Patel
Watch the video here.
Easy Analysis
https://easy-analysis.herokuapp.com/
A Streamlit app that uses TigerGraph Cloud, data, queries and other custom data to analyze COVID-19 data and gain insights from the data.
Inspiration
- Most people that need to derive insights and set guidelines for COVID-19 are doctors and medical experts. They can’t leverage the strength of Python, TigerGraph Cloud and other resources to make and derive graphs and insights. So our goal was to make a user-friendly app to help people derive and understand data for COVID-19.
How we built it
- We used Streamlit for the UI.
- We are using TigerGraph Cloud to get data.We are using their sample COVID-19 data.
- We are using two GSQL queries, pyTigerGraph library for connecting and getting the data.
- We have used a Query named “ageandgender” which gets covid-19 patient’s age and gender, and another query which was pre existing and was provided by TigerGraph called “infectionSubgraph; to plot and show how we can track infections and more.
- Along with this, we have a feature which helps people drag and drop a csv file and perform data analysis with just a few clicks and easy UI.
Accomplishments we are proud of
- How the final website came about.
- How this website has great possibilities to add value for doctors, experts, Govt officials and more, and this concept can be generalized to more fields other than COVID related analysis.
What’s next
- In the future, providing users the features to directly upload data to TGCloud and leveraging the power of TGCloud.
- Adding more immersive plots, graphs and insightful tools.
Built With
- Streamlit
- TigerGraph
Try it out
Created by: Landry Fotso
Watch the video here.
Inspiration
In fact, since the beginning of the Covid19 and before, the repartition of medical devices in the world is unequal. In this project, I analyzed the repartition of the equipment in all the counties to show those that are the most in need, which are the providers providing the most devices, so that it can help to propose new country tags that can be helped.
What it does
The project is analyzing the “International Medical Devices Database” I got from https://medicaldevices.icij.org. It analyzes the database and links the devices providers to devices, the devices to device categories and sources, and the devices to the countries where they are provided. This analysis shows in tables, then plotted in space using GRAPHISTRY and then gives the ability to show exactly the amount of devices provided by a particular provider; moreover, it shows the exact number of devices provided to countries through years, using histograms and data tables.
How we built it
–>First I created TigerGraph Cloud account and got familiar with the environment, and I followed some tutorials. –>I Downloaded the database from https://medicaldevices.icij.org –> I created the project in tgcloud.com, created design schemas, uploaded the database table and mapped them to the graph, I made tests and wrote the queries. –> I created an account on Graphistry.com, created my project and got my credentials –> Then, I created the Streamlit application in my computer using the python virtual machine –> I installed some libraries (“pyTigerGraphBeta”, “Graphistry”, …) –> I connected my application to the tgcloud project using the credentials, the graphname that I got from my tgcloud project and the token I generated. Same, I connected the application to my Graphistry project using the credentials. –> Then I wrote the code, connecting to tgcloud, querying data and using graphs and Graphistry to show the analysis –> While doing all this, I was testing continuously and reading documents (GSQL…).
Challenges we ran into
The main challenge that I faced was lack of knowledge. In fact, it was my first experience with almost all the technologies I used (GSQL, TigerGraph, Streamlit, Graphistry). The other challenge I faced was the difficulties while making the video. Because the application was taking too long to retrieve data, so knowing that the video should be only 3 minutes, it was kind of difficult to imagine that situation.
Accomplishments that we’re proud of
I’m proud of the accomplishments of: –> Creating a completed Streamlit application, –> Creating a completed TigerGraph project –> Making beautiful graphs and cleaning a huge amount of data –> Learning new technologies
What we learned
I learned a lot through the completion of this project: –> I learned a lot on TigerGraph (Creating Project, loading data, generating credential, accessing the project remotely), I learned to visualize the interaction between database entities directly in the tgCloud platform –> I learned a wonderful technology (GSQL), is a great query language that offers great possibility in queries. It’s the favorite thing I did. I fell in love with this language –> I learned Graphistry (It was also my first experience with it) –> I learned how to associate all those technologies in a single project.
What’s next for DATALAND
The next step is to add functionalities and make the project available to the public and organizations. I think it can help, because some countries are more in need but are not provided the equipment mostly in this pandemic period.
Built With
- css
- Graphistry
- gsql
- html
- https-protocol
- matplotlib
- pandas
- python
- python-virtual-machine
- seaborn
- Streamlit
- tgcloud
- tigergraph-database
