Scatter.svg.svelte component

Generates an SVG scatter plot. This component can also work if the x- or y-scale is ordinal, i.e. it has a .bandwidth method. See the timeplot chart for an example.

Param	Default	Required	Description
r `Number`	`5`	no	The circle's radius.
fill `String`	`'#0cf'`	no	The circle's fill color.
stroke `String`	`'#000'`	no	The circle's stroke color.
strokeWidth `Number`	`0`	no	The circle's stroke width.

Used in these examples:

Scatter.svg.svelte

<!--
  @component
  Generates an SVG scatter plot. This component can also work if the x- or y-scale is ordinal, i.e. it has a `.bandwidth` method. See the [timeplot chart](https://layercake.graphics/example/Timeplot) for an example.
 -->
<script>
  import { getContext } from 'svelte';

  const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');

  /** @type {Number} [r=5] – The circle's radius. */
  export let r = 5;

  /** @type {String} [fill='#0cf'] – The circle's fill color. */
  export let fill = '#0cf';

  /** @type {String} [stroke='#000'] – The circle's stroke color. */
  export let stroke = '#000';

  /** @type {Number} [strokeWidth=0] – The circle's stroke width. */
  export let strokeWidth = 0;
</script>

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