search

borntofrappe / learning-d3

d3.js is vast. Here's a repository filled with projects to master the library, its many modules and powerful features.
4 stars 0 forks source link

Waffle Layout #26

Closed borntofrappe closed 1 year ago

borntofrappe commented 1 year ago

Create a component (#23) to reproduce a waffle chart layout.

borntofrappe commented 1 year ago

Updated goal

Create a layout function to position data points in a grid and color some of them with a distinct color

borntofrappe commented 1 year ago

Rather satisfied of the current setup for the waffle function.

Currently, the layout function allows to configure several options (width, height, whether the waffle should be flipped, start at the bottom). Rather proudly, the function also allows to specify an accessor function, just in case the input data is more complex than an array of values.

Two demos to showcase the utility:

Waffles

Waffle

borntofrappe commented 1 year ago

The folder includes an additional script, layout.js, to showcase a basic instance of the layout function

The function also includes the possibility to sort. Once more the implementation is inspired by what you can configure through d3.pie().