Simple line chart with Svelte

Axis.svelte

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

  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)
          .tickFormat((d) => timeFormat("%a")(d));
        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} />

line-chart.svelte

<script>
  import {
    csv,
    extent,
    scaleLinear,
    scaleTime,
    line,
    curveNatural,
    timeFormat,
  } from "d3";
  import { onMount } from "svelte";

  import Axis from "./Axis.svelte";

  let dataset = [];
  const row = function (data) {
    data.temperature = +data.temperature;
    data.timestamp = new Date(data.timestamp);
    return data;
  };
  onMount(async () => {
    dataset = await csv(
      "https://gist.githubusercontent.com/curran/60b40877ef898f19aeb8/raw/9476be5bd15fb15a6d5c733dd79788fb679c9be9/week_temperature_sf.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;

  const tickFormat = (value) => timeFormat("%a")(value);
  $: xScale = scaleTime()
    .domain(extent(dataset, (d) => d.timestamp))
    .range([0, innerWidth])
    .nice();

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

  $: line_gen = line()
    .curve(curveNatural)
    .x((d) => xScale(d.timestamp))
    .y((d) => yScale(d.temperature))(dataset);
</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)`}
        >Temperature</text
      >
      <path d={line_gen} />
      <text x={innerWidth / 2} y={innerHeight + 35}>Timestamp</text>
    </g>
  </svg>
</main>

<style>
  path {
    fill: transparent;
    stroke: rgb(18, 153, 90);
    stroke-width: 2.5;
    stroke-linejoin: round;
  }
</style>