{"version":"1.0","type":"rich","title":"Bar Graphs With Flex","description":"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.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/68eb476dc00d419fbf65535054e8011b?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}