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