Skip to content
🕹Interactive Network Visualizations for
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

🕹 Network Visualizations

This repository contains the network visualizatons which accompany the course. The visualizations will be integrated into the coding lessons on Chainshot (repo) and will include interactive visualizations of all of the protocols we build in the course, from a central payment operator up to a Proof of Stake blockchain.

This project is currently in its early development stages and requires major refactoring before building new visualizations. You can watch a demo of what our end vision is for the coding project and view in-depth details of our roadmap here.

Feel free to try out the first network visualization of Sections 2.1 - 2.2 <--sorry this link is broken will fix ASAP - watch a demo here.


Suggestions and contributions are extremely welcome. There is also room for contributors to optimize the code as well as create visualizations for protocols that we don't cover in the course. Check out the open issues and project board and help out! Have something you'd like to add or edit or just have a question? Open an issue! :)

How to run

Clone this repo with git clone. Run: npm install and then npm start.

Coding Project Outline

Chapter 1 - Central Payment Operator

  • Visually distinct "Paypal Node"
  • Hub and Spoke network
  • View Paypal's state
  • Allow Paypal node to Censor and Mint money

Chapter 2 - Networks and Synchrony Assumptions

Section 2.1 - Naive P2P Network

  • Network Visualization
  • message propagation

  • Latency controls
  • Speed Controls (Rewind, fast forward, etc.)

Section 2.2 - Double Spends

  • Visually distinct double spend message
  • Display rejected transactions (invalid nonce txs)
  • Add Gamification (e.g. "send an unsuccessful double spend")

Section 2.3 - 99% Fault Tolerant Consensus

  • Sidebar w/ a list of propagating messages + when transactions will timeout and whether they have been rejected or accepted by all nodes.
  • Hovering over messages will display how many signatures a given transaction has received and from which nodes

Section 2.4 - Proof of Authority

  • Controls to add and remove nodes from a state of “authority”
  • Option to toggle whether or not an authority node is malicious, and then be able to both censor transactions and attempt double spends
  • Controls to adjust the % of authority nodes that must sign off on every transaction
  • Hovering over a message will show which of the authority nodes signed off on it.

Chapter 3 - Proof of Work

  • Option to toggle nodes into miners and back again
  • Clearly display the longest chain and which nodes agree on this chain.
  • Easily expand a block and explore its contents in a separate view.
  • Visually see miners iterating through nonces and checking hashes
  • Controls to adjust amount of mining power each miner has
  • User can click a button to attempt a double spend attack
  • Users can also toggle a miner into a selfish miner.
  • Simulation of cost of mining to demonstrate when miners are profitable (and show that they lose money under the attack of selfish mining)

Chapter 4 - Proof of Stake (Casper FFG)

  • Visualize when finality is reached
  • Implement and attempt nothing at stake attacks (get slashed)
  • Users can alter the # of honest nodes
  • Implement and attempt long range revision attacks
  • Controls to adjust the stake of each node

Future Visualizations

  • Sharding
  • Plasma
  • Add visualizations of your personal favorite Blockchain protocols or Cryptoeconomic mechanisms!
You can’t perform that action at this time.