This example demonstrates how D3.js can be used to manipulate HTML DOM elements directly, changing their styles and content in response to user interaction. It shows a static page with breakfast and non-vegetarian food lists, where text colors and font sizes are altered using `d3.select` and `d3.selectAll`. Clicking the "Change Colors!" button triggers a JavaScript function that updates the non-vegetarian list’s background and chicken item’s styles via D3’s chained style methods. The code uses d3.v5, React as the framework, and plain HTML/CSS for structure.