{"version":"1.0","type":"rich","title":"fCC Treemap","description":"This visualization displays a treemap of the top 100 highest-grossing movies, grouped by genre. Each rectangle’s size represents a movie’s box office value, and color encodes its category, with an interactive tooltip revealing the movie name and value on hover. Built with React and D3.js, it uses `d3.hierarchy` and `d3.treemap` for layout, and dynamically renders SVG rectangles and text labels. The color legend, defined in static SVG, maps seven genres to distinct fills, while data loads from a freeCodeCamp-hosted JSON dataset. The chart fills the entire browser window, with a tooltip that tracks the cursor.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/b8ba1021625649b6a35a3201a1120a4c?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}