Scales
Comprehensive guide on scales in Cristalyse
Overview
Scales in Cristalyse transform data values to visual positions or dimensions on a chart. They handle both continuous and categorical data, ensuring intuitive and precise data representation.
Linear Scales
Linear scales map continuous data to a range, such as pixels:
Configuration
- Domain: Data range mapped to chart space.
- Range: Pixel space where the data is plotted.
- Invertible: Values can map back to the data space.
Ordinal Scales
Ordinal scales map categorical data to discrete locations:
Configuration
- Domain: List of categories.
- Range: Space for categories to be displayed.
- BandWidth: Space allocated to each category.
Color Scales
Color scales are used to encode data using color gradients:
Size Scales
Size scales map data values to sizes, useful for scatter plots:
Scale Customization
Customize scales to fit your data representation needs:
Best Practices
Scaling Data
- Choose linear scales for time-series and numerical data.
- Use ordinal scales for categorical data like labels or segments.
- Opt for consistent scale units across charts.
Performance
- Ensure domain and range values are correctly configured.
- Minimize dynamic scale recalculation for better performance.
- Use scale inversions in interactive applications for better feedback.
Advanced Usage
Dual Axis Charts
Implement dual axes for complex comparisons:
Conditional Scales
Dynamically adjust scales based on data:
Example Gallery
Time-Series Analysis
Vivid depiction of temporal trends and changes over time.
Categorical Comparison
Clear comparison of discrete categories using ordinal scaling.
Revenue vs. Conversion
Dual-axis chart illustrating financial performance metrics.
Dynamic Data Scaling
Interactive scales adapting to real-time data changes.
Next Steps
Data Mapping
Effective data field-to-visual property mapping techniques.
Custom Themes
Create custom themes to match brand identity.
Performance Scaling
Optimize visual performance with tailored scaling strategies.
Interactions
Engage users with interactive scaled charts.
Technical Details
Review the source code behind scale transformations and extend as needed within the scale.dart
file.