Source

39 chart lines · 1 file · 979 BBenchmark harness excluded · shared/mount.ts

1983 ASA automobile data406 records · CSV · 17.4 kB
@charts-poc/demo-data/cars

Selection: Complete published snapshot

name
string
economy (mpg)
number | null
cylinders
number
displacement (cc)
number
power (hp)
number | null
weight (lb)
number
0-60 mph (s)
number
year
number

1983 ASA Data Exposition@observablehq/sample-datasets@1.0.1 · revision 732c0148de74 · cars.csv · ISC distribution; upstream source credited · SHA-256 eaad8395d37ePinned snapshot

cases/44-framed-scatter/tanstack.ts39 lines · entry
cases/44-framed-scatter/tanstack.ts
import { cars } from '@charts-poc/demo-data/cars'
import { defineChart, dot, frame } from '@tanstack/charts'
import { scaleLinear } from 'd3-scale'
import { tanstackMount } from '../../shared/mount'
import type { ConformanceInput } from '../../types'

const definition = (input: ConformanceInput) => {
  const rows = cars
    .filter((row) => row['economy (mpg)'] !== null)
    .slice(input.revision * 8, input.revision * 8 + 320)

  return defineChart({
    marks: [
      frame({
        inset: 4,
        radius: 6,
        fill: '#eff6ff',
        stroke: '#2563eb',
        strokeOpacity: 0.7,
      }),
      dot(rows, {
        x: 'weight (lb)',
        y: 'economy (mpg)',
        fill: '#2563eb',
        fillOpacity: 0.65,
        r: 3,
      }),
    ],
    x: { scale: scaleLinear },
    y: { scale: scaleLinear },
    guides: false,
    margin: 20,
  })
}

export const mount = tanstackMount(
  definition,
  'Guide-free scatterplot with a framed plotting region',
)