Graphics Templates

Accessible-by-default chart components for newsroom graphics. Built with Svelte 5 and D3.

Most newsroom chart templates ship without real accessibility. This library bakes in screen reader support, keyboard navigation, data table alternatives, and colorblind-safe palettes as defaults — not afterthoughts.

18 chart types covering the full range of data journalism needs: line and bar charts, choropleth maps, election results, beeswarms, sankey diagrams, candlesticks, scrollytelling scaffolds, and more.

Drop in data, set a title, publish. Every component is responsive, print-ready, and keyboard navigable out of the box.

Charts

Design System

Quick Start

<script>
  import { LineChart } from '@graphics-templates/svelte';
  import data from './data.csv';
</script>

<LineChart
  {data}
  title="Unemployment rate, 2020–2024"
  subtitle="Quarterly, seasonally adjusted"
  sourceLabel="Bureau of Labor Statistics"
/>

Responsive sizing, keyboard navigation, screen reader support, print styles, and a visually-hidden data table are included automatically.

Built With

Svelte 5 D3.js TypeScript WAI-ARIA pnpm Turborepo SvelteKit