Line + area

<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';

  // The CSV rows are parsed, and their numbers typed, by @rollup/plugin-dsv. See vite.config.js
  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>
  /* Give the wrapper a width and height. LayerCake fills it. */
  .chart-container {
    width: 100%;
    height: 250px;
  }
</style>

<!--
  @component
  Generates an SVG line shape.
 -->
<script>
  import { getLayerCakeContext } from 'layercake';

  const k = getLayerCakeContext();

  /**
   * @typedef {Object} Props
   * @property {string} [stroke='#ab00d6'] - The line's stroke color.
   */

  /** @type {Props} */
  let { stroke = '#ab00d6' } = $props();

  let path = $derived(
    'M' +
      k.data
        .map(d => {
          return k.xGet(d) + ',' + k.yGet(d);
        })
        .join('L')
  );
</script>

<path class="path-line" d={path} {stroke}></path>

<style>
  .path-line {
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-width: 2px;
  }
</style>

<!--
  @component
  Generates an SVG area shape.
 -->
<script>
  import { getLayerCakeContext } from 'layercake';

  const k = getLayerCakeContext();

  /**
   * @typedef {Object} Props
   * @property {string} [fill='#ab00d610'] - The shape's fill color.
   */

  /** @type {Props} */
  let { fill = '#ab00d610' } = $props();

  let path = $derived(
    'M' +
      k.data
        .map(d => {
          return k.xGet(d) + ',' + k.yGet(d);
        })
        .join('L')
  );

  // Close the line along the bottom of the chart to make the area
  /** @type {string} */
  let area = $derived.by(() => {
    const yRange = k.yScale.range();
    return (
      path +
      ('L' +
        k.xScale(k.extents.x ? k.extents.x[1] : 0) +
        ',' +
        yRange[0] +
        'L' +
        k.xScale(k.extents.x ? k.extents.x[0] : 0) +
        ',' +
        yRange[0] +
        'Z')
    );
  });
</script>

<path class="path-area" d={area} {fill}></path>

<!--
  @component
  Generates an SVG x-axis along the bottom of the chart. If the x scale is a band scale, each tick sits in the middle of its band.
 -->
<script>
  import { getLayerCakeContext } from 'layercake';

  const k = getLayerCakeContext();

  /**
   * @typedef {Object} Props
   * @property {boolean} [tickMarks=false] - Show a vertical mark at each tick.
   * @property {boolean} [gridlines=true] - Show gridlines extending into the chart area.
   * @property {number} [tickMarkLength=6] - The length of the tick mark.
   * @property {boolean} [showBaseline=false] - Show a solid line along the bottom of the chart.
   * @property {boolean} [snapLabels=false] - Instead of centering the text labels on the first and the last items, align them to the edges of the chart.
   * @property {(d: any) => string} [format=d => d] - Formats a tick value for display.
   * @property {number|Array<any>|((ticks: Array<any>) => Array<any>)} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function.
   * @property {number} [tickGutter=0] - The gap in pixels between the bottom of the chart area and the start of the tick.
   * @property {number} [dx=0] - Horizontal offset of the label in pixels.
   * @property {number} [dy=12] - Vertical offset of the label in pixels.
   */

  /** @type {Props} */
  let {
    tickMarks = false,
    gridlines = true,
    tickMarkLength = 6,
    showBaseline = false,
    snapLabels = false,
    format = d => d,
    ticks = undefined,
    tickGutter = 0,
    dx = 0,
    dy = 12
  } = $props();

  // Snapped labels anchor the first tick to the left edge and the last to the right
  /** @param {number} i */
  function textAnchor(i) {
    if (snapLabels === true) {
      if (i === 0) {
        return 'start';
      }
      if (i === tickVals.length - 1) {
        return 'end';
      }
    }
    return 'middle';
  }

  let tickLen = $derived(tickMarks === true ? (tickMarkLength ?? 6) : 0);

  let isBandwidth = $derived(typeof k.xScale.bandwidth === 'function');

  /** @type {Array<any>} */
  let tickVals = $derived(
    Array.isArray(ticks)
      ? ticks
      : isBandwidth
        ? k.xScale.domain()
        : typeof ticks === 'function'
          ? ticks(k.xScale.ticks())
          : k.xScale.ticks(ticks)
  );

  let halfBand = $derived(isBandwidth ? k.xScale.bandwidth() / 2 : 0);
</script>

<g class="axis x-axis" class:snapLabels>
  {#if showBaseline === true}
    <line class="baseline" y1={k.height} y2={k.height} x1="0" x2={k.width} />
  {/if}

  {#each tickVals as tick, i (tick)}
    <!-- Fall back to the chart height if the chart has no y dimension -->
    <g
      class="tick tick-{i}"
      transform="translate({k.xScale(tick)},{k.yRange ? Math.max(...k.yRange) : k.height})"
    >
      {#if gridlines === true}
        <line class="gridline" x1={halfBand} x2={halfBand} y1={-k.height} y2="0" />
      {/if}
      {#if tickMarks === true}
        <line
          class="tick-mark"
          x1={halfBand}
          x2={halfBand}
          y1={tickGutter}
          y2={tickGutter + tickLen}
        />
      {/if}
      <text x={halfBand} y={tickGutter + tickLen} {dx} {dy} text-anchor={textAnchor(i)}
        >{format(tick)}</text
      >
    </g>
  {/each}
</g>

<style>
  .tick {
    font-size: 11px;
  }

  line,
  .tick line {
    stroke: #aaa;
    stroke-dasharray: 2;
  }

  .tick text {
    fill: #666;
  }

  .tick .tick-mark,
  .baseline {
    stroke-dasharray: 0;
  }
  /* Push the snapped end labels 3px outward so they clear the chart edge */
  .axis.snapLabels .tick:last-child text {
    transform: translateX(3px);
  }
  .axis.snapLabels .tick.tick-0 text {
    transform: translateX(-3px);
  }
</style>

<!--
  @component
  Generates an SVG y-axis along the left edge of the chart. If the y scale is a band scale, each tick sits in the middle of its band.
 -->
<script>
  import { getLayerCakeContext } from 'layercake';

  const k = getLayerCakeContext();

  /**
   * @typedef {Object} Props
   * @property {boolean} [tickMarks=false] - Show a horizontal mark at each tick.
   * @property {'even'|'above'} [labelPosition='even'] - Whether the label sits level with its tick ('even') or above it ('above').
   * @property {boolean} [snapBaselineLabel=false] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark.
   * @property {boolean} [gridlines=true] - Show gridlines extending into the chart area.
   * @property {number} [tickMarkLength] - Length of the tick mark in pixels. Defaults to the width of the widest label when `labelPosition` is 'above', otherwise 6.
   * @property {(d: any) => string} [format=d => d] - Formats a tick value for display.
   * @property {number|Array<any>|((ticks: Array<any>) => Array<any>)} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return.
   * @property {number} [tickGutter=0] - The gap in pixels between the left edge of the chart area and the tick.
   * @property {number} [dx=0] - Horizontal offset of the label in pixels.
   * @property {number} [dy=0] - Vertical offset of the label in pixels.
   * @property {number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value).
   */

  /** @type {Props} */
  let {
    tickMarks = false,
    labelPosition = 'even',
    snapBaselineLabel = false,
    gridlines = true,
    tickMarkLength = undefined,
    format = d => d,
    ticks = 4,
    tickGutter = 0,
    dx = 0,
    dy = 0,
    charPixelWidth = 7.25
  } = $props();

  /** @param {number} sum
   *  @param {string} val */
  function calcStringLength(sum, val) {
    if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
    return sum + charPixelWidth;
  }

  let isBandwidth = $derived(typeof k.yScale.bandwidth === 'function');
  /** @type {Array<any>} */
  let tickVals = $derived(
    Array.isArray(ticks)
      ? ticks
      : isBandwidth
        ? k.yScale.domain()
        : typeof ticks === 'function'
          ? ticks(k.yScale.ticks())
          : k.yScale.ticks(ticks)
  );
  let widestTickLen = $derived(
    Math.max(
      10,
      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 halfBand = $derived(isBandwidth ? k.yScale.bandwidth() / 2 : 0);
  let maxTickValPx = $derived(Math.max(...tickVals.map(k.yScale)));
</script>

<g class="axis y-axis">
  {#each tickVals as tick (tick)}
    {@const tickValPx = k.yScale(tick)}
    <!-- Fall back to the left edge if the chart has no x dimension -->
    <g class="tick tick-{tick}" transform="translate({k.xRange ? k.xRange[0] : 0}, {tickValPx})">
      {#if gridlines === true}
        <line class="gridline" {x1} x2={k.width} y1={halfBand} y2={halfBand}></line>
      {/if}
      {#if tickMarks === true}
        <line class="tick-mark" {x1} x2={x1 + tickLen} y1={halfBand} y2={halfBand}></line>
      {/if}
      <text
        x={x1}
        y={halfBand}
        dx={dx + (labelPosition === 'even' ? -3 : 0)}
        text-anchor={labelPosition === 'above' ? 'start' : 'end'}
        dy={dy +
          (labelPosition === 'above' || (snapBaselineLabel === true && tickValPx === maxTickValPx)
            ? -3
            : 4)}>{format(tick)}</text
      >
    </g>
  {/each}
</g>

<style>
  .tick {
    font-size: 11px;
  }

  .tick line {
    stroke: #aaa;
  }
  .tick .gridline {
    stroke-dasharray: 2;
  }

  .tick text {
    fill: #666;
  }

  /* A solid line at the zero tick */
  .tick.tick-0 line {
    stroke-dasharray: 0;
  }
</style>

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