FlameGraph Coloring Sample

A React component demonstrating interactive flame graph visualization with dynamic coloring capabilities. This component visualizes hierarchical data using flame graphs and provides various coloring schemes for data representation.

Demo

Features

• Dynamic Data Generation: Generate hierarchical data with configurable levels and divisions
• Multiple Coloring Schemes: Support for different coloring modes:
  • Native Colors
  • Color Temperature
  • Brewer Color Palettes (OrRd, YlGn, Blues)
• Interactive Controls: Adjust data configuration through sliders
• Customizable Visualization: Configure graph dimensions and tooltip behavior
• Responsive Design: Adapts to different screen sizes

Installation

npm install react-flame-graph chroma-js @emotion/css antd

Usage

Basic Implementation

import FlameGraphColoringSample from './FlameGraphColoringSample';

const FlameGraphDemo = () => {
  return (
    <FlameGraphColoringSample 
      path="/flame-graph"
      title="Flame Graph Coloring Demo"
    />
  );
};

Data Configuration

// Generate hierarchical data
const generatedData = generateHierarchicalData({
  maxDivideCount: 3,    // Number of divisions per level
  levelCount: 6,        // Number of levels in hierarchy
  value: 40000          // Root value
});

// Apply coloring based on selected mode
const traverseGeneratedData = (node, rootValue) => {
  switch (mode) {
    case 'color-brewer':
      // Apply Brewer color scales
      node.backgroundColor = colorsScales[index];
      node.color = '#ddd';
      break;
    case 'color-temperature':
      // Apply temperature-based colors
      node.backgroundColor = calcColorFromTemperature(node.value);
      node.color = '#fff';
      break;
    case 'native':
    default:
      // Use native colors
      return true;
  }
};

Props

FlameGraphViewer

Prop	Type	Description
data	Object	Hierarchical data to visualize
enableTooltips	Boolean	Enable/disable tooltips
width	Number	Width of the flame graph
height	Number	Height of the flame graph
tooltipHeight	Number	Height of tooltip container
onChange	Function	Callback for graph changes

FlameGraphColoringSample

Prop	Type	Description
path	String	Path for documentation
title	String	Title of the demo

Coloring Modes

1. Native Colors

   • Uses default color scheme
   • No additional configuration required

2. Color Temperature

   • Colors based on node values
   • Automatically scales with data values

3. Brewer Colors

   • Uses predefined color palettes:
     • OrRd (Orange-Red)
     • YlGn (Yellow-Green)
     • Blues
   • Color selection based on node value distribution

Interactive Controls

The component provides several interactive controls:

• Mode Selection: Switch between different coloring schemes
• Dividing Count: Adjust the number of divisions per level (2-5)
• Level Count: Configure the depth of the hierarchy (1-10)

Styling

Tooltip Customization

.Tooltip {
  position: absolute;
  z-index: 3;
  background-color: #000;
  color: #fff;
  padding: 0.5rem;

  .tt-name {
    background-color: red;
  }

  .tt-value {
    background-color: blue;
  }
}

Dependencies

• React: Component-based UI development
• react-flame-graph: Core flame graph visualization
• Ant Design: UI components including Slider and Typography
• Chroma.js: Color manipulation and scaling
• SCSS: Styling for tooltips and layout
• Emotion: CSS-in-JS styling