Chartsanimated

Network

A node-link graph whose edges draw on and nodes pop into a force layout.

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 NetworkGraph(
    nodes: List<Offset> = listOf(
        Offset(0.5f, 0.2f), Offset(0.22f, 0.5f), Offset(0.78f, 0.45f),
        Offset(0.38f, 0.82f), Offset(0.68f, 0.8f),
    ),
    edges: List<Pair<Int, Int>> = listOf(0 to 1, 0 to 2, 1 to 3, 2 to 4, 3 to 4, 1 to 2),
    accent: Color = Color(0xFF6366F1),
    modifier: Modifier = Modifier,
) {
    val draw = remember { Animatable(0f) }
    val pop by animateFloatAsState(if (draw.value > 0.6f) 1f else 0f, spring(0.5f, 200f), label = "pop")
    LaunchedEffect(Unit) { draw.animateTo(1f, tween(900, easing = EaseOutCubic)) }
    val edgeColor = MaterialTheme.colorScheme.outlineVariant
    Canvas(modifier.size(160.dp, 130.dp)) {
        fun pos(i: Int) = Offset(nodes[i].first * size.width, nodes[i].second * size.height)
        edges.forEach { (a, b) ->
            val pa = pos(a)
            val pb = pos(a) + (pos(b) - pos(a)) * draw.value
            drawLine(edgeColor, pa, pb, 1.5.dp.toPx())
        }
        nodes.indices.forEach { i ->
            drawCircle(accent, 7.dp.toPx() * pop, pos(i))
        }
    }
}