> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

The Graphy SDK is a charting library for React, built on a **grammar of graphics**. Rather than picking a chart from a fixed menu, you describe a chart by composing a handful of parts — which columns map to which aesthetics, what shapes to draw, and how values become positions and colors. The same parts recombine into everything from a line chart to a polar racetrack.

## Two packages

The SDK is split along a clean seam:

* **`@graphysdk/viz-engine`** — a framework-agnostic engine. You author a **spec** (a small, immutable description of a chart) and the engine compiles it, resolving scales, statistics, positions and guides. No DOM, no React.
* **`@graphysdk/react-renderer`** — a React renderer that paints a compiled spec to SVG. It owns layout, theming, locale-aware formatting, interactivity and animation.

```mermaid theme={null}
flowchart LR
  A[Your data] --> C
  B[Spec] --> C[viz-engine<br/>compile]
  C --> D[CompiledSpec]
  D --> E[react-renderer<br/>paint]
  E --> F[SVG chart]
```

You author a spec once and hand it, with your data, to the renderer. Because the engine is framework-agnostic, the same spec can drive other renderers or run on a server — but for most apps you'll use it through React.

## Anatomy of a spec

A spec is assembled from a few kinds of part, folded together with `pipe`:

```tsx theme={null}
import { createSpec, pipe, geom, scale, config } from '@graphysdk/viz-engine';

const spec = pipe(
  createSpec({ x: 'month', y: 'revenue', color: 'product' }), // mapping — columns → aesthetics
  geom.line(), // geom   — the shape to draw
  scale.x(), // scale  — values → positions
  scale.y(),
  scale.color.palette(), // scale  — categories → colors
  config({ legend: { position: 'bottom' } }) // config — chart chrome
);
```

Each part has a concept page that explains it in depth:

| Part        | Builder                  | Concept                                                     |
| ----------- | ------------------------ | ----------------------------------------------------------- |
| **Mapping** | `mapping` / `createSpec` | [Mappings & aesthetics](/sdk-next/concepts/mappings)        |
| **Geom**    | `geom.*`                 | [Geoms & layers](/sdk-next/concepts/geoms)                  |
| **Scale**   | `scale.*`                | [Scales](/sdk-next/concepts/scales)                         |
| **Coord**   | `coord.*`                | [Coordinate systems](/sdk-next/concepts/coordinate-systems) |
| **Config**  | `config`                 | [Configuration](/sdk-next/config/index)                     |

The builders are convenience — what they produce is a plain, JSON-serializable object. You can store a spec in a database and load it back to render, no builder required. See [Serializable spec](/sdk-next/concepts/serializable-spec).

## Where to start

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/sdk-next/quickstart">
    Install the packages and render your first chart.
  </Card>

  <Card title="How a chart is built" icon="diagram-project" href="/sdk-next/concepts/how-a-chart-is-built">
    The spec pipeline and the compile → render model.
  </Card>

  <Card title="Data structure" icon="table" href="/sdk-next/data-structure">
    The data table and how mappings reference it.
  </Card>

  <Card title="Chart types" icon="chart-mixed" href="/sdk-next/graph-types/index">
    Recipes for line, bar, pie, scatter and more.
  </Card>
</CardGroup>