Industry share of unemployment

Source

49 chart lines · 1 file · 1.2 kBBenchmark harness excluded · shared/mount.ts

U.S. industry unemployment1,708 records · CSV · 53.9 kB

@charts-poc/demo-data/industries

Selection: Complete published snapshot

date: Date
industry: string
unemployed: number

U.S. Bureau of Labor Statistics@observablehq/sample-datasets@1.0.1 · revision 732c0148de74 · industries.csv · ISC distribution; upstream source credited · SHA-256 4cfc13b6ebe0Pinned snapshot

cases/20-normalized-stacked-area/tanstack.ts49 lines · entry

cases/20-normalized-stacked-area/tanstack.ts

import { areaY, colorLegend, defineChart, ruleY, stack } from '@tanstack/charts'
import { format } from 'd3-format'
import { scaleLinear, scaleUtc } from 'd3-scale'
import { industries } from '@charts-poc/demo-data/industries'
import { tanstackMount } from '../../shared/mount'
import type { ConformanceInput, ConformanceMount } from '../../types'

const percent = format('.0%')
const colors = [
  '#4e79a7',
  '#f28e2c',
  '#e15759',
  '#76b7b2',
  '#59a14f',
  '#edc949',
  '#af7aa1',
  '#ff9da7',
  '#9c755f',
  '#bab0ab',
]

const definition = (_input: ConformanceInput) =>
  defineChart({
    marks: [
      areaY(industries, {
        x: 'date',
        y: 'unemployed',
        color: 'industry',
        fillOpacity: 0.82,
        layout: stack({ offset: 'normalize' }),
      }),
      ruleY([0]),
    ],
    x: { scale: scaleUtc, axis: { label: 'Month' } },
    y: {
      scale: scaleLinear().domain([0, 1]),
      grid: true,
      axis: { ticks: { format: percent }, label: 'Share of unemployment' },
    },
    color: {
      range: colors,
      legend: colorLegend({ label: 'Industry' }),
    },
  })

export const mount: ConformanceMount = tanstackMount(
  definition,
  'Industry share of unemployment',
)