Changelog

Stay up to date with the latest updates and improvements.

Enhancement
Create Force Graph v1
Created first iteration of Force Graph Utility and data visualization

Force Graph Visualization Component

We're excited to introduce the first version of our Force Graph visualization tool. This powerful new feature allows for interactive network visualization with comprehensive customization options.

Features

  • Interactive Force-Directed Graph: Visualize network data using D3.js force simulation
  • Customizable Node Appearance: Color nodes based on metrics using various color scales
  • Flexible Sizing: Size nodes based on impact metrics with multiple scale types
  • Rich Controls: Comprehensive control panel for adjusting visual and physical parameters
  • Impact Metrics: Display impact values in node centers with two decimal precision
  • Smart Label Placement: Node labels remain outside circles to prevent overlap
  • Collision Detection: Labels included in force simulation to prevent overlap between nodes

Technical Implementation

  • Component Structure:

    • Separated visualization and controls for better maintainability
    • Created shared types for consistent data handling
    • Implemented TypeScript interfaces for D3.js integration

  • D3.js Integration:

    • Force simulation with typed nodes and links
    • Custom collision boundaries that include node labels
    • Drag-and-drop interaction for nodes
    • Zoom and pan functionality

  • Visual Enhancements:

    • Multiple color scale options (Sequential, Diverging, Quantize, Threshold, Ordinal)
    • Various size scale types (Linear, Log, Sqrt)
    • Impact metrics displayed inside nodes with 2 decimal precision
    • Node labels positioned outside of circles for better readability

Development Journey

The component was built in stages:

  1. Initial port from existing codebase with basic D3.js integration
  2. Addition of ShadCN UI components for a modern interface
  3. Refactoring to split visualization and control panel
  4. TypeScript improvements for type safety
  5. Integration with sample data for demonstration
  6. Separation of node labels from IDs to reduce visual clutter
  7. Enhanced force simulation to prevent overlap between nodes and labels
  8. Added impact values in node centers with properly formatted decimal precision

Next Steps

Future enhancements may include:

  • Filter functionality for large datasets
  • Additional visualization modes
  • Export options for generated visualizations
  • Performance optimizations for larger datasets