Is there a discussion forum for Layercake ?

[mhkeller]

Is there a discussion forum for Layercake ?

[techniq]

@sahuguet @mhkeller I don't have anything to share yet, but hope to in the coming months. I was hoping to by now but have just been way too busy. My plan is to release a library built upon LayerCake with of lot of fundamental building blocks. A good bit of it is done except documentation. It is similar in nature to vx / vsix (which I used to contribute) but for Svelte.

[mhkeller]

Thanks @techniq ! Looking forward to it. I'm updating the website to use svelte kit and I think adding a page for "Components" would be a good addition.

[mhkeller]

I just pushed up a "Component gallery" page https://layercake.graphics/components/

I also added jsdoc types to all of the example components, standardized them a bit more and added descriptions for each one. This is brand new so if you see any errors or things that can be improved, let me know.

[techniq]

Done :). I left a note in case someone goes down a similar path. There might still be an issue with swapping data/flatData within LayerCake, but my current approach works around this (I think). I'll know more for certain when I add the more dynamic example in the docs.

Btw, there might be some features in LayerChart worth porting back to LayerCake over time. For example in my Chart component it supports xBaseline / yBaseline props which are useful when want the baseline to be non-zero, or example using 100% (i.e. 1.0) like this:

I need to add an example for this as well :).

[mhkeller]

I haven't set anything up but I'd be happy to answer your questions here

[sahuguet]

Here are a few questions

1. I could not find an example with chart title and axis labels.
   Is it something that does not come (yet) out-of-the-box?

2. Layercake vs Pancake
   Do they compete with each other? Do they complement each other?

3. is there a directory of user-contributed Layercake components and examples?

[mhkeller]

1. I could not find an example with chart title and axis labels.
   Is it something that does not come (yet) out-of-the-box?

I don't think I've made examples with separate text labels. I usually try to sneak them into the values as they appear in the axis, like in this chart. If you wanted to do a style where the label is, say, below the x-axis, I would add padding and then add some absolutely positioned text as an html layer, or adding it to the axis component.

2. Layercake vs Pancake
   Do they compete with each other? Do they complement each other?

Here's a brief write-up: #29 (comment)

3. is there a directory of user-contributed Layercake components and examples?

@techniq has some but I don't think they have posted them yet. If people have a few, I'd be happy to add them to the readme! There are a few variations on the current components that I've wanted to make but still not sure how best to make them easy to navigate. Maybe just links to REPLs from the chart's website page? Open to any ideas!

[mhkeller]

@sahuguet does that answer your questions? I'll close this issue if all is good.

[sahuguet]

Yes. Looking forward to @techniq 's new project.

[techniq]

@mhkeller nice!

I've been working on my LayerChart component library built upon LayerCake, and I'm still refining the API / Component abstractions but I've been dog fooding it on a few projects. I think it's getting close API wise (sans a few renames and other minor adjustments), but the docs still need a lot of work. This is also just a small subset of components / charts I plan to support (many I've already written in React / visx). For example hierarchy-based components (tree, treemap, circle pack, etc). I'm loosely tracking all of these here.

All the individual component docs are mostly just stubbed out TODO placeholders, but some of the chart examples are built out showing all the pieces together (like Tooltips, HighlightBar/Line, etc. A good example page is Bar (which might be renamed to Bars :) ). See Text for a small playground to see how it works. It's used by Axises/Labels/etc.

You can also see some high-level docs and ideas here that will slowly make it to the applicable pages.

I was roughly shooting to release a v1 by the end of the year, but we'll see. I just switched the repo to public so you can look around and let me know what you think.

[techniq]

Oh, and I've been working on svelte-ux, which has components, stores (fetch, graphql, query params, local storage, ...), actions, etc.

The docs are also a WIP as I have about 80-90% of the components documented (mostly just examples, needs descriptions, prop listings, interactive REPLs, etc), but there is a ton to document for the stores and actions.

Anyways, feel free to poke around there as well if you want :). Things are still in flux as well, but have been used for some production apps.

[mhkeller]

Very neat! I like that you have tweens built in the circle element. I feel like that's still an area to have more layer cake examples on – although I don't think there's a good svelte enter-update-exit pattern à la D3 so I'm not sure what a general pattern would be. Let me know when you've finished these!

[techniq]

@mhkeller Those tweens are available for Circle, Rect, and Line, and will likely be added for Path (using a custom interpolator, and likely d3-interpolate-path instead of d3's).

Rect is great as it is used in HighlightBar (likely to be renamed to HighlightRect) and gives you smooth tweens for "free". It's also what enabled the smooth transitions setup on this REPL. I still need to add these animated examples to the docs, along with the tweened options to coordinate with delays, etc.

Btw I just implemented a solution for Bar group/stack so it supports all the combinations (grouped, stacked, grouped and stacked, separated stack, and percent stacked), which was one of the regressions of my 3c+ experiments mentioned here.

HighlightLine uses both Line and the Circle (for data point(s)) which is run to watch with area stacks :).

Svelte makes all this so much cleaner than it used to be :).

I'll keep you posted. I'm still painting with pretty broad strokes and need to come up with a good docs pattern. I'm using mdsvex and preprocess the code examples, but need to do more to build ToC, extract front matter, extra prop tables, etc, and I'd love to have interactive REPLs instead of static pages, especially since the library can not be used on Svelte's REPL at the moment (I think due to the Vite $lib/$app aliases, but not for sure).

[mhkeller]

Very neat! Looks like you've been making a lot of progress. Should I close this issue since it sounds like you've moved beyond that one?

[mhkeller]

Ah neat. Yeah that could be a good addition to the axis components if you want to take a crack at it.

[techniq]

@mhkeller Added tweened support to Path last night with some docs. The example is rather fun to play with by stepping the various options / combinations at the top.

I need to add animated axis/grid/scales to being fully animated (on the roadmap, but probably a bit out). We have this feature in visx with a few options like "from center", "from outside", "from min", "from max".

Currently working on an Arc primitive (basically port my REPL and how it should then play within a Chart context (since it's basically a single dimension).