### Svelte Calendar Page Setup

Source: https://layercake.graphics/example/Calendar

Sets up the main page for the calendar visualization. It imports necessary components and libraries, processes CSV data, and prepares data for rendering multiple calendar months using LayerCake.

```svelte
<script>
  import { LayerCake, Svg } from 'layercake';
  import { nest } from 'd3-collection';
  import { scaleQuantize } from 'd3-scale';

  import CalendarMonth from './_components/CalendarMonth.svelte';

  // This example loads csv data as json and converts numeric columns to numbers using @rollup/plugin-dsv. See vite.config.js for details
  import dates from './_data/dates.csv';

  const monthNames = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
  ];

  const datesTransformed = dates.map(row => {
    return { ...row, date: new Date(row.timestring) };
  });

  const gutter = 10;
  const seriesColors = ['#fff5cc', '#ffeba9', '#ffe182', '#ffd754', '#ffcc00'];

  /* --------------------------------------------
   * Group by month then by date
   */
  const byMonthByDate = nest()
    .key(d => d.date.getUTCMonth())
    .key(d => d.timestring.split('T')[0])
    .entries(datesTransformed);

  const sortedData = byMonthByDate.sort((a, b) => a.key - b.key);
</script>

{#each sortedData as month, i}
  <div
    class="chart-container"
    style="width:calc({100 / sortedData.length}% - {gutter}px);{i === 0
      ? `margin-right:${gutter * 2}px`
      : ''}"
    data-month={monthNames[+month.key]}
  >
    <LayerCake
      padding={{ top: 1, right: 1, bottom: 1, left: 1 }}
      x="key"
      z=d => d.values.length
      zScale={scaleQuantize()}
      zRange={seriesColors}
      data={month.values}
    >
      <Svg>
        <CalendarMonth />
      </Svg>
    </LayerCake>
  </div>
{/each}

<style>
  /*
    The wrapper div needs to have an explicit width and height in CSS.
    It can also be a flexbox child or CSS grid element.
    The point being it needs dimensions since the <LayerCake> element will
    expand to fill it.
    The width is being set inline below.
  */
  .chart-container {
    --margin-top: 25px;
    display: inline-block;
    position: relative;
    vertical-align: top;
    height: calc(250px - var(--margin-top));
    margin-top: var(--margin-top);
  }
  .chart-container:before {
    content: attr(data-month);
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, -100%);
  }
</style>
```

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

### Svelte LayerCake Chart Setup

Source: https://layercake.graphics/example/Line

Initializes a LayerCake chart with SVG elements for line, area, and axes. It imports data from a CSV file and configures the x and y scales. The chart dimensions and padding are defined within the Svelte component.

```svelte
<script>
  import { LayerCake, Svg } from 'layercake';

  import Line from './_components/Line.svelte';
  import Area from './_components/Area.svelte';
  import AxisX from './_components/AxisX.svelte';
  import AxisY from './_components/AxisY.svelte';

  // This example loads csv data as json and converts numeric columns to numbers using @rollup/plugin-dsv. See vite.config.js for details
  import data from './_data/points.csv';

  const xKey = 'myX';
  const yKey = 'myY';
</script>

<div class="chart-container">
  <LayerCake
    padding={{ top: 8, right: 10, bottom: 20, left: 25 }}
    x={xKey}
    y={yKey}
    yDomain={[0, null]}
    {data}
  >
    <Svg>
      <AxisX />
      <AxisY ticks={4} />
      <Line />
      <Area />
    </Svg>
  </LayerCake>
</div>

<style>
  /*
    The wrapper div needs to have an explicit width and height in CSS.
    It can also be a flexbox child or CSS grid element.
    The point being it needs dimensions since the <LayerCake> element will
    expand to fill it.
  */
  .chart-container {
    width: 100%;
    height: 250px;
  }
</style>
```

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

### Svelte Radar Chart Page Setup

Source: https://layercake.graphics/example/Radar

Sets up the main Svelte component for the radar chart. It imports necessary LayerCake components, loads data from a CSV file, defines data keys, and configures the chart's dimensions and domains. The chart is rendered within a container with defined CSS dimensions.

```svelte
<script>
  import { LayerCake, Svg } from 'layercake';

  import Radar from './_components/Radar.svelte';
  import AxisRadial from './_components/AxisRadial.svelte';

  // This example loads csv data as json and converts numeric columns to numbers using @rollup/plugin-dsv. See vite.config.js for details
  import data from './_data/radarScores.csv';

  const seriesKey = 'name';
  const xKey = ['fastball', 'change', 'slider', 'cutter', 'curve'];

  const seriesNames = Object.keys(data[0]).filter(d => d !== seriesKey);
</script>

<div class="chart-container">
  <LayerCake
    padding={{ top: 30, right: 0, bottom: 7, left: 0 }}
    x={xKey}
    xDomain={[0, 10]}
    xRange={({ height }) => [0, height / 2]}
    {data}
  >
    <Svg>
      <AxisRadial />
      <Radar />
    </Svg>
  </LayerCake>
</div>

<style>
  /*
    The wrapper div needs to have an explicit width and height in CSS.
    It can also be a flexbox child or CSS grid element.
    The point being it needs dimensions since the <LayerCake> element will
    expand to fill it.
  */
  .chart-container {
    width: 100%;
    height: 250px;
  }
</style>
```

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

### Get Layer Cake Starter Template with degit

Source: https://layercake.graphics/guide

Clones or downloads the Layer Cake starter template using degit. This provides a basic project structure to begin building your charts with Layer Cake and Svelte.

```bash
degit mhkeller/layercake-template my-chart
cd my-chart
```

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

### Example CSV Data

Source: https://layercake.graphics/example/CirclePack

This is an example dataset in CSV format, suitable for use with data visualization tools. It contains two columns: 'fruit' and 'value', representing categories and their corresponding numerical data.

```csv
fruit,value
apples,3240
bananas,1920
cherries,1290
oranges,403
dates,400
pears,230
```

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

### CSV Data Example

Source: https://layercake.graphics/example/MultiLine

This is an example of a CSV (Comma Separated Values) formatted dataset. It includes a header row defining the columns (month, apples, bananas, cherries, dates) followed by rows of data, each representing a month and the corresponding counts for each fruit.

```csv
month,apples,bananas,cherries,dates
2015-04-01,3840,1920,960,400
2015-03-01,1600,1440,960,400
2015-02-01,640,960,640,400
2015-01-01,320,480,640,400

```

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

### Install Layer Cake with npm

Source: https://layercake.graphics/guide

Installs the Layer Cake library as a dependency for your project using npm. This is the first step to integrate Layer Cake into your Svelte application.

```bash
npm install --save layercake
```

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

### Svelte LayerCake Scatter Plot Setup

Source: https://layercake.graphics/example-ssr/Scatter

Main Svelte component setting up a LayerCake instance for an HTML scatter plot. It imports necessary components, loads CSV data, and configures LayerCake with scales, padding, and data binding. The chart uses HTML renderers for axes and scatter points.

```svelte
<script>
  import { LayerCake, Html } from 'layercake';

  import Scatter from './_components/Scatter.html.svelte';
  import AxisX from './_components/AxisX.percent-range.html.svelte';
  import AxisY from './_components/AxisY.percent-range.html.svelte';

  // This example loads csv data as json and converts numeric columns to numbers using @rollup/plugin-dsv. See vite.config.js for details
  import data from './_data/points.csv';

  const xKey = 'myX';
  const yKey = 'myY';

  const r = 4.5;
  const padding = 2.5;
  const fill = '#fff';
  const stroke = '#0cf';
  const strokeWidth = 1.5;
</script>

<div class="chart-container">
  <LayerCake
    ssr
    percentRange
    padding={{ top: 10, right: 5, bottom: 20, left: 25 }}
    x={xKey}
    y={yKey}
    xPadding={[padding, padding]}
    yPadding={[padding, padding]}
    {data}
  >
    <Html>
      <AxisX />
      <AxisY />
      <Scatter {r} {fill} {stroke} {strokeWidth} />
    </Html>
  </LayerCake>
</div>

<style>
  /*
    The wrapper div needs to have an explicit width and height in CSS.
    It can also be a flexbox child or CSS grid element.
    The point being it needs dimensions since the <LayerCake> element will
    expand to fill it.
  */
  .chart-container {
    width: 100%;
    height: 250px;
  }
</style>
```

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

### Sample XY Data

Source: https://layercake.graphics/example-ssr/Brush

Sample data in a CSV format, with 'myX' and 'myY' columns. This data can be used for testing or demonstrating charting functionalities.

```text
myX,myY
1979,7.19
1980,7.83
1981,7.24
1982,7.44
1983,7.51
1984,7.1
1985,6.91
1986,7.53
1987,7.47
1988,7.48
1989,7.03
1990,6.23
1991,6.54
1992,7.54
1993,6.5
1994,7.18
1995,6.12
1996,7.87
1997,6.73
1998,6.55
1999,6.23
2000,6.31
2001,6.74
2002,5.95
2003,6.13
2004,6.04
2005,5.56
2006,5.91
2007,4.29
2008,4.72
2009,5.38
2010,4.92
2011,4.61
2012,3.62
2013,5.35
2014,5.28
2015,4.63
2016,4.72

```

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

### SVG Circle Rendering with Svelte

Source: https://layercake.graphics/example/Beeswarm

Renders a collection of circles using SVG elements. It iterates over a 'circles' array and applies dynamic styling based on data and configuration. Includes conditional rendering for tooltips.

```html
<g class="bee-group">
  {#each circles as d}
    <circle
      fill={$zGet(d)}
      {stroke}
      stroke-width={strokeWidth}
      cx={d.x}
      cy={$height - r - spacing - strokeWidth / 2 - d.y}
      {r}
    >
      {#if getTitle}
        <title>{getTitle(d)}</title>
      {/if}
    </circle>
  {/each}
</g>
```

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

### Get Element Position Relative to Parent in JavaScript

Source: https://layercake.graphics/components/Arrows

Calculates the bounding box coordinates of an HTML element relative to its parent element. This is useful for positioning annotations or drawing elements within a specific coordinate space. It utilizes `getBoundingClientRect` for accurate measurements.

```javascript
export function getElPosition(el) {
  const annotationBbox = el.getBoundingClientRect();
  const parentBbox = el.parentNode.getBoundingClientRect();
  const coords = {
    top: annotationBbox.top - parentBbox.top,
    right: annotationBbox.right - parentBbox.left,
    bottom: annotationBbox.bottom - parentBbox.top,
    left: annotationBbox.left - parentBbox.left,
    width: annotationBbox.width,
    height: annotationBbox.height
  };
  return coords;
}
```

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

### JavaScript: Y-Axis Tick and Label Calculations

Source: https://layercake.graphics/example/Line

Calculates various properties for y-axis ticks and labels, including the maximum pixel length of formatted tick values, the length of tick marks, and the starting x and y coordinates for labels and tick marks. It uses derived state for dynamic updates based on chart dimensions and configurations.

```javascript
let widestTickLen = $derived(
    Math.max(...tickVals.map(d => format(d).toString().split('').reduce(calcStringLength, 0)))
  );
  let tickLen = $derived(
    tickMarks === true
      ? labelPosition === 'above'
        ? (tickMarkLength ?? widestTickLen)
        : (tickMarkLength ?? 6)
      : 0
  );
  let x1 = $derived(-tickGutter - (labelPosition === 'above' ? widestTickLen : tickLen));
  let y = $derived(isBandwidth ? $yScale.bandwidth() / 2 : 0);
  let maxTickValPx = $derived(Math.max(...tickVals.map($yScale)));
```

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

### Svelte Component: SyncedBrushWrapper Setup

Source: https://layercake.graphics/example-ssr/SyncedBrush

Sets up the main Svelte component for synchronized brushing. It loads CSV data, converts numeric columns, and renders multiple `SyncedBrushWrapper` instances, each bound to the same brush extents. Dependencies include Svelte and the `@rollup/plugin-dsv` for CSV parsing.

```svelte
<script>
  import SyncedBrushWrapper from './_components/SyncedBrushWrapper.percent-range.svelte';

  // This example loads csv data as json and converts numeric columns to numbers using @rollup/plugin-dsv. See vite.config.js for details
  import pointsOne from './_data/points.csv';
  import pointsTwo from './_data/pointsTwo.csv';
  import pointsThree from './_data/pointsThree.csv';
  import pointsFour from './_data/pointsFour.csv';

  let brushExtents = $state([null, null]);

  const xKey = 'myX';
  const yKey = 'myY';

  const datasets = [pointsOne, pointsTwo, pointsThree, pointsFour];

  datasets.forEach(dataset => {
    dataset.forEach(d => {
      d[yKey] = +d[yKey];
    });
  });

  const colors = ['#00e047', '#00bbff', '#ff00cc', '#ffcc00'];
</script>

<div class="small-multiple-container">
  {#each datasets as dataset, i}
    <SyncedBrushWrapper
      data={dataset}
      {xKey}
      {yKey}
      bind:min={brushExtents[0]}
      bind:max={brushExtents[1]}
      stroke={colors[i]}
    />
  {/each}
</div>

<style>
  /*
    The wrapper div needs to have an explicit width and height in CSS.
    It can also be a flexbox child or CSS grid element.
    The point being it needs dimensions since the <LayerCake> element will
    expand to fill it.
  */
  .small-multiple-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
  }
</style>
```

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

### Svelte Annotation Component for SSR

Source: https://layercake.graphics/components/AnnotationsData.html

This Svelte component, AnnotationsData.html.svelte, adds text annotations to a chart. It uses LayerCake's context to get x and y scales for positioning. Annotations can be positioned using pixel or percentage values, and optionally include arrows. The component accepts an array of annotation objects and an optional text accessor function.

```svelte
<!--
  @component
  Adds text annotations that get their x and y placement using the `xScale` and `yScale`.
 -->
<script>
  import { getContext } from 'svelte';

  const { xGet, yGet, percentRange } = getContext('LayerCake');

  /**
   * @typedef {Object} ArrowSource
   * @property {string} anchor - Anchor position, format: `{left|middle|right}-{top|middle|bottom}`
   * @property {number} [dx] - Optional horizontal pixel offset
   * @property {number} [dy] - Optional vertical pixel offset
   */

  /**
   * @typedef {Object} ArrowTarget
   * @property {string|number} [x] - X position (can be percentage string like "68%" or data value)
   * @property {string|number} [y] - Y position (can be percentage string like "48%" or data value)
   * @property {number} [dx] - Optional horizontal pixel offset
   * @property {number} [dy] - Optional vertical pixel offset
   */

  /**
   * @typedef {Object} Arrow
   * @property {boolean} [clockwise=true] - Direction of arrow curve
   * @property {ArrowSource} source - Arrow starting point configuration
   * @property {ArrowTarget} target - Arrow ending point configuration
   */

  /**
   * @typedef {Object} Annotation
   * @property {string} text - The text content of the annotation
   * @property {number} [dx] - Optional horizontal pixel offset
   * @property {number} [dy] - Optional vertical pixel offset
   * @property {number} [top] - CSS top position in pixels
   * @property {number} [right] - CSS right position in pixels
   * @property {number} [bottom] - CSS bottom position in pixels
   * @property {number} [left] - CSS left position in pixels
   * @property {Array<Arrow>} [arrows] - Optional array of arrow configurations
   * @description Additional dynamic properties can be added using data keys (e.g., [xKey]: value, [yKey]: value) for positioning based on chart data dimensions
   */

  /**
   * @typedef {Object} Props
   * @property {Array<Annotation>} annotations - A list of annotation objects.
   * @property {Function} [getText] - An accessor function to get the field to display.
   * @property {boolean} [pr] - If `true` will set the `top` and `left` CSS positions to percentages instead of pixels.
   */

  /** @type {Props} */
  let { annotations, getText = d => d.text, pr = $percentRange } = $props();

  let units = $derived(pr === true ? '%' : 'px');
</script>

<div class="layercake-annotations">
  {#each annotations as d, i}
    <div
      class="layercake-annotation"
      data-id={i}
      style:left={`calc(${$xGet(d)}${units} + ${d.dx || 0}px)`}
      style:top={`calc(${$yGet(d)}${units} + ${d.dy || 0}px)`}
    >
      {getText(d)}
    </div>
  {/each}
</div>

<style>
  .layercake-annotation {
    position: absolute;
  }
</style>

```

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

### Svelte Scatter Plot Setup with LayerCake

Source: https://layercake.graphics/example/Scatter

This Svelte component sets up a scatter plot using LayerCake. It imports necessary components for SVG, Canvas, Voronoi, and axes, loads data from a CSV file, and configures the main LayerCake component with padding and data mapping. It also defines basic styling for the chart container.

```svelte
<script>
  import { LayerCake, Svg, Canvas } from 'layercake';

  import ScatterSvg from './_components/Scatter.svg.svelte';
  import ScatterCanvas from './_components/Scatter.canvas.svelte';
  import Voronoi from './_components/Voronoi.svelte';
  import AxisX from './_components/AxisX.svelte';
  import AxisY from './_components/AxisY.svelte';

  // This example loads csv data as json and converts numeric columns to numbers using @rollup/plugin-dsv. See vite.config.js for details
  import data from './_data/points.csv';

  const xKey = 'myX';
  const yKey = 'myY';

  const r = 3;
  const padding = 10;
  const color = '#fff';

  function logEvent(d) {
    console.log('dispatched event', d, d.detail);
  }
</script>

<div class="chart-container">
  <LayerCake
    padding={{ top: 10, right: 5, bottom: 20, left: 25 }}
    x={xKey}
    y={yKey}
    xPadding={[padding, padding]}
    yPadding={[padding, padding]}
    {data}
  >
    <Svg>
      <AxisX gridlines={false} />
      <AxisY gridlines={false} ticks={4} />
    </Svg>

    <Canvas>
      <ScatterCanvas r={r * 1.5} fill="#0cf" />
    </Canvas>

    <Svg>
      <ScatterSvg {r} fill={color} />
      <Voronoi stroke="#333" onmouseover={logEvent} />
    </Svg>
  </LayerCake>
</div>

<style>
  /*
    The wrapper div needs to have an explicit width and height in CSS.
    It can also be a flexbox child or CSS grid element.
    The point being it needs dimensions since the <LayerCake> element will
    expand to fill it.
  */
  .chart-container {
    width: 100%;
    height: 250px;
  }
</style>

```

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

### JavaScript Utility: Element Position Calculation

Source: https://layercake.graphics/example-ssr/Column

The `getElPosition` function calculates a bounding box for a given HTML element relative to its parent. This is essential for accurately positioning SVG elements, such as the starting points of arrows, based on the annotated elements in the DOM. It returns an object containing `top`, `right`, `bottom`, `left`, `width`, and `height`.

```javascript
/**
 * Construct a bounding box relative in our coordinate space
 * that we can attach arrow starting points to.
 *
 * @param {HTMLElement} el - The element to calculate the bounding box for.
 * @returns {{top: number, right: number, bottom: number, left: number, width: number, height: number}}
 */
export function getElPosition(el) {
  const annotationBbox = el.getBoundingClientRect();
  const parentBbox = el.parentNode.getBoundingClientRect();
  const coords = {
    top: annotationBbox.top - parentBbox.top,
    right: annotationBbox.right - parentBbox.left,
    bottom: annotationBbox.bottom - parentBbox.top,
    left: annotationBbox.left - parentBbox.left,
    width: annotationBbox.width,
    height: annotationBbox.height
  };
  return coords;
}

```

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

### Import LayerCake Components Directly

Source: https://layercake.graphics/guide

Shows how to import LayerCake components directly from their source files, which can be useful for building the library within your project or for customization. This approach treats LayerCake as a standard Svelte component.

```javascript
<script>
  import LayerCake from './layercake/src/LayerCake.svelte';
  import Svg from './layercake/src/layouts/Svg.svelte';
  // etc...
</script>

```

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

### Example Data for Visualization

Source: https://layercake.graphics/example/Scatter

This data represents a time series, likely for plotting on a chart. It includes a year and a corresponding value.

```csv
myX,myY
1979,7.19
1980,7.83
1981,7.24
1982,7.44
1983,7.51
1984,7.1
1985,6.91
1986,7.53
1987,7.47
1988,7.48
1989,7.03
1990,6.23
1991,6.54
1992,7.54
1993,6.5
1994,7.18
1995,6.12
```

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

### LayerCake Accessor Shorthand and Context Access (Svelte)

Source: https://layercake.graphics/guide

Illustrates how to use shorthand string notation for accessors (e.g., `x='x'`) and how to retrieve accessor functions (x, y) from the LayerCake context within a Svelte script. This code snippet is used for rendering circles based on data points and scales.

```svelte
<LayerCake
  x='x'
  <!-- equivalent to -->
  x={ d => d.x }
>
</LayerCake>

<script>
  import { getContext } from 'svelte';
  const { data, x, y } = getContext('LayerCake');
</script>

{#each $data as d}
  <circle cx={$xScale($x(d))} cy={$yScale($y(d))} />
{/each}
```

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

### Sample Data for Brush Visualization

Source: https://layercake.graphics/example/Brush

This is a sample dataset in a CSV-like format, containing two columns: 'myX' and 'myY'. This data is likely intended for use with a charting or visualization library, where 'myX' could represent time or an index, and 'myY' represents a corresponding value. The data spans from 1979 to 2016.

```text
myX,myY
1979,7.19
1980,7.83
1981,7.24
1982,7.44
1983,7.51
1984,7.1
1985,6.91
1986,7.53
1987,7.47
1988,7.48
1989,7.03
1990,6.23
1991,6.54
1992,7.54
1993,6.5
1994,7.18
1995,6.12
1996,7.87
1997,6.73
1998,6.55
1999,6.23
2000,6.31
2001,6.74
2002,5.95
2003,6.13
2004,6.04
2005,5.56
2006,5.91
2007,4.29
2008,4.72
2009,5.38
2010,4.92
2011,4.61
2012,3.62
2013,5.35
2014,5.28
2015,4.63
2016,4.72
```

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

### JavaScript Brush Interaction Handlers

Source: https://layercake.graphics/example/Brush

These JavaScript functions, designed for use with a framework like Layercake or Svelte, handle user interactions for a brush component. They define logic for moving the entire brush and adjusting its minimum or maximum boundaries based on user input (p). Dependencies include a `clamp` function and reactive variables `min`, `max`, `left`, and `right`. Input is typically a starting state and a pointer position; output updates `min` and `max` values.

```javascript
const move = handler((start, p) => {
    const d = clamp(p - start.p, -start.min, 1 - start.max);
    min = start.min + d;
    max = start.max + d;
  });

  const adjust_min = handler((start, p) => {
    min = p > start.max ? start.max : p;
    max = p > start.max ? p : start.max;
  });

  const adjust_max = handler((start, p) => {
    min = p < start.min ? p : start.min;
    max = p < start.min ? start.min : p;
  });

  let left = $derived(min !== null ? 100 * min : null);
  let right = $derived(max !== null ? 100 * (1 - max) : null);
```

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

### JavaScript Circle Packing Algorithm

Source: https://layercake.graphics/example/Beeswarm

Implements a circle packing algorithm to arrange circles within a given area. It optimizes placement to avoid overlaps and uses derived data for dynamic updates. Dependencies include the '$derived' and '$data' reactive primitives.

```javascript
function dodge(circles, { rds, x: getX }) {
    let head, tail;
    // Initialize circles with x-coordinate and reset linked list pointers.
    for (const b of circles) {
      b.x = getX(b);
      b.next = null;
      if (!head) head = tail = b;
      else {
        tail.next = b;
        tail = b;
      }
    }

    // Sort circles by x-coordinate for efficient processing.
    circles.sort((a, b) => a.x - b.x);

    // Reconstruct linked list after sorting.
    head = tail = null;
    for (const b of circles) {
      b.next = null;
      if (!head) head = tail = b;
      else {
        tail.next = b;
        tail = b;
      }
    }

    // Define a helper function to check for intersections.
    function intersects(x, y) {
      let a = head;
      while (a) {
        if (a.x === x && a.y === y) return true;
        a = a.next;
      }
      return false;
    }

    // Place each circle sequentially.
    for (const b of circles) {
      // Remove circles from the queue that can’t intersect the new circle b.
      while (head && head.x < b.x - rds) head = head.next;

      // Choose the minimum non-intersecting tangent.
      if (intersects(b.x, (b.y = 0))) {
        let a = head;
        b.y = Infinity;
        do {
          let y = a.y + Math.sqrt(rds - (a.x - b.x) ** 2);
          if (y < b.y && !intersects(b.x, y)) b.y = y;
          a = a.next;
        } while (a);
      }

      // Add b to the queue.
      b.next = null;
      if (head === null) head = tail = b;
      else {
        tail.next = b;
        tail = b;
      }
    }

    return circles;
  }
  let circles = $derived(dodge($data, { rds: r * 2 + spacing + strokeWidth, x: $xGet }));
```

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

### Calculate Axis Starting Position in JavaScript

Source: https://layercake.graphics/example-ssr/ClevelandDotPlot

This JavaScript code derives the starting x-coordinate (`x1`) for elements like gridlines and tick marks. It accounts for the `tickGutter` and the width of the tick labels or tick marks, adjusting based on the `labelPosition`.

```javascript
  let x1 = $derived(-tickGutter - (labelPosition === 'above' ? widestTickLen : tickLen));
```

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

### Sample Data for myX, myY - Dataset 3

Source: https://layercake.graphics/example-ssr/SyncedBrush

This dataset provides another set of time-series data in 'myX' and 'myY' format. It's structured for direct use in data analysis or visualization applications, where 'myX' serves as the time-axis and 'myY' as the value-axis.

```csv
myX,myY
1979,5.43
1980,7.27
1981,8.82
1982,13.14
1983,14.63
1984,5.41
1985,4.76
1986,12.46
1987,10.38
1988,0.06
1989,9.35
1990,5.84
1991,6.94
1992,2.78
1993,9.84
1994,6.48
1995,9.97
1996,4.85
1997,5.35
1998,4.12
1999,1.56
2000,10.11
2001,2.04
2002,4.03
2003,3.85
2004,8.61
2005,1.44
2006,9.41
2007,3.51
2008,4.12
2009,6.76
2010,3.65
2011,6.76
2012,6.46
2013,0.75
2014,9.93
2015,8.11
2016,1.4
```

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

### Sample Data for myX, myY - Dataset 4

Source: https://layercake.graphics/example-ssr/SyncedBrush

This fourth dataset continues the pattern of providing time-series data in a two-column CSV format ('myX', 'myY'). It is intended for use in data visualization libraries or custom plotting functions within the project, allowing for multiple data series to be displayed and compared.

```csv
myX,myY
1979,10.27
1980,1.99
1981,2.25
1982,3.56
1983,0.32
1984,4.18
1985,1.75
1986,2.35
1987,2.54
1988,6.53
1989,5.02
1990,3.4
1991,4.79
1992,1.29
1993,12.65
1994,5.26
1995,3.11
1996,14.92
1997,13.21
1998,10.34
1999,5.02
2000,9.11
2001,13.24
2002,8.02
2003,1.54
2004,0.25
2005,6.02
2006,5.91
2007,6.83
2008,6.76
2009,3.7
2010,2.3
2011,3.37
2012,4.02
2013,2.15
2014,2.33
2015,5.98
2016,6.27
```

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

### Svelte Component for LayerCake Circle Pack

Source: https://layercake.graphics/example/CirclePack

The main Svelte component that sets up the LayerCake environment and integrates the CirclePack component. It imports data from a CSV file, configures LayerCake with padding and data, and passes necessary keys and styling props to the CirclePack component.

```svelte
<script>
  import { LayerCake, Html } from 'layercake';

  import CirclePack from './_components/CirclePack.html.svelte';

  // This example loads csv data as json and converts numeric columns to numbers using @rollup/plugin-dsv. See vite.config.js for details
  import data from './_data/fruitGroups.csv';

  /** @type {string} */
  const idKey = 'fruit';
  /** @type {string} */
  const valueKey = 'value';
</script>

<div class="chart-container">
  <LayerCake padding={{ top: 0, bottom: 20, left: 30 }} {data}>
    <Html>
      <CirclePack
        {idKey}
        {valueKey}
        fill="#ff00cc"
        stroke="#9f0080"
        textColor="#61004e"
        textStroke="#ffdbf8"
        textStrokeWidth={1}
      />
    </Html>
  </LayerCake>
</div>

<style>
  /*
    The wrapper div needs to have an explicit width and height in CSS.
    It can also be a flexbox child or CSS grid element.
    The point being it needs dimensions since the <LayerCake> element will
    expand to fill it.
  */
  .chart-container {
    width: 100%;
    height: 250px;
  }
</style>
```