Missing documentation on d3-scale

[risalfajar]

trafficstars

I'm trying to implement the Bar example, but it doesn't work since the library doesn't have scaleBand function which is needed. Turns out I need to install d3-scale first.

I think this should be documented in Getting Started section. Also explaining the relations of this library with d3-scale could help as well, especially for folks that never heard of it before.

[techniq]

Hi @risalfajar 👋

I agree having a better getting started doc is very much needed. We do make a callout to LayerCake's docs, which LayerChart is built up, and does provide a good foundation, but I would like to cover the basics within our docs as well.

Along with LayerCake's docs, here are some additional resources you might find helpful

• Introducing d3-scale - Written by the creator of d3 (and Observable), Mike Bostock
• Introduction to D3.js - A nice overview of D3 in general, although some of D3 isn't applicable to LayerChart (because Svelte handles this aspect), such as selections, data joins, and enter/exit. Their section on D3 Scale functions is very nice.
• How to learn D3.js provides a great overview to all the d3-* packages. Many are these are used by LayerChart "under the hood" or are not applicable with Svelte, but it's nice if you want a better understanding of the D3 "ecosystem". d3-scale, d3-array, and d3-scale-chromatic are a few I reach for quite often (especially d3-array).
• Lastly I have 2 wiki pages I used to capture useful references. They're not overly organized, but definitely some useful resources if you're willing to comb through them :)
  • https://github.com/techniq/wiki/wiki/d3
  • https://github.com/techniq/wiki/wiki/Visualization

Much of the above I'll likely link in a "further reading" page in the docs, but the goal of LayerChart is to simplify creating charts significantly than using D3 directly. It's more akin to Observable Plot (made my Mike Bostock) but with a Svelte/component focus, and more interactivity.

[techniq]

Also note clicking on "Page Source" at the top gives you the full docs including imports

Also note how to handle the imports compared to the docs...

[risalfajar]

Thank you for the resourceful answer, I'll look into that.

Yes, the view page source helps. I just thought it would be better if other dependencies that needed to use this library can be stated in Getting Started section.

Maybe there are more dependencies other than d3-scale?

[techniq]

d3-scale is the main one, since it is used in most/all of the cartesian / polar charts (standard x/y charts), and in some capacity in others depending on the chart type (scale isn't used for x/y, but might be used for color, for example).

d3-array is used a lot for data transformation (you can think of as a data/visualization centric lodash in some capacity).

d3-hierarchy is used for the hierarchy visualizations (pack, treemap, etc)

It comes down to the specific visualization(s) you are creating, but for the most part, those would cover a great deal of the most common ones.