Scatter plot with two dataset

[MuslemRahimi]

Scatter plot with two dataset

[mhkeller]

Take a look at examples that use the z-dimension to assign a color scale: https://layercake.graphics/example/ClevelandDotPlot. That will let you assign fill colors.

Alternatively, this is less reusable and not as good, but you could also apply a data-attribute (or class) using the name of your dataset field and in CSS, assign different styles based on class:

{#each $data as d}
  <circle data-which-dataset="{d.dataset}" cx={$xGet(d)} cy={$yGet(d)} />
{/each}

<style>
  circle[data-which-dataset="a"] {
    fill: red;
    stroke: blue;
  }
  circle[data-which-dataset="b"] {
    fill: orange;
    stroke: yellow;
  }
</style>

[MuslemRahimi]

Thanks for the support

[mhkeller]

Set your ticks manually with ticks={[19, 20, 21, 21 etc...]} and then use the format function as you've described.

[mhkeller]

It depends on what you mean by "two datasets". I would say something is two datasets when they have different schemas (different x and y fields). Looking at your example, this would be easiest to plot as "one dataset" with a third field describing the color value.

[
  { x: 'FY19', y: 15, dataset: 'a' },

  { x: 'FY20', y: 10, dataset: 'a' },
  { x: 'FY20', y: 12, dataset: 'b' },

  { x: 'FY21', y: 19, dataset: 'a' },
  { x: 'FY21', y: 18, dataset: 'b' },

  // etc...
]

This is not your use case, as I understand it, but on the rare occasion you have two different datasets with different schemas or scale values that you want superimposed on one another, you can use the set the position prop to 'absolute'.

[MuslemRahimi]

It depends on what you mean by "two datasets". I would say something is two datasets when they have different schemas (different x and y fields). Looking at your example, this would be easiest to plot as "one dataset" with a third field describing the color value.

[
  { x: 'FY19', y: 15, dataset: 'a' },

  { x: 'FY20', y: 10, dataset: 'a' },
  { x: 'FY20', y: 12, dataset: 'b' },

  { x: 'FY21', y: 19, dataset: 'a' },
  { x: 'FY21', y: 18, dataset: 'b' },

  // etc...
]

This is not your use case, as I understand it, but on the rare occasion you have two different datasets with different schemas or scale values that you want superimposed on one another, you can use the set the position prop to 'absolute'.

Thanks for the quick reply.
Yes that is also possible in my use case :)

Another question, I didn't quite understood how to separately define fill and stroke color for dataset "a" and "b"

[MuslemRahimi]

Sorry about the noob question but my x label should be "FY19" etc but when I do it in my way i get also in between labels such as "FY19.2" etc.
I was trying to do it like this

export let formatTick = d => 'FY'+d;

I am playing around with the example code of the XAxis:

  @component
  Generates an HTML x-axis, useful for server-side rendered charts.  This component is also configured to detect if your x-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
 -->
<script>
  import { getContext } from 'svelte';

  const { xScale } = getContext('LayerCake');

  /** @type {Boolean} [gridlines=true] - Extend lines from the ticks into the chart space. */
  export let gridlines = true;

  /** @type {Boolean} [tickMarks=false] - Show a vertical mark for each tick. */
  export let tickMarks = false;

  /** @type {Boolean} [baseline=false] – Show a solid line at the bottom. */
  export let baseline = false;

  /** @type {Boolean} [snapTicks=false] - Instead of centering the text on the first and the last items, align them to the edges of the chart. */
  export let snapTicks = false;

  /** @type {Function} [formatTick=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
  export let formatTick = d => d;

  /** @type {Number|Array|Function} [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. */
  export let ticks = undefined;

  /** @type {Number} [yTick=7] - The distance from the baseline to place each tick value, in pixels. */
  export let yTick = 7;

  $: isBandwidth = typeof $xScale.bandwidth === 'function';

  $: tickVals = Array.isArray(ticks) ? ticks :
    isBandwidth ?
      $xScale.domain() :
      typeof ticks === 'function' ?
        ticks($xScale.ticks()) :
          $xScale.ticks(ticks);
</script>

<div class='axis x-axis' class:snapTicks>
  {#each tickVals as tick, i (tick)}
    {#if gridlines !== false}
      <div class="gridline" style='left:{$xScale(tick)}%;top: 0px;bottom: 0;'></div>
    {/if}
    {#if tickMarks === true}
      <div class="tick-mark" style='left:{$xScale(tick) + (isBandwidth ? $xScale.bandwidth() / 2 : 0)}%;height:6px;bottom: -6px;'></div>
    {/if}
    <div
      class='tick tick-{ i }'
      style='left:{$xScale(tick) + (isBandwidth ? $xScale.bandwidth() / 2 : 0)}%;top:100%;'>
      <div
        class="text"
        style='top:{(yTick)}px;'>{formatTick(tick)}</div>
    </div>
  {/each}
  {#if baseline === true}
    <div class="baseline" style='top: 100%;width: 100%;'></div>
  {/if}
</div>

<style>
  .axis,
  .tick,
  .tick-mark,
  .gridline,
  .baseline {
    position: absolute;
  }
  .axis {
    width: 100%;
    height: 100%;
  }
  .tick {
    font-size: .725em;
    font-weight: 200;
  }

  .gridline {
    border-left: 1px dashed #aaa;
  }

  .tick-mark {
    border-left: 1px solid #aaa;
  }
  .baseline {
    border-top: 1px solid #aaa;
  }

  .tick .text {
    color: #666;
    position: relative;
    white-space: nowrap;
    transform: translateX(-50%);
  }
  /* This looks a little better at 40 percent than 50 */
  .axis.snapTicks .tick:last-child {
    transform: translateX(-40%);
  }
  .axis.snapTicks .tick.tick-0 {
    transform: translateX(40%);
  }
</style>``

[MuslemRahimi]

My plot does not show the value of forecast when the other dataset "actual" is null.
Is there a way to show it anyways?

[
  {
    "FY": 2018,
    "val": 1.073229,
    "dataset": "actual"
  },
  {
    "FY": 2018,
    "val": 1.03493423,
    "dataset": "forecast"
  },
  {
    "FY": 2019,
    "val": 1.578173,
    "dataset": "actual"
  },
  {
    "FY": 2019,
    "val": 0.861098466,
    "dataset": "forecast"
  },
  {
    "FY": 2020,
    "val": 2.929491,
    "dataset": "actual"
  },
  {
    "FY": 2020,
    "val": 1.92266011,
    "dataset": "forecast"
  },
  {
    "FY": 2021,
    "val": 4.611856,
    "dataset": "actual"
  },
  {
    "FY": 2021,
    "val": 4.83153,
    "dataset": "forecast"
  },
  {
    "FY": 2022,
    "val": 5.599864,
    "dataset": "actual"
  },
  {
    "FY": 2022,
    "val": 1.65109,
    "dataset": "forecast"
  },
  {
    "FY": 2023,
    "val": 7.06,
    "dataset": "actual"
  },
  {
    "FY": 2023,
    "val": 6.96,
    "dataset": "forecast"
  },
  {
    "FY": 2024,
    "val": null,
    "dataset": "actual"
  },
  {
    "FY": 2024,
    "val": 8.23,
    "dataset": "forecast"
  },
  {
    "FY": 2025,
    "val": null,
    "dataset": "actual"
  },
  {
    "FY": 2025,
    "val": 9.96776819,
    "dataset": "forecast"
  }
]

[mhkeller]

It should – there must be some other error. You may find better luck posting on Stack Overflow. I try to keep discussion here focused on bugs and issues with the library.

[mhkeller]

I would just remove those from your dataset, though, it's probably throwing an error because the value is not a number. Filter for non-null values.