d3-heatmap2
Created a D3.js plugin for heatmap visualization, complementing the flame graph plugin for performance analysis
Overview
A D3.js plugin that produces heatmaps from matrix data, useful for visualizing time-series performance data and correlation matrices
Problem
Performance analysis often requires visualizing data across two dimensions (e.g., time vs. metric), which flame graphs cannot represent
Constraints
- Must integrate with D3.js ecosystem
- Must support large datasets
- Must allow customization of axes and colors
Approach
Built a reusable D3.js plugin with optimized rendering for large matrices and customizable color scales
Key Decisions
Use canvas rendering for large datasets
Reasoning:
Canvas performs better than SVG for thousands of cells, avoiding DOM overhead
Tech Stack
- JavaScript
- D3.js
- HTML Canvas
Result & Impact
- 73 starsGitHub Stars
Enables visualization of time-series performance data and correlation analysis in web tools
Learnings
- Canvas is essential for large matrix visualization
- Color scales should be perceptually uniform
Features
- Canvas rendering for performance
- Customizable color scales
- Interactive zoom and pan
- Tooltip support