Horizontal ranking with long labels

bar

TanStack

TanStack source

36 chart lines · 1 file · 957 BBenchmark harness excluded · shared/mount.ts

U.S. metropolitan wage inequality195 records · CSV · 15.4 kB

@charts-poc/demo-data/citywages

Selection: Complete published snapshot

Metro: string
POP_1980: number
LPOP_1980: number
R90_10_1980: number
POP_2015: number
LPOP_2015: number
R90_10_2015: number
nyt_display: string
state_display: string | null
highlight: number | null

The New York Times@observablehq/sample-datasets@1.0.1 · revision 732c0148de74 · citywages.csv · ISC distribution; upstream source credited · SHA-256 9b50329064c1Pinned snapshot

cases/bar-horizontal-ranking/tanstack.ts36 lines · entry

cases/bar-horizontal-ranking/tanstack.ts

import { citywages } from '@charts-poc/demo-data/citywages'
import { barX, defineChart, ruleX } from '@tanstack/charts'
import { scaleBand, scaleLinear } from 'd3-scale'
import { tanstackMount } from '../../shared/mount'
import type { ConformanceInput } from '../../types'

const definition = (input: ConformanceInput) => {
  const rows = citywages
    .slice(input.revision * 4, input.revision * 4 + 8)
    .sort((left, right) => right.POP_2015 - left.POP_2015)

  return defineChart({
    marks: [
      barX(rows, {
        x: 'POP_2015',
        y: 'Metro',
        fill: '#7c3aed',
        inset: 1,
      }),
      ruleX([0]),
    ],
    x: {
      scale: scaleLinear,
      grid: true,
      axis: { ticks: { count: 5 }, label: '2015 population' },
    },
    y: {
      scale: () => scaleBand<string>().paddingInner(0.1).paddingOuter(0.05),
    },
  })
}

export const mount = tanstackMount(
  definition,
  'Horizontal ranking with long labels',
)