A web-based Depth-Of-Market visualization for data of the Poloniex cryptocurrency exchange.
Clone or download
Ameobea Bump lodash version
 * Apparently some kind of security vulnerability or whatever
Latest commit 297a9ea Aug 18, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Code formatting, modernization, + bugfix Aug 17, 2018
public Fix a few typos. Dec 29, 2017
src Code formatting, modernization, + bugfix Aug 17, 2018
.eslintrc Code formatting, modernization, + bugfix Aug 17, 2018
.gitignore Start of integration with the React components Mar 21, 2017
.roadhogrc Initial Commit Mar 20, 2017
LICENSE Create LICENSE Jul 1, 2017
README.md Re-added README.md Jun 30, 2017



Cryptoviz is an orderbook visualization tool for the Poloniex exchange. It provides a dynamic Depth-Of-Market (DOM) view that provides a much higher level of detail than traditionally used visualizations such as candlestick charts. You can use this tool yourself on Cryptoviz.

Example of CryptoViz Interface:


CryptoViz uses the Poloniex WebSocket API to receive live order data directly from the exchange. Internally, it maintains a copy of the full orderbook including the levels where volume lies and the amount of volume at those levels. These volume levels are then grouped together into bands and displayed on a canvas.

In addition to showing volume levels, the tool also draws trades and renders indicators varying in size according to how large the trade was.

Cool Technical Details

Cryptoviz makes use of the PaperJS library to render the visualization UI and the trade lines/indicators. The trade lines are rendered on a separate canvas that is displayed beneath the trade lines canvas for performance reasons.

We avoid re-rendering the entire canvas every update by making use of the fact that the left-side of the chart stays constant with new volume bands only ever being added to the right side. In cases where we overrun the canvas, zoom, or change currencies, all received events are re-played in sequence to rebuild the visualization from scratch.

The site itself makes light use of React and the DvaJS framework as well as Material Design for the interface at the bottom.


Setting up the dev environmnent for this project is easy! All you really have to do is clone the repository, install dependencies with npm install or yarn, and run npm start to launch the local development server. There is no configuration options that need to be set or data sources to configure; the tool pulls its data directly from the public Poloniex API.


I'd love to work with you to add a feature, fix a bug, or implement Cryptoviz in your own project! If you'd like to make a change or find an issue that needs fixing, please open an issue.