d3-flame-graph
A D3.js plugin for generating interactive flame graphs from hierarchical profiling data.
What is d3-flame-graph?
d3-flame-graph is a D3.js plugin that generates interactive flame graphs from hierarchical data, typically used for visualizing software profiling information. It helps developers analyze performance by displaying call stacks where the width of each frame represents the time or resources consumed by that function. The plugin provides a customizable and interactive way to explore profiling data directly in the browser.
Developers and performance engineers who need to visualize and analyze profiling data from tools like perf, DTrace, or custom instrumentation. It's particularly useful for those working with D3.js who want to integrate flame graphs into their web-based performance dashboards.
It offers a pure JavaScript, D3-integrated solution for flame graph generation with extensive customization options and interactivity, unlike static SVG generators. Developers choose it for its seamless integration with D3 workflows, rich API for interaction handling, and ability to create dynamic, web-embedded performance visualizations.
Overview
A D3.js plugin that produces flame graphs from hierarchical data.
Use Cases
Best For
- Visualizing CPU profiling data from tools like Linux perf or DTrace
- Building interactive performance dashboards for web applications
- Analyzing call stack hierarchies to identify performance bottlenecks
- Creating custom profiling visualizations integrated with D3.js projects
- Educational purposes to demonstrate flame graph concepts in web environments
- Embedding performance graphs in documentation or internal tools
Not Ideal For
- Projects needing static, non-interactive flame graph images without browser-based JavaScript
- Teams using React or Vue who prefer framework-specific charting libraries over D3.js integration
- Applications requiring server-side rendering of flame graphs for static reports or documentation
- Scenarios where profiling data is not easily convertible to hierarchical JSON format without additional tools
Pros & Cons
Pros
Enables click-to-zoom and hover tooltips for deep diving into call stacks, as shown in the onClick and onHover API methods for detailed frame inspection.
Offers APIs for colors, labels, and tooltips via methods like setColorMapper and setLabelHandler, allowing tailored visualizations to match specific profiling needs.
Works with hierarchical JSON input and is compatible with tools like the burn CLI for format conversion, making it adaptable to various profiling outputs from perf or DTrace.
Includes an inverted() method for icicle plot visualization, providing a top-down view of call hierarchies for alternative analysis perspectives.
Cons
Tightly coupled with D3.js, requiring prior D3 knowledge and setup, which limits usability for teams not already invested in the D3 ecosystem.
Input must be in a specific hierarchical JSON format; converting raw profiling data can be non-trivial and often relies on external tools like burn, adding setup overhead.
Cannot render server-side or in non-Javascript environments, making it unsuitable for static exports or applications requiring headless generation without browser workarounds.
Frequently Asked Questions
Related Projects
rechartsRedefined chart library built with React and D3
vx🐯 visx | visualization components
plotly.jsOpen-source JavaScript charting library behind Plotly and Dash
nivonivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.