L4 Book Visualizer
bad-auth.github.io- Category
- Education
- Rank
- No. 2055Tools index
- Pricing
- Free
- Platform
- web
- Type
- APP
- Builder
- @bad-auth
- GitHub
- 14 stars
- Date
About
A visualization tool for books and literature that creates visual representations of literary content. Helps users explore and understand books through interactive visual elements and data visualization techniques.
What it does
Despite its name, this is a trading interface, not a literature tool. It consumes Hyperliquid level-four order book snapshots and updates, then displays individual orders as an age-colored heatmap alongside cumulative bid and ask depth. Users can inspect orders, adjust price grouping, navigate the view, pause updates, and track selected wallet positions.
Why it's ranked here
The tool has a focused purpose and a credible performance design. Streaming, parsing, aggregation, and typed-array construction run in a worker, while WebGL handles dense order rendering. Its usefulness is narrower than the name suggests, and it depends on specialized market data that Hyperliquid's public WebSocket does not supply.
What's good
The heatmap preserves individual order size, side, age, timestamp, and wallet address instead of reducing everything to price-level totals. Incremental updates use indexed order state and batched rebuilds. Adjustable refresh timing exposes the CPU-versus-latency tradeoff. Hover details, cumulative depth, wallet highlighting, reconnect behavior, and stream metrics make the display useful for active investigation.
Tradeoffs
You must supply a compatible level-four WebSocket through a self-hosted server or third-party provider. The public Hyperliquid feed is insufficient. WebGL2 is mandatory for the heatmap, and the project presents a browser UI rather than a reusable library or service API. Wallet tracking opens a separate WebSocket connection for every tracked address. No automated test command is defined.
How to use it well
Use it when analyzing live Hyperliquid or HIP-3 liquidity at individual-order resolution. Start with a trusted level-four feed, choose the market, tune price buckets and rebuild timing to the dataset, then pause or zoom for inspection. Wallet tracking helps connect visible liquidity with selected LP positions. It does not acquire level-four data, execute trades, or provide a general market-data API.
Technical notes+
package.json defines a private Svelte 5 and TypeScript application built by Vite. src/workers/bookWorker.ts owns the WebSocket, maintains orders in Map structures, applies incremental status updates, batches rebuilds, and transfers typed-array buffers to the main thread. src/lib/heatmapRenderer.ts uses WebGL2 instanced drawing with per-order price, offset, size, side, brightness, and highlight attributes. src/lib/overlayRenderer.ts adds Canvas-based axes, crosshairs, hit testing, and order tooltips. src/lib/regroupHeatmap.ts buckets bids downward and asks upward, preserving side separation. src/lib/positionTracker.ts creates one Hyperliquid clearinghouse-state subscription per tracked address. The supplied src/workers/bookWorker.ts text is truncated, so its file-parsing branch cannot be fully assessed.
Observed
- Primary language
- TypeScript, with Svelte components
- Packaging
- Private npm package built with Vite
- Install surface
- Dependencies install through npm; development and production build scripts are provided
- Interface
- Browser-based web UI with WebSocket input
- Rendering platform
- Requires browser Web Workers, Canvas, and WebGL2
- Market support
- Supports native Hyperliquid and HIP-3 DEX order books
- Test surface
- package.json defines no automated test script
Read from README.md, package.json, src/main.ts, src/vite-env.d.ts, src/lib/types.ts, src/lib/fileLoader.ts, src/lib/visibleStats.ts, src/lib/workerClient.ts, src/lib/hyperliquidApi.ts, src/lib/regroupHeatmap.ts, src/workers/bookWorker.ts, src/lib/heatmapRenderer.ts, src/lib/overlayRenderer.ts, src/lib/positionTracker.ts, src/lib/bookWorkerClient.ts.
What it can do
Generate visual representations of literary content
Book text or literary content → Interactive visual elements and charts
Create character relationship maps
Book content with character information → Visual network diagrams showing character connections
Visualize plot structure and story arcs
Book narrative content → Timeline visualizations and plot progression charts
Analyze and display word frequency patterns
Book text → Word clouds and frequency distribution charts
Map themes and topics throughout the book
Book content → Theme distribution visualizations and topic maps
Generate reading progress visualizations
User reading data and book structure → Progress charts and reading analytics dashboards
Tags
Tech Stack
Media
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.