{"version":"1.0","type":"rich","title":"Lesson 7: Rendering data with React & D3","description":"This example renders the MDN CSS named colors dataset as a pie chart, with each slice filled by its corresponding color hex value. Using React hooks, the code loads CSV data with `d3.csv` and stores it in state, while D3’s `pie` generator and `arc` function compute the slice geometry. The chart draws SVG `<path>` elements inside a `<g>` group, showing how React manages the component lifecycle and D3 handles the layout calculations.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/ecb36170abb8458cae1ba9eb9df400de?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}