A little while back I built an experiment using Vue.js to show how cryptocurrency mining works in the browser.
You can try it @ https://bradoyler.github.io/xmr-miner/

Screen capture

Read the source code @ https://github.com/bradoyler/xmr-miner

So...based on your CPU, you will have a number of threads and you can adjust your "power" by moving the slider left and right.
This will allow you to see how many hashes per second your CPU can handle without bogging down the visualization below.

I also included a reward estimation to show how long it would take to earn 1 Monero (XMR). This is all possible through a WebAssembly/asm.js implementation of the CryptoNight algorithm

I used the Coinhive backend for this experiment just to get something working/mining while using a free web hosting service (Github pages). But I'd like to enhance XMR-Miner so anyone could just input their wallet address + mining pool and start mining any Cryptonight based coins. In order to do this I'd need to setup some infrastructure, like a Stratum/Proxy.

As for the "Visual", I used D3 to create a force direct network graph that animates every time a "share is accepted". Which basically just means that your work is contributing to the next block being found.

This project was intended to be purely education and get people interested in learning about blockchain/crypto technology.

I shared this project on Hacker News and received ~60 comments and about 300 Github stars in 1 day. There were also enough people on the Miner that it held about 600 to 700 h/s for a couple hours. It was still a minuscule amount of coin, but it was pretty cool to see that much power going into my account.

Hoping to launch more experiments soon.

Cheers!