This project is a demo application for network visualizations using the GRANDstack (GraphQL, React, Apollo, Neo4j Database) application. The dataset consists of characters and their interactions from the first Harry Potter book. If you want to learn more about how the dataset was created check out my blog post.
The GraphQL endpoint is using the Neo4j Graphql library. For the network visualizations, VisJS is being used. I have also added click events to network visualization to make it an interactive explorer of your graph data. Hopefully, this project will help you get started with implementing your own network visualizations with the GRANDstack.
Start the project with:
docker-compose upPull arm neo4j image
docker pull neo4j/neo4j-arm64-experimental:4.2.11-arm6Replace in docker-compose.yml
neo4j:
image: neo4j/neo4j-arm64-experimental:4.2.11-arm64Run the following command
cat seed_data.cql | docker exec -i neo4j cypher-shell -u neo4j -p letmeinOr if you are on windows
Open Neo4j Browser at localhost:7474. Login using username "neo4j" and password "letmein".
Execute the queries stored in the seed_data.cql
Graph consists of characters from the first Harry Potter book, their interactions, to which house they belong, and to which group they are loyal.
Frontend consists of the following components:
This components features an autocomplete function using a Full-Text index. Once you select a character, a small character subgraph is visualized. If you click on any other characters a popup will show. The popup has an option to expand relationships for a selected characters, giving it a bit of an interactivity.
This component fetches all the interaction data from GraphQL. When you click on the start button, it then adds a new relationship every 200ms, giving it a dynamic network visualization. The relationships are ordered in the order they first appeared in the book, so in theory, you should see how relationships formed through time in the HP book.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent