This example shows how CSS Flexbox can be used to lay out repeated bar-chart categories, with each category containing five colored bars whose widths and hues are generated programmatically in a loop. The code builds DOM elements directly via vanilla JavaScript, using `document.createElement`, `setAttribute`, and `style.width` and `style.background` with HSL colors, while the body and category containers use `display: flex` and `flex-direction: column` for vertical stacking. No external libraries are employed; the data is synthetic, with bar widths increasing by 50 pixels and hues shifting from yellow to red across each group.