Anscombe quartet small multiples

small multiples

TanStack

TanStack source

43 chart lines · 1 file · 1.1 kBBenchmark harness excluded · shared/mount.ts

Anscombe's quartet44 records · CSV · 422 B

@charts-poc/demo-data/anscombe

Selection: Complete published snapshot

series: number
x: number
y: number

Anscombe's quartetobservablehq/plot@356f579b1d94 · revision 356f579b1d94 · test/data/anscombe.csv · Observable Plot repository MIT; upstream source credited · SHA-256 136943112c4dPinned snapshot

cases/facets-anscombe/tanstack.ts43 lines · entry

cases/facets-anscombe/tanstack.ts

import { anscombe } from '@charts-poc/demo-data/anscombe'
import { defineChart, dot, facet } from '@tanstack/charts'
import { scaleLinear } from 'd3-scale'
import { tanstackMount } from '../../shared/mount'
import type { ConformanceInput } from '../../types'

const definition = (_input: ConformanceInput) =>
  defineChart({
    marks: [
      facet(anscombe, {
        by: 'series',
        columns: 4,
        gap: 12,
        label: (series) => String(series),
        chart: (facetRows) => ({
          marks: [
            dot(facetRows, {
              x: 'x',
              y: 'y',
              r: 3.5,
              fill: '#2563eb',
            }),
          ],
          x: {
            scale: scaleLinear().domain([3, 20]),
            grid: true,
            axis: { ticks: { count: 5 } },
          },
          y: {
            scale: scaleLinear().domain([2, 14]),
            grid: true,
            axis: { ticks: { count: 4 } },
          },
        }),
      }),
    ],
    margin: 0,
  })

export const mount = tanstackMount(
  definition,
  "Anscombe's quartet small multiples",
)