Source

51 chart lines · 1 file · 1.3 kBBenchmark 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/32-change-arrows/tanstack.ts51 lines · entry
cases/32-change-arrows/tanstack.ts
import { arrow, defineChart } from '@tanstack/charts'
import { scaleLinear } from 'd3-scale'
import { citywages } from '@charts-poc/demo-data/citywages'
import { tanstackMount } from '../../shared/mount'

const metroChanges = citywages.filter(
  (row) =>
    row.highlight === 1 ||
    row.R90_10_2015 < row.R90_10_1980 ||
    row.nyt_display === 'Los Angeles',
)

const definition = () => {
  const increases = metroChanges.filter(
    (row) => row.R90_10_2015 >= row.R90_10_1980,
  )
  const decreases = metroChanges.filter(
    (row) => row.R90_10_2015 < row.R90_10_1980,
  )
  return defineChart({
    marks: [
      arrow(increases, {
        x1: 'LPOP_1980',
        y1: 'R90_10_1980',
        x2: 'LPOP_2015',
        y2: 'R90_10_2015',
        stroke: '#ef4444',
        headLength: 8,
      }),
      arrow(decreases, {
        x1: 'LPOP_1980',
        y1: 'R90_10_1980',
        x2: 'LPOP_2015',
        y2: 'R90_10_2015',
        stroke: '#10b981',
        headLength: 8,
      }),
    ],
    x: { scale: scaleLinear, grid: true, axis: { label: 'Log₁₀ population' } },
    y: {
      scale: scaleLinear,
      grid: true,
      axis: { label: '90th-to-10th-percentile wage ratio' },
    },
  })
}

export const mount = tanstackMount(
  definition,
  'Metro population and wage inequality, 1980–2015',
)