Blockchain Data Visualization

JavaScript, anime.js, Node.js

In Progress

Polkadot is an innovative blockchain network that allows multiple distinct blockchains to interact with one another through the use of what is called a relay chain. The individual blockchains(called parachains), can send messages to the Polkadot network, which will pass messages along the relay chain to other parachains on the network.

As part of a group project, I have developed a webapp that helps users to visualize what is happening on the network in real-time. When different events occur on the network, such as messages passing from one parachain to another, an animation appears on the graphic of the network indicating that a message is being sent. This is accompanied by real-time text updates with more details about the events.

The Polkadot Network provides an API which allows us to get information about the network as it occurs. Our application connects to the Polkadot API and pulls relevant information to be displayed on our web page. The graphic of the network is created dynamically as an SVG, which means that if new parachains are added to the network, the graphic will update automatically without need for manual intervention. Animations are created using anime.js which is a lightweight animation framework for JavaScript.

Polkadot is an innovative blockchain network that allows multiple distinct blockchains to interact with one another through the use of what is called a relay chain. The individual blockchains(called parachains), can send messages to the Polkadot network, which will pass messages along the relay chain to other parachains on the network.

As part of a group project, I have developed a webapp that helps users to visualize what is happening on the network in real-time. When different events occur on the network, such as messages passing from one parachain to another, an animation appears on the graphic of the network indicating that a message is being sent. This is accompanied by real-time text updates with more details about the events.

The Polkadot Network provides an API which allows us to get information about the network as it occurs. Our application connects to the Polkadot API and pulls relevant information to be displayed on our web page. The graphic of the network is created dynamically as an SVG, which means that if new parachains are added to the network, the graphic will update automatically without need for manual intervention. Animations are created using anime.js which is a lightweight animation framework for JavaScript.

View project on GitHub