Automobile specifications scatter

Source

46 chart lines · 2 files · 1.4 kBBenchmark 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/73-many-point-scatter/tanstack.ts38 lines · entry

cases/73-many-point-scatter/tanstack.ts

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

const colors = ['#2563eb', '#7c3aed', '#db2777', '#f97316', '#0f766e']

const definition = (input: ConformanceInput) => {
  const points = selectManyPointData(cars, input.revision)

  return defineChart({
    marks: [
      dot(points, {
        x: 'weight (lb)',
        y: '0-60 mph (s)',
        color: 'cylinders',
        r: 'displacement (cc)',
        rScale: {
          scale: () => scaleSqrt().range([2.25, 4.5]),
        },
        fillOpacity: 0.72,
      }),
    ],
    x: { scale: scaleLinear, grid: true, axis: { ticks: { count: 6 } } },
    y: { scale: scaleLinear, grid: true, axis: { ticks: { count: 6 } } },
    color: {
      range: colors,
    },
    margin: { top: 20, right: 20, bottom: 50, left: 80 },
  })
}

export const mount = tanstackMount(
  definition,
  'Automobile specifications scatter',
)

cases/73-many-point-scatter/selection.ts8 lines · support

cases/73-many-point-scatter/selection.ts

import type { CarsRow } from '@charts-poc/demo-data/cars'

const pointsPerView = 300

export function selectManyPointData(rows: readonly CarsRow[], revision = 0) {
  const start = Math.abs(revision % 2) * (rows.length - pointsPerView)
  return rows.slice(start, start + pointsPerView)
}