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:

CristalyseChart()
  .data(data)
  .mapping(x: 'time', y: 'value')
  .scaleXContinuous(min: 0, max: 100) // X-axis
  .scaleYContinuous(min: 0, max: 200) // Y-axis
  .geomLine()
  .build()

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:

CristalyseChart()
  .data(data)
  .mapping(x: 'category', y: 'value')
  .scaleXOrdinal() // X-axis for categories
  .geomBar()
  .build()

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:

CristalyseChart()
  .data(data)
  .mapping(x: 'x', y: 'y', color: 'intensity')
  .geomPoint()
  .theme(
    ChartTheme.defaultTheme().copyWith(
      colorPalette: [Colors.blue, Colors.red], // Gradient
    ),
  )
  .build()

Size Scales

Size scales map data values to sizes, useful for scatter plots:

CristalyseChart()
  .data(data)
  .mapping(x: 'x', y: 'y', size: 'value')
  .geomPoint()
  .build()

Scale Customization

Customize scales to fit your data representation needs:

CristalyseChart()
  .data(data)
  .mapping(x: 'day', y: 'hours')
  .scaleXOrdinal()
  .scaleYContinuous(min: 0, max: 24) // Range of working hours per day
  .build()

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:

CristalyseChart()
  .data(dualAxisData)
  .mapping(x: 'month', y: 'revenue')
  .mappingY2('conversion_rate')
  .scaleYContinuous(min: 0, max: 100)
  .scaleY2Continuous(min: 0, max: 1)
  .geomBar(yAxis: YAxis.primary)
  .geomLine(yAxis: YAxis.secondary)
  .build()

Conditional Scales

Dynamically adjust scales based on data:

CristalyseChart()
  .data(dynamicData)
  .mapping(x: 'date', y: 'value')
  .scaleXContinuous(min: startDate, max: endDate)
  .scaleYContinuous(min: minValue, max: maxValue)
  .geomArea()
  .build()

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

Technical Details

Review the source code behind scale transformations and extend as needed within the scale.dart file.