Realtime Orderbook

100%

Realtime Orderbook

✓ Published0🌍 Public

Last edited Jun 16, 2022

Created on Jan 27, 2021

This example visualizes a real-time order book for cryptocurrency pairs, displaying bid and ask depth as an interactive SVG chart. It uses D3.js (v5) to render cumulative price levels, with green and red areas representing bids and asks. Data streams from Binance via Socket.IO, while a REST API fetches the initial snapshot, and the chart updates dynamically with each incoming trade. Users can switch between BTCUSDT, ETHUSDT, and BNBUSDT symbols using a dropdown menu.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

title

This visualization, built with D3.js and rendered as an SVG, shows a time-series area chart of bid data across multiple financial exchanges. The chart displays overlapping filled regions, with the x-axis representing time and the y-axis representing price or value, while a light gray rect at the top-right suggests a hover or selection area. The data, sourced from a gist by FergusDevelopmentLLC, is drawn using smooth path curves for each exchange, creating a dense, layered comparison of exchange activity over time.

WWill Carter

68% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes Bitcoin trading activity using a line chart that plots both trading volume and opening price over time. The visualization is built with the Vega-Lite API, which constructs a specification rendered through Vega and Vega-Lite libraries, with the final output displayed as an SVG. Data is loaded asynchronously from a CSV file using d3.csv, and the chart dynamically sizes to fit the browser window. Custom axis styling and tooltips, powered by vega-tooltip, enhance readability of the time-series data.

SSven

66% match

Loading thumbnail…

Cryptocurrency average order price versus size

This animated scatter plot shows average order price versus order size for live cryptocurrency trades, with bubble size reflecting total order count. It streams data from Coinbase’s WebSocket API, buffering messages and updating a Perspective table every 50 milliseconds. D3fc’s seriesSvgPoint renders the bubbles, while layoutLabel with layoutGreedy places instrument labels. Logarithmic scales for both axes handle the wide value ranges, and the chart transitions smoothly using d3’s transition method.

CColinEberhardt

66% match

Loading thumbnail…

Line Graph Trial

This interactive line graph visualizes cryptocurrency price and market capitalization trends over time, with dropdown menus to select the metric (price_usd or market_cap) and coin type (bitcoin, ethereum, litecoin, ripple, or bitcoin_cash). The SVG chart animates transitions between datasets using `d3.transition()`, updating the line path, x-axis (time), and y-axis (linear scale) with a duration of 700ms. Data is loaded from `buildings.json` via `d3.json()`, with dates parsed using `d3.timeParse()`, and the y-axis labels are conditionally formatted (e.g., market cap shown in thousands with “k”).

DdeafMother

65% match

Loading thumbnail…

Line Graph Trial

This interactive line graph visualizes cryptocurrency price and market capitalization over time, with dropdown menus allowing users to switch between metrics and coin types. The code uses D3 v5’s `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to render the SVG path, with smooth transitions via `d3.transition`. Data is loaded from a local `buildings.json` file and parsed using `d3.timeParse`. A React framework is present, though the rendering and animation are handled directly through D3’s SVG and transition APIs.

Hhafsa2020

65% match

Loading thumbnail…

Untitled

This example presents an interactive stock chart with candlestick and line plots, accompanied by technical indicators such as moving averages, MACD, RSI, and volume. The chart also supports zooming, panning, and draggable annotations for trendlines and support/resistance levels. It uses the D3 v4 library with techan.js for financial charting, rendering to SVG within a React framework. Data is loaded from a TSV file containing historical stock prices and parsed using `d3.timeParse`.

SSheela2930

64% match

Loading thumbnail…

dataset

This visualization displays the top 20 trading volumes on the B3 stock exchange as a horizontal bar chart, using an SVG canvas. It loads data from a CSV file, scales the quantity values by 1,000, and renders bars with D3's `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The chart includes labeled axes with custom tick formatting via `axisBottom` and `axisLeft`, and removes default axis lines for a cleaner look.

RRahulSai05

64% match

Loading thumbnail…

Untitled

This visualization displays the closing prices and trading volumes of ten stocks over time, using a logarithmic scale to compare relative changes across different price and volume ranges. Each stock is drawn as a colored line, with a dropdown or toggle option to switch between close price and volume metrics. The chart uses D3 v6 with SVG rendering and includes gridlines, axis ticks, and a time-based x-axis. Data is loaded from a CSV file hosted on GitHub, and the color palette assigns a distinct hue to each stock symbol.

Lluxingyu

64% match