Scatter.svg.svelte component

<!--
  @component
  Generates an SVG scatter plot. If the x or y scale is a band scale, each circle sits in the middle of its band. See the [timeplot chart](https://layercake.graphics/example/Timeplot) for an example.
 -->
<script>
  import { getLayerCakeContext } from 'layercake';

  const k = getLayerCakeContext();

  /**
   * @typedef {Object} Props
   * @property {number} [r=5] - The circle's radius.
   * @property {string} [fill='#0cf'] - The circle's fill color.
   * @property {string} [stroke='#000'] - The circle's stroke color.
   * @property {number} [strokeWidth=0] - The circle's stroke width in pixels.
   */

  /** @type {Props} */
  let { r = 5, fill = '#0cf', stroke = '#000', strokeWidth = 0 } = $props();
</script>

<g class="scatter-group">
  {#each k.data as d}
    <circle
      cx={k.xGet(d) + (k.xScale.bandwidth ? k.xScale.bandwidth() / 2 : 0)}
      cy={k.yGet(d) + (k.yScale.bandwidth ? k.yScale.bandwidth() / 2 : 0)}
      {r}
      {fill}
      {stroke}
      stroke-width={strokeWidth}
    />
  {/each}
</g>