Anscombe quartet small multiples

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

import { anscombe } from '@tanstack/charts-data/anscombe'
import { defineChart, dot, facet } from '@tanstack/charts'
import { scaleLinear } from 'd3-scale'

export const createExampleChart = (input: ChartOptions) =>
  defineChart(
    {
      marks: [
        facet(anscombe, {
          by: 'series',
          columns: 4,
          gap: input.preview === true ? 4 : 12,
          label: input.preview === true ? false : (series) => String(series),
          chart: (facetRows) => ({
            marks: [
              dot(facetRows, {
                x: 'x',
                y: 'y',
                r: 3.5,
                fill: '#2563eb',
              }),
            ],
            scales: {
              x: {
                scale: scaleLinear().domain([3, 20]),
                grid: input.preview !== true,
                axis: input.preview === true ? false : { ticks: { count: 5 } },
              },
              y: {
                scale: scaleLinear().domain([2, 14]),
                grid: input.preview !== true,
                axis: input.preview === true ? false : { ticks: { count: 4 } },
              },
            },
          }),
        }),
      ],
      scales: {
        x: null,
        y: null,
      },
      margin: 0,
    },
    { keyboard: true, tooltip: exampleTooltip },
  )
export interface ChartOptions {
  preview?: boolean
}

export const exampleAriaLabel = "Anscombe's quartet small multiples"

export const chart = createExampleChart({
  preview: false,
})

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

// Generated by scripts/sync-demo-data.mjs from anscombe.csv.
// Do not edit this file directly.
export const anscombe = [
  {series: 1, x: 10, y: 8.04},
  {series: 1, x: 8, y: 6.95},
  {series: 1, x: 13, y: 7.58},
  {series: 1, x: 9, y: 8.81},
  {series: 1, x: 11, y: 8.33},
  {series: 1, x: 14, y: 9.96},
  {series: 1, x: 6, y: 7.24},
  {series: 1, x: 4, y: 4.26},
  {series: 1, x: 12, y: 10.84},
  {series: 1, x: 7, y: 4.81},
  {series: 1, x: 5, y: 5.68},
  {series: 2, x: 10, y: 9.14},
  {series: 2, x: 8, y: 8.14},
  {series: 2, x: 13, y: 8.74},
  {series: 2, x: 9, y: 8.77},
  {series: 2, x: 11, y: 9.26},
  {series: 2, x: 14, y: 8.1},
  {series: 2, x: 6, y: 6.13},
  {series: 2, x: 4, y: 3.1},
  {series: 2, x: 12, y: 9.13},
  {series: 2, x: 7, y: 7.26},
  {series: 2, x: 5, y: 4.74},
  {series: 3, x: 10, y: 7.46},
  {series: 3, x: 8, y: 6.77},
  {series: 3, x: 13, y: 12.74},
  {series: 3, x: 9, y: 7.11},
  {series: 3, x: 11, y: 7.81},
  {series: 3, x: 14, y: 8.84},
  {series: 3, x: 6, y: 6.08},
  {series: 3, x: 4, y: 5.39},
  {series: 3, x: 12, y: 8.15},
  {series: 3, x: 7, y: 6.42},
  {series: 3, x: 5, y: 5.73},
  {series: 4, x: 8, y: 6.58},
  {series: 4, x: 8, y: 5.76},
  {series: 4, x: 8, y: 7.71},
  {series: 4, x: 8, y: 8.84},
  {series: 4, x: 8, y: 8.47},
  {series: 4, x: 8, y: 7.04},
  {series: 4, x: 8, y: 5.25},
  {series: 4, x: 19, y: 12.5},
  {series: 4, x: 8, y: 5.56},
  {series: 4, x: 8, y: 7.91},
  {series: 4, x: 8, y: 6.89},
]