d3-flame-graph
Created an open-source D3.js plugin for flame graph visualization, now used by Apache Flink, Google pprof, and Oracle Java Flight Recorder
Overview
A D3.js plugin that produces flame graphs from hierarchical data, enabling engineers to visualize CPU profiling data in web applications
Problem
Performance engineers needed a way to visualize hierarchical profiling data as flame graphs in web-based tools, but existing solutions were either desktop-only or lacked customization options
Constraints
- Must work with any hierarchical data format
- Must be compatible with D3.js ecosystem
- Must support interactive features like zooming and search
Approach
Built a reusable D3.js plugin that accepts hierarchical data and renders interactive flame graphs with zoom, search, and tooltip support
Key Decisions
Use D3.js as the visualization framework
D3.js is the industry standard for data visualization, has excellent community support, and allows maximum customization
- Canvas-based rendering
- WebGL for performance
Accept hierarchical JSON data format
Hierarchical data is a natural fit for flame graphs and can be generated from any profiling format with a converter
Tech Stack
- JavaScript
- D3.js
- HTML
- CSS
Result & Impact
- 964 starsGitHub Stars
- Apache Flink, Google pprof, Oracle JFRIndustry Adoption
Became the de facto standard for flame graph visualization on the web, integrated into major profiling tools
Learnings
- Reusable plugins should accept flexible data formats
- Interactive features like search are essential for large flame graphs
- Good documentation drives adoption
Usage
The plugin accepts hierarchical data and renders interactive flame graphs with support for:
- Zooming and panning
- Search highlighting
- Customizable colors
- Tooltip customization