A configurable ring visualization that can display segmented data in a circular layout.
- Feature 7: Responsive Layout (requires container dimensions)
- Ring renderer creates a circular segment with configurable inner and outer radius
- Segment renderer sizes each segment proportionally to its data value
- Segment renderer supports configurable color schemes for segments
- Text renderer calculates font size to fit within segment arc length and ring height
- Text renderer enforces minimum font size of 6px
- Text renderer enforces maximum font size of 14px
- Text renderer uses Arial font family
- Text renderer aligns text along the middle radius of each ring segment
- Text renderer centers text within its segment arc
- Text renderer flips text 180° in lower half of ring for readability
A visualization that arranges data in three concentric rings to show hierarchical relationships.
- Feature 1: Ring Visualization (used for each level)
- Feature 7: Responsive Layout (requires container dimensions)
- Ring layout positions outer ring (level 1) at 0.72-0.8 of total radius
- Ring layout positions middle ring (level 2) at 0.65-0.72 of total radius
- Ring layout positions inner ring (level 3) at 0.59-0.65 of total radius
- Segment layout aligns child segments within parent segment's angular span
- Size calculator sets level 1 and 2 segment sizes proportional to their level 3 element count
- Data validator ensures all child segments have corresponding parent segments
- Color system assigns level 1 segments HSL colors with hue=(index/total_segments * 360), saturation=0.5, lightness=0.75
- Color system uses neutral colors for inner rings to maintain focus on level 1 categories
A data import system that processes CSV files into structured data.
Example CSV structure:
level 1,level 2,level 3,metric,value
domain1,category1,item1,metric1,8
domain1,category1,item2,metric1,6
domain1,category2,item3,metric2,9
domain2,category3,item4,metric1,7- Feature 10: Server-Side Data Management (handles data processing)
- CSV importer accepts files with specific column structure (level 1, level 2, level 3, metric, value)
- CSV importer validates CSV format and data integrity
- CSV importer displays error messages for invalid data
- CSV importer updates visualization immediately after successful import
A circular chart that displays value distributions across multiple axes.
- None (base feature)
- Radar chart renderer divides chart into segments by radial axis lines
- Radar chart renderer aligns axis lines with configurable segment boundaries
- Radar chart renderer plots values between axis lines
- Radar chart renderer shows concentric circles for value scales from 0 (center) to 10 (outer edge)
- Data point renderer plots points within their corresponding segment
- Data point renderer positions points randomly within segment to avoid overlapping
- Data point renderer represents points as individual dots without connecting lines
A system to export visualizations in various file formats.
- Feature 7: Responsive Layout (requires container dimensions)
- Exporter supports SVG export with preserved vector quality
- Exporter supports PNG export with customizable resolution
- Exporter maintains all visual elements in exports
- Exporter provides immediate download of exported files
Allows users to reset the visualization to default data
- Feature 10: Server-Side Data Management (handles default data loading)
- Reset button is visible in the UI
- Reset button loads default data from server
- Reset button clears currently loaded custom data
- Reset button updates visualization immediately after reset
A layout system that adapts to different screen sizes and orientations.
- None (base feature)
- Layout centers visualization in viewport
- Layout maintains aspect ratio of the chart
- Layout provides clear button layout for controls
- Layout supports standard screen sizes without distortion
Processes raw CSV data into hierarchical structure with value aggregation
- Feature 10: Server-Side Data Management (integrated into server processing)
- Data processor correctly counts occurrences at each level
- Data processor maintains proper parent-child relationships in data structure
- Data processor aggregates value distributions for radar chart
- Data processor handles missing or incomplete data gracefully
Automatically scales text labels based on available space
- Feature 1: Ring Visualization (requires ring dimensions and segment sizes)
- Text scaler calculates optimal font size for each ring segment
- Text scaler enforces minimum font size of 6px
- Text scaler handles long labels appropriately
- Text scaler maintains consistent text orientation for readability
- Text scaler ensures uniform text size within containers
Manages data state and processing on the server
- None (base feature)
- Data manager maintains current data state
- Data manager provides API endpoints for data operations
- Data manager handles concurrent requests appropriately
- Data manager returns appropriate error responses for invalid requests
A visualization system for showing data point ranges through background shading.
- None (base feature)
- Background renderer creates semi-transparent background for each segment
- Background renderer sets configurable background color with 50% opacity
- Background renderer bounds background by adjacent axis lines radially
- Background renderer bounds background by minimum value radius where data points exist
- Background renderer bounds background by maximum value radius where data points exist
Displays median values with special indicators and connections
- Feature 4: Radar Chart Display (requires radar chart scales and structure)
- Feature 8: Data Processing and Aggregation (requires processed value data)
- Median calculator calculates median values accurately
- Median renderer shows color-coded indicators for min/max medians
- Median renderer connects median points with gradient lines
- Median renderer updates median display when data changes