Chartsanimated

Hexbin

A hexbin density map whose honeycomb cells pop in by their bin counts.

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 Hexbin(
    bins: List<Triple<Int, Int, Float>> = remember { sampleHexbins() },
    accent: Color = Color(0xFF14B8A6),
    modifier: Modifier = Modifier,
) {
    val pop by animateFloatAsState(1f, spring(0.6f, 150f), label = "pop")
    Canvas(modifier.size(170.dp, 130.dp)) {
        val r = 14.dp.toPx()
        val w = r * 1.732f
        val h = r * 1.5f
        fun hex(cx: Float, cy: Float, rad: Float) = Path().apply {
            for (k in 0..5) {
                val a = PI.toFloat() / 180f * (60 * k - 30)
                val px = cx + rad * cos(a)
                val py = cy + rad * sin(a)
                if (k == 0) moveTo(px, py) else lineTo(px, py)
            }
            close()
        }
        bins.forEach { (col, row, v) ->
            val cx = col * w + (if (row % 2 == 1) w / 2 else 0f) + r
            val cy = row * h + r
            drawPath(hex(cx, cy, r * 0.92f * pop), accent.copy(alpha = 0.2f + 0.75f * v))
        }
    }
}