Apparently this is annoying for people.

Heyo random layercake.graphics thought: you might change "column" in the top example dropdown to "column with annotation" or something that mentions that there is an annotation. (personal user story: I remembered that there was an annotation example but couldn't find it until I googled...). Not sure this will happen to anyone else, ever, but...

Accessor functions can return arrays of values as well. This should be added in the docs.

const vals = calcExtents([{start: 0, end: 1}, {start: -10000, end: 0}], [
  { field: 'y', accessor: d => [d.start, d.end] }
]);
// [-10000, 1]

I think the map examples would be better if they didn't join any data to the geography files and instead relied on a lookup inside the map component. This would make these examples easier to build off of so you can more quickly use these topojson files with your own data without a join step.

Hi all,

All the examples import CSV files using a Rollup plugin for d3-dsv, but this isn't advertised. I think it'd help new users if you called this out somewhere in the docs so that they have a better understanding of the expected format for the data for each of the chart types. Maybe this is table stakes for some people, but as someone who wasn't intimately familiar with D3 it took me a little bit just to figure out the structure of the data in the examples was instead of jumping right in and building stuff.

Per mhkeller/layercake#44

• activeGetters changes
• calcExtents second argument format
• smallMultiples example
• timePlot example

Will push this version when LayerCake 5.0 publishes.

I've just started recently with Layer Cake, and love it so far! I noticed a tiny issue with downloaded Zip files, for example if you click the download button on https://layercake.graphics/example/Bar . When I use unzip in MacOS Terminal, it asks me if I want to replace Bar.svelte, AxisX.svelte and AxisY.svelte which (I think!) means that there are two files with each of these names in the zip.

To show the list of files that seem to be duplicated:

unzip -l layercake-Bar.zip | awk '{f=$4; if (seen[f]) print f; seen[f]=1}'

Again, this is a really minor issue that isn't causing me problems, and I hope it's not just down to some silly mistake on my part!

PRs welcome!

• Circle pack
• Sankey
• Beeswarm - @amccartney
• Force layout - @amccartney
• Brush component

What is the best way to suggest a chart to the library?

I implemented a Sankey chart like so

<script>
  import { getContext } from "svelte";
  import * as Sankey from "d3-sankey";

  const { data, width, height, padding, custom } = getContext("LayerCake");

  $: sankey = Sankey.sankey()
    .nodeAlign(Sankey.sankeyLeft)
    .nodeWidth(5)
    .nodePadding(10)
    .size([$width, $height - $padding.top])
    .linkSort(null);

  $: sankeyData = sankey($data);

  $: link = Sankey.sankeyLinkHorizontal();

  $: colorLinks = $custom.colorLinks;

  $: fontSize = $width <= 320 ? "8px" : "12px";
</script>

<style>
</style>

<g transform={`translate(0,${$padding.top})`}>
  <g class="link-group">
    {#each sankeyData.links as d}
      <path
        d={link(d)}
        fill={'none'}
        stroke={colorLinks(d)}
        stroke-opacity={0.5}
        stroke-width={d.width} />
    {/each}
  </g>
  <g class="rect-group">
    {#each sankeyData.nodes as d, i}
      <rect
        x={d.x0}
        y={d.y0}
        height={d.y1 - d.y0}
        width={d.x1 - d.x0}
        fill={'#09299490'} />
      <text
        x={d.x0 < $width / 4 ? d.x1 + 6 : d.x0 - 6}
        y={(d.y1 + d.y0) / 2}
        style={`fill: ${'#263238'};
                alignment-baseline: "middle";
                font-size: ${fontSize};
                text-anchor: ${d.x0 < $width / 4 ? 'start' : 'end'};
                pointer-events: "none";
                user-select: "none";`}>
        {d.name}
      </text>
    {/each}
  </g>
</g>

I don't see an arrowhead in Safari 13.0.4 for the Annotated column example.

Thanks for the amazing library!

I was wondering if the example components such as Bar.svelte are released under an open-source license? Sorry if this information appears somewhere and I've missed it.

The main reason I'm wondering is just to double-check that it's okay for us to use the components freely in LayerCake charts on a government website. My second reason is that I was thinking about creating a public NPM package containing my personal collection of LayerCake components, but initially containing lots of your components. I'd call this something like "@jtrim-ons/layercake-components" and clearly label that it's my collection based largely on your components. Would this be a fair use of your code, and does it seem like a vaguely sensible idea to you?

Thanks again for all your work on LayerCake!

So that you can see the shape of the input data and other helper functions

• set up examples to preload
• download examples
• proof guide
• better guide toc highlight
• mobile nav
• set up color scales

Now that layercake-template-ssr exists, the download button should use that as a template.

This is a slightly self-promoting issue, and I will completely understand if you don't think it's a good idea!

I have been working on a layout algorithm for beeswarm plots that aims to keep the points reasonably close to the y=0 line without jiggling the points horizontally. This is what I have come up with: https://github.com/jtrim-ons/accurate-beeswarm-plot . I've had a go at modifying your non-force-directed beeswarm example to use this: https://svelte.dev/repl/115fa52a16d34cd8992c829119266df0?version=3.35.0 .

I wondered if you might consider using this approach rather than the current one in the example on your website. No problem at all if you'd prefer to leave the beeswarm on the website as it is and close the issue!

Hi @mhkeller, this library is the real covfefe! Thanks for publishing it!

Question: is there an example that has axis title text in it, or something that describes this? I haven't seen it... Relatedly, I guess, is the theory here that if I want axis titles I should roll them myself? If that happens to be required, what would the "right" way be?

Need guidance to add functionality to control resize brush from top and bottom

Hi @mhkeller,

I'm really struggling trying to incorporate the QuadTree tooltip into the stacked area or bar charts and would really appreciate guidance around how to approach this issue because I do not want to abandon using Layercake.

If I just copy/paste in the Html block from the Multiline example, I run into this issue:

The Layer component's xGetter is structured for the stack data structure, and I'm unsure how to modify the SharedTooltip's getter to act on the original non-stack structured data.

I.e. I think x={d => d.data[xKey]} is used, d.data is undefined on the original data, and then addAll in QuadTree fails... but I don't know how to support two getters... also don't totally understand why y='x' for the QuadTree getter.

Any pointers/guidance would be really really appreciated and I'd happily contribute back an example if I'm able to get the tooltip wired up with other examples.

• Maps
  • SVG
  • Canvas
• Stacked
  • Area
• Ordinal scales
  • Horizontal bar
  • Column
  • Stacked bar
  • Stacked column
• Annotations with arrows
  • One to one
  • One to many
  • Over multiple cakes maybe in the future
• Misc.
  • Voronoi
  • Quadtree
  • Multiseries line
  • WebGL
  • Cleveland dot plot
  • Histogram
  • Small multiples
  • Calendar heat map
  • Time of day plot