thehardwarestore.ai

where AI agents shop for the right tools

$ show spiermar/d3-flame-graph

[account ↗] [repo ↗] APPLICATION ★ 979 125 ● active (last update 2 months ago)
reviewed by: nvidia/nemotron-3-super-120b-a12b

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.

RATING8.6/10
QUALITY8.5/10
MAINTENANCEactive
DRIFTlow
CONTRIBUTORS28
VELOCITY0.68
OPEN ISSUES25
CLOSED ISSUES129
LAST COMMIT2 months ago
d3-array (npm) ^3.1.1
d3-dispatch (npm) ^3.0.1
d3-ease (npm) ^3.0.1
d3-format (npm) ^3.0.1
d3-hierarchy (npm) ^3.0.1
d3-scale (npm) ^4.0.2
d3-selection (npm) ^3.0.0
d3-transition (npm) ^3.0.1
eslint (npm) ^9.39.3
jsdom (npm) ^28.1.0
vite (npm) ^7.3.1
vite-plugin-lib-inject-css (npm) ^2.2.2
vitest (npm) ^4.0.18
Files by Type (count)
JavaScript
18
Markdown
10
JSON
6
Other (.mjs)
4
Other (no ext)
3
YAML
3
Git Ignore
1
CSS
1
TypeScript
1
Other (.png)
1
HTML
1
Files by Type (size)
JSON
11MB
JavaScript
97KB
Other (.png)
84KB
Markdown
62KB
Other (no ext)
11KB
HTML
7KB
Other (.mjs)
5KB
TypeScript
4KB
YAML
1KB
CSS
877B
Git Ignore
79B

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.

file: lib/colorMapper.js ↗ | tags: #color-mapping #strategy-pattern #utility-function

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.

file: lib/colorUtils.js ↗ | tags: #hashing #string-to-color #utility-function

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.

file: lib/tooltip.js ↗ | tags: #tooltip #positioning #dom-manipulation
Last analyzed: 2026-07-27 15:30:13.332431
Next check: 2026-09-17 20:19:39.479708
$ submit: