Scatter plot with D3 and Svelte

App.svelte

<script>
  import { csv, extent, scaleLinear, scaleOrdinal } from "d3";
  import { onMount } from "svelte";

  import Axis from "./Axis.svelte";

  let dataset = [];
  const row = function (data) {
    data.sepal_length = +data.sepal_length;
    data.sepal_width = +data.sepal_width;
    data.petal_length = +data.petal_length;
    data.petal_width = +data.petal_width;
    return data;
  };
  onMount(async () => {
    dataset = await csv(
      "https://gist.githubusercontent.com/curran/9e04ccfebeb84bcdc76c/raw/3d0667367fce04e8ca204117c290c42cece7fde0/iris.csv",
      row
    ).then((data) => {
      return data;
    });
  });

  const margin = { top: 15, bottom: 50, left: 50, right: 20 };
  const width = 900,
    height = 600;

  const innerHeight = height - margin.top - margin.bottom,
    innerWidth = width - margin.left - margin.right;

  $: xScale = scaleLinear()
    .domain(extent(dataset, (d) => d.petal_width))
    .range([0, innerWidth]);

  $: yScale = scaleLinear()
    .domain(extent(dataset, (d) => d.petal_length))
    .range([innerHeight, 0]);

  const classSet = new Set(dataset.map((d) => d.class));

  $: colorScale = scaleOrdinal()
    .domain(classSet)
    .range(["#003049", "#d62828", "#f77f00"]);
</script>

<main>
  <svg {width} {height}>
    <g transform={`translate(${margin.left},${margin.top})`}>
      <Axis {innerHeight} {margin} scale={xScale} position="bottom" />
      <Axis {innerHeight} {margin} scale={yScale} position="left" />
      <text transform={`translate(${-30},${innerHeight / 2}) rotate(-90)`}
        >Petal Length</text
      >
      {#each dataset as data, i}
        <circle
          cx={xScale(data.petal_width)}
          cy={yScale(data.petal_length)}
          r="5"
          style={`fill:${colorScale(data.class)}`}
        />
      {/each}
      <text x={innerWidth / 2} y={innerHeight + 35}>Petal Width</text>
    </g>
  </svg>
</main>

Axis.svelte

<script>
  import { select, selectAll } from "d3-selection";
  import { axisBottom, axisLeft } from "d3-axis";

  export let innerHeight;
  export let margin;
  export let position;
  export let scale;

  let transform;
  let g;

  $: {
    select(g).selectAll("*").remove();

    let axis;
    switch (position) {
      case "bottom":
        axis = axisBottom(scale).tickSizeOuter(0);
        transform = `translate(0, ${innerHeight})`;
        break;
      case "left":
        axis = axisLeft(scale).tickSizeOuter(0);
        transform = `translate(${margin}, 0)`;
    }

    select(g).call(axis);
  }
</script>

<g class="axis" bind:this={g} {transform} />