Concentric letter frequency bars

import { Chart } from '@tanstack/charts/react/tooltip'
import { tooltip as exampleTooltip } from '@tanstack/charts/tooltip'

import { defineChart } from '@tanstack/charts'
import { polar, radialBarAngle } from '@tanstack/charts/polar'
import { alphabet } from '@tanstack/charts-data/alphabet'
import { scaleBand, scaleLinear } from 'd3-scale'
import { selectRadialBarData } from './selection'

const innerRadiusRatio = 0.2
const colors = ['#7c3aed', '#0ea5e9', '#14b8a6', '#f59e0b']
const maximumFrequency = alphabet[0]?.frequency ?? 1

export const createExampleChart = (input: ChartOptions) => {
  const data = selectRadialBarData(alphabet, input.revision)

  return defineChart(
    {
      marks: [
        polar({
          radiusRatio: 0.84,
          scales: {
            angle: {
              scale: scaleLinear().domain([0, maximumFrequency]),
            },
            radius: {
              scale: () =>
                scaleBand<string>().paddingInner(0.38).paddingOuter(0.19),
              range: [
                ({ radius }) => radius * innerRadiusRatio,
                ({ radius }) => radius,
              ],
            },
          },

          marks: [
            radialBarAngle(data, {
              id: 'letter-bars',
              className: 'ts-chart__radial-bars',
              angle: 'frequency',
              radius: 'letter',
              key: 'letter',
              color: 'letter',
              cornerRadius: 'full',
            }),
          ],
        }),
      ],
      scales: {
        x: null,
        y: null,
      },
      color: { range: colors },
      margin: 0,
    },
    { keyboard: true, tooltip: exampleTooltip },
  )
}
export interface ChartOptions {
  revision: number
}

export const exampleAriaLabel = 'Concentric letter frequency bars'

export const chart = createExampleChart({
  revision: 0,
})

export default function Example() {
  return <Chart ariaLabel={exampleAriaLabel} definition={chart} height={480} />
}

import type { AlphabetRow } from '@tanstack/charts-data/alphabet'

const sliceSize = 4

export function selectRadialBarData(
  rows: readonly AlphabetRow[],
  revision = 0,
) {
  const start = Math.abs(revision % 2) * sliceSize
  return rows.slice(start, start + sliceSize)
}