### Install Dependencies with pnpm

Source: https://github.com/techniq/layerchart/blob/main/README.md

Installs project dependencies using the pnpm package manager. Ensure pnpm is installed globally.

```bash
pnpm i
```

--------------------------------

### Run Dev Server for LayerChart Package

Source: https://github.com/techniq/layerchart/blob/main/README.md

Starts the development server for the layerchart package. Navigate to the package directory before running.

```bash
cd packages/layerchart
pnpm dev
```

--------------------------------

### Install LayerChart

Source: https://context7.com/techniq/layerchart/llms.txt

Install LayerChart using npm or pnpm.

```bash
npm install layerchart
# or
pnpm add layerchart
```

--------------------------------

### Gauge Chart Configuration

Source: https://context7.com/techniq/layerchart/llms.txt

Create a gauge-style arc by providing a single data item and setting `maxValue`. The `range` prop controls the arc's start and end angles in degrees.

```svelte
<script>
  import { PieChart } from 'layerchart';

  const slices = [
    { key: 'progress', label: 'Progress', value: 72 }
  ];
</script>

<!-- Gauge (single arc) -->
<div style="height: 200px">
  <PieChart
    data={slices}
    maxValue={100}
    range={[-120, 120]}
    innerRadius={0.7}
  />
</div>
```

--------------------------------

### Basic Line Chart with Chart Component

Source: https://context7.com/techniq/layerchart/llms.txt

Demonstrates a basic line chart using the root Chart component, Svg, Axis, Grid, Spline, and Highlight components. Requires D3 scale and shape modules.

```svelte
<script>
  import { Chart, Svg, Axis, Grid, Spline, Highlight } from 'layerchart';
  import { scaleTime } from 'd3-scale';
  import { curveNatural } from 'd3-shape';

  const data = [
    { date: new Date('2024-01-01'), value: 42 },
    { date: new Date('2024-02-01'), value: 78 },
    { date: new Date('2024-03-01'), value: 55 },
    { date: new Date('2024-04-01'), value: 91 },
    { date: new Date('2024-05-01'), value: 63 },
  ];
</script>

<div style="height: 300px">
  <Chart
    {data}
    x="date"
    y="value"
    xScale={scaleTime()}
    yNice
    padding={{ left: 16, bottom: 24 }}
    tooltip={{ mode: 'bisect-x' }}
  >
    <Svg>
      <Grid y />
      <Spline curve={curveNatural} class="stroke-primary stroke-2" />
      <Axis placement="left" />
      <Axis placement="bottom" />
      <Highlight lines points />
    </Svg>
  </Chart>
</div>
```

--------------------------------

### Add Changeset for Versioning and Changelog

Source: https://github.com/techniq/layerchart/blob/main/README.md

Generates a changeset to record changes for the changelog and determine the next version. Run this before committing changes.

```bash
pnpm changeset
```

--------------------------------

### Force-Directed Graph with ForceSimulation

Source: https://context7.com/techniq/layerchart/llms.txt

Use ForceSimulation to wrap D3's d3-force simulation. It accepts nodes and links arrays and an array of force configurations. The simulation restarts automatically when the data changes.

```svelte
<script>
  import { Chart, Svg, ForceSimulation, Circle, Line } from 'layerchart';
  import { forceManyBody, forceLink, forceCenter } from 'd3-force';

  const nodes = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
  const links = [{ source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }];
</script>

<div style="height: 300px">
  <Chart>
    <Svg center>
      <ForceSimulation
        {nodes}
        {links}
        forces={[
          { force: forceManyBody().strength(-80) },
          { force: forceLink(links).id((d) => d.id).distance(60) },
          { force: forceCenter() },
        ]}
        let:simulatedNodes
        let:simulatedLinks
      >
        {#each simulatedLinks as link}
          <Line x1={link.source.x} y1={link.source.y} x2={link.target.x} y2={link.target.y}
            class="stroke-gray-300" />
        {/each}
        {#each simulatedNodes as node}
          <Circle cx={node.x} cy={node.y} r={8} class="fill-primary" />
        {/each}
      </ForceSimulation>
    </Svg>
  </Chart>
</div>
```

--------------------------------

### Create Custom Tooltips with LayerChart Tooltip Primitives

Source: https://context7.com/techniq/layerchart/llms.txt

Utilize the `Tooltip` namespace for composable HTML tooltip primitives like `Root`, `Header`, `List`, `Item`, and `Separator`. Configure positioning with `pointer` or `data` modes and `anchor` prop. The `data` slot prop provides the hovered datum.

```svelte
<script>
  import { Chart, Svg, Spline, Axis } from 'layerchart';
  import * as Tooltip from 'layerchart/Tooltip'; // also accessible as named import

  const data = [
    { date: '2024-01', revenue: 12000, cost: 8000 },
    { date: '2024-02', revenue: 15000, cost: 9500 },
    { date: '2024-03', revenue: 11000, cost: 7800 },
  ];
</script>

<Chart {data} x="date" y={['revenue', 'cost']} tooltip={{ mode: 'bisect-x' }}>
  <Svg>
    <Spline y="revenue" class="stroke-blue-500" />
    <Spline y="cost"    class="stroke-red-500"  />
    <Axis placement="left" />
    <Axis placement="bottom" />
  </Svg>

  <!-- Custom tooltip layout -->
  <Tooltip.Root anchor="top-left" let:data>
    <Tooltip.Header value={data.date} />
    <Tooltip.List>
      <Tooltip.Item label="Revenue" value={data.revenue} color="#3b82f6" format="currency" />
      <Tooltip.Item label="Cost"    value={data.cost}    color="#ef4444" format="currency" />
      <Tooltip.Separator />
      <Tooltip.Item label="Margin"  value={data.revenue - data.cost} format="currency" />
    </Tooltip.List>
  </Tooltip.Root>
</Chart>
```

--------------------------------

### Line Chart with Brush Zoom and Custom Tooltip

Source: https://context7.com/techniq/layerchart/llms.txt

Configures the LineChart with brush-based zooming and a custom tooltip format for specific data points.

```svelte
<div style="height: 320px">
  <LineChart
    {data}
    x="month"
    y="sales"
    brush
    props={{
      tooltip: {
        header: { format: (v) => `Month: ${v}` },
        item:   { format: 'integer' },
      },
    }}
  />
</div>
```

--------------------------------

### Stacked Area Chart Configuration

Source: https://context7.com/techniq/layerchart/llms.txt

Use `seriesLayout="stack"` for a standard stacked area chart. Ensure data is provided with appropriate keys for series.

```svelte
<script>
  import { AreaChart } from 'layerchart';

  const data = [
    { quarter: 'Q1', apples: 300, oranges: 200, grapes: 150 },
    { quarter: 'Q2', apples: 420, oranges: 310, grapes: 180 },
    { quarter: 'Q3', apples: 390, oranges: 280, grapes: 210 },
    { quarter: 'Q4', apples: 510, oranges: 340, grapes: 260 },
  ];
</script>

<!-- Stacked area -->
<div style="height: 300px">
  <AreaChart
    {data}
    x="quarter"
    seriesLayout="stack"
    series={[
      { key: 'apples',  label: 'Apples',  color: '#f59e0b' },
      { key: 'oranges', label: 'Oranges', color: '#f97316' },
      { key: 'grapes',  label: 'Grapes',  color: '#8b5cf6' },
    ]}
    legend
  />
</div>
```

--------------------------------

### Interactive Pan and Zoom with TransformContext

Source: https://context7.com/techniq/layerchart/llms.txt

Implement pan and zoom functionality using TransformContext. It manages the transform attribute of a <g> element via pointer/touch drag and scroll-wheel zoom. The 'canvas' mode enables interactive behavior.

```svelte
<script>
  import { Chart, Svg, GeoPath, TransformContext } from 'layerchart';
  import { geoMercator } from 'd3-geo';

  let transformContext;
</script>

<button onclick={() => transformContext?.reset()}>Reset</button>

<div style="height: 400px">
  <Chart
    geo={{ projection: geoMercator }}
    transform={{ mode: 'canvas' }}
    bind:transformContext
    ontransform={(e) => console.log('scale', e.k)}
  >
    <Svg>
      <!-- map paths here -->
    </Svg>
  </Chart>
</div>
```

--------------------------------

### Donut Chart Configuration

Source: https://context7.com/techniq/layerchart/llms.txt

Configure a donut chart using `PieChart` with `innerRadius` set to a value between 0 and 1. `padAngle` and `cornerRadius` can be used to customize slice appearance.

```svelte
<script>
  import { PieChart } from 'layerchart';

  const slices = [
    { key: 'chrome',  label: 'Chrome',  value: 64 },
    { key: 'safari',  label: 'Safari',  value: 19 },
    { key: 'firefox', label: 'Firefox', value: 4  },
    { key: 'other',   label: 'Other',   value: 13 },
  ];
</script>

<!-- Donut chart -->
<div style="height: 300px">
  <PieChart
    data={slices}
    key="key"
    value="value"
    label="label"
    innerRadius={0.6}
    padAngle={0.02}
    cornerRadius={4}
    legend
  />
</div>
```

--------------------------------

### High-Density Rendering with Canvas

Source: https://context7.com/techniq/layerchart/llms.txt

Use the Canvas component for charts with a large number of data points to improve rendering performance. Swap `<Svg>` for `<Canvas>` and maintain identical component composition.

```svelte
<script>
  import { Chart, Canvas, Spline, Axis, Grid } from 'layerchart';
  import { scaleTime } from 'd3-scale';

  // Large dataset — Canvas excels here
  const data = Array.from({ length: 5000 }, (_, i) => ({
    date: new Date(2020, 0, i),
    value: Math.random() * 100,
  }));
</script>

<div style="height: 300px">
  <Chart {data} x="date" y="value" xScale={scaleTime()} yNice
    padding={{ left: 24, bottom: 24 }}
    tooltip={{ mode: 'bisect-x' }}
  >
    <!-- Swap Svg → Canvas for high-density rendering -->
    <Canvas>
      <Grid y />
      <Spline class="stroke-primary stroke-2" />
    </Canvas>
    <Axis placement="left" />
    <Axis placement="bottom" />
  </Chart>
</div>

```

--------------------------------

### Implement Interactive Hover Highlights with LayerChart

Source: https://context7.com/techniq/layerchart/llms.txt

Use the Highlight component for crosshair lines, highlighted area bands, data points, or bar highlights at the tooltip position. Each visual element is independently opt-in and accepts styling props. Click callbacks are supported for points and areas.

```svelte
<script>
  import { Chart, Svg, Spline, Highlight, Axis } from 'layerchart';

  const data = [/* time series */];
</script>

<Chart {data} x="date" y="value" tooltip={{ mode: 'bisect-x' }} padding={{ left: 24, bottom: 24 }}>
  <Svg>
    <Spline class="stroke-primary stroke-2" />
    <Axis placement="left" />
    <Axis placement="bottom" />

    <!-- Dashed vertical crosshair + filled circle at data point -->
    <Highlight
      lines
      points
      onpointclick={(e, { data }) => console.log('clicked', data)}
    />
  </Svg>
</Chart>
```

--------------------------------

### SVG Bar Chart with Click Interaction

Source: https://context7.com/techniq/layerchart/llms.txt

Render bar charts using the Bars component, which iterates data to create individual Bar marks. Customize bar appearance with `radius` and handle click events via `onbarclick`. Ensure appropriate x and y scales are provided.

```svelte
<script>
  import { Chart, Svg, Bars, Axis, Grid, Highlight } from 'layerchart';
  import { scaleBand, scaleLinear } from 'd3-scale';

  const data = [
    { fruit: 'Apple',  count: 42 },
    { fruit: 'Banana', count: 67 },
    { fruit: 'Cherry', count: 28 },
    { fruit: 'Durian', count: 15 },
  ];
</script>

<div style="height: 280px">
  <Chart
    {data}
    x="fruit"
    y="count"
    xScale={scaleBand().padding(0.3)}
    yScale={scaleLinear()}
    yBaseline={0}
    yNice
    padding={{ left: 24, bottom: 24 }}
    tooltip={{ mode: 'band' }}
  >
    <Svg>
      <Grid y />
      <Bars radius={4} onbarclick={(e, { data }) => alert(data.fruit)} />
      <Axis placement="left" />
      <Axis placement="bottom" />
      <Highlight area />
    </Svg>
  </Chart>
</div>
```

--------------------------------

### 100% Stacked Area Chart Configuration

Source: https://context7.com/techniq/layerchart/llms.txt

Utilize `seriesLayout="stackExpand"` to normalize stacked areas to 100%. This is useful for comparing proportions across categories.

```svelte
<script>
  import { AreaChart } from 'layerchart';

  const data = [
    { quarter: 'Q1', apples: 300, oranges: 200, grapes: 150 },
    { quarter: 'Q2', apples: 420, oranges: 310, grapes: 180 },
    { quarter: 'Q3', apples: 390, oranges: 280, grapes: 210 },
    { quarter: 'Q4', apples: 510, oranges: 340, grapes: 260 },
  ];
</script>

<!-- 100 % stacked (normalized) area -->
<div style="height: 300px">
  <AreaChart
    {data}
    x="quarter"
    seriesLayout="stackExpand"
    series={[
      { key: 'apples',  label: 'Apples',  color: '#f59e0b' },
      { key: 'oranges', label: 'Oranges', color: '#f97316' },
      { key: 'grapes',  label: 'Grapes',  color: '#8b5cf6' },
    ]}
    legend
  />
</div>
```

--------------------------------

### High-Level Line Chart

Source: https://context7.com/techniq/layerchart/llms.txt

A convenient LineChart component that automatically includes axes, grid, tooltips, and legends. Supports multiple series and customization via props.

```svelte
<script>
  import { LineChart } from 'layerchart';

  const data = [
    { month: 'Jan', sales: 120, returns: 15 },
    { month: 'Feb', sales: 145, returns: 22 },
    { month: 'Mar', month: 98,  returns: 18 },
    { month: 'Apr', sales: 167, returns: 31 },
  ];
</script>

<div style="height: 320px">
  <LineChart
    {data}
    x="month"
    series={[
      { key: 'sales',   label: 'Sales',   color: 'hsl(220 90% 56%)' },
      { key: 'returns', label: 'Returns', color: 'hsl(0 80% 55%)' },
    ]}
    legend
    grid
    axis
    points
  />
</div>
```

--------------------------------

### SVG Spline Chart with Tweened Path

Source: https://context7.com/techniq/layerchart/llms.txt

Implement tweened path transitions between datasets for Spline components. This allows for smooth interpolation when data changes. Ensure chart context with x and y accessors.

```svelte
<!-- Tweened path transitions between datasets -->
<div style="height: 200px">
  <Chart {data} x="date" y="temp" xScale={scaleTime()} yNice>
    <Svg>
      <Spline tweened={{ duration: 600 }} class="stroke-primary stroke-2" />
    </Svg>
  </Chart>
</div>
```

--------------------------------

### SVG Pie Chart with Custom Arcs

Source: https://context7.com/techniq/layerchart/llms.txt

Create pie charts using the Pie component, which computes arc angles from data. Render custom arcs using the default slot, controlling `innerRadius`, `fill`, and `tweened` transitions. Define data and color scales.

```svelte
<script>
  import { Chart, Svg, Pie, Arc, Group } from 'layerchart';

  const data = [
    { label: 'A', value: 30 },
    { label: 'B', value: 50 },
    { label: 'C', value: 20 },
  ];
  const colors = ['#6366f1', '#f59e0b', '#10b981'];
</script>

<div style="height: 260px">
  <Chart {data} x="value" cDomain={data.map((d) => d.label)} cRange={colors}>
    <Svg center>
      <Group center>
        <Pie padAngle={0.02} cornerRadius={6} let:arcs>
          {#each arcs as arc, i}
            <Arc
              startAngle={arc.startAngle}
              endAngle={arc.endAngle}
              innerRadius={0.5}
              fill={colors[i]}
              tweened
            />
          {/each}
        </Pie>
      </Group>
    </Svg>
  </Chart>
</div>
```

--------------------------------

### Brush Selection for Data Interaction

Source: https://context7.com/techniq/layerchart/llms.txt

Add rectangular brush selection for zooming or selecting data ranges with BrushContext. The 'axis' prop can restrict the brush to 'x', 'y', or 'both'. 'resetOnEnd' clears the brush after selection.

```svelte
<script>
  import { Chart, Svg, Spline, Axis, BrushContext } from 'layerchart';
  import { scaleTime } from 'd3-scale';

  let xDomain;
  const data = [/* time series */];
</script>

<div style="height: 300px">
  <Chart
    {data}
    x="date"
    y="value"
    xScale={scaleTime()}
    {xDomain}
    brush={{ axis: 'x', resetOnEnd: true, onbrushend: (e) => (xDomain = e.xDomain) }}
    padding={{ left: 24, bottom: 24 }}
  >
    <Svg>
      <Spline class="stroke-primary stroke-2" />
      <Axis placement="left" />
      <Axis placement="bottom" />
    </Svg>
  </Chart>
</div>
```

--------------------------------

### Render Chart Legend with Swatches

Source: https://context7.com/techniq/layerchart/llms.txt

Use the Legend component to display a color legend for the chart's color scale. Configure variant, placement, and orientation for different chart types. Supports interactive series toggling via click callbacks.

```svelte
<script>
  import { Chart, Svg, Bars, Axis, Legend } from 'layerchart';
  import { scaleOrdinal } from 'd3-scale';

  const categories = ['A', 'B', 'C'];
  const colors = ['#6366f1', '#f59e0b', '#10b981'];
  const data = [/* ... */];

  let selected = new Set(categories);
</script>

<Chart {data} x="category" y="value"
  c="category"
  cDomain={categories}
  cRange={colors}
>
  <Svg>
    <Bars />
    <Axis placement="bottom" />
  </Svg>

  <Legend
    scale={scaleOrdinal(categories, colors)}
    variant="swatches"
    placement="bottom"
    orientation="horizontal"
    onclick={(e, item) => {
      selected.has(item.value) ? selected.delete(item.value) : selected.add(item.value);
      selected = selected; // trigger reactivity
    }}
  />
</Chart>
```

--------------------------------

### Grouped Vertical Bar Chart

Source: https://context7.com/techniq/layerchart/llms.txt

Configure `seriesLayout="group"` for grouped vertical bars. The `onbarclick` event provides data and series information upon interaction.

```svelte
<script>
  import { BarChart } from 'layerchart';

  const data = [
    { region: 'North', q1: 80,  q2: 95  },
    { region: 'South', q1: 120, q2: 110 },
    { region: 'East',  q1: 65,  q2: 88  },
    { region: 'West',  q1: 140, q2: 155 },
  ];
</script>

<!-- Grouped vertical bars -->
<div style="height: 300px">
  <BarChart
    {data}
    x="region"
    seriesLayout="group"
    series={[
      { key: 'q1', label: 'Q1', color: '#3b82f6' },
      { key: 'q2', label: 'Q2', color: '#10b981' },
    ]}
    legend
    onbarclick={(e, { data, series }) => console.log(series.key, data)}
  />
</div>
```

--------------------------------

### Draw Background Grid Lines with LayerChart Grid Component

Source: https://context7.com/techniq/layerchart/llms.txt

The Grid component draws horizontal and/or vertical grid lines aligned to axis ticks. Enable x lines with `x`, y lines with `y`. Custom styling is supported via `class` and `style` objects.

```svelte
<script>
  import { Chart, Svg, Grid, Spline, Axis } from 'layerchart';

  const data = [/* ... */];
</script>

<Chart {data} x="date" y="value" padding={{ left: 24, bottom: 24 }}>
  <Svg>
    <!-- Only horizontal grid lines, custom dashed style -->
    <Grid y={{ class: 'stroke-gray-200 stroke-dashed' }} yTicks={5} />
    <Spline class="stroke-primary stroke-2" />
    <Axis placement="left" />
    <Axis placement="bottom" />
  </Svg>
</Chart>
```

--------------------------------

### Horizontal Stacked Bar Chart

Source: https://context7.com/techniq/layerchart/llms.txt

Create horizontal stacked bars by setting `orientation="horizontal"` and `seriesLayout="stack"`. This layout is suitable for comparing contributions within categories across a horizontal axis.

```svelte
<script>
  import { BarChart } from 'layerchart';

  const data = [
    { region: 'North', q1: 80,  q2: 95  },
    { region: 'South', q1: 120, q2: 110 },
    { region: 'East',  q1: 65,  q2: 88  },
    { region: 'West',  q1: 140, q2: 155 },
  ];
</script>

<!-- Horizontal stacked bars -->
<div style="height: 300px">
  <BarChart
    {data}
    x="region"
    orientation="horizontal"
    seriesLayout="stack"
    series={[
      { key: 'q1', label: 'Q1', color: '#3b82f6' },
      { key: 'q2', label: 'Q2', color: '#10b981' },
    ]}
  />
</div>
```

--------------------------------

### SVG Spline Chart with Animated Draw

Source: https://context7.com/techniq/layerchart/llms.txt

Use Spline for line series in SVG charts. Supports D3 curve factories and animated reveal on mount. Ensure chart context with x and y accessors.

```svelte
<script>
  import { Chart, Svg, Spline } from 'layerchart';
  import { curveCardinal } from 'd3-shape';
  import { scaleTime } from 'd3-scale';

  const data = Array.from({ length: 20 }, (_, i) => ({
    date: new Date(2024, 0, i + 1),
    temp: 10 + Math.round(Math.sin(i / 3) * 8 + Math.random() * 4),
  }));
</script>

<div style="height: 200px">
  <Chart {data} x="date" y="temp" xScale={scaleTime()} yNice>
    <Svg>
      <!-- Animated draw on mount, cardinal curve -->
      <Spline
        curve={curveCardinal.tension(0.5)}
        draw={{ duration: 1200 }}
        class="stroke-blue-500 stroke-2"
      />
    </Svg>
  </Chart>
</div>
```

--------------------------------

### Render Sankey Diagram with Sankey Component

Source: https://context7.com/techniq/layerchart/llms.txt

Use the Sankey component to render a Sankey flow diagram. It accepts a graph object with nodes and links and maps layout parameters directly to d3-sankey.

```svelte
<script>
  import { Chart, Svg, Sankey } from 'layerchart';

  const graph = {
    nodes: [{ id: 'a', name: 'Source' }, { id: 'b', name: 'Middle' }, { id: 'c', name: 'Sink' }],
    links: [{ source: 'a', target: 'b', value: 40 }, { source: 'b', target: 'c', value: 40 }],
  };
</script>

<div style="height: 300px">
  <Chart data={graph}>
    <Svg>
      <Sankey
        nodeWidth={15}
        nodePadding={10}
        nodeAlign="justify"
      />
    </Svg>
  </Chart>
</div>
```

--------------------------------

### Render Cartesian and Radial Axes with LayerChart

Source: https://context7.com/techniq/layerchart/llms.txt

Use the Axis component to render tick marks, labels, and rule lines for chart edges or radial orientations. Configure tick count, values, and formatting. The `grid` prop can draw grid lines.

```svelte
<script>
  import { Chart, Svg, Axis } from 'layerchart';
  import { scaleTime } from 'd3-scale';
  import { timeMonth } from 'd3-time';

  const data = [/* ... */];
</script>

<Chart {data} x="date" y="value" xScale={scaleTime()} padding={{ left: 40, bottom: 32 }}>
  <Svg>
    <!-- Left axis: 4 ticks, formatted as currency shorthand -->
    <Axis
      placement="left"
      ticks={4}
      format={(v) => `$${v / 1000}k`}
      label="Revenue"
      labelPlacement="middle"
      rule
    />

    <!-- Bottom axis: monthly ticks -->
    <Axis
      placement="bottom"
      ticks={{ interval: timeMonth.every(1) }}
      format="%b %Y"
    />
  </Svg>
</Chart>
```

--------------------------------

### Packed Source Data Structure

Source: https://github.com/techniq/layerchart/blob/main/packages/layerchart/static/data/examples/bench/docs.md

Represents the raw, packed data structure as a combination of field count, field names, and data values.

```javascript
[fieldCount, ...fields, ...data];
```

```javascript
[7,"epoch","idl","recv","send","writ","used","free",26107560,99.46,0,0,0.63,614.52,3767,....]
```

--------------------------------

### Render Geographic Paths with GeoPath

Source: https://context7.com/techniq/layerchart/llms.txt

Utilize GeoContext to set up a D3 geographic projection and GeoPath to render GeoJSON features. The Chart component can configure the geo context inline, including auto-fitting features and applying transforms.

```svelte
<script>
  import { Chart, Svg, GeoPath, GeoContext } from 'layerchart';
  import { geoAlbersUsa } from 'd3-geo';
  import { feature } from 'topojson-client';

  // Assume `usAtlas` is a TopoJSON object with a "states" collection
  let usAtlas;
  const states = usAtlas ? feature(usAtlas, usAtlas.objects.states) : null;
</script>

<div style="height: 400px">
  <Chart
    data={states?.features ?? []}
    geo={{
      projection: geoAlbersUsa,
      fitGeojson: states,
    }}
    transform={{ mode: 'canvas' }}
  >
    <Svg>
      {#each states?.features ?? [] as feature}
        <GeoPath
          {feature}
          class="fill-blue-100 stroke-white stroke-[0.5px]"
          onclick={() => console.log(feature.properties.name)}
        />
      {/each}
    </Svg>
  </Chart>
</div>
```

--------------------------------

### SVG Area Chart with Confidence Interval

Source: https://context7.com/techniq/layerchart/llms.txt

Use the Area component to render filled areas, suitable for confidence intervals or band ranges. Configure the baseline (y0) and top edge (y1) via overrides or chart context. Supports overlaid Spline lines.

```svelte
<script>
  import { Chart, Svg, Area, Axis, Grid } from 'layerchart';
  import { curveMonotoneX } from 'd3-shape';

  const data = [
    { x: 0, low: 10, high: 30 },
    { x: 1, low: 15, high: 40 },
    { x: 2, low: 12, high: 35 },
    { x: 3, low: 20, high: 50 },
  ];
</script>

<!-- Band / confidence interval area -->
<div style="height: 240px">
  <Chart {data} x="x" y={['low', 'high']} yNice padding={{ left: 16, bottom: 24 }}>
    <Svg>
      <Grid y />
      <Area
        curve={curveMonotoneX}
        fill="hsl(220 90% 56% / 0.3)"
        line={{ class: 'stroke-blue-500 stroke-2' }}
      />
      <Axis placement="left" />
      <Axis placement="bottom" />
    </Svg>
  </Chart>
</div>
```

--------------------------------

### Render Treemap with Rect and Text Elements

Source: https://context7.com/techniq/layerchart/llms.txt

The Treemap component wraps D3 hierarchy layouts to render a tiling of nested rectangles. It accepts a D3 HierarchyNode or a raw nested object and common props like tile, padding, and round.

```svelte
<script>
  import { Chart, Svg, Treemap, Rect, Text } from 'layerchart';
  import { hierarchy } from 'd3-hierarchy';

  const root = hierarchy({
    name: 'root',
    children: [
      { name: 'Alpha', value: 120 },
      { name: 'Beta',  value: 80  },
      { name: 'Gamma', value: 200 },
    ],
  }).sum((d) => d.value);
</script>

<div style="height: 320px">
  <Chart data={root}>
    <Svg>
      <Treemap let:nodes>
        {#each nodes as node}
          <Rect
            x={node.x0} y={node.y0}
            width={node.x1 - node.x0}
            height={node.y1 - node.y0}
            class="fill-primary/30 stroke-white"
          />
          <Text x={(node.x0 + node.x1) / 2} y={(node.y0 + node.y1) / 2}
            value={node.data.name} textAnchor="middle" />
        {/each}
      </Treemap>
    </Svg>
  </Chart>
</div>
```

--------------------------------

### uPlot Object Container Data Structure

Source: https://github.com/techniq/layerchart/blob/main/packages/layerchart/static/data/examples/bench/docs.md

Data structured as an object where keys are dimension names and values are arrays of data points.

```javascript
{
  date: [Number, ...],
  cpu: [Number, ...],
  ram: [Number, ...],
  tcp: [Number, ...],
}
```

--------------------------------

### uPlot Array of Arrays Data Structure

Source: https://github.com/techniq/layerchart/blob/main/packages/layerchart/static/data/examples/bench/docs.md

Data structured as an array of arrays, where each inner array represents a dimension (e.g., date, cpu, ram).

```javascript
[
  [Number, ...], // date
  [Number, ...], // cpu
  [Number, ...], // ram
  [Number, ...], // tcp
]
```

--------------------------------

### Plotly Data Structure

Source: https://github.com/techniq/layerchart/blob/main/packages/layerchart/static/data/examples/bench/docs.md

Data structured as an object where keys are metric names and values are arrays of [Date, Number] pairs.

```javascript
{
  cpu: [[Date,Number], ...],
  ram: [[Date,Number], ...],
  tcp: [[Date,Number], ...],
}
```

--------------------------------

### LayerChart Expanded Data Structure

Source: https://github.com/techniq/layerchart/blob/main/packages/layerchart/static/data/examples/bench/docs.md

Data structured as an array of objects, providing a human-readable format with named properties for each metric at each timestamp.

```javascript
[
  { date: Date, cpu: Number: ram: Number, tcp: Number },
  ...
]
```

--------------------------------

### amCharts5 Data Structure

Source: https://github.com/techniq/layerchart/blob/main/packages/layerchart/static/data/examples/bench/docs.md

Data structured as an array of objects, where each object represents a point in time with named properties for each metric.

```javascript
{
  cpu: [{ x: Date: y: Number }, ...],
  ram: [{ x: Date: y: Number }, ...],
  tcp: [{ x: Date: y: Number }, ...],
}
```

--------------------------------

### ECharts Single Array Data Structure

Source: https://github.com/techniq/layerchart/blob/main/packages/layerchart/static/data/examples/bench/docs.md

Data structured as a single flat array where dimensions are determined by position or offset.

```javascript
[Number, Number, Number, Number, ...] // date, cpu, ram, tcpout, ...
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.