Best way to make Grouped Bar/Column Chart?

[mhkeller]

@techniq I know you've done this in in LayerChart. Do you have any layercake-only example that you'd be able to contribute based on what you've learned doing that?

[mhkeller]

This was actually not too bad. I haven't done the axis yet but here's an example: https://svelte.dev/repl/244d11f1a56949e7956865ff0f2fdbbd?version=3.46.2

edit: I tweaked it so that the range of the rScale (used for subgroups) is now the bandwidth of the xScale. I don't really love how this is done in the ColumnGrouped component and think it would be better if I created a wrapper component to do this in.

But an even better approach would be to be able to define that in the <LayerCake> component somehow.

[mhkeller]

Here's another approach where you create the scale yourself and keep it in sync with the chart-container. The downside is you have to recreate the padding convention yourself and also calculate the domain https://svelte.dev/repl/b03925c03ab24c6ab0f046dbea312def?version=3.46.2

[mhkeller]

I converted this to a discussion. I wonder if the best way to handle this would be to add a new prop called linkScales to the LayerCake component like:

  <LayerCake
    padding={{ top: 0, right: 10, bottom: 20, left: 20 }}
    x={xKey}
    y={yKey}
    r={subgroupKey}
    yDomain={[0, null]}

    xScale={scaleBand().paddingInner(0.1).round(true)}
    rScale={scaleBand().paddingInner(0).round(true)}
    rDomain={subgroupNames}
	
    linkScales={{
      r: {
        basis: 'x', // could also be an array
        scale: (rScale, { xScale }) => {
          rScale.range([0, xScale.bandwidth()]);
          return rScale;
        }
      }
    }}

    data={groups}
    {flatData}
  >

I don't think this can be accomplished with the current API because you'd have to change the order in which the scales are created and understand the dependency tree, which seems like too much to figure out.

What's nice about this is it lets you still get all of the same auto-calculated values as you normally would. Another API would be to have range and domain keys on this object, but I think, as an escape hatch, simply returning the scale after the user modifies it allows for the most possibilities. For example, the user could change the .unknown method or something.

[techniq]

Hey @mhkeller, sorry I've been running around a good bit this week and haven't caught up on the thread completely, but it sounds like you're running into similar issues/improvements to make it easier to derived 1 scale from another (x1scale from an xScale using .bandwidth(), for example). linkScales is interesting.

A few older discussions on this topic

• Grouped Bar Chart #29
• Tweened scales / bounds #88 (comment)

Having these derived scales calculated and available on the LayerCake context would make things much nicer, including for tooltips (more of a LayerChart need) and components within the context (labels, for example).

I've also been experimenting with improvements to LayerCake (Chart and layout components) that I need for LayerChart and have been meaning to sync up with you, I've just been buried under too many items, and trying to finish what I have in the air before I kick up something new. :)

Would you be interested in doing a video chat in the next few weeks?

[mhkeller]

Funny that I repeated almost verbatim what you ran into in this comment in #29.

To address your derived scale question, I wonder if you could expand this syntax where if the key in the linkScales object is not one of the default x, y, z or r options, it just creates a new scale. in that scenario, I'm not sure you should also get thingRange and thingDomain and all of the other computer scale props...

linkScales={{
  thing: {
    basis: 'x' // does `xScale.copy()`
   }
}}

Send me an email and we'll coordinate a good time!

[mhkeller]

Playing around with a prop like this...

linkScales={{
  rScale: ({ xScale, rScale }) => {
    rScale.range([0, xScale.bandwidth()]);
    return rScale;
  }
}}

... is a bit hard with the current code since each scale is a derived store so you can't easily reset it with something like:

$: if ($_linkScales.rScale) {
  $rScale_d = $_linkScales.rScale({
    xScale: $xScale_d,
    yScale: $yScale_d,
    zScale: $zScale_d,
    rScale: $rScale_d
  });
}

You could perhaps create new scales altogether, though...

const newScales = {};
$: if ($_linkScales) {
  for (const [name, fn] of Object.entries($_linkScales)) {  
    newScales[name] = fn({
      xScale: $xScale_d.copy(),
      yScale: $yScale_d.copy(),
      zScale: $zScale_d.copy(),
      rScale: $rScale_d.copy()
    })
  }
}

$: context = {
  ...newScales,
  // the rest...
}

[mhkeller]

Here's an implementation on a branch: https://github.com/mhkeller/layercake/compare/derive-scales?expand=1