Scales

​

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()

​

Example Gallery

​

Next Steps

​

Technical Details

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