$ show spiermar/d3-flame-graph
d3-flame-graph is a D3.js library for creating interactive flame graphs from hierarchical data. It follows the D3 chart pattern with a closure-based factory function that returns a configurable chart function. The library processes JSON input data representing call stacks or hierarchies and renders them as SVG flame graphs with features like zoom, search, tooltips, and click/hover handlers. It includes specialized color mappers for different profiling contexts (allocation, off-CPU, Node.js, differential) and a smart tooltip component that handles boundary conditions. The architecture is modular with separate concerns for color mapping, tooltip handling, and core layout logic.
The LLM identified 3 files worth highlighting for reuse:
Contains four specialized color mapping functions: allocationColorMapper (maps self/total ratio to green tones), offCpuColorMapper (generates colors from name hashing), nodeJsColorMapper (for V8 profiling data with optimization-based coloring), and differentialColorMapper (shows performance deltas with orange/blue hues). Each function is self-contained, implements non-obvious algorithms (particularly the name hashing that favors early characters), and could be extracted for use in other visualization projects needing semantic color mapping.
Implements generateHash and generateColorVector functions that convert strings to numeric vectors (0.0-1.0) for color mapping. The algorithm is notable for favoring early characters in strings (so similar prefixes yield similar colors) and limiting consideration to first 6 characters. It also preprocesses strings by removing module names (after backticks) and function parameters (after parentheses). This self-contained utility has no internal dependencies and solves a common problem in data visualization: creating consistent, perceptually meaningful colors from string identifiers.
A smart tooltip implementation that handles boundary detection and automatic repositioning when tooltips would go off-screen. It supports both text and HTML content modes, properly manages pointer events, and uses smooth transitions for show/hide animations. The component is completely self-contained (only depends on external D3 selection/transition modules), follows defensive programming practices with explicit null checks, and could be dropped into any D3 visualization project needing tooltips with minimal adaptation.