Chartsanimated

Correlation matrix

A correlation heatmap with diverging blue–red cells and inline coefficients.

1.0-0.40.5-0.20.30.81.00.5-0.10.7-0.40.51.00.30.8-0.60.5-0.11.0-0.40.5-0.20.30.81.0

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@Composable
fun CorrelationMatrix(
    grid: List<List<Float>> = remember { sampleCorr(5) },
    modifier: Modifier = Modifier,
) {
    val reveal by animateFloatAsState(1f, tween(900), label = "r")
    val pos = Color(0xFFEF4444)
    val neg = Color(0xFF3B82F6)
    Canvas(modifier.size(150.dp)) {
        val n = grid.size
        val gap = 3.dp.toPx()
        val cell = (size.width - gap * (n - 1)) / n
        grid.forEachIndexed { r, row ->
            row.forEachIndexed { c, v ->
                val color = if (v >= 0) pos else neg
                drawRoundRect(
                    color.copy(alpha = abs(v) * reveal),
                    Offset(c * (cell + gap), r * (cell + gap)),
                    Size(cell, cell), CornerRadius(3.dp.toPx()),
                )
            }
        }
    }
}